Flip
Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。
<Flip from={<AppleIcon fontSize="2xl" />} to={<CherryIcon fontSize="2xl" />} />
使い方
import { Flip } from "@yamada-ui/react"
import { Flip } from "@/components/ui"
import { Flip } from "@workspaces/ui"
<Flip />
方向を変更する
方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトでは、"horizontal"が設定されています。
<Flip
orientation="vertical"
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
<Flip
duration={1.4}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
遅延させる
遅延させる場合は、delayに数値(秒)を設定します。
<Flip
delay={1}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
無効にする
無効にする場合は、disabledをtrueにします。
<Flip
disabled
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<Flip
readOnly
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
制御する
const [value, onChange] = useState<KeyframeIdent>("from")
return (
<Flip
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
value={value}
onChange={onChange}
/>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。