Angular Accordion コンポーネントの概要

Angular Accordion とは?

Angular Accordion は、単一のコンテナーに表示されるクリック可能なヘッダーと関連するコンテンツ セクションを含む垂直方向に展開可能なパネルを構築するための GUI コンポーネントです。Accordion は、単一のページのコンテンツの複数のセクションでスクロールする必要性を軽減するためによく使用されます。キーボード ナビゲーションと基になるパネルの展開状態を制御する API を提供します。

ユーザーは、サムネイルやラベルなどの項目のリスト間で操作および移動できます。含まれる情報を表示するために、各項目を切り替えることができます (展開または縮小)。構成に応じて、一度に 1 つまたは複数の展開されている項目があります。

Angular Accordion の例

以下は FAQ セクションの基本的な Angular Accordion の例です。アコーディオンとして動作し、個別に動作します。複数のパネルを同時に展開しながら、各テキスト ブロックをシングルクリックで切り替えることができます。これにより、自動的に展開および縮小パネル間を前後に移動することなく、情報をより簡単に読み取ることができます。このパネルは、以前に開いたセクションを毎回非表示にします。

ここでは、igx-accrodion とその展開パネルを定義する方法を確認できます。このサンプルは、2 種類の展開動作も示します。切り替えボタンは singleBranchExpand プロパティを設定し、一度に展開する単一ブランチと複数ブランチを切り替えます。

Angular Accordion のインストール方法

Ignite UI for Angular Accordion で作業を開始

Ignite UI for Angular Accordion コンポーネントを初期化するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、はじめにトピックををご覧ください。

次に、app.module ファイルに IgxAccordionModule をインポートします。

// app.module.ts

...
import { IgxAccordionModule } from 'igniteui-angular';
// import { IgxAccordionModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAccordionModule],
    ...
})
export class AppModule {}

Angular Material Accordion モジュールをインポート後、igx-accordion とそのパネルの基本設定を開始します。

使用方法

IgxAccordionComponent の各セクションは、展開パネルを使用して定義されます。 パネルには disabled、collapsed、および animationSettings プロパティがあり、要件に応じてパネルの状態を構成できます。

Accordion の宣言

Accordion は、その内部で宣言されたすべての igx-expansion-panel をラップします。

<igx-accordion #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>
            Content Panel 1
        </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>
            Content Panel 2
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</igx-accordion>

panels アクセサーを使用して、igx-accordion のすべての子の展開パネルを含むコレクションへの参照を取得できます。

@ViewChild('accordion', { static: true })
public accordion!: IgxAccordionComponent;

this.accordion.panels;

上記で示したように、singleBranchExpand プロパティを使用すると、一度に 1 つまたは複数のパネルを展開できるかどうかを設定できます。

Angular Accordion のアニメーション

Angular Accordion は、パネルの展開と縮小の両方のアニメーションをサポートします。アニメーションの動作をカスタマイズできます。通常、アニメーションは各展開パネルに個別に設定できます。ただし、IgxAccordionComponent レベルで一度にすべてのパネルに適用することもできます。これにより、ユーザーは IgxAccordionComponent の animations プロパティですべてのセクションのアニメーションを一度に無効にできます。

アニメーションに関して、2 つのオプションがあります。最初に、Accordion コンポーネントの animationSettings プロパティを設定します。

import { useAnimation } from '@angular/animations';
import { slideInLeft, slideOutRight } from 'igniteui-angular';
// import { slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    ...
})
export class AccordionComponent {
    public animationSettingsCustom = {
        closeAnimation: useAnimation(slideOutRight, {
            params: {
                duration: '100ms',
                toPosition: 'translateX(25px)'
            }
        }),
        openAnimation: useAnimation(slideInLeft, {
            params: {
                duration: '500ms',
                fromPosition: 'translateX(-15px)',
                startOpacity: 0.1
            }
        })
    };
}

ビルトイン アニメーション スイートの slideInLeft アニメーションと slideOutRight アニメーションを使用して、コンテンツを折りたたむとコンポーネントのコンテンツが左側から表示され、右側に消えるようにします。アニメーションのパラメーターをオーバーライドして、アニメーションをさらにカスタマイズします。

