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 の例を作成しました。以下にサンプルの動作を確認できます。

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxExpansionPanelModule
 } from "igniteui-angular";
import { ExpansionPanelSample1Component } from "./expansion-sample-1/expansion-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ExpansionPanelSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxExpansionPanelModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxExpansionPanelComponent } from 'igniteui-angular';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-expansion-sample-1',
    styleUrls: ['./expansion-sample-1.component.scss'],
    templateUrl: './expansion-sample-1.component.html'
})
export class ExpansionPanelSample1Component {
    @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true })
    public panel: IgxExpansionPanelComponent;
}
tsコピー

<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.[3] 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>

htmlコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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 {}
typescript

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;
}
typescript

<!-- 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>
html

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

// in expansion-panel.component.ts

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

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

以下は結果です。

EXAMPLE

MODULES

TS

HTML

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxExpansionPanelModule,
	IgxToastModule
 } from "igniteui-angular";
import { ExpansionPanelSample2Component } from "./expansion-sample-2/expansion-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ExpansionPanelSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxExpansionPanelModule,
	IgxToastModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import {
    IgxExpansionPanelComponent, IgxToastComponent
} from 'igniteui-angular';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-expansion-sample-2',
    styleUrls: ['./expansion-sample-2.component.scss'],
    templateUrl: './expansion-sample-2.component.html'
})
export class ExpansionPanelSample2Component {
    @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true })
    public panel: IgxExpansionPanelComponent;
    @ViewChild(IgxToastComponent, { read: IgxToastComponent, static: true })
    public eventToast: IgxToastComponent;
    public readMore = 'https://en.wikipedia.org/wiki/Hummingbird';
    public handleExpansion(evt?: {event: Event}) {
        this.eventToast.close();
        console.log('Expanded event thrown ', (evt ? 'with event: ' + evt.event : 'with no event'));
        this.eventToast.open('Expanded Event Fired!');
    }

    public handleCollapse(evt?: {event: Event}) {
        this.eventToast.close();
        console.log('Collapsed event thrown ', (evt ? 'with event: ' + evt.event : 'with no event'));
        this.eventToast.open('Collapsed Event Fired!');
    }
}
tsコピー

<igx-expansion-panel (contentExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)">
    <igx-expansion-panel-header>
        <igx-expansion-panel-title>
            Golden Retriever
        </igx-expansion-panel-title>
        <igx-expansion-panel-description *ngIf="panel.collapsed">
            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.[3] 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>

<igx-toast [displayTime]="1500" #eventToast></igx-toast>
htmlコピー

Edit in: CodesandboxStackBlitz

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

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

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

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>
...
html

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxAvatarModule,
	IgxToastModule,
	IgxExpansionPanelModule
 } from "igniteui-angular";
import { ExpansionPanelSample3Component } from "./expansion-sample-3/expansion-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ExpansionPanelSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxAvatarModule,
	IgxToastModule,
	IgxExpansionPanelModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxExpansionPanelComponent } from 'igniteui-angular';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-expansion-sample-3',
    styleUrls: ['./expansion-sample-3.component.scss'],
    templateUrl: './expansion-sample-3.component.html'
})

export class ExpansionPanelSample3Component {
    @ViewChild(IgxExpansionPanelComponent, { read: IgxExpansionPanelComponent, static: true })
    public panel: IgxExpansionPanelComponent;
    public imgSource = 'https://i.ibb.co/6ZdY7cn/Untitled-design-3.png';
    public readMore = 'https://en.wikipedia.org/wiki/Golden_Retriever';
}
tsコピー

<div class="sample-holder">
    <igx-expansion-panel class="my-expansion-panel">
        <igx-expansion-panel-header [iconPosition]="'right'">
            <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-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-body>
            <div class="example-content">
                <img height="100" [src]="imgSource" alt="">
                <span>
                    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.[3] 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.
                </span>
                <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a>
            </div>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</div>
htmlコピー

.sample-holder {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

.my-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    border: 1px solid rgba(171, 171, 171, 0.3)
}

