UI 操作のための Grid ツールバー コンテナ

Ignite UI for Angular の Grid は、UI 操作のコンテナとなる IgxGridToolbarComponent 機能をサポートします。Angular ツールバーは Angular コンポーネントの一番上、つまり Grid にあり、水平方向のサイズと一致します。ツールバーのコンテナは、グリッド機能に関連するさまざまな UI コントロール (列の非表示、列ピン固定、エクセル エクスポート、Angular イベントなど) をホストします。

Angular ツールバー グリッドの例

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

Grid タグの間に igx-grid-toolbar コンポーネントを挿入することにより、Grid のツールバーを有効にできます。 ツールバーの追加機能は、デフォルトのツールバー UI コンポーネントを使用するか、独自のコンポーネントを作成することで有効になります。 デフォルトの UI コンポーネントとそれらを有効にする方法の全般的な概要については、以下の機能セクションを読み進めてください。 以下のコード スニペットは、ツールバーとタイトルを設定する方法を確認できます。

<igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid Title</igx-grid-toolbar-title>
    </igx-grid-toolbar>
</igx-grid>

機能

ツールバーは、グリッド全体に影響を与えるロジック/インタラクションを分離するのに最適です。 したがって、制御、列の非表示、列のピン固定、高度なフィルタリング、およびグリッドからのデータのエクスポートのためのデフォルトのコンポーネントを提供するように構成できます。これらの機能は、Ignite UI for Angular スイートのカード コンポーネントと同様のパターンに従うことで、互いに独立して有効にできます。 以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプル コードです。


タイトル

グリッドのツールバーのタイトルを設定するには、IgxGridToolbarTitleDirective を使用します。 ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。

<igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
</igx-grid-toolbar>

操作

ツールバーは、ユーザーが親グリッドに関連して操作/インタラクションを配置できる特定のコンテナを公開します。 ツールバーのタイトル部分と同様に、ユーザーは、デフォルトのツールバー インタラクション コンポーネントを含め、そのテンプレート部分内にどんなものでも提供できます。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <button igxButton>Action</button>
        <igx-select></igx-select>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

列のピン固定

このコンポーネントは、グリッド内の列のピン固定を操作するためのデフォルトの UI を提供します。 コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-pinning>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

列の非表示

ピン固定操作コンポーネントと同様に、非表示コンポーネントは、列の非表示と対話するためのデフォルトの UI を提供します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

高度なフィルタリング

グリッドで高度なフィルタリングが有効になっている場合、ユーザーは高度なフィルタリング機能のデフォルト コンポーネントを提供できます。 コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

データのエクスポート

残りのツールバー操作と同様に、エクスポートは、すぐに使用できるツールバー コンポーネントを介して提供されます。 エクスポート コンポーネントは、ターゲット データ形式 (Excel CSV) のそれぞれのサービスを使用しています。つまり、それぞれのサービスが依存関係挿入チェーンを通じて提供されない場合、コンポーネントは何もエクスポートできません。 Angular の DI の復習が必要な場合は、公式ガイドをご覧ください。これは、アプリケーションのすべてのエクスポート サービスを有効にする方法を示すサンプル スニペットです。

// app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-angular';

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService ]
})
export class AppModule { ... }

ツールバー エクスポーター コンポーネントは、UI とエクスポート エクスペリエンスの両方をカスタマイズするためのいくつかの入力プロパティを公開します。 これらは、表示テキストの変更から、ドロップダウンのオプションの有効化/無効化、生成されたファイルの名前のカスタマイズまで多岐にわたります。 完全なリファレンスについては、ツールバー エクスポータ コンポーネントの API ヘルプを参照してください。

これは、Angular テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。

<igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-exporter
            <!-- If active, enables the csv export entry in the dropdown UI -->
            [exportCSV]="csvExportEnabled"
            <!-- If active, enables the excel export entry in the dropdown UI -->
            [exportExcel]="excelExportEnabled"
            <!-- The name of the generated export file without the file extension -->
            filename="exported_data"
        >
            Custom text for the exporter button
            <span excelText>Custom text for the excel export entry</span>
            <span csvText>Custom text for the CSV export entry</span>
        </igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

エクスポートされたファイル名を変更することに加えて、ユーザーは onToolbarExporting イベントを待機し、イベント プロパティのオプション エントリをカスタマイズすることで、エクスポーター オプションをさらに構成できます。

Note

デフォルトで CSV にエクスポートした際にエクスポーターがカンマ区切りセパレーターを使用してエクスポートし、出力ファイルに .csv 拡張しを使用します。 エクスポーターのイベントにサブスクライブまたはエクスポーター オプション フィールドの値を変更して、エクスポート パラメーターをカスタマイズできます。 またイベント引数のキャンセル フィールドを true に設定してエクスポートをキャンセルすることもできます。

次のコード スニペットは、ツールバーのエクスポート イベントのサブスクライブとエクスポーター オプションの構成を示しています。

