Well
A Well is a content container that displays non-editable content separate from other content on the screen. Often this is used to display preformatted text, such as code/markup examples on a documentation page.
| install | yarn add @react-spectrum/well |
|---|---|
| version | 3.0.0-rc.1 |
| usage | import {Well} from '@react-spectrum/well' |
Example#
<Well>Better a little which is well done, than a great deal imperfectly.</Well>Content#
Wells can have children. They can be nested.
<Well>Well</Well>
<Well>Well <Well>oh well.</Well></Well>Internationalization#
In order to internationalize a well, a localized string should be passed to the children prop.
Accessibility#
By default, the visual separation of a Well is not conveyed to assistive technologies. As such it should be used where this separation makes no difference in understanding the content.
However, if the Well does convey semantic meaning then a role must be specified and, if appropriate, labeled using either aria-label or aria-labelledby.
<Well role="region" aria-labelledby="wellLabel">
<Heading id="wellLabel" variant="subtitle1">Shipping Address</Heading>
<p>601 Townsend Street<br /> San Francisco, CA 94103</p>
</Well>Shipping Address
601 Townsend Street
San Francisco, CA 94103
Props#
| Name | Type | Default | Description |
children | ReactNode | — | |
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. |