Split layout

Split Layout is a simple mechanism which arranges UI elements at opposite ends of a container. It can be oriented vertical or horizontal orientation, and is typically used to provide visual hierarchy for controls, such as buttons or toolbars.

Also known as: CSS Flexbox, Responsive Layout

View source code

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

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

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: