Accordion (アコーディオン) コンポーネント

Ignite UI for React Accordion は、展開可能なコンテンツ パネルを単一の垂直方向のコンテナーに整理するためのレイアウト コンポーネントです。

ライブ デモ

構造

Accordion の構造は、1 つ以上の子の Expansion Panel を持つ Accordion コンテナーで構成されます。

igc-accordion                    // ホスト - 一連の展開パネルを管理します
└─ igc-expansion-panel            // 子パネル
   ├─ [slot="title"]              // パネル ヘッダーのタイトル
   ├─ [slot="subtitle"]           // 任意のヘッダー サブタイトル
   ├─ [slot="indicator"]          // 縮小時/デフォルトのカスタム インジケーター
   ├─ [slot="indicator-expanded"] // 任意の展開状態用カスタム インジケーター
   └─ default slot                // 展開可能なパネル コンテンツ

作業の開始

Accordion は、アプリケーションにインストールされている Ignite UI for React のバージョンで使用します。フレームワーク固有のインポートや登録を追加する前に、共通の作業の開始トピックを完了してください。

Accordion をレンダリングする前に、React ラッパーとテーマ スタイルシートをインポートします。

import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

使用方法

Accordion は、1 つ以上の IgrExpansionPanel コンポーネントを IgrAccordion コンテナー内に配置して構築します。

単一展開

SingleExpand を設定して、一度に 1 つのパネルのみを開く動作と複数のパネルを開く動作を切り替えます。

<IgrAccordion singleExpand={true}>
  <IgrExpansionPanel>
    <span slot="title">Title Panel 1</span>
    <p>Content Panel 1</p>
  </IgrExpansionPanel>
  <IgrExpansionPanel>
    <span slot="title">Title Panel 2</span>
    <p>Content Panel 2</p>
  </IgrExpansionPanel>
</IgrAccordion>

プログラムによる展開

HideAll と ShowAll を使用して、使用可能なすべてのパネルをプログラムで縮小または展開します。

const accordionRef = useRef<IgrAccordion>(null);

return (
  <>
    <IgrButton onClick={() => accordionRef.current?.showAll()}>Show All</IgrButton>
    <IgrButton onClick={() => accordionRef.current?.hideAll()}>Hide All</IgrButton>

    <IgrAccordion ref={accordionRef}>
      <IgrExpansionPanel>
        <span slot="title">Title Panel 1</span>
        <p>Content Panel 1</p>
      </IgrExpansionPanel>
      <IgrExpansionPanel>
        <span slot="title">Title Panel 2</span>
        <p>Content Panel 2</p>
      </IgrExpansionPanel>
    </IgrAccordion>
  </>
);

パネル コンテンツのカスタマイズ

基になる IgrExpansionPanel のスロットを通じて、パネルのヘッダーとコンテンツをカスタマイズします。

<IgrAccordion>
  <IgrExpansionPanel open>
    <span slot="title">Billing</span>
    <span slot="subtitle">Payment and invoice settings</span>
    <p>Update payment methods, billing contacts, and invoice delivery options.</p>
  </IgrExpansionPanel>
</IgrAccordion>

アコーディオンのネスト

グループ化された開閉可能なコンテンツの第 2 階層が必要な場合は、Expansion Panel 内に Accordion をネストします。

<IgrAccordion>
  <IgrExpansionPanel open>
    <span slot="title">Workspace Settings</span>
    <IgrAccordion>
      <IgrExpansionPanel>
        <span slot="title">Notifications</span>
        <p>Configure email and product notification preferences.</p>
      </IgrExpansionPanel>
    </IgrAccordion>
  </IgrExpansionPanel>
</IgrAccordion>

使用すべき場合と使用すべきでない場合

使用すべき場合: セカンダリ コンテンツ、FAQ エントリ、設定グループ、またはユーザーが必要に応じて展開するその他の関連する垂直方向のセクションを整理する必要がある場合は、Accordion を使用します。パネルのタイトルは短く説明的なものにし、ユーザーが一度に 1 つのセクションに集中すべき場合は単一展開の動作を有効にしてください。

使用すべきでない場合: 複数のパネルをまとめて管理する連携されたコンテナーではなく、単一のスタンドアロンの展開可能なセクションが必要な場合は、Expansion Panel を使用してください。重要なプライマリ コンテンツを非表示にしたり、関連のないセクションをグループ化したりするために Accordion を使用しないでください。

使用すべき	使用すべきでない

プロパティ

Accordion はコンテナー レベルのコントロールを公開します。パネル固有の状態は、各 IgrExpansionPanel で構成します。

メソッド

コードからパネルの状態を変更する必要がある場合は、Accordion のメソッドを使用します。

スタイル設定

React Accordion は、CSS パーツと Ignite UI テーマ変数を使用してスタイル設定します。

Accordion のスタイルを設定するには、子の IgrExpansionPanel コンポーネントが公開するパーツをターゲットにします。

スタイル設定変数

Expansion Panel のパーツをスタイル設定する際は、Ignite UI for React テーマの CSS 変数を値として使用します。

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(indicator),
igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}

CSS パーツ

Tailwind によるスタイル設定

スタイル設定をコンポーネントのマークアップの近くに置きたい場合は、CSS パーツ セレクターと組み合わせて Tailwind ユーティリティ クラスを使用します。

アクセシビリティ

Accordion は、パネル間でフォーカスを移動し、パネルの展開状態を変更するためのキーボード インタラクションをサポートしています。

キーボード インタラクション

以下のキーボード ショートカットを使用して、Accordion 内を移動し、パネルを開いたり閉じたりします。

スクリーン リーダー / ARIA

Accordion のアクセシビリティ セマンティクスは、子の Expansion Panel とそのヘッダーを通じて提供されます。

• 各パネル ヘッダーは role="button"、aria-expanded、および aria-controls を公開します。
• 各パネル本文は role="region" と、aria-labelledby または aria-label によるラベルを公開します。
• 支援技術が意味のあるラベルを読み上げられるように、各パネルには明確なタイトル テキストを使用します。
• パネル本文内のインタラクティブなコンテンツは、論理的なタブ順序に保ちます。

アクセシビリティ準拠

インフラジスティックスは、アクセシビリティ準拠 トピックで、Section 508 および WCAG 2.1 ガイドライン領域における Ignite UI for React のアクセシビリティ サポートを文書化しています。Accordion の準拠の根拠は、インタラクティブなヘッダーと領域を提供する子の IgrExpansionPanel コンポーネントにあります。

ユーザー側の責任:

• 各開閉領域の背後にあるコンテンツを説明するパネル タイトルを提供します。
• 周囲のページ レイアウトで論理的なフォーカス順序を維持します。
• カスタム スタイル設定は、アプリケーションのコントラストおよびフォーカス インジケーターの要件に照らして検証します。

API リファレンス

依存関係

Accordion は、表示されるセクションのために IgrExpansionPanel に依存しています。

Accordion は、デフォルトの外観について共通のテーマ スタイルシートにも依存しています。

その他のリソース

Ignite UI for React Accordion のサポート、ソース、および関連するレイアウト ガイダンスについては、これらのリソースを使用してください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)

関連コンポーネント

• Expansion Panel - Accordion を構成する縮小可能なセクションです。個々のパネルの構成については、このトピックを参照してください。

FAQ