詳細ガイド
Angular Aria

アコーディオン

概要

アコーディオンは、関連するコンテンツを展開・折りたたみ可能なセクションに整理し、ページのスクロールを減らし、ユーザーが関連情報に集中するのを助けます。各セクションには、トリガーボタンとコンテンツパネルがあります。トリガーをクリックすると、関連するパネルの表示/非表示が切り替わります。

使い方

アコーディオンは、ユーザーが通常一度に1つのセクションを表示する必要がある場合に、コンテンツを論理的なグループに整理するのに適しています。

アコーディオンを使用する場合:

  • 複数の質問と回答を持つFAQを表示する
  • 長いフォームを管理しやすいセクションに整理する
  • コンテンツの多いページでのスクロールを減らす
  • 関連情報を段階的に開示する

アコーディオンを避けるべき場合:

  • ナビゲーションメニューを構築する（代わりにMenuコンポーネントを使用してください）
  • タブ付きインターフェースを作成する（代わりにTabsコンポーネントを使用してください）
  • 単一の折りたたみ可能なセクションを表示する（代わりにdisclosureパターンを使用してください）
  • ユーザーが複数のセクションを同時に見る必要がある（異なるレイアウトを検討してください）

機能

  • 展開モード - 一度に1つまたは複数のパネルを開けるかどうかを制御します
  • キーボードナビゲーション - 矢印キー、Home、Endを使用してトリガー間を移動します
  • 遅延レンダリング - コンテンツはパネルが最初に展開されたときにのみ作成され、初期読み込みのパフォーマンスを向上させます
  • 無効状態 - グループ全体または個々のトリガーを無効にします
  • フォーカス管理 - 無効化されたアイテムがキーボードフォーカスを受け取れるかどうかを制御します
  • プログラムによる制御 - コンポーネントのコードからパネルを展開、折りたたみ、または切り替えます
  • RTLサポート - 右から左へ記述する言語を自動的にサポートします

例

単一展開モード

[multiExpandable]="false"を設定すると、一度に開けるパネルが1つだけになります。新しいパネルを開くと、以前に開いていたパネルは自動的に閉じます。

このモードは、FAQや、ユーザーに一度に1つの回答に集中してもらいたい場合に適しています。

複数展開モード

[multiExpandable]="true"を設定すると、複数のパネルを同時に開くことができます。ユーザーは他のパネルを閉じることなく、必要なだけパネルを展開できます。

このモードは、フォームのセクションや、ユーザーが複数のパネルにわたるコンテンツを比較する必要がある場合に便利です。

NOTE: multiExpandable入力はデフォルトでtrueです。単一展開の動作が必要な場合は、明示的にfalseに設定してください。

無効化されたアコーディオンアイテム

disabled入力を使用して特定のトリガーを無効にします。アコーディオンのグループでsoftDisabled入力を使用し、キーボードナビゲーション中に無効化されたアイテムの動作を制御します。

[softDisabled]="true"（デフォルト）の場合、無効化されたアイテムはフォーカスを受け取れますが、アクティブにはできません。[softDisabled]="false"の場合、無効化されたアイテムはキーボードナビゲーション中に完全にスキップされます。

コンテンツの遅延レンダリング

ngAccordionContentディレクティブをng-templateで使用すると、パネルが最初に展開されるまでコンテンツのレンダリングを遅延させることができます。これにより、画像、チャート、または複雑なコンポーネントなどの重いコンテンツを持つアコーディオンのパフォーマンスが向上します。

<div ngAccordionGroup>
  <div>
    <button ngAccordionTrigger panelId="item-1">Trigger Text</button>
    <div ngAccordionPanel panelId="item-1">
      <ng-template ngAccordionContent>
        <!-- このコンテンツは、パネルが最初に開かれたときにのみレンダリングされます -->
        <img src="large-image.jpg" alt="Description" />
        <app-expensive-component />
      </ng-template>
    </div>
  </div>
</div>

デフォルトでは、パネルが折りたたまれた後もコンテンツはDOMに残ります。パネルが閉じたときにDOMからコンテンツを削除するには、[preserveContent]="false"を設定します。

API

AccordionGroup

アコーディオンアイテムのグループのキーボードナビゲーションと展開動作を管理するコンテナディレクティブです。

Inputs

プロパティ 型 デフォルト 説明
disabled boolean false グループ内のすべてのトリガーを無効にします
multiExpandable boolean true 複数のパネルを同時に展開できるかどうか
softDisabled boolean true trueの場合、無効化されたアイテムはフォーカス可能です。falseの場合、スキップされます
wrap boolean false キーボードナビゲーションが最後のアイテムから最初のアイテムへ、またはその逆にラップするかどうか

Methods

メソッド パラメータ 説明
expandAll none すべてのパネルを展開します（multiExpandableがtrueの場合のみ機能します）
collapseAll none すべてのパネルを折りたたみます

AccordionTrigger

パネルの表示/非表示を切り替えるボタン要素に適用されるディレクティブです。

Inputs

プロパティ 型 デフォルト 説明
id string auto トリガーの一意の識別子
panelId string — **必須。**関連付けられたパネルのpanelIdと一致する必要があります
disabled boolean false このトリガーを無効にします
expanded boolean false パネルが展開されているかどうか（双方向バインディングをサポート）

シグナル

プロパティ 型 説明
active Signal<boolean> トリガーが現在フォーカスを持っているかどうか

Methods

メソッド パラメータ 説明
expand none 関連付けられたパネルを展開します
collapse none 関連付けられたパネルを折りたたみます
toggle none パネルの展開状態を切り替えます

AccordionPanel

折りたたみ可能なコンテンツを含む要素に適用されるディレクティブです。

Inputs

プロパティ 型 デフォルト 説明
id string auto パネルの一意の識別子
panelId string — **必須。**関連付けられたトリガーのpanelIdと一致する必要があります
preserveContent boolean true パネルが折りたたまれた後もコンテンツをDOMに保持するかどうか

シグナル

プロパティ 型 説明
visible Signal<boolean> パネルが現在展開されているかどうか

Methods

メソッド パラメータ 説明
expand none このパネルを展開します
collapse none このパネルを折りたたみます
toggle none 展開状態を切り替えます

AccordionContent

遅延レンダリングを有効にするために、アコーディオンパネル内のng-templateに適用される構造ディレクティブです。

このディレクティブには、input、output、メソッドはありません。ng-template要素に適用してください:

<div ngAccordionPanel panelId="item-1">
  <ng-template ngAccordionContent>
    <!-- Content here is lazily rendered -->
  </ng-template>
</div>