Collapsible
What is this?
You can build collapsible components with the useCollapse hook. It enables the creation of custom collapsible components by dealing with the hide/show logic and the animation.
Collapsible card
Title
Short text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Collapsible card with actions
Title
Short text
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Accordion
item1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
item2
ublishing software like Aldus PageMaker including versions of Lorem Ipsum.
item3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
item2
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Usage
import {
useCollapse,
Card,
CardHeader,
CardTitle,
CardContent,
Box,
} from '@vtex/admin-ui'
function Example = () => {
const { getToggleProps, getCollapseProps, visible } = useCollapse()
return (
<Card>
<CardHeader
{...getToggleProps()}
className={csx({
cursor: 'pointer',
':hover': {
bg: '$action.neutral.tertiaryHover',
},
})}
>
<CardInfo>
<CardTitle>Title</CardTitle>
</CardInfo>
</CardHeader>
<div className={csx({ width: '100%' })} {...getCollapseProps()}>
<CardContent
className={csx({
paddingTop: '$space-6',
})}
>
Text.
</CardContent>
</div>
</Card>
)
}
useCollapsible props
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| onCollapseStart | () => void | Function called when collapse animation starts. | 🚫 | - |
| onCollapseEnd | () => void | Function called when collapse animation ends. | 🚫 | - |
| onExpandStart | () => void | Function called when expand animation starts. | 🚫 | - |
| onExpandEnd | () => void | Function called when expand animation ends. | 🚫 | - |
| visible | boolean | Whether the content is visible at first or not. | 🚫 | - |
useCollapsible returned state
| Name | Type | Description |
|---|---|---|
| getToggleProps | (config?: {onClick?: () => void, disabled?: boolean}) => ToggleProps | Function that provides props for the toggle trigger. |
| getCollapseProps | () => CollapsingProps | Function that provides props for the content that will be collapsed and expanded. |
| visible | boolean | Whether the content is visible currently or not. |
| toggle | () => void | Function that toggles the visisibilty of the collapsible content. |