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