Pantoia Design
Components

Accordion

사용 예시

자주 묻는 질문

찾는 항목 하나만 열어 읽을 때 써요.

tsx
<Accordion>  <AccordionItem value="faint">    <AccordionTrigger>인쇄가 왜 흐리게 나오나요?</AccordionTrigger>    <AccordionContent>잉크가 부족하거나 용지가 설정과 다르면 흐려져요. 용지를 다시 고른 뒤 한 장만 시험해 보세요.</AccordionContent>  </AccordionItem>  <AccordionItem value="duplex">    <AccordionTrigger>양면으로 인쇄하려면 어떻게 하나요?</AccordionTrigger>    <AccordionContent>고급 설정에서 양면 인쇄를 켜세요. 프린터가 양면 인쇄를 지원하지 않으면 이 항목이 보이지 않아요.</AccordionContent>  </AccordionItem>  <AccordionItem value="cancel">    <AccordionTrigger>보낸 인쇄를 멈출 수 있나요?</AccordionTrigger>    <AccordionContent>대기 목록에서 취소하세요. 이미 인쇄된 장은 되돌릴 수 없어요.</AccordionContent>  </AccordionItem></Accordion>

여러 항목 열기

여러 항목의 내용을 함께 봐야 할 때 multiple을 켜요.

1분 30초 걸려요. 잉크를 가장 적게 써요.

3분 걸려요. 잉크는 초안의 2배쯤 써요.

tsx
<Accordion value={compared} onValueChange={setCompared} multiple>  <AccordionItem value="draft">    <AccordionTrigger>초안</AccordionTrigger>    <AccordionContent>1분 30초 걸려요. 잉크를 가장 적게 써요.</AccordionContent>  </AccordionItem>  <AccordionItem value="standard">    <AccordionTrigger>표준</AccordionTrigger>    <AccordionContent>3분 걸려요. 잉크는 초안의 2배쯤 써요.</AccordionContent>  </AccordionItem>  <AccordionItem value="fine">    <AccordionTrigger>고품질</AccordionTrigger>    <AccordionContent>8분 걸려요. 잉크는 표준의 2배쯤 써요.</AccordionContent>  </AccordionItem></Accordion>

1분 30초 걸려요.

3분 걸려요.

인쇄할 문서를 위에서 골라요.

전체를 인쇄할지 몇 쪽만 인쇄할지 정해요.

인쇄될 모습을 먼저 확인해요.

인쇄를 누르면 문서를 프린터로 보내요.

처음부터 열린 항목

닫으면 내용이 사라졌다가 열 때 다시 만들어져요. 안에 있는 컨트롤의 값은 Accordion 바깥의 상태로 관리해요.

tsx
<Accordion defaultValue={['advanced']}>  <AccordionItem value="advanced">    <AccordionTrigger>고급 설정</AccordionTrigger>    <AccordionContent>      <Field layout="split">        <FieldLabel>양면 인쇄</FieldLabel>        <Switch checked={duplex} onCheckedChange={setDuplex} />      </Field>    </AccordionContent>  </AccordionItem></Accordion>

제목 옆 개수

열기 전에 항목마다 개수를 보여 줄 때 써요.

tsx
<Accordion>  <AccordionItem value="done">    <AccordionTrigger>      인쇄 완료      <Badge color="success">12</Badge>    </AccordionTrigger>    <AccordionContent>월간 보고서와 회의록을 포함해 문서 12개예요.</AccordionContent>  </AccordionItem>  <AccordionItem value="skipped">    <AccordionTrigger>      건너뜀      <Badge color="warning">2</Badge>    </AccordionTrigger>    <AccordionContent>암호가 걸린 문서 2개는 열 수 없어서 건너뛰었어요.</AccordionContent>  </AccordionItem></Accordion>

비활성 항목

지금 바꿀 수 없는 설정을 숨기지 않고 보여 줄 때 써요.

tsx
<Accordion>  <AccordionItem value="density">    <AccordionTrigger>인쇄 농도</AccordionTrigger>    <AccordionContent>1부터 100까지 정해요. 낮출수록 잉크를 덜 써요.</AccordionContent>  </AccordionItem>  <AccordionItem value="duplex" disabled>    <AccordionTrigger>양면 인쇄</AccordionTrigger>    <AccordionContent>지금 고른 프린터는 한 면만 인쇄해요.</AccordionContent>  </AccordionItem></Accordion>

컨트롤

tsx
<Accordion>  <AccordionItem value="density">    <AccordionTrigger>인쇄 농도</AccordionTrigger>    <AccordionContent>1부터 100까지 정해요. 낮출수록 잉크를 덜 써요.</AccordionContent>  </AccordionItem>  <AccordionItem value="layout">    <AccordionTrigger>모아 찍기</AccordionTrigger>    <AccordionContent>한 장에 2쪽씩 나란히 인쇄해요.</AccordionContent>  </AccordionItem>  <AccordionItem value="duplex">    <AccordionTrigger>양면 인쇄</AccordionTrigger>    <AccordionContent>종이 양쪽에 인쇄할지 정해요.</AccordionContent>  </AccordionItem></Accordion>

명세

이름
이름값기본
Accordion
valuestring[]-
호출하는 쪽에서 열린 항목을 관리해요.
defaultValuestring[]-
처음 값이에요.
onValueChange(value: string[], eventDetails) => void-
열린 항목이 바뀌면 호출돼요.
multiplebooleanfalse
여러 항목을 함께 열어 둘 수 있어요.
classNamestring-
모든 하위 컴포넌트에 쓸 수 있어요.
AccordionItem
valuestring필수
Accordion의 value에 이 값이 있으면 열려요.
disabledbooleanfalse