以下のスニペットは、アニメーション設定をコンポーネントに渡す方法を示しています。

<igx-accordion #accordion [animationSettings]="animationSettingsCustom">
    ...
</igx-accordion>

注: IgxAccordionComponent のアニメーションを無効にするには、animationSettings を null に設定します。

または、各展開パネルの animationSettings 入力を設定することもできます。

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

collapseAll および expandAll メソッドを使用すると、IgxAccordion のすべての IgxExpansionPanel をプログラムでそれぞれ縮小および展開できます。

注: singleBranchExpand プロパティが true に設定されている場合、expandAll メソッドを呼び出すと、最後のパネルのみが展開されます。

Angular Accordion テンプレート化の例

Angular Accordion コンポーネントを使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。 以下のサンプルは、IgxExpansionPanel の組み込みテンプレート機能を使用して詳細なフィルタリング オプションを実装する方法を示しています。

ネストされた Angular Accoridon のシナリオ

以下の Angular Accordion 例では、この一般的なアプリケーション シナリオを説明するために、複雑な FAQ セクションを作成します。サンプルでネストされた IgxAccordionComponent は、展開パネルの本体内に Accordion を追加することによって実現されます。

<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>
            <igx-accordion #childAccordion>
                <igx-expansion-panel>
                    <igx-expansion-panel-header>
                        <igx-expansion-panel-title>Title Nested Panel 1</igx-expansion-panel-title>
                    </igx-expansion-panel-header>
                    <igx-expansion-panel-body>
                        Content Nested Panel 1
                    </igx-expansion-panel-body>
                </igx-expansion-panel>
                ...
            </igx-accordion>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    ...
</igx-accordion>

以下は結果です。

キーボード ナビゲーション

Angular Material Accordion のキーボード ナビゲーションは、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にパネル間を移動できます。IgxAccordionComponent ナビゲーションは W3C アクセシビリティ標準に準拠しており、便利に使用できます。

キーの組み合わせ

• Tab - フォーカスを最初 (フォーカスが Accordion の前にある場合) /次のパネルに移動します
• Shift + Tab - フォーカスを最後 (フォーカスが Accordion の後にある場合) /前のパネルに移動します
• 下矢印 - フォーカスを下のパネルに移動します
• 上矢印 - フォーカスを上のパネルに移動します
• Alt + 下矢印 - Accordion でフォーカスされたパネルを展開します
• Alt + 上矢印 - Accordion のフォーカスされたパネルを縮小します
• Shift + Alt + 下矢印 - 有効なすべてのパネルを展開します (singleBranchExpand が true に設定されている場合、最後の有効なパネルを展開します)
• Shift + Alt + 上矢印 - 有効なすべてのパネルを縮小します
• Home - Accordion の最初の有効なパネルに移動します
• END - Accordion の最後の有効なパネルに移動します

Angular Accordion のスタイル設定

Accordion は、基になるパネルのコンテナーとしてのみ機能します。スタイルは、IgxExpansionPanel トピックのスタイル設定セクションで説明されているように、パネルのテーマから直接適用できます。

設計上、igx-accordion 内に配置される場合、展開されたパネルにマージンが設定されます。変更するために、igx-expansion-panel テーマ内で公開されるプロパティがあります。 テーマ エンジンによって公開される関数を利用するには、スタイル ファイルに index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

expansion-panel-theme を拡張する新しいテーマを作成し、$expanded-margin パラメーターを受け取ります。

$custom-panel-theme: expansion-panel-theme(
    $expanded-margin: 0px
);

CSS 変数の使用

最後にコンポーネントのテーマを含めます。

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

テーマ オーバーライドの使用

Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep を :host セレクターでラップしてください。

:host {
    ::ng-deep {
        @include expansion-panel($custom-panel-theme);    
    }
}

API リファレンス

• IgxAccordion API
• IgxExpansionPanel API
• IgxExpansionPanelHeader API
• IgxExpansionPanelBody API
• IgxExpansionPanel スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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