FlowLayout#

FlowLayout is a flow-based layout component that arranges its children horizontally and automatically wraps items to the next line when there is insufficient space. It is ideal for displaying a group of elements with dynamic widths such as tags, buttons, or icon lists.

Import#

1import { FlowLayout } from "scripting"

Props#

spacing?: number#

The spacing between each item (both horizontal and vertical).

• Type: number
• Default: 8

Defines the amount of space inserted between child items. If not specified, the default spacing value is used.

children?: VirtualNode | (VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[]#

The child elements to be displayed inside the layout.

• Supports a single node or multiple nodes
• undefined and null children will be ignored
• Nested arrays are supported (useful when rendering with .map())

Examples#

Basic Usage#

1import { FlowLayout, Text } from "scripting"
2
3export default function Example() {
4  return (
5    <FlowLayout spacing={12}>
6      <Text>Tag One</Text>
7      <Text>Tag Two</Text>
8      <Text>Tag Three</Text>
9      <Text>Tag Four</Text>
10    </FlowLayout>
11  )
12}

Rendering from an Array#

1const tags = ["Apple", "Orange", "Banana", "Pear", "Grape"]
2
3export default function TagsExample() {
4  return (
5    <FlowLayout spacing={6}>
6      {tags.map(tag => <Text>{tag}</Text>)}
7    </FlowLayout>
8  )
9}

Using Default Spacing#

1<FlowLayout>
2  <Text>A</Text>
3  <Text>B</Text>
4  <Text>C</Text>
5</FlowLayout>

Recommended Use Cases#

FlowLayout is suitable for layouts where elements vary in width and should wrap naturally, such as:

• Tag clouds and keyword lists
• Dynamic button groups
• Icon or avatar lists
• Adaptive content containers