Accordion

@hua-labs/ui

v1.1.0

키보드 네비게이션을 지원하는 접을 수 있는 콘텐츠 섹션입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Accordion (single)

다중 열기

아이템 {index}의 콘텐츠입니다. 여러 아이템을 동시에 열 수 있습니다. 1

Props

이름	타입	기본값	설명
`type`	`"single" \| "multiple"`	`"single"`	단일 또는 다중 아이템 열기 허용
`defaultValue`	`string \| string[]`	-	Initial expanded item(s) for uncontrolled mode
`value`	`string \| string[]`	-	현재 열린 아이템 (제어)
`onValueChange`	`(value: string \| string[]) => void`	-	Callback when expanded items change
`collapsible`	`boolean`	`false`	단일 모드에서 열린 아이템 닫기 허용

코드 예시

기본 사용법tsx

// Via framework (recommended)
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui/interactive';
// Or direct import (same package)
// import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hua-labs/ui/interactive';

<Accordion type="single">
  <AccordionItem value="item1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content for section 2</AccordionContent>
  </AccordionItem>
</Accordion>

다중 모드tsx

<Accordion type="multiple" defaultValue={["item1", "item2"]}>
  <AccordionItem value="item1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
</Accordion>

BottomSheet Tabs