Overview
Layout is a set of organizational components that follow the patterns of Flexbox.
Layout.Group
Used to align elements in a row.
Layout.Stack
Used to align elements in a column.
Layout.Group and Layout.Stack Props
Space
Use the space property to set the spacing for a Group or Stack. The default is set to 8.
AlignLayout
Use the alignLayout property to indicate the horizontal alignment of the items in a Group or Stack. For a Group, the possible options are left, center, and right. For a Stack, the possible options are left, center, and right. The default is set to left in both cases.
AlignItems
Use the alignItems property to indicate the alignment of the items in a Group or Stack. For a Group the vertical alignment is adjusted, whereas for a Stack the horizontal alignment is adjusted. For a Group, the possible options are top, center, and bottom. For a Stack, the possible options are left, center, and right. The default is set to center in both cases.
Grow
Use the grow property to indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to false.
Shrink
Use the shrink property to indicate whether the grouped components should be shrunk to fill the space horizontally in a Group, to prevent an overflow. The default is set to false.
Layout.Insert
Used to place elements before and after a central component. Padding is $semantic.spacing.sm and direction is row by default.
Layout.Space
Adds a space of height space. Default is 16px.
Layout.Group Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alignItems | "bottom" | "top" | "center" | undefined | 'center' | Adjust the vertical alignment of items in the group | |
alignLayout | "left" | "right" | "center" | "between" | "around" | undefined | 'left' | Set the position of the group | |
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The element the group wraps | ||
grow | boolean | undefined | false | Flag to stretch grouped components to fit evenly or not | |
shrink | boolean | undefined | Flag to indicate whether the grouped components should be shrunk to fill the space horizontally in a Group, to prevent an overflow | ||
space | Space | undefined | 8 | Distance between elements in the Group component | |
width | Size | undefined | Set the width of the group | ||
wrap | boolean | undefined | Flag indicating if the elements should wrap to a new line |
Layout.Stack Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alignItems | "left" | "right" | "center" | undefined | 'center' | Adjust the horizontal alignment of items in the stack | |
alignLayout | "left" | "right" | "center" | undefined | 'left' | Set the position of the stack | |
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The element the stack wraps | ||
grow | boolean | undefined | false | Flag to stretch grouped components to fit evenly or not | |
space | Space | undefined | 8 | Distance between elements in the Stack component | |
width | Size | undefined | Set the width of the stack | ||
wrap | boolean | undefined | Flag to wrap the stack elements |
Layout.Insert Props
| Name | Type | Default | Description |
|---|---|---|---|
after | ReactNode | (() => ReactNode) | Insert element after children | |
before | ReactNode | (() => ReactNode) | Insert element before children | |
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The element the inserted elements are between | |
direction | "row" | "column" | undefined | 'row' | The direction of of all the the elements |
padding | Space | undefined | '$semantic.spacing.sm' | The space between the inserted element and children |
Layout.Space Props
| Name | Type | Default | Description |
|---|---|---|---|
space | Space | undefined | 16 | The amount of space to place between components |
Layout.Group Classes
| Class Name | Description |
|---|---|
| abyss-layout-group-root | Group root element |
Layout.Stack Classes
| Class Name | Description |
|---|---|
| abyss-layout-stack-root | Stack root element |
Layout.Insert Classes
| Class Name | Description |
|---|---|
| abyss-layout-insert-after | Insert after element |
| abyss-layout-insert-before | Insert before element |
| abyss-layout-insert-root | Insert root element |
Layout.Space Classes
| Class Name | Description |
|---|---|
| abyss-layout-space-root | Space root element |