Split layout

Also known as

CSS Flexbox, Responsive Layout

Similar to

Contains

Flex layout

Resources

View source code

Support

SplitLayout displays items in two separate areas at opposite ends of a container. You can define the container in a vertical or horizontal orientation.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the component

When to use

If you need two defined areas at the opposite horizontal ends of a container, for example, if you need two button bar components in a header.

When not to use

If your layout requires more than two regions. Instead, use FlowLayout.
If you want more complex customization in your layout, consider FlexLayout.

Import

To import SplitLayout from the core Salt package, use:

Props

Name	Type	Description	Default

Using the component

When to use

If you need two defined areas at the opposite horizontal ends of a container, for example, if you need two button bar components in a header.

When not to use

If your layout requires more than two regions. Instead, use FlowLayout.
If you want more complex customization in your layout, consider FlexLayout.

Import

To import SplitLayout from the core Salt package, use:

Props

Name	Type	Description	Default

Using the component

When to use

If you need two defined areas at the opposite horizontal ends of a container, for example, if you need two button bar components in a header.

When not to use

If your layout requires more than two regions. Instead, use FlowLayout.
If you want more complex customization in your layout, consider FlexLayout.

Import

To import SplitLayout from the core Salt package, use:

Props

Name	Type	Description	Default

Spinner

Stack layout