Sonic UIv0.6.2

Accordion

긴 내용을 제목만 먼저 보여 주고 필요할 때 펼쳐요.

변형

Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.

프로젝트마다 10개까지 만들 수 있어요. 쓰지 않는 키는 삭제해 주세요.

default

disabled

프로젝트마다 10개까지 만들 수 있어요. 쓰지 않는 키는 삭제해 주세요.
open

프로젝트마다 10개까지 만들 수 있어요. 쓰지 않는 키는 삭제해 주세요.
open · disabled

사용법

  • 꼭 읽어야 하는 내용은 접지 않아요자주 묻는 질문, 문서 사이드바 그룹처럼 고를 수 있는 내용에 써요.
  • 페이지 찾기로 열려요닫힌 내용도 브라우저 페이지 찾기로 찾아 열 수 있어요(hiddenUntilFound).

Props

prop값기본값
multiple여러 항목을 함께 열기false
value · defaultValue열린 항목들의 value 배열[]
AccordionItem disabled항목 하나 비활성화false

코드

tsx
<Accordion defaultValue={['limit']}>
  <AccordionItem value="limit">
    <AccordionTrigger>키는 몇 개까지 만들 수 있나요?</AccordionTrigger>
    <AccordionPanel>프로젝트마다 10개까지 만들 수 있어요.</AccordionPanel>
  </AccordionItem>
</Accordion>