Collapse
Collapseは、要素を展開または折りたたんで表示するコンポーネントです。
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start" gap="0">
<Button onClick={toggle}>Please Click</Button>
<Collapse open={open}>
<Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Box>
</Collapse>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { Collapse } from "@yamada-ui/react"
import { Collapse } from "@/components/ui"
import { Collapse } from "@workspaces/ui"
<Collapse />
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start" gap="0">
<Button onClick={toggle}>Please Click</Button>
<Collapse open={open} duration={0.7}>
<Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Box>
</Collapse>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start" gap="0">
<Button onClick={toggle}>Please Click</Button>
<Collapse open={open} unmountOnExit>
<Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Box>
</Collapse>
<Box borderWidth={1} mt="md" p="md" rounded="l2" w="full">
私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Box>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。不透明度を無効にする
不透明度を無効にする場合は、animationOpacityをfalseに設定します。
私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start" gap="0">
<Button onClick={toggle}>Please Click</Button>
<Collapse animationOpacity={false} open={open}>
<Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Box>
</Collapse>
<Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Box>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。高さに初期値を追加する
高さに初期値を追加する場合は、startingHeightに文字列または数値を設定します。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<Collapse open={open} startingHeight={23}>
<Box>
私の戦闘力は530000です。
<br />
ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Box>
</Collapse>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。