Angular Expansion Panel (展開パネル) コンポーネントの概要

    Ignite UI for Angular は、最も便利で使いやすいレイアウト コンポーネントの 1 つである Angular Expansion Panel を提供します。この機能豊富なコンポーネントは、展開/縮小可能な詳細な概要ビューを作成するために使用されます。コンテンツには、Angular Expansion Panel のアニメーション、テキスト、アイコン、ヘッダー、操作バー、およびその他の要素を含めることができます。

    Ignite UI Expansion Panel igx-expansion-panel は、軽量な Angular アコーディオン コンポーネントで、縮小または展開のどちらかの状態でレンダリングできます。Angular の Expansion Panel は、マウス クリックまたはキーボード操作によって切り替えることができます。複数の Angular 展開パネルを組み合わせて Angular アコーディオンにすることもできます。

    Angular Expansion Panel の例

    Ignite UI Angular を使用して、この単純な Angular Expansion Panel の例を作成しました。以下にサンプルの動作を確認できます。

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

    Ignite UI for Angular Expansion Panel コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular

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

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

    // app.module.ts
...
import { IgxExpansionPanelModule } from 'igniteui-angular';
// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package

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

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

    // home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>
            Golden Retriever
            </igx-expansion-panel-title>
            <igx-expansion-panel-description>
            Medium-large gun dog
            </igx-expansion-panel-description>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, 
            such as ducks and upland game birds, during hunting and shooting parties. 
            The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. 
            Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards.
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_EXPANSION_PANEL_DIRECTIVES]
    /* or imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] */
})
export class HomeComponent {}

    Ignite UI for Angular Expansion Panel モジュールまたはディレクティブをインポートしたので、igx-expansion-panel コンポーネントの使用を開始できます。

    Angular Expansion Panel の使用

    以下の表は、Angular Expansion Panel で使用可能なすべてのマークアップ要素を示します。

    タグ名 説明
    igx-expansion-panel コンポーネント ホスト - ヘッダーとボディを格納します。
    igx-expansion-panel-header コンポーネント ヘッダーを格納します。常に表示されます。タイトル、説明、およびその他の追加のコンテンツを保存します。
    igx-expansion-panel-title 展開パネルのタイトルを設定します。
    igx-expansion-panel-description 短い概要を提供するために使用できます。説明は常にタイトルの後に表示されます (タイトルを設定した場合)。
    igx-expansion-panel-icon デフォルトの展開/縮小アイコンを変更します。
    igx-expansion-panel-body これは展開可能なコンテナーで、パネルの展開時のみ表示されます。

    プロパティ バインディングおよびイベント

    ロジックをコンポーネントに追加することによりパネルの現在の状態に基づいて igx-expansion-panel-description の表示/非表示を切り替えることができます。 これには、説明をコントロール collapsed プロパティへバインドします。

    // in expansion-panel.component.ts
import { IgxExpansionPanelComponent } from 'igniteui-angular';
// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header>
        Golden Retriever
        <igx-expansion-panel-description *ngIf="panel.collapsed">
            Medium-large gun dog
        </igx-expansion-panel-description>
    </igx-expansion-panel-header>
    ...
</igx-expansion-panel>

    以下のサンプル コードは、コンポーネントが縮小状態の場合のみ短い説明文を表示する場合の例です。 コンポーネントの状態に応じてより複雑な機能を追加する場合、イベント エミッターにバインドすることもできます。

    // in expansion-panel.component.ts

@Component({...})
export class ExpansionPanelComponent {
    ...
    public handleExpansion(args: {event: Event}): void {
        ... // Some functionality
    }
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel (onExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)"></igx-expansion-panel>

    以下は結果です。

    コンポーネントのカスタマイズ

    IgxExpansionPanelComponent によってヘッダーを簡単にカスタマイズできます。 ヘッダー アイコンの位置は、igx-expansion-panel-header の iconPosition 入力で設定します。アイコンの位置の可能なオプションは、left、right、none です。次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
    ...
</igx-expansion-panel>
    Note

    iconPosition プロパティは、RTL で使用できます。たとえば、right に表示するよう設定したアイコンは、RTL 設定時にヘッダーの左端に表示されます。

    コントロールのトグル状態のデフォルト アイコンをテンプレート化できます。 igx-expansion-panel-icon タグでコンテンツを渡します。

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'">
        ...
        <igx-expansion-panel-icon>
            <span class="example-icon" *ngIf="panel.collapsed">Show More</span>
            <span class="example-icon" *ngIf="!panel.collapsed">Show Less</span>
        </igx-expansion-panel-icon>
    </igx-expansion-panel-header>   
    ...
</igx-expansion-panel>

