Iterator Node
Iterators repeat a template for every element in the source data. This is most useful for displaying lists or grids of items.
Each element within the source data is provided as {{scope.element}}. You can access the current index (0-indexed) as {{scope.i}}.
Properties
Visible
| Prop | iteratorNode.isVisible |
|---|---|
| Type | boolean |
| Default | {{true}} |
Whether or not this node is visible.
Enabled
| Prop | iteratorNode.isEnabled |
|---|---|
| Type | boolean |
| Default | {{true}} |
Whether or not this node is enabled.
Tooltip
| Prop | iteratorNode.tooltip |
|---|---|
| Type | string |
| Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
| Prop | iteratorNode.top |
|---|---|
| Type | string |
| Default | 1 |
The position of the node from the top side of the grid (grid-row-start).
Left
| Prop | iteratorNode.left |
|---|---|
| Type | string |
| Default | 1 |
The position of the node from the left side of the grid (grid-column-start).
Width
| Prop | iteratorNode.width |
|---|---|
| Type | string |
| Default | 320px |
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 | iteratorNode.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 | iteratorNode.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 | iteratorNode.height |
|---|---|
| Type | string |
| Default | 128px |
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 | iteratorNode.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 | iteratorNode.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 | iteratorNode.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 | iteratorNode.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 | iteratorNode.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 | iteratorNode.styles |
|---|---|
| Type | string |
| Default | element.styles { } |
Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.
Data
| Prop | iteratorNode.data |
|---|---|
| Type | Array<UnknownRecord> |
| Default | {{[]}} |
The source data array. For each item in this array, the template will be instantiated.
Template
| Prop | iteratorNode.template |
|---|---|
| Type | (string | null) |
| Default | undefined |
The template to render for each item in the data array.
Layout Style
| Prop | iteratorNode.layoutStyle |
|---|---|
| Type | NodeLayoutStyle ('GRID' | 'HORIZONTAL_STACK' | 'VERTICAL_STACK') |
| Default | VERTICAL_STACK |
The layout style of the individual items in the iterator (horizontal or vertical stack).
Padding
| Prop | iteratorNode.padding |
|---|---|
| Type | string |
| Default | 16 |
The internal padding of the iterator to place around its children.
Spacing
| Prop | iteratorNode.spacing |
|---|---|
| Type | string |
| Default | 16 |
The spacing to use between child nodes of the iterator.
Background Color
| Prop | iteratorNode.backgroundColor |
|---|---|
| Type | string |
| Default | surface.100 |
Background color
Distribute Content
| Prop | iteratorNode.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 | iteratorNode.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 | iteratorNode.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.