Accordion

Betav1.0.0

접고 펼치는 콘텐츠 패널 컬렉션.

Loading…
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/accordion.json

Composition

Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Accessibility

이 컴포넌트는 WAI-ARIA accordion 패턴을 따릅니다.

Keyboard interactions

KeyDescription
EnterSpace
현재 헤더 패널 열기/닫기.
헤더 간 이동.
HomeEnd
첫/마지막 헤더.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.