Stack layout
Stack layout
Resources
StackLayout displays items in horizontal or vertical order on a single line. It builds on the FlexLayout component and is best for small-scale layouts where displaying components in a single row or column is necessary. It may benefit from supported visual separators, such as a row of charts or a scrolling side panel comprising multiple sections. For additional control of the size and position of content, use FlexItem for each content item inside StackLayout.
By default, StackLayout displays items in a single column.
Its items align to the start of the layout, with a gap between items of 3, which is a multiple of the Salt base unit. The items contained within the layout determine its height and width.
The direction prop defines the main axis to display items along. Set direction to row to display items in a horizontal direction along a single line.
The component allows for separators between items. By default, the separators have a cnetered alignment when separators={true} but you can customize them to sit on the left or right of items.
The separator will span across the layout component if the direction is column or span the height if the direction is row. The Stack Layout gap applies to both sides of the separator.
StackLayout supports responsive props, so you can define different behaviors based on viewport size (e.g., switching direction of a card stack with separators across screen size). You can use the default Salt breakpoints or pass in your own using SaltProvider.
A responsive prop takes either multiple values (one value per breakpoint) or a single value that would take effect across all different screen sizes. For example, this is a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:
Control the position of StackLayout and its items using the align prop.
If there's additional space available around the layout (i.e., above or below the row or beside the column), use the align prop to define the position of items within that space.
Use the FlexItem align prop to set an alignment for a specific item in the layout. Use the align prop to change the item’s position along the cross axis of the layout (i.e., perpendicular to the direction–row or column).
The FlexItem grow prop enables specific items in the layout to grow and fill any remaining space in the layout:
- By default,
growis set to0, and items will be in their "normal" size. - If you set an item to
1, it will fill the available space. - If you set an item to
2, it will fill twice as much space as other items wheregrowis1.
In contrast to the grow prop, the shrink prop makes a specific item as small as possible within the layout. By default, shrink is 1. If you set an item to 2, that item would attempt to take half as much space.