    Angular Expansion Panel は、パネルの縮小時に「更に表示」を描画し、完全に展開した後に「簡易表示」を描画します。

    IgxExpansionPanel コントロールを使用すると、あらゆる種類のコンテンツを igx-expansion-panel-body 内に追加できます。IgxGrid、IgxCombo、チャート、その他の展開パネルもレンダリングできます。

    展開パネルの本体にいくつかの基本的なマークアップを追加します。

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel-body>
    <div class="example-content">
        <img [src]="imgSource" alt="dog-image">
        The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties. The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards.
        <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a>
    </div>
</igx-expansion-panel-body>
...

    以下は上記の変更の結果です。

    スタイル設定

    Angular Expansion Panel のデモ

    パレットおよび色

    はじめに、後でコンポーネントに渡すカスタム パレットを作成します。

    // In real life, this should be in our main sass file so we can share the palette between all components. 
// In our case, it's in the component SCSS file "expansion-styling.component.scss".

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Add your brand colors.
$my-primary-color:#353a4b;
$my-secondary-color: #ffd351;

// Create custom palette.
$my-color-palette: palette(
    $primary: $my-primary-color,
    $secondary: $my-secondary-color
);

    コンポーネント テーマの作成

    コンポーネント テーマを作成し、上記のスニペットから $my-color-palette パレットを渡します。

    // In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
    // pass `$my-color-palette` palette.
    $palette: $my-color-palette,

    // Styling parameters.
    $header-background: color($my-color-palette, "primary", 700),
    $header-focus-background: color($my-color-palette, "primary", 700),
    $header-title-color: color($my-color-palette, "secondary"),
    $header-icon-color: color($my-color-palette, "secondary"),
    $body-background: color($my-color-palette, "primary", 700),
    $body-color: color($my-color-palette, "secondary" 100),
    $border-radius: .5
);
    Note

    テーマ エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、API ヘルプを参照してください。

    コンポーネント テーマの適用

    コンポーネント テーマを適用するには、css-vars ミックスインをインクルードし、$custom-panel-theme マップを渡します。

    // In expansion-styling.component.scss
// Pass our custom-panel-theme to `igx-expansion-panel` mixin.
// The `:host` here makes sure that all the theming will affect only this component.
:host {
  @include css-vars($custom-panel-theme);
}
    Note

    Internet Explorer 11 をサポートする場合は、css-vars の代わりにコンポーネント ミックスインの igx-expansion-panel を使用する必要があります。コンポーネントの ViewEncapsulation が Emulatedであるため、::ng-deep を使用してカプセル化を解除する必要があります。 カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含める必要があります。

    // In expansion-styling.component.scss
// The `:host` here makes sure that all the theming will affect only this component after the ViewEncapsulation Penetration.
:host {
    // Penetrate the ViewEncapsulation.
    ::ng-deep {
        @include expansion-panel($custom-panel-theme);
    }
}

    Ignite UI テーマ エンジンの使用方法の詳細については、こちらをクリックしてください

    Angular Expansion Panel のアニメーション

    特定のアニメーションの使用

    コンポーネントの展開や縮小時にデフォルトのアニメーション以外を使用することも可能です。 上記のように igxExpansionPanel がすでに app.module.ts にインポートされていると仮定した場合、カスタム アニメーション設定オブジェクトを作成して Ignite UI for Angular Expansion Panel で使用するために設定します。useAnimation メソッドと特定のアニメーションが必要でアニメーションの設定をインポートして次のようなアニメーションの設定を定義します。

    // expansion-panel.component.ts 内
import { useAnimation } from '@angular/animations';
import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
// import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;

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

    public collapsed() {
        return this.panel && this.panel.collapsed;
    }
}

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

    サンプルは、ユーザー情報とキー ポイントをここに表示してアニメーション設定をコンポーネントに渡します: [animationSettings] = "animationSettingsCustom"

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel [animationSettings] = "animationSettingsCustom" class="my-expansion-panel">
    <igx-expansion-panel-header>
        <igx-expansion-panel-title class="sample-title">Angular</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
        Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
    </igx-expansion-panel-body>
</igx-expansion-panel>
...

    以下は結果です。

    複数パネルの場合

    igxAccordion トピックを参照してください。

    API リファレンス

    テーマの依存関係