Angular Tree Grid ページネーション
ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。Tree Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Tree Grid のページネーションはカスタム ページのテンプレートをサポートします。
Angular ページネーションの例
次の例は、Tree Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Tree Grid ページをすばやくナビゲートすることもできます。
igx-paginator コンポーネントを追加すると、機能が存在するかどうかが制御されます。トグル プロパティを持つ単純な *ngIf を使用して、機能を有効/無効にできます。perPage 入力は、ページごとに表示されるレコードを制御します。以下のように Tree Grid でページングを有効にします。
<igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-tree-grid>
例:
<igx-paginator #paginator [totalRecords]="20">
<igx-paginator-content>
<div id="numberPager" style="justify-content: center;">
<button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
PREV
</button>
<span>
Page {{paginator.page}} of {{paginator.totalPages}}
</span>
<button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
NEXT
</button>
</div>
</igx-paginator-content>
</igx-paginator>
使用方法
以下の例では、igx-paginator コンポーネントが igx-tree-grid コンポーネントと一緒に使用されていますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。
<igx-tree-grid #treeGrid [data]="data">
<igx-paginator #paginator [(page)]="treeGrid.page" [totalRecords]="treeGrid.length" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-tree-grid>
ページネーター コンポーネントのデモ
リモート ページング
リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Tree Grid リモート データ操作トピックをご覧ください。
Angular のページネーション スタイリング
ページネーターのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も簡単な方法で paginator-theme を拡張し $text-color、$background-color および $border-color パラメータを受け入れる新しいテーマを作成します。
$dark-paginator: paginator-theme(
$text-color: #F4D45C,
$background-color: #575757,
$border-color: #292826
);
paginator-theme はページング コンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコン ボタン テーマを作成しましょう。
$dark-button: icon-button-theme(
$foreground: #FFCD0F,
$hover-foreground: #292826,
$hover-background: #FFCD0F,
$focus-foreground: #292826,
$focus-background: #FFCD0F,
$disabled-foreground: #16130C
);
最後にそれぞれのテーマを持つコンポーネント ミックスインを含めることです。
@include grid-paginator($dark-grid-paginator);
.igx-grid-paginator__pager {
@include icon-button($dark-button);
}
Note
icon-button ミックスインを .igx-paginator__pager 内でスコープして、ページネーター ボタンのみにスタイルが設定されるようにします。そうでない場合は、グリッド内の他のアイコン ボタンも影響を受けます。
Note
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
::ng-deep {
igx-paginator {
@include css-vars($dark-button);
@include css-vars($dark-paginator);
}
}
}
カラー パレットの定義
上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。
igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。
$yellow-color: #F9D342;
$black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
igx-color を使用してパレットから簡単に色を取り出すことができます。
$dark-paginator: paginator-theme(
$palette: $dark-palette,
$text-color: color($dark-palette, "secondary", 400),
$background-color: color($dark-palette, "primary", 200),
$border-color: color($dark-palette, "primary", 500)
);
$dark-button: icon-button-theme(
$palette: $dark-palette,
$foregroundr: color($dark-palette, "secondary", 700),
$hover-foreground: color($dark-palette, "primary", 500),
$hover-background: color($dark-palette, "secondary", 500),
$focus-foreground: color($dark-palette, "primary", 500),
$focus-background: color($dark-palette, "secondary", 500),
$disabled-foreground: color($dark-palette, "primary", 700)
);
Note
igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。
スキーマの使用
テーマ エンジンには スキーマを使用できる利点があり、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用するための方法です。
すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (この場合は $base-dark-pagination と $material-flat-icon-button-dark スキーマ) の 1 つを拡張します。
// Extending the dark paginator schema
$dark-paginator-schema: extend($base-dark-pagination,
(
text-color:(
color: ("secondary", 400)
),
background-color:(
color: ("primary", 200)
),
border-color:(
color:( "primary", 500)
)
)
);
// Extending the dark icon button schema
$dark-button-schema: extend($material-flat-icon-button-dark,
(
foreground:(
color:("secondary", 700)
),
hover-foreground:(
color:("primary", 500)
),
hover-background:(
color:("secondary", 500)
),
focus-foreground:(
color:("primary", 500)
),
focus-background:(
color:("secondary", 500)
),
disabled-foreground:(
color:("primary", 700)
)
)
);
カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加する方法です。
// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-paginator: $dark-paginator-schema,
igx-icon-button: $dark-button-schema
));
// Definingpaginator-theme with the global dark schema
$dark-paginator: paginator-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
// Defining icon-button-theme with the global dark schema
$dark-button: icon-button-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
テーマを上記と同じ方法で含める必要があることに注意してください。
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub