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

Loading...

Collapsible card with actions

Loading...

Accordion

Loading...

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.

• What is this?
• Collapsible card
• Collapsible card with actions
• Accordion