Header
Header is used to position additional heading or title information.
| install | yarn add @react-spectrum/view |
|---|---|
| version | 3.0.0-alpha.1 |
| usage | import {Header} from '@react-spectrum/view' |
Examples#
<Header>Terms and Conditions</Header>Content#
The Header component is used as a child to other components. Based on the component it is used within, it gets Spectrum styling and may have a preassigned slot for positioning. By virtue of its name, the Header component provides semantic meaning in the context they are placed. An example of this is explained in Dialog. It is important to note that the Header element accepts any renderable node, not just strings.
A Header is used to specify a layout region providing supplemental title information above the content section of a component. Example usage can be found in Dialog.
See the MDN docs for more information.
Props#
| Name | Type | Default | Description |
children | ReactNode | — | Header content |
UNSAFE_className | string | — | The className to apply to the element. Do not use unless completely necessary as it may break component styling. |
UNSAFE_style | CSSProperties | — | The inline styles to apply to the element. Do not use unless completely necessary as it may break component styling. |
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 | — |
Spacing
| Name | Type | Default | Description |
margin | DimensionValue | — | |
marginTop | DimensionValue | — | |
marginLeft | DimensionValue | — | |
marginRight | DimensionValue | — | |
marginBottom | DimensionValue | — | |
marginStart | DimensionValue | — | |
marginEnd | DimensionValue | — | |
marginX | DimensionValue | — | |
marginY | DimensionValue | — |
Sizing
| Name | Type | Default | Description |
width | DimensionValue | — | |
minWidth | DimensionValue | — | |
maxWidth | DimensionValue | — | |
height | DimensionValue | — | |
minHeight | DimensionValue | — | |
maxHeight | DimensionValue | — |
Positioning
| Name | Type | Default | Description |
position | 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' | — | |
top | DimensionValue | — | |
bottom | DimensionValue | — | |
left | DimensionValue | — | |
right | DimensionValue | — | |
start | DimensionValue | — | |
end | DimensionValue | — | |
zIndex | number | — | |
isHidden | boolean | — |
Accessibility
| Name | Type | Default | Description |
id | string | — | The element's unique identifier. |