Collapse
Collapse is a component that allows you to expand or collapse an element for display.
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>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { Collapse } from "@yamada-ui/react"
import { Collapse } from "@/components/ui"
import { Collapse } from "@workspaces/ui"
<Collapse />
Change the Duration
To change the duration, set a number (in seconds) to 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>
)
If you use this code, you need to add
"use client" to the top of the file.Unmount on Exit
To unmount the component when it is not visible, set unmountOnExit to 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="lg" p="md" rounded="l2" w="full">
私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
</Box>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Disable Opacity Animation
To disable the opacity animation, set animationOpacity to 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>
)
If you use this code, you need to add
"use client" to the top of the file.Add a Starting Height
To add a starting height, set a string or number to 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>
)
If you use this code, you need to add
"use client" to the top of the file.