Collapse

Collapse (접기/펼치기)

Collapse 컴포넌트는 콘텐츠를 슬라이드 다운/업 트랜지션으로 보여주거나 숨기는 컴포넌트예요. 콘텐츠의 표시 여부를 자연스럽게 애니메이션 처리할 때 사용해요.

출처: 문서

본문

collapsed 상태를 useDisclosure 훅으로 관리하면서 expanded prop에 연결하면 콘텐츠를 접었다 펼칠 수 있어요.

import { Button, Group, Text, Collapse, Box } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [expanded, { toggle }] = useDisclosure(false);

  return (
    <Box maw={400} mx="auto">
      <Group justify="center" mb={5}>
        <Button onClick={toggle}>Toggle content</Button>
      </Group>

      <Collapse expanded={expanded}>
        <Text>{/* ... content */}</Text>
      </Collapse>
    </Box>
  );
}

가로(수평) 방향

orientation="horizontal" prop을 설정하면 세로가 아닌 가로로 접고 펼칠 수 있어요.

import { Button, Collapse, Stack, Typography } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);

  return (
    <Stack h={240} align="flex-start">
      <Button onClick={handlers.toggle} w="fit-content">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <Collapse expanded={expanded} orientation="horizontal">
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md" w={200}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </Typography>
      </Collapse>
    </Stack>
  );
}

트랜지션 바꾸기

다음 prop들로 트랜지션을 제어할 수 있어요.

  • transitionDuration – 지속 시간(ms)
  • transitionTimingFunction – 타이밍 함수(ease, linear 등), 기본값은 ease
  • onTransitionEnd – 트랜지션이 끝났을 때 호출(열고 닫을 때 모두)
import { useDisclosure } from '@mantine/hooks';
import { Button, Group, Text, Collapse, Box } from '@mantine/core';

function Demo() {
  const [expanded, { toggle }] = useDisclosure(false);

  return (
    <Box maw={400} mx="auto">
      <Group justify="center" mb={5}>
        <Button onClick={toggle}>Toggle with linear transition</Button>
      </Group>

      <Collapse expanded={expanded} transitionDuration={1000} transitionTimingFunction="linear">
        <Text>{/* ...content */}</Text>
      </Collapse>
    </Box>
  );
}

use-collapse 훅

use-collapse는 Collapse 컴포넌트의 훅 버전이에요. 접기/펼치기 동작을 더 유연하게 제어할 수 있어요.

import { Button, Typography } from '@mantine/core';
import { useCollapse, useDisclosure } from '@mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);
  const { getCollapseProps } = useCollapse({ expanded });

  return (
    <>
      <Button onClick={handlers.toggle} mb="md">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <div {...getCollapseProps()}>
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Typography>
      </div>
    </>
  );
}

더 알아보기 (Learn more)