Caroa UI

Accordion

折りたたみ可能なコンテンツセクション。

インポート

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>アコーディオン1</AccordionTrigger>
    <AccordionContent>
      アコーディオン1の内容です。
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>アコーディオン2</AccordionTrigger>
    <AccordionContent>
      アコーディオン2の内容です。
    </AccordionContent>
  </AccordionItem>
</Accordion>

複数開く(multiple)

Loading...
<Accordion type="multiple">
  ...
</Accordion>

Props

Accordion

PropTypeDefaultDescription
type*'single' | 'multiple'-単一選択か複数選択か
collapsiblebooleanfalsetype="single"時、全て閉じることを許可
defaultValuestring | string[]-初期展開するアイテム

AccordionItem

PropTypeDefaultDescription
value*string-アイテムの識別値
disabledbooleanfalse無効状態

On this page