Angular Hierarchical Grid の列非表示

Ignite UI for Angular Hierarchical Grid は、IgxColumnHidingDirective のある IgxColumnActionsComponent を提供し、ユーザーがユーザーインターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを Hierarchical Grid のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。

Angular Hierarchical Grid 列非表示の例

Hierarchical Grid の設定

Hierarchical Grid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。

<igx-hierarchical-grid class="hgrid" [data]="localdata"
        [height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>

    <igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column field="Photo">
        <ng-template igxCell let-cell="cell">
            <div class="cell__inner_2">
                <img [src]="cell.value" class="photo" />
            </div>
        </ng-template>
    </igx-column>
    <igx-column field="Debut" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Nominations" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column field="Grammy Awards" [sortable]="true"></igx-column>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
        <igx-column field="Album" [sortable]="true"></igx-column>
        <igx-column field="Launch Date" [sortable]="true"></igx-column>
        <igx-column field="Billboard Review" [sortable]="true"></igx-column>
        <igx-column field="US Billboard 200" [sortable]="true"></igx-column>
        <igx-row-island [key]="'Songs'" [autoGenerate]="false">
            <igx-column field="No."></igx-column>
            <igx-column field="Title"></igx-column>
            <igx-column field="Released"></igx-column>
            <igx-column field="Genre"></igx-column>
        </igx-row-island>
    </igx-row-island>

    <igx-row-island [key]="'Tours'" [autoGenerate]="false">
        <igx-column field="Tour"></igx-column>
        <igx-column field="Started on"></igx-column>
        <igx-column field="Location"></igx-column>
        <igx-column field="Headliner"></igx-column>
    </igx-row-island>

</igx-hierarchical-grid>

ツールバーの列非表示 UI

定義済みの列非表示 UI は、Hierarchical Grid のツールバーの IgxDropDownComponent 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。これには、Hierarchical Grid の IgxGridToolbarActionsComponent および IgxGridToolbarHidingComponent の両方を設定することだけです。ツールバーにタイトルを追加するには、IgxGridToolbarTitleComponent を設定し、Hierarchical Grid のラッパーにカスタムスタイルを設定します。

<!--columnHiding.component.html-->
<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    ...
 </igx-hierarchical-grid>
</div>

/* columnHiding.component.css */
.photo {
    vertical-align: middle;
    max-height: 62px;
}
.cell__inner_2 {
    margin: 1px
}

Hierarchical Grid にはツールバーの列非表示 UI に便利なプロパティがあります。 igx-grid-toolbar-hiding の title プロパティを使用して、ツールバーのドロップダウンボタン内に表示されるタイトルを設定します。

<div class="hgrid-sample">
    <igx-hierarchical-grid class="hgrid" [data]="localdata">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
 </igx-hierarchical-grid>
</div>

IgxGridToolbarHidingComponent の columnsAreaMaxHeight プロパティを使用して、列操作を含む領域の最大高さを設定できます。このように、多くの操作があり、それらのすべてがコンテナーに収まらない場合は、スクロールバーが表示され、必要な操作にスクロールできます。

// columnHiding.component.ts

public ngAfterViewInit() {
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

列非表示 UI の拡張機能セットを使用するために、IgxColumnActionsComponent の columnsAreaMaxHeight プロパティを使用できます。アプリケーションの要件に基づいて使用できます。

このトピックのはじめにあるコードの結果は、列非表示の例セクションで確認できます。

スタイル設定

列操作コンポーネントのスタイル設定を開始するには、すべてのテーマ関数とコンポーネントミックスインが存在するインデックスファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単なアプローチを使用して、column-actions-theme を拡張し、$title-color および $background-color パラメーターを受け取る新しいテーマを作成します。

$custom-column-actions-theme: column-actions-theme(
    $background-color: steelblue,
    $title-color: gold
);

ご覧のように column-actions-theme は列操作コンテナーの色のみを制御しますが、ボタン、チェックボックス、内部の入力グループには影響しません。ボタンのスタイルも設定したい場合、新しいボタンテーマを作成します。

$custom-button: button-theme($flat-text-color: gold, $disabled-color: black);

この例では、フラットボタンのテキストの色とボタンの無効な色のみを変更しましたが、button-theme の方がより多くの方法を提供します。ボタンのスタイルを制御するパラメーター。

最後にそれぞれのテーマを持つコンポーネントミックスインを含めることです。

@include column-actions($custom-column-actions-theme);
.igx-column-actions {
    @include button($custom-button);
}

Note

.igx-column-actions 内で igx-button ミックスインのスコープを設定し、列非表示ボタンのみがスタイル設定されるようにします。そうでない場合は、グリッド内の他のボタンも影響を受けます。

Note

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

:host {
    ::ng-deep {
        @include column-actions($custom-column-actions-theme);
        .igx-column-actions {
            @include button($custom-button);
        }
    }
}

カラーパレットの定義

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

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

$yellow-color: gold;
$blue-color: steelblue;

$custom-palette: palette($primary: $blue-color, $secondary: $yellow-color);

次に igx-color を使用してパレットから簡単に色を取得できます。

$custom-column-actions-theme: column-actions-theme(
    $palette: $custom-palette,
    $title-color: color($custom-palette, "secondary", 400),
    $background-color: color($custom-palette, "primary", 200)
);

$custom-button: button-theme(
    $palette: $custom-palette,
    $flat-text-color: color($custom-palette, "secondary", 400),
    $disabled-color: black
);

Note

igx-color と igx-palette は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。

スキーマの使用

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

// Extending the dark column actions schema
$custom-column-actions-schema: extend($_dark-column-actions,
    (
        title-color:(
           color: ("secondary", 400)
        ),
        background-color:(
           color: ("primary", 200)
        )
    )
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
    (           
        flat-text-color:(
           color:("secondary", 500)
        ),
        disabled-color:(
           color:("primary", 700)
        )
    )
);

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

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

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

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

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