SlideFade
SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。
インポート
import { SlideFade } from "@yamada-ui/react"
使い方
表示または非表示を制御するために、openを設定します。
編集可能な例
const { open, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <SlideFade open={open}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </SlideFade> </> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
const { open, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <SlideFade open={open} duration={0.4}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </SlideFade> </> )
位置を変更する
表示または非表示していく位置を変更する場合は、offsetXとoffsetYに文字列または数値を指定します。
offsetX: 横軸方向を指定します。デフォルトでは、0が設定されています。offsetY: 縦軸方向を指定します。デフォルトでは、8が設定されています。
編集可能な例
const { open, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <SlideFade open={open} offsetX={20} offsetY={0}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </SlideFade> </> )
編集可能な例
const { open, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <SlideFade open={open} offsetY={-20}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </SlideFade> </> )
非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
編集可能な例
const { open, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <SlideFade open={open} unmountOnExit> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </SlideFade> </> )
GitHubでこのページを編集する