Accordion

Stablev0.3.0

折りたたみ可能なコンテンツパネル。FAQやセクション化されたコンテンツの表示に最適です。

基本的な使い方

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

Qwik UIとは何ですか？

Qwik UIは、Qwikフレームワーク用に設計された高性能なUIコンポーネントライブラリです。Zero-JSハイドレーションにより、最小限のJavaScriptで高速なユーザー体験を提供します。

他のUIライブラリとの違いは？

Qwik UIは「再開可能性（Resumability）」という概念に基づいており、初期ロード時にJavaScriptを実行せず、ユーザーインタラクション時にのみ必要なコードを読み込みます。これにより、非常に高速なTime to Interactiveを実現します。

カスタマイズは可能ですか？

はい、すべてのコンポーネントはCSS変数とTailwind CSSを使用してスタイリングされており、簡単にカスタマイズできます。デザイントークンを変更することで、ブランドに合わせたテーマを作成できます。

アクセシビリティは考慮されていますか？

はい、すべてのコンポーネントはWAI-ARIAガイドラインに準拠しており、キーボードナビゲーション、スクリーンリーダー対応、適切なコントラスト比などを確保しています。

tsx

class="token keyword">import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Accordion class="token keyword">type=class="token keyword">class="token string">"single" collapsible>
  <class="token tag">AccordionItem value=class="token keyword">class="token string">"item-class="token number">1">
    <class="token tag">AccordionTrigger>質問class="token number">1</class="token tag">AccordionTrigger>
    <class="token tag">AccordionContent>回答class="token number">1</class="token tag">AccordionContent>
  </class="token tag">AccordionItem>
  <class="token tag">AccordionItem value=class="token keyword">class="token string">"item-class="token number">2">
    <class="token tag">AccordionTrigger>質問class="token number">2</class="token tag">AccordionTrigger>
    <class="token tag">AccordionContent>回答class="token number">2</class="token tag">AccordionContent>
  </class="token tag">AccordionItem>
</class="token tag">Accordion>

複数展開

type='multiple'で複数のアイテムを同時に展開可能

主な機能

Zero-JSハイドレーション
アクセシブルなコンポーネント
ダークモード対応
TypeScriptサポート

インストール方法

npm install @qwik-ui/components

サポート

GitHubのIssuesやDiscussionsでサポートを受けられます。

tsx

<class="token tag">Accordion class="token keyword">type=class="token keyword">class="token string">"multiple">
  <class="token tag">AccordionItem value=class="token keyword">class="token string">"features">
    <class="token tag">AccordionTrigger>主な機能</class="token tag">AccordionTrigger>
    <class="token tag">AccordionContent>...</class="token tag">AccordionContent>
  </class="token tag">AccordionItem>
  <class="token tag">AccordionItem value=class="token keyword">class="token string">"installation">
    <class="token tag">AccordionTrigger>インストール方法</class="token tag">AccordionTrigger>
    <class="token tag">AccordionContent>...</class="token tag">AccordionContent>
  </class="token tag">AccordionItem>
</class="token tag">Accordion>

デフォルトで開く

defaultValueで初期状態を指定

デフォルトで開いています

このアコーディオンアイテムは初期状態で開いています。

クリックして開く

このアイテムはクリックで開きます。

Props API

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	単一展開か複数展開か
`collapsible`	`boolean`	`true`	すべて閉じることを許可するか
`defaultValue`	`string \| string[]`	-	デフォルトで開くアイテム

Accessibility

キーボードナビゲーション（Tab、上下矢印、Home、End）対応
Enter/Spaceキーで展開/折りたたみ
aria-expanded で状態を伝達
aria-controls でトリガーとコンテンツを関連付け