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.