Flow layout
Flow layout
Resources
FlowLayout displays items in a horizontal order and wraps them onto a subsequent row if they don’t fit within the defined width. It builds on top of the FlexLayout component and is best for small-scale layouts where you need to display components in a responsive row, such as a row of metrics or a filter bar where fields can wrap over multiple lines. For additional control of the size and position of content, use FlexItem for each content item inside a flow layout.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- To build responsive layouts that wrap across multiple rows when there isn't enough space in the viewport.
- For small-scale layouts within the application, such as a card in a dashboard displaying metrics or a header bar containing filter controls.
- A flow layout will always wrap. If you want to create a layout in a row that doesn’t wrap, use
StackLayout. - If you want the layout to have more complex customization. In this case, we recommend
FlexLayout.
To import FlowLayout from the core Salt package, use:
| Name | Type | Description | Default |
|---|
- To build responsive layouts that wrap across multiple rows when there isn't enough space in the viewport.
- For small-scale layouts within the application, such as a card in a dashboard displaying metrics or a header bar containing filter controls.
- A flow layout will always wrap. If you want to create a layout in a row that doesn’t wrap, use
StackLayout. - If you want the layout to have more complex customization. In this case, we recommend
FlexLayout.
To import FlowLayout from the core Salt package, use:
| Name | Type | Description | Default |
|---|
- To build responsive layouts that wrap across multiple rows when there isn't enough space in the viewport.
- For small-scale layouts within the application, such as a card in a dashboard displaying metrics or a header bar containing filter controls.
- A flow layout will always wrap. If you want to create a layout in a row that doesn’t wrap, use
StackLayout. - If you want the layout to have more complex customization. In this case, we recommend
FlexLayout.
To import FlowLayout from the core Salt package, use:
| Name | Type | Description | Default |
|---|