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

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

ライブ デモ

構造

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

igx-accordion                         // ホスト - 一連の展開パネルを管理します
└─ igx-expansion-panel                 // 子パネル
   ├─ igx-expansion-panel-header       // パネル ヘッダーのコンテナー
   │  ├─ igx-expansion-panel-title     // パネル ヘッダーのタイトル
   │  ├─ igx-expansion-panel-description // 任意のヘッダーの説明
   │  └─ igx-expansion-panel-icon      // 任意のカスタム展開/縮小アイコン
   └─ igx-expansion-panel-body         // 展開可能なパネル コンテンツ

作業の開始

Accordion は、Angular アプリケーションにインストールされている Ignite UI for Angular のバージョンで使用します。スタンドアロンの Accordion ディレクティブをインポートする前に、共通の作業の開始トピックを完了してください。

コンポーネントを使用する前に、スタンドアロンの Accordion ディレクティブをインポートします。

import { Component } from '@angular/core';
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular/accordion';

@Component({
  selector: 'app-accordion',
  imports: [IGX_ACCORDION_DIRECTIVES],
  templateUrl: './accordion.component.html',
})
export class AccordionComponent {}

使用方法

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

単一展開

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

<igx-accordion [singleBranchExpand]="true">
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 1</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 2</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

プログラムによる展開

collapseAll() と expandAll() を使用して、Accordion のパネルをプログラムで縮小または展開します。

<button type="button" (click)="accordion.expandAll()">Show All</button>
<button type="button" (click)="accordion.collapseAll()">Hide All</button>

<igx-accordion #accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 1</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 1</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Title Panel 2</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Content Panel 2</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

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

タイトル要素と説明要素を使用してパネル ヘッダーをカスタマイズし、展開可能なコンテンツをパネル本文内に配置します。

<igx-accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Billing</igx-expansion-panel-title>
      <igx-expansion-panel-description>Payment and invoice settings</igx-expansion-panel-description>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <p>Update payment methods, billing contacts, and invoice delivery options.</p>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

アコーディオンのネスト

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

<igx-accordion>
  <igx-expansion-panel>
    <igx-expansion-panel-header>
      <igx-expansion-panel-title>Account Settings</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
      <igx-accordion>
        <igx-expansion-panel>
          <igx-expansion-panel-header>
            <igx-expansion-panel-title>Notifications</igx-expansion-panel-title>
          </igx-expansion-panel-header>
          <igx-expansion-panel-body>
            <p>Configure email and product notification preferences.</p>
          </igx-expansion-panel-body>
        </igx-expansion-panel>
      </igx-accordion>
    </igx-expansion-panel-body>
  </igx-expansion-panel>
</igx-accordion>

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

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

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

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

プロパティ

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

メソッド

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

スタイル設定

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

Sass テーマ

expansion-panel-theme 関数を使用してカスタムの Expansion Panel テーマを作成し、生成されたトークンをコンポーネントのスタイルシートに含めます。

@use "igniteui-angular/theming" as *;

$custom-panel-theme: expansion-panel-theme(
  $header-background: #011627,
  $body-background: #f0ece7,
  $expanded-margin: 10px
);

:host {
  @include tokens($custom-panel-theme);
}

スタイル設定変数

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 Angular のアクセシビリティ サポートを文書化しています。Accordion の準拠の根拠は、インタラクティブなヘッダーと領域を提供する子の ExpansionPanel コンポーネントにあります。

ユーザー側の責任:

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

API リファレンス

依存関係

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

その他のリソース

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

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

関連コンポーネント

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

FAQ