Container Node
Containers are visual dividers that contain other canvas nodes, akin to the HTML div
element.
Items within a container are arranged side-by-side using CSS Flexbox. Containers can be nested to create, responsive complex layouts.
Properties
Visible
Prop | containerNode.isVisible |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is visible.
Enabled
Prop | containerNode.isEnabled |
---|---|
Type | boolean |
Default | {{true}} |
Whether or not this node is enabled.
Tooltip
Prop | containerNode.tooltip |
---|---|
Type | string |
Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
Prop | containerNode.top |
---|---|
Type | string |
Default | 1 |
The position of the node from the top side of the grid (grid-row-start
).
Left
Prop | containerNode.left |
---|---|
Type | string |
Default | 1 |
The position of the node from the left side of the grid (grid-column-start
).
Width
Prop | containerNode.width |
---|---|
Type | string |
Default | 384px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4
will become grid-column-end: span 4
). When this node is in a stack layout, the width must be specified using CSS units (e.g. 100px
or 100%
).
Min Width
Prop | containerNode.minWidth |
---|---|
Type | string |
Default | none |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
Prop | containerNode.maxWidth |
---|---|
Type | string |
Default | none |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
Prop | containerNode.height |
---|---|
Type | string |
Default | 196px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4
will become grid-row-end: span 4
). When this node is in a stack layout, the height must be specified using CSS units (e.g. 100px
or 100%
).
Min Height
Prop | containerNode.minHeight |
---|---|
Type | string |
Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
Prop | containerNode.maxHeight |
---|---|
Type | string |
Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
Prop | containerNode.overflow |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.
Overflow X
Prop | containerNode.overflowX |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the horizontal axis for content that is larger than its container.
Overflow Y
Prop | containerNode.overflowY |
---|---|
Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
Default | auto |
The strategy used to handle overflow in the vertical axis for content that is larger than its container.
Custom Styles
Prop | containerNode.styles |
---|---|
Type | string |
Default | element.styles { } |
Custom CSS styles to be applied to the node. Use element.styles
to refer to the current node.
Layout Style
Prop | containerNode.layoutStyle |
---|---|
Type | NodeLayoutStyle ('GRID' | 'HORIZONTAL_STACK' | 'VERTICAL_STACK') |
Default | GRID |
The layout style used by the container to arrange its children. Can be either a horizontal or vertical stack.
Grid Columns
Prop | containerNode.gridColumns |
---|---|
Type | number |
Default | 12 |
The number of columns in the container's grid system.
Grid Rows
Prop | containerNode.gridRows |
---|---|
Type | number |
Default | 0 |
The number of rows in the container's grid system, expanding to fill the container.
Grid Row Height
Prop | containerNode.gridRowHeight |
---|---|
Type | string |
Default | 16 |
The height of each row within the container's grid system, in pixels.
Row Gap
Prop | containerNode.gridRowGap |
---|---|
Type | string |
Default | 4 |
The space between each row within the container's grid system, in pixels.
Column Gap
Prop | containerNode.gridColumnGap |
---|---|
Type | string |
Default | 4 |
The space between each column within the container's grid system, in pixels.
Padding
Prop | containerNode.padding |
---|---|
Type | string |
Default | 16 |
The internal padding of the container to place around its children.
Spacing
Prop | containerNode.spacing |
---|---|
Type | string |
Default | 16 |
The spacing to use between child nodes of the container.
Background Color
Prop | containerNode.backgroundColor |
---|---|
Type | string |
Default | surface.100 |
The background color of the container.
Box Shadow
Prop | containerNode.boxShadow |
---|---|
Type | string |
Default | md |
The box shadow of the container. Supports standard box-shadow
values or tokens defined in the theme.
Border Radius
Prop | containerNode.borderRadius |
---|---|
Type | string |
Default | 0 |
The radius of the rounding of the corners of the container. Set to 0
to have no rounded corners.
Distribute Content
Prop | containerNode.distributeContent |
---|---|
Type | NodeLayoutDistributeStyle ('start' | 'center' | 'end' | 'around' | 'between' | 'even') |
Default | start |
The distribution of the children nodes within the container. Corresponds to the justify-content
CSS Flexbox property.
Align Content
Prop | containerNode.alignContent |
---|---|
Type | NodeLayoutAlignStyle ('start' | 'center' | 'end') |
Default | start |
The alignment of the children nodes within the container. Corresponds to the align-items
CSS Flexbox property.
Wrap Content
Prop | containerNode.wrapContent |
---|---|
Type | NodeLayoutWrapStyle ('wrap' | 'nowrap' | 'wrap-reverse') |
Default | nowrap |
How the children nodes wrap within the container. Corresponds to the flex-wrap
CSS Flexbox property.
Type
Prop | containerNode.containerType |
---|---|
Type | ContainerTypes ('ON_SUBMIT_FORM' | 'NONE') |
Default | NONE |
Select different form behaviors.
Method Options
Prop | containerNode.formMethodOption |
---|---|
Type | HttpMethodTypes ('GET' | 'POST') |
Default | POST |
Select the method you want to submit the form with.
Action
Prop | containerNode.formAction |
---|---|
Type | string |
Default | # |
The URL where the form will be submitted.
Form Data
Prop | containerNode.formData |
---|---|
Type | unknown |
Default | undefined |
Stores the values from form inputs within the node.
Event Handlers
On Submit
Handler | containerNode.onSubmit |
---|
Called when the user hits "Enter". Use this event to trigger downstream actions when the form is submitted.