Container Component

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 (opens in a new tab). Containers can be nested to create, responsive complex layouts.

Properties

Visible

Prop	`isVisible`
Type	`boolean`
Default	`true`

Whether or not this node is visible.

Enabled

Prop	`isEnabled`
Type	`boolean`
Default	`true`

Whether or not this node is enabled.

Tooltip

Prop	`tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`top`
Type	`number`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`left`
Type	`number`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`width`
Type	`string`
Default	`768px`

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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Width

Prop	`minWidth`
Type	`string`
Default	`undefined`

The minimum width of the node. When this node is in a grid layout, this property is ignored.

Max Width

Prop	`maxWidth`
Type	`string`
Default	`undefined`

The maximum width of the node. When this node is in a grid layout, this property is ignored.

Height

Prop	`height`
Type	`string`
Default	`392px`

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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Height

Prop	`minHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Max Height

Prop	`maxHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Overflow

Prop	`overflow`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`visible`

The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.

Overflow X

Prop	`overflowX`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`visible`

The strategy used to handle overflow in the horizontal axis for content that is larger than its container.

Overflow Y

Prop	`overflowY`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`visible`

The strategy used to handle overflow in the vertical axis for content that is larger than its container.

Custom Styles

Prop	`styles`
Type	`string`
Default	`::component { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Object Fit

Prop	`objectFit`
Type	`ObjectFit ('none' \| 'contain' \| 'cover' \| 'fill' \| 'scale-down')`
Default	`cover`

The strategy used to set how the content of a replaced element should be resized to fit its container.

Layout Style

Prop	`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	`gridColumns`
Type	`number`
Default	`12`

The number of columns in the container's grid system.

Grid Rows

Prop	`gridRows`
Type	`number`
Default	`16`

The number of rows in the container's grid system, expanding to fill the container.

Grid Row Height

Prop	`gridRowHeight`
Type	`string`
Default	`0`

The height of each row within the container's grid system, in pixels.

Row Gap

Prop	`gridRowGap`
Type	`string`
Default	`4px`

The space between each row within the container's grid system, in pixels.

Column Gap

Prop	`gridColumnGap`
Type	`string`
Default	`4px`

The space between each column within the container's grid system, in pixels.

Padding

Prop	`padding`
Type	`string`
Default	`16px`

The internal padding of the container to place around its children.

Spacing

Prop	`spacing`
Type	`string`
Default	`16px`

The spacing to use between child nodes of the container.

Background Color

Prop	`backgroundColor`
Type	`string`
Default	`background.base`

The background color of the container.

Box Shadow

Prop	`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	`borderRadius`
Type	`string`
Default	`4px`

The radius of the rounding of the corners of the container. Set to 0 to have no rounded corners.

Distribute Content

Prop	`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	`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	`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.

Event Handlers

On Click

Handler	`containerNode.onClick`

Called when the user clicks the node. Use this event to trigger downstream actions when this node is clicked.

On Double Click

Handler	`containerNode.onDoubleClick`

Called when the user double clicks the node. Use this event to trigger downstream actions when this node is double clicked.

On Hover

Handler	`containerNode.onHover`

Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.

On Leave

Handler	`containerNode.onLeave`

Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.

On Focus

Handler	`containerNode.onFocus`

Called when the user focuses the node. Use this event to trigger downstream actions when this node is focused.

On Blur

Handler	`containerNode.onBlur`

Called when the user blurs the node. Use this event to trigger downstream actions when this node is blurred.

Component Data Table