<igx-grid (onToolbarExporting)="configureExport($event)" ></igx-grid>
configureExport(args: IGridToolbarExportEventArgs) {
    const options: IgxExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;

    if (options instanceof IgxExcelExporterOptions) {
        options.columnWidth = 10;
    } else {
        options.fileType = CsvFileTypes.TSV;
        options.valueDelimiter = "\t";
    }

    args.exporter.onColumnExport.subscribe((columnArgs: IColumnExportingEventArgs) => {

        // Don't export image fields
        columnArgs.cancel = columnArgs.header === "Athlete" ||
                            columnArgs.header === "Country";


    });
}

以下のサンプルは、エクスポート ファイルをカスタマイズする方法を示します。


エクスポート インジケーター

デフォルトのツールバー エクスポーター コンポーネントを使用する場合、エクスポート操作が行われると、操作の進行中にツールバーに進行状況インジケーターが表示されます。 さらに、ユーザーはツールバーの showProgress プロパティを設定して、自分の長時間実行操作に使用するか、グリッドで実行されている操作を示す別の方法として使用できます。

以下のサンプルでは、progressbar が表示されるようにデータのエクスポートに必要な時間を増やすために、大量のデータを使用しています。さらに、グリッドで長時間実行される操作をシミュレートする別のボタンがあります。

カスタム コンテンツ

Note

これは、古いツールバー テンプレート ディレクティブを置き換えます。v11 より前のバージョンから移行する場合は、マイグレーションによってテンプレート コンテンツの移動が処理されます。 ただし、テンプレート内のバインディングは処理しないため、マイグレーションの完了後に、変更されたテンプレート ファイルを再確認してください。

ツールバー コンポーネントのアクション部分が特定のユース ケースに十分でない場合、ツールバー自体には、ユーザーが追加の UI を提供できる一般的なコンテンツ プロジェクションがあります。 ユーザーが API 呼び出しまたはバインディングにそれぞれのグリッド インスタンスを必要とする場合は、テンプレート参照変数を作成できます。

サンプル スニペットは次のとおりです。

<igx-grid #gridRef ...>

    ...
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>

        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>

        <igx-grid-toolbar-actions>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

</igx-grid>

以下のサンプルは、列ヘッダーをクリックして並べ替えセットをクリアするためのボタンをツールバーに追加する方法です。


スタイル設定

ツールバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する index ファイルをインポートする必要があります。

// custom-grid-paging-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、igx-grid-toolbar-theme を拡張する新しいテーマを作成し、$background-color$title-text-color パラメーターを受け取る方法です。

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: #292826,
    $title-text-color: #FFCD0F
);

ツールバー内のボタンをスタイル設定するために、igx-button-theme を拡張する別のテーマを作成します。

$dark-button-theme: igx-button-theme(
    $outlined-background: #FFCD0F,
    $outlined-text-color: #292826,
    $outlined-hover-background: #404040,
    $outlined-hover-text-color: #FFCD0F
);

最後にコンポーネントのテーマを含めます。Button テーマは、ツールバーのアクション コンテナにスコープされるため、外側のボタンはツールバーに影響を受けません。

@include igx-grid-toolbar($dark-grid-toolbar-theme);
.igx-grid-toolbar__actions {
    @include igx-button($dark-button-theme);

    .igx-button--outlined {
        margin-left: 0.5rem;
        border: none;
    }
}
Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
    ::ng-deep {
        @include igx-grid-toolbar($dark-grid-toolbar-theme);

        .igx-grid-toolbar__actions {
            @include igx-button($dark-button-theme);

            .igx-button--outlined {
                margin-left: 0.5rem;
                border: none;
            }
        }
    }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);

また igx-color を使用してパレットから簡単に色を取り出すことができます。

$dark-button-theme: igx-button-theme(
    $outlined-background: igx-color($dark-palette, "secondary", 400),
    $outlined-text-color: igx-color($dark-palette, "primary", 400),
    $outlined-hover-background: igx-color($dark-palette, "primary", 400),
    $outlined-hover-text-color: igx-color($dark-palette, "secondary", 400)
);

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: igx-color($dark-palette, "primary", 200),
    $title-text-color: igx-color($dark-palette, "secondary", 400)
);
Note

igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

スキーマの使用

テーマ エンジンを使用して スキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (この場合は (dark-grid-toolbardark-button スキーマ) の 1 つを拡張します。

$dark-grid-toolbar-schema: extend($_dark-grid-toolbar,
    (
        background-color:(
            igx-color: ("primary", 200)
        ),
        title-text-color:(
            igx-color: ("secondary", 400)
        )
    )
);

$dark-button-schema: extend($_dark-button,
    (
        outlined-background: (
            igx-color: ("secondary", 400)
        ),
        outlined-text-color: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-background: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-text-color: (
            igx-color: ("secondary", 400)
        )
    )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加するものです。

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-grid-toolbar: $dark-grid-toolbar-schema,
    igx-button: $dark-button-schema
));

// Defining button-theme with the global dark schema
$dark-button-theme: igx-button-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

// Defining grid-toolbar-theme with the global dark schema
$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

デモ


API リファレンス

以下は、Grid Toolbar サービスのその他の API です。

IgxGridComponent イベント:

スタイル:

その他のリソース

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