Collapse
Animate presence with slide down/up transition
Import
Source
Docs
Package
Usage
From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
import { Button, Group, Text, Collapse, Box } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
function Demo() {
const [opened, { toggle }] = useDisclosure(false);
return (
<Box maw={400} mx="auto">
<Group justify="center" mb={5}>
<Button onClick={toggle}>Toggle content</Button>
</Group>
<Collapse in={opened}>
<Text>{/* ... content */}</Text>
</Collapse>
</Box>
);
}Change transition
Set following props to control transition:
transitionDuration– duration in mstransitionTimingFunction– timing function (ease, linear, etc.), defaults toeaseonTransitionEnd– called when transition ends (both open and close)
From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
import { useDisclosure } from '@mantine/hooks';
import { Button, Group, Text, Collapse, Box } from '@mantine/core';
function Demo() {
const [opened, { toggle }] = useDisclosure(false);
return (
<Box maw={400} mx="auto">
<Group justify="center" mb={5}>
<Button onClick={toggle}>Toggle with linear transition</Button>
</Group>
<Collapse in={opened} transitionDuration={1000} transitionTimingFunction="linear">
<Text>{/* ...content */}</Text>
</Collapse>
</Box>
);
}Nested Collapse components
This collapse contains another collapse
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.
This collapse is inside another collapse
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.
Build fully functional accessible web applications faster than ever