ScaleFade
ScaleFadeは、要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。
インポート
import { ScaleFade } from "@yamada-ui/react"
使い方
表示または非表示を制御するために、isOpenを設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <ScaleFade isOpen={isOpen}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </ScaleFade> </> )
拡大の初期値を変更する
拡大の初期値を変更する場合は、scaleに数値を設定します。この数値を基準に拡大され、縮小していきます。デフォルトは、0.95です。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <ScaleFade isOpen={isOpen} scale={0.75}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </ScaleFade> </> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <ScaleFade isOpen={isOpen} duration={0.4}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </ScaleFade> </> )
非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <ScaleFade isOpen={isOpen} unmountOnExit> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </ScaleFade> </> )
GitHubでこのページを編集する