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
);
コンポーネント テーマの適用
コンポーネント テーマを適用するには、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 トピックを参照してください。