Accordion

접었다 펼 수 있는 섹션들의 더미. 하나를 열면 하나가 닫힙니다.

import { Accordion, AccordionItem } from 'neba';

<Accordion defaultValue={['billing']}>
  <AccordionItem value="billing" title="결제는 어떻게 되나요?" subtitle="요금제와 청구서">
    매달 1일에 청구됩니다.
  </AccordionItem>
  <AccordionItem value="regions" title="빌드는 어디서 도나요?">
    기본 브랜치에 가장 가까운 리전에서 돕니다.
  </AccordionItem>
</Accordion>;

Props

Accordion

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 채움 / 하이라인 / 없음
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	시트의 반경과 각 섹션의 여백. Box와 같은 뜻입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
multiple	boolean	false	여러 섹션을 동시에 열 수 있는지. 기본이 꺼짐인 이유는 하나를 열 때 하나를 닫는 것이 아코디언이 접이식 목록과 다른 점 전부이기 때문입니다
value	(string | number)[]	—	열려 있는 섹션들. controlled
defaultValue	(string | number)[]	—	처음 열려 있는 섹션들
onValueChange	(value: (string | number)[]) => void	—	열린 집합이 바뀔 때
dividers	boolean	true	섹션 사이를 여백 대신 실선으로 나눕니다. List와 기본값이 반대인 이유는 접히는 카드 더미가 아니라 한 덩어리로 읽혀야 하기 때문입니다
disabled	boolean	false	사용 불가. 모든 섹션이 접히지 않습니다
hiddenUntilFound	boolean	false	닫힌 패널을 DOM에 남겨 브라우저의 페이지 검색이 찾아 펼칠 수 있게 합니다. keepMounted보다 우선합니다
keepMounted	boolean	false	닫힌 패널을 DOM에 남깁니다. 만들기 비싼 내용이나 접혀도 살아 있어야 하는 폼 상태
children	ReactNode	—	AccordionItem들

AccordionItem

Prop	타입	기본값	설명
value	string | number	—	value / defaultValue가 가리키는 식별자. 생략하면 Base UI가 만들어 줍니다
title	ReactNode	—	접히는 부분의 제목
subtitle	ReactNode	—	제목 아래 한 줄
startIcon	ReactNode	—	제목 앞의 내용
action	ReactNode	—	헤더 끝에 고정되는 컨트롤. 접는 버튼 바깥에 놓입니다 — 버튼 안의 버튼은 브라우저가 고쳐 씁니다
disabled	boolean	false	이 섹션만 접히지 않습니다. 나머지는 그대로 동작합니다
children	ReactNode	—	펼쳤을 때의 내용

예시

Variant

시트는 절대 물들지 않습니다 — Box, List와 같습니다. 컨테이너는 다른 사람의 콘텐츠를 담고, 그 콘텐츠는 자기 색을 갖고 도착합니다. 카드 안에 넣을 때는 text가 정답입니다: 카드는 이미 시트이고, 그 안의 두 번째 테두리 사각형은 그냥 두 번째 사각형입니다.

import { Accordion, AccordionItem } from 'neba';

export default function AccordionVariants() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-3">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Accordion key={variant} variant={variant} size="sm" defaultValue={['a']}>
          <AccordionItem value="a" title={variant}>
            The sheet is never dyed — a container holds other people's content, and that content
            arrives with its own colours.
          </AccordionItem>
          <AccordionItem value="b" title="Second">
            Only one section is open at a time unless `multiple` says otherwise.
          </AccordionItem>
        </Accordion>
      ))}
    </div>
  );
}

multiple, dividers, 그리고 헤더 옆의 컨트롤

import { Accordion, AccordionItem, Switch, Typography } from 'neba';

/**
 * `multiple` is the whole difference between an accordion and a stack of
 * collapsibles: closing the last section as you open the next is what keeps the
 * page from growing under the reader.
 *
 * `dividers` decides whether the sections are one ruled block or a stack of
 * tiles. A section cannot be both.
 */
