Collapse

import { CollapseDemos, UseCollapseDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Collapse);

Usage

<Demo data={CollapseDemos.usage} />

Horizontal orientation

<Demo data={CollapseDemos.horizontal} />

Change transition

Set the following props to control the transition:

• transitionDuration – duration in ms
• transitionTimingFunction – timing function (ease, linear, etc.), defaults to ease
• onTransitionEnd – called when transition ends (both open and close)

<Demo data={CollapseDemos.transition} />

Example: nested Collapse components

<Demo data={CollapseDemos.nested} />

use-collapse hook

use-collapse is the hook version of the Collapse component. It allows more flexible usage and control over the collapse behavior.

<Demo data={UseCollapseDemos.usage} />