Collapsible

혼자 서 있는 접이식 섹션 하나입니다. 헤더를 누르면 그 아래 내용이 열리고, 다시 누르면 닫힙니다. 여러 개를 묶어 하나만 열리게 해야 한다면 그것은 Accordion입니다.

import { Collapsible } from 'neba';

<Collapsible title="배송과 반품">
  <p>오후 2시 이전 주문은 당일 출고됩니다.</p>
</Collapsible>;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	시트의 무게. 컨테이너의 방식대로 색을 들이지 않습니다. text는 상자를 아예 그리지 않으므로 본문 속이나 Card 안의 fold에 맞습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	여백과 모서리, 그리고 제목과 본문의 타입 스케일
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
open	boolean	—	패널이 열려 있는지. 직접 제어할 때 씁니다
defaultOpen	boolean	false	제어하지 않을 때의 시작 상태
onOpenChange	(open: boolean) => void	—	trigger가 패널을 열거나 닫았을 때
title	ReactNode	—	trigger에 쓰이는 제목
subtitle	ReactNode	—	제목 아래 한 줄. 한 단계 작고 흐린 글씨
startIcon	ReactNode	—	제목 앞의 내용, 아이콘, 상태 점, 개수
action	ReactNode	—	헤더 끝에 고정되는 컨트롤. trigger 바깥이라 따로 누를 수 있습니다
trigger	ReactElement	—	헤더를 여러분의 컨트롤로 통째로 갈아 끼웁니다. 넘긴 요소가 곧 trigger가 되어 클릭 핸들러와 aria-expanded, aria-controls를 받습니다
indicator	boolean	true	헤더 끝의 chevron. 상태에 따라 회전합니다
padded	boolean	true	패널 내용의 안쪽 여백. 가장자리까지 채워야 하는 것에는 끄면 됩니다
disabled	boolean	false	사용 불가. trigger가 응답을 멈춥니다
hiddenUntilFound	boolean	false	닫힌 패널을 DOM에 남겨 브라우저의 페이지 내 찾기가 찾아 열 수 있게 합니다. keepMounted보다 우선합니다
keepMounted	boolean	false	닫힌 패널을 DOM에 남깁니다. 만드는 비용이 크거나 폼 상태를 쥐고 있는 내용에
children	ReactNode	—	본문

나머지 <div> 속성은 모두 루트로 전달됩니다. 예외는 onChange 하나로, 여기서 들을 만한 변화는 onOpenChange입니다.

공통 축(variant size color density elevation)의 의미는 Prop 규약에 있습니다.

예시

title, subtitle, startIcon, action

title은 헤더의 제목, subtitle은 그 아래 한 줄입니다. startIcon은 제목 앞에 놓이고, action은 헤더 끝에 놓이되 trigger 바깥입니다. 접는 헤더와 그 위의 스위치는 누를 것이 둘이므로, 하나가 다른 하나 안에 들어갈 수 없습니다.

indicator={false}는 chevron을 지웁니다. 그러면 헤더는 색으로만 상태를 말합니다.

import { Collapsible, Switch, Typography } from 'neba';

function BellIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M4 6.5a4 4 0 0 1 8 0c0 3 1 4 1 4H3s1-1 1-4Z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
      <path d="M6.5 13a1.5 1.5 0 0 0 3 0" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  );
}

export default function CollapsibleSlots() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Collapsible
        title="Notifications"
        subtitle="How we reach you"
        startIcon={<BellIcon />}
        action={<Switch size="sm" defaultChecked aria-label="Enable notifications" />}
      >
        <Typography>
          Email goes out immediately. Push waits five minutes, so a message you have already read on
          another device never rings twice.
        </Typography>
      </Collapsible>

      <Collapsible title="No chevron" indicator={false}>
        <Typography>The header still reports its state by colour.</Typography>
      </Collapsible>
    </div>
  );
}

trigger

trigger는 헤더를 직접 만든 컨트롤로 통째로 갈아 끼웁니다. 넘긴 요소가 곧 trigger가 되어 클릭 핸들러와 aria-expanded, 패널을 가리키는 aria-controls를 받으므로 따로 연결할 것이 없습니다.

import { Button, Collapsible, Typography } from 'neba';

export default function CollapsibleTrigger() {
  return (
    <div className="w-full max-w-lg">
      <Collapsible
        variant="text"
        padded={false}
        trigger={
          <Button variant="text" size="sm">
            Show the full changelog
          </Button>
        }
      >
        <Typography className="pt-3">
          1.4.0 added nine chart components and a shared data model behind them. 1.3.0 was the date
          pickers. Everything before that is in the changelog itself.
        </Typography>
      </Collapsible>
    </div>
  );
}

variant

세 무게는 다른 컨테이너에서와 같은 말을 합니다. text는 시트를 아예 그리지 않으므로 본문 한가운데나 이미 시트인 Card 안의 fold에 맞습니다.

import { Collapsible, Typography } from 'neba';

export default function CollapsibleVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Collapsible variant="solid" title="solid" defaultOpen>
        <Typography>A filled sheet, for the fold a screen is about.</Typography>
      </Collapsible>

      <Collapsible variant="outline" title="outline">
        <Typography>A hairline around frosted acrylic. The default.</Typography>
      </Collapsible>

      <Collapsible variant="text" title="text">
        <Typography>No sheet at all, for a fold inside running prose or a Card.</Typography>
      </Collapsible>
    </div>
  );
}

keepMounted, hiddenUntilFound

기본적으로 닫힌 패널은 DOM에서 빠집니다. keepMounted는 그것을 남겨 두므로, 만드는 비용이 크거나 폼 상태를 쥐고 있는 내용이 접혔다 펴져도 그대로입니다. hiddenUntilFound는 hidden="until-found"로 남겨 브라우저의 페이지 내 찾기가 찾아 열 수 있게 하며, keepMounted보다 우선합니다.

import { Collapsible, TextField } from 'neba';

export default function CollapsibleMounting() {
  return (
    <div className="w-full max-w-lg">
      <Collapsible title="Delivery note" keepMounted>
        <TextField
          size="sm"
          label="Leave it with"
          placeholder="A neighbour, the porter…"
          fullWidth
        />
      </Collapsible>
    </div>
  );
}

제어하기

open을 넘기면 Collapsible은 자체 상태를 갖지 않습니다. 여러 개를 한 번에 여닫거나, 열린 상태를 URL에 담거나, 페이지의 다른 자리에 있는 컨트롤로 열 때 씁니다.

const [open, setOpen] = useState(false);

<Collapsible title="고급 설정" open={open} onOpenChange={setOpen}>
  <p>여기에 나머지가 들어갑니다.</p>
</Collapsible>;

접근성

• trigger는 실제 <button>이고, 자신이 여는 패널을 가리키는 aria-expanded와 aria-controls를 갖습니다.
• action은 trigger 바깥에 있으므로 키보드로 따로 접근하고 누를 수 있습니다.
• 닫힌 패널은 DOM에서 빠지므로 tab 순서에도 접근성 트리에도 없습니다. keepMounted로 남겨 두어도 마찬가지입니다.
• hiddenUntilFound를 켜면 브라우저의 페이지 내 찾기가 닫힌 내용을 찾아 패널을 열 수 있습니다.