GitHub

Accordion

세로로 쌓인 대화형 제목 목록으로, 각 항목을 열어 관련 콘텐츠를 표시합니다.

아코디언 내용 영역입니다. 여기에 다양한 콘텐츠를 넣을 수 있습니다.

examples/krds/accordion-demo.tsx
import {
  Accordion,
  AccordionContent,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/accordion.json

사용법

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

구성

다음 조합으로 Accordion:

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

예제

Basic

한 번에 하나의 항목을 보여주는 기본 아코디언입니다. 첫 번째 항목은 기본으로 열려 있습니다.

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

examples/krds/accordion-basic.tsx
import {
  Accordion,
  AccordionContent,

Multiple

type="multiple"을 사용하면 여러 항목을 동시에 열 수 있습니다.

알림 수신 방식을 관리합니다. 처리 단계 업데이트는 이메일 또는 모바일 알림으로 받을 수 있습니다.

examples/krds/accordion-multiple.tsx
import {
  Accordion,
  AccordionContent,

Disabled

AccordionItem에 disabled prop을 사용해 개별 항목을 비활성화합니다.

examples/krds/accordion-disabled.tsx
import {
  Accordion,
  AccordionContent,

Borders

Accordion에 border, AccordionItem에 border-b last:border-b-0을 추가해 항목에 테두리를 표시합니다.

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

examples/krds/accordion-borders.tsx
import {
  Accordion,
  AccordionContent,

Card

Wrap the Accordion in a Card component.

Subscription & Billing
Common questions about your account, plans, payments and cancellations.

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

examples/krds/accordion-card.tsx
import {
  Accordion,
  AccordionContent,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.

examples/krds/accordion-rtl.tsx
"use client"

import {

API 참조

Radix UI 문서를 참고하세요.