展開パネル

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

    使用方法

    はじめに、app.moduleIgxExpansionPanelModule をインポートする必要があります。

    // app.module.ts
    ...
    import { IgxExpansionPanelModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxExpansionPanelModule],
        ...
    })
    export class AppModule {}
    

    次に、コンポーネントのマークアップを追加します。

    <!-- expansible-panel.component.html -->
    <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>
    

    以下の表は、展開パネルで使用可能なすべてのマークアップ要素を示します。

    タグ名 説明
    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';
    @Component({
        ...
    })
    export class ExpansionPanelComponent {
        @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
        public panel: IgxExpansionPanelComponent;
    }
    
    <!-- in expansion-component.component.html -->
    ...
        <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>
        ...
    

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

    // in expansion-panel.component.ts
    
    export class ExpansionPanelComponent {
        ...
        public handleExpansion(args: {event: Event}): void {
            ... // Some functionality
        }
    }
    
    <!-- in expansion-component.component.html -->
    <igx-expansion-panel (onExpanded)="handleExpansion($event)  (onCollapsed)="handleCollapse($event)"></igx-expansion-panel>
    

    以下は結果です。

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

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

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

    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>
    

    このコンポーネントは、パネルの縮小時に「更に表示」を描画し、完全に展開した後に「簡易表示」を描画します。

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

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

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

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

    スタイル設定

    デモ

    パレットおよび色

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

    // 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".
    
    // Import theming engine functionality.
    @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: igx-palette(
        $primary: $my-primary-color,
        $secondary: $my-secondary-color
    );
    

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

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

    // In expansion-styling.component.scss
    // Create expansion panel theme.
    $custom-panel-theme: igx-expansion-panel-theme(
        // pass `$my-color-palette` palette.
        $palette: $my-color-palette,
    
        // Styling parameters.
        $header-background: igx-color($my-color-palette, "primary", 700),
        $header-focus-background: igx-color($my-color-palette, "primary", 700),
        $header-title-color: igx-color($my-color-palette, "secondary"),
        $header-icon-color: igx-color($my-color-palette, "secondary"),
        $body-background: igx-color($my-color-palette, "primary", 700),
        $body-color: igx-color($my-color-palette, "secondary" 100),
        $border-radius: .5
    );
    
    Note

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

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

    コンポーネント テーマを適用するには、igx-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 igx-css-vars($custom-panel-theme);
    }
    
    Note

    Internet Explorer 11 をサポートする場合は、igm-css-vars の代わりにコンポーネント mixin の 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 igx-expansion-panel($custom-panel-theme);
        }
    }
    

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

    アニメーションの使用

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

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

    // expansion-panel.component.ts 内
    import { useAnimation } from "@angular/animations";
    import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
    @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 class="example-content">
            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>
    ...
    

    以下は結果です。

    複数パネルの場合

    以下の例は、アプリのようなシナリオを実装します。ユーザーの詳細を表示または要求するような特定のワークフローに従います。このサンプルでは、​​ビルトイン アニメーション スイートのデフォルトの growVerIngrowVerOut アニメーションが使用されるため、特定のアニメーション設定を渡したり、アニメーションをインポートしたりする必要はありません。複数の igxExpansionPanel は一度に展開して onInteraction イベントを処理することはできません。

    // expansion-panel.component.ts 内
    import { Component, QueryList, ViewChildren } from "@angular/core";
    import { IgxExpansionPanelComponent } from "igniteui-angular";
    
    @Component({
        ...
    })
    export class ExpansionPanelComponent {
        @ViewChildren(IgxExpansionPanelComponent)
        public accordion: QueryList<IgxExpansionPanelComponent>;
    
        public collapsed(index: number) {
             if (!this.accordion) {
                return true;
             }
             return this.accordion.toArray()[index] && this.accordion.toArray()[index].collapsed;
         }
    
        public onInteraction(event) {
            const expandedPanels = this.accordion.filter((panel) => !panel.collapsed);
            expandedPanels.forEach((expandedPanel) => {
                if (expandedPanel.elementRef !==  event.event.currentTarget) {
                    expandedPanel.collapse();
                }
            });
        }
    }
    
    <!-- in expansion-panel.component.html -->
    <igx-expansion-panel class="my-expansion-panel">
        <igx-expansion-panel-header (onInteraction)="onInteraction($event)" [disabled]="false">
            <igx-expansion-panel-title class="sample-title">HTML5</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            <div class="example-content">
                HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup-based pattern to it.            
        </div>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel class="my-expansion-panel">
        <igx-expansion-panel-header (onInteraction)="onInteraction($event)" [disabled]="false">
            <igx-expansion-panel-title class="sample-title">CSS3</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            <div class="example-content">
                Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML            
            </div>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    <igx-expansion-panel class="my-expansion-panel">
        <igx-expansion-panel-header (onInteraction)="onInteraction($event)" [disabled]="false">
            <igx-expansion-panel-title class="sample-title">SASS/SCSS</igx-expansion-panel-title>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            <div class="example-content">
                Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). 
            </div>
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    

    以下は結果です。

    API リファレンス

    テーマの依存関係