Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Flip

Flipは、2つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。

ソース@yamada-ui/transitions

Props

FlipProps

from

必須

説明

Passing React elements to "from" is required.

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

to

必須

説明

Passing React elements to "to" is required.

タイプ

ReactElement<any, string | JSXElementConstructor<any>>

as

説明

The HTML element to render.

タイプ

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

colorScheme

説明

The visual color appearance of the component.

タイプ

"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

説明

You can set the initial state.

タイプ

FlipIdent

デフォルト

'from'

delay

説明

 The animation delay.

タイプ

number

デフォルト

0

duration

説明

The animation duration.

タイプ

number

デフォルト

0.4

isDisabled

説明

If true, the component is disabled.

タイプ

boolean

デフォルト

false

isReadOnly

説明

If true, the component is readonly.

タイプ

boolean

デフォルト

false

onChange

説明

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

タイプ

(value: FlipIdent) => void

orientation

説明

The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.

タイプ

FlipOrientation

デフォルト

'horizontal'

size

説明

The size of the Flip.

タイプ

string

transition

説明

The animation transition.

タイプ

Transition$1

value

説明

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

タイプ

FlipIdent

variant

説明

The variant of the Flip.

タイプ

string

GitHubでこのページを編集する

FadeRotate