Collapsible

Newv0.3.0

展開/折りたたみ可能なコンテンツセクション。詳細情報の表示/非表示を切り替えます。

基本的な使い方

クリックでコンテンツを展開/折りたたみ

詳細を表示

tsx

class="token keyword">import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Collapsible>
  <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"flex items-center justify-between">
    <class="token tag">span>詳細を表示</class="token tag">span>
    <class="token tag">CollapsibleTrigger>
      <class="token tag">Button variant=class="token keyword">class="token string">"ghost" size=class="token keyword">class="token string">"sm">
        <class="token tag">ChevronIcon />
      </class="token tag">Button>
    </class="token tag">CollapsibleTrigger>
  </class="token tag">div>
  <class="token tag">CollapsibleContent>
    <class="token tag">p>詳細コンテンツ</class="token tag">p>
  </class="token tag">CollapsibleContent>
</class="token tag">Collapsible>

制御モード

外部から開閉状態を制御

状態: 閉

tsx

class="token keyword">const isOpen = class="token function">useSignal(class="token keyword">false);

<class="token tag">Button onClick$={() => isOpen.value = !isOpen.value}>
  Toggle
</class="token tag">Button>

<class="token tag">Collapsible
  open={isOpen.value}
  onOpenChange$={(v) => isOpen.value = v}
>
  <class="token tag">CollapsibleContent>
    <class="token tag">p>コンテンツ</class="token tag">p>
  </class="token tag">CollapsibleContent>
</class="token tag">Collapsible>

使用例

実際の使用シーン

高度な設定

追加の設定オプション

src

3 items

index.tsx

App.tsx

main.css

Props API

Prop	Type	Default	Description
`open`	`boolean`	`false`	開閉状態
`onOpenChange$`	`(open: boolean) => void`	-	状態変更時のコールバック
`disabled`	`boolean`	`false`	無効状態

Accessibility

aria-expanded でトリガーの状態を伝達
aria-controls でトリガーとコンテンツを関連付け
Enter/Space キーでトグル可能
コンテンツは aria-hidden で適切に隠される