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