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