Flip
Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。
インポート
import { Flip } from "@yamada-ui/react"
使い方
切り替える要素をfromとtoに設定します。
編集可能な例
return ( <Flip from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
方向を変更する
方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトは"horizontal"です。
編集可能な例
return ( <Flip orientation="vertical" from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
return ( <Flip duration={1.4} from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
遅延させる
切り替えを遅延させたい場合は、delayに数値(秒)を設定します。
編集可能な例
return ( <Flip delay={1} from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
無効にする
無効にする場合は、isDisabledをtrueにします。
編集可能な例
return ( <Flip isDisabled from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
return ( <Flip isReadOnly from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
制御する
編集可能な例
const [value, onChange] = useState<FlipIdent>("from") return ( <Flip value={value} onChange={onChange} from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
カスタマイズする
編集可能な例
return ( <Flip transition={{ type: "spring", damping: 10, stiffness: 120, }} from={<AppleIcon fontSize="6xl" />} to={<CherryIcon fontSize="6xl" />} /> )
GitHubでこのページを編集する