Angular 그리드 페이지 매김
페이지 매김은 대규모 데이터 세트를 유사한 콘텐츠가 포함된 일련의 페이지로 분할하는 데 사용됩니다. Angular 테이블 페이지 매김은 사용자 경험과 데이터 상호 작용을 향상시킵니다. 그리드 페이지 매김은 열을 추가하는 것과 유사하게 igx-paginator 태그를 정의하여 그리드 트리에 투영된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 Angular 테이블과 마찬가지로 그리드의 페이지 매김은 사용자 정의 페이지에 대한 템플릿을 지원합니다.
Angular Pagination Example
다음 예는 그리드 페이지 매김을 나타내며 items per page의 옵션 사용법과 페이징을 활성화할 수 있는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 그리드 페이지를 빠르게 탐색할 수도 있습니다.
igx-paginator 구성 요소를 추가하면 기능 존재 여부가 제어되며, 토글 속성과 함께 간단한 *ngIf 사용하여 기능을 활성화/비활성화할 수 있습니다. perPage 입력은 페이지당 표시되는 레코드를 제어합니다. 페이징을 활성화하도록 그리드를 업데이트해 보겠습니다.
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
Example:
<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>
Paging with Group By
그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다. 페이징과 그룹화 기준 간의 통합은 그룹화 기준 항목에 설명되어 있습니다.
Usage
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>
Paginator Component Demo
Remote Paging
원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 구성 요소를 선언하여 수행할 수 있습니다. 자세한 내용은 Grid Remote Data Operations 항목을 확인하세요.
Remote Paging with Custom Template
어떤 경우에는 자신만의 페이징 동작을 정의하고 싶을 수도 있으며 이때 igx-paginator-content 활용하고 사용자 정의 로직을 함께 추가할 수 있습니다.이 섹션에서는 이를 보여주기 위해 원격 페이징 예제를 확장하는 방법을 설명합니다.
Pagination Styling in Angular
페이지네이터 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @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 mixin의 범위를 지정합니다. 그렇지 않으면 그리드의 다른 아이콘 버튼도 영향을 받습니다.
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.
:host {
::ng-deep {
igx-paginator {
@include css-vars($dark-button);
@include css-vars($dark-paginator);
}
}
}
Defining a Color Palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 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 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소에 대해 제공되는 두 개의 미리 정의된 스키마 중 하나(이 경우 및 $base-dark-pagination $material-flat-icon-button-dark 스키마)를 확장합니다.
// 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)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
// 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
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Pagination Style Example
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub