Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Rotate

Rotate is a component that provides an animation to switch between two elements while rotating.

Source@yamada-ui/transitions

Props

RotateProps

from

Required

Description

Passing React elements to "from" is required.

Type

ReactElement<any, string | JSXElementConstructor<any>>

to

Required

Description

Passing React elements to "to" is required.

Type

ReactElement<any, string | JSXElementConstructor<any>>

as

Description

The HTML element to render.

Type

"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "style" | "animate" | "button" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 149 more ... | "textPath"

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"

defaultValue

Description

You can set the initial state.

Type

RotateIdent

Default

'from'

delay

Description

 The animation delay.

Type

number

Default

0

disabled

Description

If true, the component is disabled.

Type

boolean

Default

false

duration

Description

The animation duration.

Type

number

Default

0.4

isDisabled

Deprecated

Description

If true, the component is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the component is readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

onChange

Description

This is a callback function that is called when the animation state changes.

Type

(value: RotateIdent) => void

readOnly

Description

If true, the component is readonly.

Type

boolean

Default

false

rotate

Description

The animation rotation.

Type

number

Default

45

size

Description

The size of the Rotate.

Type

string

value

Description

Use this when you want to control the animation from outside the component.

Type

RotateIdent

variant

Description

The variant of the Rotate.

Type

string

Edit this page on GitHub

PreviousFlipNextScaleFade