Component

Accordion

여러 섹션을 한 화면에서 접고 펴는 콘텐츠 패널입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@amineslab/ui'

function AccordionExample({ size = 'md', type = 'single', collapsible = true, headingLevel = 3, }: {
    size?: 'sm' | 'md' | 'lg';
    type?: 'single' | 'multiple';
    collapsible?: boolean;
    headingLevel?: 2 | 3 | 4;
}) {
    return (<Accordion {...(type === 'single' ? { type, collapsible } : { type })} className="w-full max-w-lg">
      <AccordionItem value="overview">
        <AccordionTrigger headingLevel={headingLevel} size={size} title="구성 확인" description="변경하기 전에 현재 설정을 확인합니다."/>
        <AccordionContent>현재 선택된 구성과 적용 범위를 확인할 수 있습니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="details">
        <AccordionTrigger headingLevel={headingLevel} size={size}>
          자세한 안내
        </AccordionTrigger>
        <AccordionContent>필요한 경우 세부 설정을 이어서 조정하세요.</AccordionContent>
      </AccordionItem>
    </Accordion>);
}

export default function ExamplePreview() {
  return ((<AccordionExample key={"single"} {...({"size":"md","type":"single","collapsible":true,"headingLevel":3} as const)} size={"md"} type={"single"} headingLevel={3}/>))
}

Props

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@amineslab/ui'

`Accordion`

열린 항목을 관리하는 Radix accordion root입니다.

Name	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	한 번에 하나 또는 여러 패널을 열 수 있습니다.
`collapsible`	`boolean`	`false`	single 모드에서도 열린 패널을 닫을 수 있습니다.

`AccordionTrigger`

제목과 설명을 가진 키보드 트리거입니다.

Name	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	트리거의 밀도와 텍스트 크기를 정합니다.
`headingLevel`	`2 \| 3 \| 4`	`3`	문서 heading 계층을 지정합니다.
`title`	`ReactNode`	-	제목 행에 표시합니다.
`description`	`ReactNode`	-	제목 아래 보조 설명을 표시합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

제목과 설명

설명은 제목 아래에 놓이고, +/− 아이콘은 제목 행 중앙에 맞습니다.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@amineslab/ui'

function AccordionExample({ size = 'md', type = 'single', collapsible = true, headingLevel = 3, }: {
    size?: 'sm' | 'md' | 'lg';
    type?: 'single' | 'multiple';
    collapsible?: boolean;
    headingLevel?: 2 | 3 | 4;
}) {
    return (<Accordion {...(type === 'single' ? { type, collapsible } : { type })} className="w-full max-w-lg">
      <AccordionItem value="overview">
        <AccordionTrigger headingLevel={headingLevel} size={size} title="구성 확인" description="변경하기 전에 현재 설정을 확인합니다."/>
        <AccordionContent>현재 선택된 구성과 적용 범위를 확인할 수 있습니다.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="details">
        <AccordionTrigger headingLevel={headingLevel} size={size}>
          자세한 안내
        </AccordionTrigger>
        <AccordionContent>필요한 경우 세부 설정을 이어서 조정하세요.</AccordionContent>
      </AccordionItem>
    </Accordion>);
}

export default function ExamplePreview() {
  return (<AccordionExample />)
}

사용 기준

권장하는 사용

여러 항목 중 하나 또는 여러 개를 열 수 있습니다.
title과 description을 함께 주면 아이콘은 제목 첫 행에 맞고 설명은 그 아래에 놓입니다.
콘텐츠가 독립적인 작업이면 Accordion 대신 Collapsible을 사용하세요.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter / Space: 현재 섹션을 열거나 닫습니다.
Tab: 다음 트리거 또는 포커스 가능한 요소로 이동합니다.