Accordion
A group of disclosures that can be expanded and collapsed.
install | yarn add @react-spectrum/accordion |
---|---|
version | 3.0.0-alpha.34 |
usage | import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion' |
Under construction
Example#
<Accordion defaultExpandedKeys={['personal']}>
<Disclosure id="personal">
<DisclosureHeader>Personal Information</DisclosureHeader>
<DisclosurePanel>
<p>Personal information form here.</p>
</DisclosurePanel>
</Disclosure>
<Disclosure id="billing">
<DisclosureHeader>Billing Address</DisclosureHeader>
<DisclosurePanel>
<p>Billing address form here.</p>
</DisclosurePanel>
</Disclosure>
</Accordion>
<Accordion defaultExpandedKeys={['personal']}>
<Disclosure id="personal">
<DisclosureHeader>
Personal Information
</DisclosureHeader>
<DisclosurePanel>
<p>Personal information form here.</p>
</DisclosurePanel>
</Disclosure>
<Disclosure id="billing">
<DisclosureHeader>Billing Address</DisclosureHeader>
<DisclosurePanel>
<p>Billing address form here.</p>
</DisclosurePanel>
</Disclosure>
</Accordion>
<Accordion
defaultExpandedKeys={[
'personal'
]}
>
<Disclosure id="personal">
<DisclosureHeader>
Personal
Information
</DisclosureHeader>
<DisclosurePanel>
<p>
Personal
information
form here.
</p>
</DisclosurePanel>
</Disclosure>
<Disclosure id="billing">
<DisclosureHeader>
Billing Address
</DisclosureHeader>
<DisclosurePanel>
<p>
Billing address
form here.
</p>
</DisclosurePanel>
</Disclosure>
</Accordion>
Props#
Name | Type | Description |
children | React.ReactNode | The disclosures within the accordion group. |
allowsMultipleExpanded | boolean | Whether multiple items can be expanded at the same time. |
isDisabled | boolean | Whether all items are disabled. |
expandedKeys | Iterable<Key> | The currently expanded keys in the collection (controlled). |
defaultExpandedKeys | Iterable<Key> | The initial expanded keys in the collection (uncontrolled). |
Events
Name | Type | Description |
onExpandedChange | (
(keys: Set<Key>
)) => any | Handler that is called when items are expanded or collapsed. |
Layout
Name | Type | Description |
flex | Responsive<string
| number
| boolean> | When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN. |
flexGrow | Responsive<number> | When used in a flex layout, specifies how the element will grow to fit the space available. See MDN. |
flexShrink | Responsive<number> | When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN. |
flexBasis | Responsive<number | string> | When used in a flex layout, specifies the initial main size of the element. See MDN. |
alignSelf | Responsive<'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch'> | Overrides the alignItems property of a flex or grid container. See MDN. |
justifySelf | Responsive<'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch'> | Specifies how the element is justified inside a flex or grid container. See MDN. |
order | Responsive<number> | The layout order for the element within a flex or grid container. See MDN. |
gridArea | Responsive<string> | When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN. |
gridColumn | Responsive<string> | When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN. |
gridRow | Responsive<string> | When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN. |
gridColumnStart | Responsive<string> | When used in a grid layout, specifies the starting column to span within the grid. See MDN. |
gridColumnEnd | Responsive<string> | When used in a grid layout, specifies the ending column to span within the grid. See MDN. |
gridRowStart | Responsive<string> | When used in a grid layout, specifies the starting row to span within the grid. See MDN. |
gridRowEnd | Responsive<string> | When used in a grid layout, specifies the ending row to span within the grid. See MDN. |
Spacing
Name | Type | Description |
margin | Responsive<DimensionValue> | The margin for all four sides of the element. See MDN. |
marginTop | Responsive<DimensionValue> | The margin for the top side of the element. See MDN. |
marginBottom | Responsive<DimensionValue> | The margin for the bottom side of the element. See MDN. |
marginStart | Responsive<DimensionValue> | The margin for the logical start side of the element, depending on layout direction. See MDN. |
marginEnd | Responsive<DimensionValue> | The margin for the logical end side of an element, depending on layout direction. See MDN. |
marginX | Responsive<DimensionValue> | The margin for both the left and right sides of the element. See MDN. |
marginY | Responsive<DimensionValue> | The margin for both the top and bottom sides of the element. See MDN. |
Sizing
Name | Type | Description |
width | Responsive<DimensionValue> | The width of the element. See MDN. |
minWidth | Responsive<DimensionValue> | The minimum width of the element. See MDN. |
maxWidth | Responsive<DimensionValue> | The maximum width of the element. See MDN. |
height | Responsive<DimensionValue> | The height of the element. See MDN. |
minHeight | Responsive<DimensionValue> | The minimum height of the element. See MDN. |
maxHeight | Responsive<DimensionValue> | The maximum height of the element. See MDN. |
Positioning
Name | Type | Description |
position | Responsive<'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky'> | Specifies how the element is positioned. See MDN. |
top | Responsive<DimensionValue> | The top position for the element. See MDN. |
bottom | Responsive<DimensionValue> | The bottom position for the element. See MDN. |
left | Responsive<DimensionValue> | The left position for the element. See MDN. Consider using start instead for RTL support. |
right | Responsive<DimensionValue> | The right position for the element. See MDN. Consider using start instead for RTL support. |
start | Responsive<DimensionValue> | The logical start position for the element, depending on layout direction. See MDN. |
end | Responsive<DimensionValue> | The logical end position for the element, depending on layout direction. See MDN. |
zIndex | Responsive<number> | The stacking order for the element. See MDN. |
isHidden | Responsive<boolean> | Hides the element. |
Advanced
Name | Type | Description |
UNSAFE_className | string | Sets the CSS className for the element. Only use as a last resort. Use style props instead. |
UNSAFE_style | CSSProperties | Sets inline style for the element. Only use as a last resort. Use style props instead. |