Angular Grid ページネーション
ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。Grid ページネーションは、列の追加と同様に、igx-paginator
タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Grid のページネーションはカスタム ページのテンプレートをサポートします。
Angular ページネーションの例
次の例は、Grid ページネーションを表しており、items per page
のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Grid ページをすばやくナビゲートすることもできます。
igx-paginator
コンポーネントを追加すると、機能が存在するかどうかが制御されます。トグル プロパティを持つ単純な *ngIf
を使用して、機能を有効/無効にできます。perPage
入力は、ページごとに表示されるレコードを制御します。以下のように Grid でページングを有効にします。
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-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-grid
コンポーネントと一緒に使用されていますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。
<igx-grid #grid [data]="data">
<igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-grid>
ページネーター コンポーネントのデモ
リモート ページング
リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Grid リモート データ操作
トピックをご覧ください。
カスタム テンプレートのリモート ページング
独自のページング動作を定義するために、igx-paginator-content
を使用してカスタム ロジックを追加できます。このセクションでは、上記を実証するために、リモート ページングの例を拡張する方法を説明します。
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
);
テーマを上記と同じ方法で含める必要があることに注意してください。