Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

ScaleFade

ScaleFade is a component that gradually scales up to reveal or scales down to hide an element.

Source@yamada-ui/transitions

Props

ScaleFadeProps

as

Type

"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "style" | "animate" | "div" | "a" | "abbr" | "address" | ... 148 more ... | "textPath"

colorScheme

Description

The visual color appearance of the component.

Type

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

delay

Description

Custom delay definition for enter and exit.

Type

number | Partial<Record<"exit" | "enter", number>>

duration

Description

Custom duration definition for enter and exit.

Type

number | Partial<Record<"exit" | "enter", number>>

enter

Description

Custom enter.

Type

any

isOpen

Description

Show the component. triggers when enter or exit states.

Type

boolean

reverse

Description

If true, the element will transition back to exit state.

Type

boolean

Default

true

scale

Description

The initial scale of the element.

Type

number

Default

0.95

size

Description

The size of the ScaleFade.

Type

string

transition

Description

Custom transition definition for enter and exit.

Type

Partial<Record<"exit" | "enter", Transition$1>>

transitionEnd

Description

Custom transitionEnd definition for enter and exit.

Type

Partial<Record<"exit" | "enter", 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 ScaleFade.

Type

string

Edit this page on GitHub

PreviousFadeNextSlide