Split layout
Split layout
SplitLayout
displays items in two separate areas at opposite ends of a container. You can define the container in a vertical or horizontal orientation.
Split layouts display items horizontally at either end of the container by default with its items aligned centrally in the layout.
The items drive the height and width of the overall layout.
The split layout direction
prop defines the main axis that items are displayed along. Set direction
to column
to display items in a vertical direction along a single line.
This example shows two groups of buttons inside a split layout, such as within an app header. Here, the split layout is in its default configuration.
The split layout component supports responsive props, so you can define different behaviors based on viewport size. You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that affects all screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:
Control the position of the split layout and its items using the align
prop.
If there is additional space available around the layout (i.e., above or below the row, or beside the column) use the align
prop to position items within that space.
Use the flex item component's 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 flex item component's grow
prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:
- By default,
grow
is set to 0 and items will display 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 items that have
grow
set to 1.
In contrast to the grow
prop, the shrink
prop shrinks specific items as small as possible within the layout. By default, shrink
is set to 1. If an item is set to 2, that item would attempt to take half as much space.
Split layout displays items with a gap between items that is a multiple of the Salt base unit controlled by the gap
property and is by default set to 3.
The spacing properties padding
and margin
are set to 0 by default and can be used to control the layout's inner and outer spacing (also as multiples of the Salt base unit).
Split layouts display items horizontally at either end of the container by default with its items aligned centrally in the layout.
The items drive the height and width of the overall layout.
The split layout direction
prop defines the main axis that items are displayed along. Set direction
to column
to display items in a vertical direction along a single line.
This example shows two groups of buttons inside a split layout, such as within an app header. Here, the split layout is in its default configuration.
The split layout component supports responsive props, so you can define different behaviors based on viewport size. You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that affects all screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:
Control the position of the split layout and its items using the align
prop.
If there is additional space available around the layout (i.e., above or below the row, or beside the column) use the align
prop to position items within that space.
Use the flex item component's 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 flex item component's grow
prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:
- By default,
grow
is set to 0 and items will display 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 items that have
grow
set to 1.
In contrast to the grow
prop, the shrink
prop shrinks specific items as small as possible within the layout. By default, shrink
is set to 1. If an item is set to 2, that item would attempt to take half as much space.
Split layout displays items with a gap between items that is a multiple of the Salt base unit controlled by the gap
property and is by default set to 3.
The spacing properties padding
and margin
are set to 0 by default and can be used to control the layout's inner and outer spacing (also as multiples of the Salt base unit).
Split layouts display items horizontally at either end of the container by default with its items aligned centrally in the layout.
The items drive the height and width of the overall layout.
The split layout direction
prop defines the main axis that items are displayed along. Set direction
to column
to display items in a vertical direction along a single line.
This example shows two groups of buttons inside a split layout, such as within an app header. Here, the split layout is in its default configuration.
The split layout component supports responsive props, so you can define different behaviors based on viewport size. You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that affects all screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:
Control the position of the split layout and its items using the align
prop.
If there is additional space available around the layout (i.e., above or below the row, or beside the column) use the align
prop to position items within that space.
Use the flex item component's 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 flex item component's grow
prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:
- By default,
grow
is set to 0 and items will display 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 items that have
grow
set to 1.
In contrast to the grow
prop, the shrink
prop shrinks specific items as small as possible within the layout. By default, shrink
is set to 1. If an item is set to 2, that item would attempt to take half as much space.
Split layout displays items with a gap between items that is a multiple of the Salt base unit controlled by the gap
property and is by default set to 3.
The spacing properties padding
and margin
are set to 0 by default and can be used to control the layout's inner and outer spacing (also as multiples of the Salt base unit).