Component Component

Components provide a way to reuse parts of your app (also known as composition).

Components are composed from multiple nodes in the same way a Page (opens in a new tab) is composed. To access Components in the Editor look for Component Nodes in the left panel or press 3.

Nodes such as instances (opens in a new tab) and iterators (opens in a new tab) are configured to use components, and will "instantiate" the component at the location specified by the instance. Additional scope can be provided to the component using the scope property, which is available via {{scope}} within the component.

Properties

Min Height

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

The minimum height of the component when instantiated.

Height

Prop	`height`
Type	`string`
Default	`128px`

The height of the component when instantiated.

Max Height

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

The maximum height of the component when instantiated.

Min Width

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

The minimum width of the component when instantiated.

Width

Prop	`width`
Type	`string`
Default	`320px`

The width of the component when instantiated.

Max Width

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

The maximum width of the component when instantiated.

Background Color

Prop	`backgroundColor`
Type	`string`
Default	`undefined`

The background color of the component when instantiated.

Border Radius

Prop	`borderRadius`
Type	`string`
Default	`undefined`

The border radius of the component when instantiated.

Layout Style

Prop	`layoutStyle`
Type	`NodeLayoutStyle ('GRID' \| 'HORIZONTAL_STACK' \| 'VERTICAL_STACK')`
Default	`GRID`

The layout style used by the component to arrange its children. Can be either a grid, horizontal stack, 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.

Distribute Content

Prop	`distributeContent`
Type	`NodeLayoutDistributeStyle ('start' \| 'center' \| 'end' \| 'around' \| 'between' \| 'even')`
Default	`start`

The distribution of the children nodes within the component. 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 component. 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.

Padding

Prop	`padding`
Type	`string`
Default	`0`

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

Overflow

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

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	`hidden`

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	`hidden`

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

Spacing

Prop	`spacing`
Type	`string`
Default	`8px`

The spacing to use between child nodes of the 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.

Properties

Prop	`props`
Type	`array`
Default	`[]`

Variables to be used by the component. Instances of this component can provide these values to change the render

Component Property

Prop	`props[]`
Type	`object`
Default	`undefined`

An input to the component. The component can read this value from $props by its "key"

Prop ID

Prop	`props[].id`
Type	`string`
Default	`undefined`

A unique ID for the component property

Key

Prop	`props[].key`
Type	`string`
Default	`undefined`

The key on $props which is exposes this value

Display Name

Prop	`props[].displayName`
Type	`string`
Default	`undefined`

The label shown with the input on instances

Description

Prop	`props[].description`
Type	`string`
Default	`undefined`

An optional description of the property

Placeholder

Prop	`props[].placeholder`
Type	`string`
Default	`undefined`

The placeholder shown with the input on instances

Type

Prop	`props[].propType`
Type	`PropType ('action' \| 'array' \| 'boolean' \| 'closure' \| 'color' \| 'component_props' \| 'component_reference' \| 'config' \| 'current_profile' \| 'derived' \| 'dynamic' \| 'enum' \| 'events' \| 'expression' \| 'function' \| 'json' \| 'icon' \| 'length' \| 'number' \| 'object' \| 'ordered_array' \| 'profiles' \| 'store' \| 'string' \| 'unknown' \| 'abstract')`
Default	`undefined`

The data type of the property value

Default Value

Prop	`props[].defaultValue`
Type	`unknown`
Default	`undefined`

What value should be used when this property is not provided

Test Value

Prop	`props[].testValue`
Type	`unknown`
Default	`undefined`

The value shown in the component editor if a value or default value are not provided. It does not get copied to instances.

Checkbox Container