.example-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid rgba(171, 171, 171, 0.3);
    span {
        display: block;
        margin-bottom: 16px;
    }
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
}
scssコピー

Edit in: CodesandboxStackBlitz

スタイル設定

パレットおよび色

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

// 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;
$my-surface-color: #efefef;

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

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

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

// In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
  // 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
);
scss

パレットを作成する代わりに、引数としてカラーを直接 expansion-panel-theme 関数に割り当てることもできます。

$custom-panel-theme: expansion-panel-theme(
  $header-background: #353a4b,
  $header-focus-background: #353a4b,
  $header-title-color: #ffd351,
  $header-icon-color: #ffd351,
  ...
);
scss

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

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

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

// In expansion-styling.component.scss
@include css-vars($custom-panel-theme);
scss

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

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxButtonModule,
	IgxExpansionPanelModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { ExpansionPanelStylingComponent } from "./expansion-styling/expansion-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ExpansionPanelStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxButtonModule,
	IgxExpansionPanelModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import {Component} from '@angular/core';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-expansion-styling',
    styleUrls: ['./expansion-styling.component.scss'],
    templateUrl: './expansion-styling.component.html'
})

export class ExpansionPanelStylingComponent {
    public imgSource = 'https://i.ibb.co/6ZdY7cn/Untitled-design-3.png';
    public readMore = 'https://en.wikipedia.org/wiki/Golden_Retriever';
}
tsコピー

<div class="sample-holder">
    <igx-expansion-panel class="my-expansion-panel">
        <igx-expansion-panel-header [iconPosition]="'right'">
            <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>
            <div class="example-content">
                <img height="100" [src]="imgSource" alt="">
                <span>
                    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.[3] 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.
                </span>
                <a igxButton="raised" target="_blank" [href]="readMore">Read more</a>
            </div>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
</div>
htmlコピー

@use '../../variables' as *;

// 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,
	$surface: #000
);

// Create expansion panel theme
$custom-panel-theme: expansion-panel-theme(
    $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
);

:host {
    @include palette($my-color-palette);
    // Penetrate the ViewEncapsulation
    ::ng-deep {
        // Apply the custom themes to the compoents mixins.
        @include css-vars($custom-panel-theme);
    }
}

// Styles NOT related to Theming engine START
.sample-holder {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

.my-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
}

.example-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid color($my-color-palette, 'primary');
    ::selection  {
        background: color($my-color-palette, 'secondary', 200)
    }
    span {
        display: block;
        margin-bottom: 16px;
    }
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
}
// Styles NOT related to Theming engine END

scssコピー

Edit in: CodesandboxStackBlitz

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;
    }
}
typescript

ビルトイン アニメーション スイート の 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>
...
html

以下は結果です。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxIconModule,
	IgxExpansionPanelModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { ExpansionPanelSample5Component } from "./expansion-sample-5/expansion-sample-5.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ExpansionPanelSample5Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxIconModule,
	IgxExpansionPanelModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { useAnimation } from '@angular/animations';
import { Component, ViewChild } from '@angular/core';

import {
    IgxExpansionPanelComponent,
    slideInLeft,
    slideOutRight
} from 'igniteui-angular';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-expansion-sample-5',
    styleUrls: ['./expansion-sample-5.component.scss'],
    templateUrl: './expansion-sample-5.component.html'
})
export class ExpansionPanelSample5Component {

    @ViewChild(IgxExpansionPanelComponent, { static: true })
    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 user = {
        email: '',
        fullName: '',
        phone: undefined
    };

    public collapsed() {
        return this.panel && this.panel.collapsed;
    }
}
tsコピー

<div class="sample-holder">
    <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>
</div>
htmlコピー

.sample-holder {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

.my-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    border: 1px solid rgba(171, 171, 171, 0.3)
}
scssコピー

Edit in: CodesandboxStackBlitz

複数パネルの場合

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

API リファレンス

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

テーマの依存関係

• IgxExpansionPanel テーマ
• IgxIcon テーマ