ナビゲーションと開示@neumorphism-ui/accordion

Accordion

Base UI Accordion の状態管理とアクセシビリティ上の関連付けを維持しながら、展開中の項目を inset サーフェスとして表示します。multiple モードに加え、制御・非制御の両方の使い方に対応します。

@neumorphism-ui/accordion

Registry JSON

プレビュー

最初のコンポーネントを追加すると、ニューモーフィズムの surface、shadow、radius トークンもプロジェクトの CSS に接続されます。

インストール

npx shadcn@latest add @neumorphism-ui/accordion

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>配送にはどのくらいかかりますか？</AccordionTrigger>
    <AccordionContent>
      ご注文の商品は2〜3営業日以内に発送されます。
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>注文を返品できますか？</AccordionTrigger>
    <AccordionContent>
      商品の到着後14日以内であれば返品を申請できます。
    </AccordionContent>
  </AccordionItem>
</Accordion>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Accordion`	`multiple`	`boolean`	`false`	複数の項目を同時に展開できるようにします。
`Accordion`	`value / defaultValue`	`string[]`	`—`	展開中の項目を表す制御値、または非制御時の初期値です。
`Accordion`	`onValueChange`	`(value) => void`	`—`	展開中の項目が変わったときに呼び出されます。
`AccordionItem`	`value`必須	`string`	`—`	項目を識別する一意の値です。
`AccordionItem`	`disabled`	`boolean`	`false`	項目の trigger を無効にします。
`AccordionContent`	`keepMounted`	`boolean`	`false`	閉じている間も panel を DOM に保持します。

プレビュー

スタイルトークンも一緒にインストールされますか？

インストール後にソースを編集できますか？

キーボード操作に対応していますか？

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