Collapse
Collapseは、要素を展開または折りたたんで表示するコンポーネントです。
インポート
import { Collapse } from "@yamada-ui/react"
使い方
表示または非表示を制御するために、isOpenを設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Collapse isOpen={isOpen}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </Collapse> </> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Collapse isOpen={isOpen} duration={0.7}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </Collapse> </> )
非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Collapse isOpen={isOpen} unmountOnExit> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </Collapse> </> )
不透明度を無効にする
不透明度を無効にするには、animationOpacityをfalseに設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Collapse isOpen={isOpen} animationOpacity={false}> <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Box> </Collapse> </> )
高さに初期値を追加する
高さに初期値を追加するには、startingHeightに文字列または数値を設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Collapse isOpen={isOpen} startingHeight={36}> <Box color="purple.500" mt="md"> 私の戦闘力は530000です。 <br /> ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく…… </Box> </Collapse> </> )
GitHubでこのページを編集する