Divider
Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
| install | yarn add @react-spectrum/divider |
|---|---|
| version | 3.0.0-rc.1 |
| usage | import {Divider} from '@react-spectrum/divider' |
Example#
Horizontal#
Horizontal Dividers can be used as is because of how CSS Layout works. They may also be used in Flex and Grid containers.
<Divider marginTop="10px" marginBottom="10px" />Content above
Content below
Content below
Vertical#
It is recommended to only use vertical Dividers in Flex or Grid containers. CSS Layout otherwise makes displaying a vertical Divider very difficult.
<Flex>
Content left
<Divider orientation="vertical" marginLeft="10px" marginRight="10px" />
Content right
</Flex>Content leftContent right
Props#
| Name | Type | Default | Description |
size | 'S' | 'M' | 'L' | 'L' | How thick the Divider should be. |
orientation | | 'horizontal' | The axis the Divider should align with. |
UNSAFE_className | string | — | |
UNSAFE_style | CSSProperties | — |
Layout
| Name | Type | Default | Description |
flex | string | number | boolean | — | |
flexGrow | number | — | |
flexShrink | number | — | |
flexBasis | number | string | — | |
alignSelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' | — | |
justifySelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' | — | |
flexOrder | number | — | |
gridArea | string | — | |
gridColumn | string | — | |
gridRow | string | — | |
gridColumnStart | string | — | |
gridColumnEnd | string | — | |
gridRowStart | string | — | |
gridRowEnd | string | — | |
slot | string | — |
Spacing
| Name | Type | Default | Description |
margin | | — | |
marginTop | | — | |
marginLeft | | — | |
marginRight | | — | |
marginBottom | | — | |
marginStart | | — | |
marginEnd | | — | |
marginX | | — | |
marginY | | — |
Sizing
| Name | Type | Default | Description |
width | | — | |
minWidth | | — | |
maxWidth | | — | |
height | | — | |
minHeight | | — | |
maxHeight | | — |
Positioning
| Name | Type | Default | Description |
position | 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' | — | |
top | | — | |
bottom | | — | |
left | | — | |
right | | — | |
start | | — | |
end | | — | |
zIndex | number | — | |
isHidden | boolean | — |
Accessibility
| Name | Type | Default | Description |
role | string | — | |
id | string | — | |
tabIndex | number | — | |
aria-label | string | — | Defines a string value that labels the current element. |
aria-labelledby | string | — | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | — | Identifies the element (or elements) that describes the object. |
aria-controls | string | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
aria-owns | string | — | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
aria-hidden | boolean | 'false' | 'true' | — | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |