Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Collapse

Collapse is a component that allows you to expand or collapse an element for display.

Source@yamada-ui/transitions

Props

CollapseProps

animationOpacity

Description

If true, the opacity of the content will be animated.

Type

boolean

Default

true

as

Description

The HTML element to render.

Type

keyof ReactDOM

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

delay

Description

Custom delay definition for enter and exit.

Type

number | MotionLifecycleProps<number>

duration

Description

Custom duration definition for enter and exit.

Type

number | MotionLifecycleProps<number>

endingHeight

Description

The height you want the content in its expanded state.

Type

string | number

Default

auto

enter

Description

Custom enter.

Type

any

exit

Description

Custom exit. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an AnimatePresence to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary. ``jsx import { AnimatePresence, motion } from 'framer-motion' export const MyComponent = ({ isVisible }) => { return ( <AnimatePresence> {isVisible && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> )} </AnimatePresence> ) } ``

Type

any

initial

Description

Custom initial. Properties, variant label or array of variant labels to start in. Set to false to initialise with the values in animate (disabling the mount animation) ``jsx // As values <motion.div initial={{ opacity: 1 }} /> // As variant <motion.div initial="visible" variants={variants} /> // Multiple variants <motion.div initial={["visible", "active"]} variants={variants} /> // As false (disable mount animation) <motion.div initial={false} animate={{ opacity: 0 }} /> ``

Type

any

isOpen

Deprecated

Description

Show the component. triggers when enter or exit states.

Deprecated

Use open instead.

Type

boolean

open

Description

Show the component. triggers when enter or exit states.

Type

boolean

size

Description

The size of the Collapse.

Type

string

startingHeight

Description

The height you want the content in its collapsed state.

Type

string | number

Default

0

transition

Description

Custom transition definition for enter and exit.

Type

MotionLifecycleProps<Transition$1>

transitionEnd

Description

Custom transitionEnd definition for enter and exit.

Type

MotionLifecycleProps<MakeCustomValueType<TargetProperties>>

unmountOnExit

Description

If true, the element will unmount when isOpen={false} and animation is done.

Type

boolean

variant

Description

The variant of the Collapse.

Type

string

Edit this page on GitHub

PreviousAiryNextFade