Angular Accordion (アコーディオン) コンポーネントの概要

Angular Accordion とは?

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

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

Angular Accordion の例

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

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

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.ts ファイルに IgxAccordionModule をインポートします。

// app.module.ts

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

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

あるいは、16.0.0 以降、IgxAccordionComponent をスタンドアロンの依存関係としてインポートすることも、IGX_ACCORDION_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts
...
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
    selector: 'app-home',
    template: `
    <igx-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>
                Content Panel 1
            </igx-expansion-panel-body>
        </igx-expansion-panel>
    </igx-accordion>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_ACCORDION_DIRECTIVES]
    /* or imports: [IgxAccordionComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Accordion モジュールまたはディレクティブをインポートしたので、igx-accordion とそのパネルの基本構成を開始できます。

Angular 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>

Note

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 をプログラムでそれぞれ縮小および展開できます。

Note

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>

以下は結果です。

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

Ignite UI for Angular 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 リファレンス

その他のリソース

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

Angular Accordion (アコーディオン) コンポーネントの概要

Angular Accordion とは?

Angular Accordion の例

Ignite UI for Angular Accordion を使用した作業の開始

Angular Accordion コンポーネントの使用

Accordion の宣言

Angular Accordion のアニメーション

Note

Note

Angular Accordion テンプレート化の例

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

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

Angular Accordion のスタイル設定

CSS 変数の使用

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

API リファレンス

その他のリソース

テーマ設定

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

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