Component | For Each

note

Introduced in SDK v0.25.3.

Map a list of items to a list of components.

Node.js

page.add(() =>
    ui.forEach(["1", "2", "3"], (num) => ui.text(num))
);

Python

page.add(
    lambda: ui.for_each(
        [0, 1, 2],
        lambda item, idx: ui.text(f"Item: {item} at index {idx}")
    )
)

API reference

Function signature

Node.js

type Component = ReturnType<typeof ui.textInput> | ReturnType<typeof ui.button> | /* more components */ | ReturnType<typeof ui.stack>

ui.forEach<T>(
    items: Array<T>,
    generator: (item: T, index: number) => Component
    options?: Partial<{
        direction: "vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse",
        justify: "start" | "end" | "center" | "between" | "around" | "evenly",
        align: "start" | "end" | "center" | "baseline" | "stretch",
        spacing: string,
        style: Style
    }>
)

Python

# Return type of all ui components
Component = ui.stack | ui.button | ui.text_input | # ...

T = TypeVar("T")

ui.for_each(
    items: Iterable[T],
    generator: Callable[[T], Component] | Callable[[T, int], Component]
)

Parameters

Node.js

items

required Array<T>

The array of items to map to components.

Python

items

required Iterable[T]

The iterable of items to map to components.

---

Node.js

generator

required function(item: T, index: number): Component

A function that takes an item and index, and returns a component.

Python

generator

required Callable[[T], Component] | Callable[[T, int], Component]

A function that takes an item (and optionally an index) and returns a component.

---

Node.js

properties.direction

optional string literal

The direction in which the children should be arranged. Defaults to "vertical".

Options:

• "vertical": Arrange children vertically (top to bottom)
• "horizontal": Arrange children horizontally (left to right)
• "vertical-reverse": Arrange children vertically in reverse order (bottom to top)
• "horizontal-reverse": Arrange children horizontally in reverse order (right to left)

Python

direction

optional Literal

The direction in which the children should be arranged. Defaults to "vertical".

Options:

• "vertical": Arrange children vertically (top to bottom)
• "horizontal": Arrange children horizontally (left to right)
• "vertical-reverse": Arrange children vertically in reverse order (bottom to top)
• "horizontal-reverse": Arrange children horizontally in reverse order (right to left)

---

Node.js

properties.justify

optional string literal

Determine how the children are justified along the main axis of the container. Defaults to "start".

Options:

• "start": Align children to the start of the container
• "end": Align children to the end of the container
• "center": Center children within the container
• "between": Distribute children evenly with equal space between them
• "around": Distribute children evenly with equal space around them
• "evenly": Distribute children evenly with equal space between and around them

Python

justify

optional Literal

Determine how the children are justified along the main axis of the container. Defaults to "start".

Options:

• "start": Align children to the start of the container
• "end": Align children to the end of the container
• "center": Center children within the container
• "between": Distribute children evenly with equal space between them
• "around": Distribute children evenly with equal space around them
• "evenly": Distribute children evenly with equal space between and around them

---

Node.js

properties.align

optional string literal

Determine how the children are aligned along the cross axis of the container. Defaults to "start".

Options:

• "start": Align children to the start of the container
• "end": Align children to the end of the container
• "center": Center children within the container
• "baseline": Align children along their baseline
• "stretch": Stretch children to fill the container

Python

align

optional Literal

Determine how the children are aligned along the cross axis of the container. Defaults to "start".

Options:

• "start": Align children to the start of the container
• "end": Align children to the end of the container
• "center": Center children within the container
• "baseline": Align children along their baseline
• "stretch": Stretch children to fill the container

---

Node.js

properties.spacing

optional string

Set the spacing between child components. Defaults to "16px".

Options include a variety of preset values like "0px", "2px", "4px", ..., "160px", or any custom string ending with "px".

Python

spacing

optional str

Set the spacing between child components. Defaults to "16px".

Options include a variety of preset values like "0px", "2px", "4px", ..., "160px", or any custom string ending with "px".

---

Node.js

properties.style

optional Style

Directly style the underlying div container element using CSS. See the styling guide for more details on available style properties.

For example, you could set a border around the stack to create a card component.

Python

style

optional Style | None

Directly style the underlying div container element using CSS. See the styling guide for more details on available style properties.

For example, you could set a border around the stack to create a card component.

---