export default function AccordionBehaviour() {
  return (
    <div className="grid w-full grid-cols-1 gap-5 lg:grid-cols-2">
      <div className="flex flex-col gap-2">
        <Typography level="caption">multiple</Typography>
        <Accordion multiple defaultValue={['a', 'b']} size="sm">
          <AccordionItem value="a" title="Both open at once">
            Nothing closed when this one opened.
          </AccordionItem>
          <AccordionItem value="b" title="And so is this">
            Reach for it when the sections are a checklist rather than a set of answers.
          </AccordionItem>
        </Accordion>
      </div>

      <div className="flex flex-col gap-2">
        <Typography level="caption">dividers={'{false}'} · action · disabled</Typography>
        <Accordion dividers={false} size="sm" defaultValue={['a']}>
          <AccordionItem
            value="a"
            title="Notifications"
            subtitle="Tiles rather than rules"
            action={<Switch size="sm" defaultChecked />}
          >
            The switch sits outside the folding button — a header that both folds and holds a
            control has two things to press, and one of them cannot be nested inside the other.
          </AccordionItem>
          <AccordionItem value="b" title="Archived" disabled>
            This one never opens.
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  );
}

크기

import { Accordion, AccordionItem } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function AccordionSizes() {
  return (
    <div className="flex w-full flex-col gap-4">
      {SIZES.map((size) => (
        <Accordion key={size} size={size} defaultValue={['a']}>
          <AccordionItem value="a" title={size} subtitle="Radius and padding, never the ladder">
            A section's size is the sheet's size — its radius and its padding — exactly as on Box.
          </AccordionItem>
        </Accordion>
      ))}
    </div>
  );
}

multiple이 기본으로 꺼져 있는 이유

이것이 아코디언과 접이식 목록 더미의 차이 전부입니다. 다음 것을 열면서 마지막 것을 닫는 동작이 페이지가 독자 아래에서 자라나지 않게 막습니다. 섹션들이 서로 배타적인 답이 아니라 체크리스트라면 multiple을 켜세요.

dividers는 List와 기본값이 반대입니다. 타일들의 목록은 목록이지만, 타일들의 아코디언은 마침 접히기도 하는 카드 더미입니다. 실선은 섹션들이 한 덩어리의 부분들이라고 말해 줍니다.

높이는 움직입니다. transform은 아닙니다

패널의 height는 애니메이션됩니다. 움직임을 금지하는 규칙의 예외처럼 보이지만 아닙니다.

transform이 없고, 다시 샘플링되는 글자가 없고, 내용이 자기가 든 패널에 대해 자리를 옮기지도 않습니다 — 패널이 내용 위로 열리는 창일 뿐입니다. 반대로 섹션이 즉시 나타나는 아코디언은 튀는 페이지이고, 그건 애초에 그 규칙이 막으려던 실패입니다.

헤더는 하나가 아니라 둘입니다

action은 접는 버튼 바깥에 놓입니다. 접히기도 하고 스위치도 든 헤더에는 누를 것이 두 개 있는데, 그중 하나를 다른 하나 안에 넣을 수는 없습니다 — <button> 안의 <button>은 브라우저가 파싱하면서 고쳐 쓰는 마크업입니다. Chip과 ListItem이 쓰는 것과 같은 구조입니다.

접근성

Base UI가 button / region 짝과 그 사이의 aria-controls / aria-expanded 배선을 소유합니다. 여기서 신경 쓸 것은 title을 실제 헤딩으로 줄지입니다 — 문서 개요에 들어가야 하는 섹션이라면 title={<h3>결제</h3>}처럼 주세요. .neba-title이 브라우저의 기본 크기와 여백을 걷어내므로 타입 스케일은 그대로 유지됩니다.

hiddenUntilFound는 닫힌 패널을 DOM에 남겨 브라우저의 페이지 내 검색이 찾아서 펼칠 수 있게 합니다. FAQ 페이지라면 켜 둘 만합니다.