Split
Use a Split layout to position items horizontally in a container, with one item filling the remaining horizontal space as the viewport is resized.
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| hasGutter | boolean | No | Adds space between children. | |
| children | React.ReactNode | No | null | content rendered inside the Split layout |
| className | string | No | '' | additional classes added to the Split layout |
| component | React.ReactNode | No | 'div' | Sets the base component to render. defaults to div |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| isFilled | boolean | No | false | Flag indicating if this Split Layout item should fill the available horizontal space. |
| children | React.ReactNode | No | null | content rendered inside the Split Layout Item |
| className | string | No | '' | additional classes added to the Split Layout Item |
CSS Variables
| .pf-l-split | --pf-l-split--m-gutter--MarginRight | 1rem | ||
