Airy
Airyは、２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。
インポート
import { Airy } from "@yamada-ui/react"
使い方
切り替える要素をfromとtoに設定します。
編集可能な例
return ( <Airy from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
return ( <Airy duration={0.6} from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
遅延させる
切り替えを遅延させたい場合は、delayに数値(秒)を設定します。
編集可能な例
return ( <Airy delay={1} from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
無効にする
無効にする場合は、isDisabledをtrueにします。
編集可能な例
return ( <Airy isDisabled from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
return ( <Airy isReadOnly from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
制御する
編集可能な例
const [value, onChange] = useState<AiryIdent>("to") return ( <Airy value={value} onChange={onChange} from={<Text fontSize="2xl">ON</Text>} to={<Text fontSize="2xl">OFF</Text>} /> )
GitHubでこのページを編集する