Layout
yarn add @clayui/layout
A set of utilities for layouting out a page or content on a page
Stable3.40.0View in LexiconCHANGELOG
Container
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
fluid | boolean | false | Adds `.container-fluid` class to create a fluid container that doesn't expand beyond a set width | |
fluidSize | 'sm' | 'md' | 'lg' | 'xl' | false | Adds `.container-fluid-${size}` class to set max width on container. | |
formSize | 'sm' | 'md' | 'lg' | 'xl' | false | Adds the `.container-form-${formSize}` class to properly space between application controls and the form. This class only modifies the padding on the container. | |
view | boolean | false | Adds the `.container-view` class to properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies the padding on the container. |
ContainerFluid
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
size | React.ComponentProps<typeof Container>['fluidSize'] | false | false | 'xl' |
Col
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
lg | boolean | number | 'auto' | false | The number of columns to span on large devices | |
md | boolean | number | 'auto' | false | The number of columns to span on medium devices | |
size | boolean | number | 'auto' | false | The number of columns to span on all devices | |
sm | boolean | number | 'auto' | false | The number of columns to span on small devices | |
xs | boolean | number | 'auto' | false | The number of columns to span on extra-small devices | |
xl | boolean | number | 'auto' | false | The number of columns to span on extra-large devices |
ContentCol
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
expand | boolean | false | ||
float | literal | false | Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup. | |
gutters | boolean | false | Applies the `autofit-col-gutters` class | |
shrink | boolean | false | Applies the `autofit-col-shrink` class. |
ContentRow
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
float | | boolean | 'sm-down' | 'md-down' | 'end' | 'end-sm-down' | 'end-md-down' | false | Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup. | |
noGutters | 'sm' | 'x' | 'y' | true | false | ||
padded | boolean | false | ||
verticalAlign | 'center' | 'end' | false | Adds class for aligning items within the row. |
ContentSection
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
Row
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
gutters | boolean | false | true | This removes the negative margins from .row and the horizontal padding from all immediate children columns |
justify | 'start' | 'center' | 'end' | 'around' | 'between' | false | Horizontal positioning of row contents |
Sheet
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
size | literal | false | Setting this to sets a max-width on the sheet |
SheetHeader
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
SheetFooter
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |
SheetSection
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
containerElement | | string | React.JSXElementConstructor<{ className: string; [key: string]: any; }> | false | 'div' | Element or component to render for container |