Installation
bash
npx axis-cli add accordionUsage
tsx
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@axis-ds/ui-react'
export function Example() {
return (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>AXIS Design System이란?</AccordionTrigger>
<AccordionContent>
React 기반 컴포넌트 라이브러리 및 디자인 토큰 시스템입니다.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>어떻게 설치하나요?</AccordionTrigger>
<AccordionContent>
pnpm add @axis-ds/ui-react 명령으로 설치할 수 있습니다.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>커스터마이징이 가능한가요?</AccordionTrigger>
<AccordionContent>
Tailwind CSS 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
</AccordionContent>
</AccordionItem>
</Accordion>
)
}Components
Accordion아코디언 루트 컨테이너
AccordionItem개별 아코디언 아이템
AccordionTrigger아이템 열기/닫기 트리거
AccordionContent아이템 콘텐츠 영역
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | 단일/다중 열림 모드 |
value | string | string[] | - | 열린 아이템 값 (controlled) |
defaultValue | string | string[] | - | 기본 열린 아이템 |
collapsible | boolean | false | 모든 아이템 닫기 허용 (single 모드) |
onValueChange | (value: string | string[]) => void | - | 값 변경 콜백 |
typeType:
"single" | "multiple"Default:
"single"단일/다중 열림 모드
valueType:
string | string[]Default:
-열린 아이템 값 (controlled)
defaultValueType:
string | string[]Default:
-기본 열린 아이템
collapsibleType:
booleanDefault:
false모든 아이템 닫기 허용 (single 모드)
onValueChangeType:
(value: string | string[]) => voidDefault:
-값 변경 콜백