Angular 계층적 그리드 페이지 매김
페이지 매김은 대규모 데이터 세트를 유사한 콘텐츠가 포함된 일련의 페이지로 분할하는 데 사용됩니다. Angular 테이블 페이지 매김은 사용자 경험과 데이터 상호 작용을 향상시킵니다. 계층적 그리드 페이지 매김은 열을 추가하는 것과 유사하게 igx-paginator 태그를 정의하여 그리드 트리에 투영된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 Angular 테이블과 마찬가지로 계층형 그리드의 페이지 매김은 사용자 정의 페이지에 대한 템플릿을 지원합니다.
Angular Pagination Example
다음 예는 계층적 그리드 페이지 매김을 나타내며 items per page의 옵션 사용법과 페이징을 활성화하는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 페이지로 이동" 버튼을 통해 계층적 그리드 페이지를 빠르게 탐색할 수도 있습니다.
igx-paginator 구성 요소를 추가하면 기능 존재 여부가 제어되며, 토글 속성과 함께 간단한 *ngIf 사용하여 기능을 활성화/비활성화할 수 있습니다. perPage 입력은 페이지당 표시되는 레코드를 제어합니다. 페이징을 활성화하도록 계층적 그리드를 업데이트해 보겠습니다.
<igx-hierarchical-grid #hierarchicalGrid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-hierarchical-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>
Usage
아래 예에서는 igx-paginator 구성 요소가 igx-hierarchical-grid 구성 요소와 함께 사용되지만 페이징 기능이 필요한 경우 다른 구성 요소와 함께 사용할 수 있습니다.
<igx-hierarchical-grid>
<igx-column *ngFor="let c of hColumns" [field]="c.field">
</igx-column>
<igx-row-island [key]="'childData'" [autoGenerate]="true">
<igx-row-island [key]="'childData'" [autoGenerate]="true">
<igx-paginator *igxPaginator></igx-paginator>
</igx-row-island>
<igx-paginator *igxPaginator></igx-paginator>
</igx-row-island>
<igx-row-island [key]="'childData2'" [autoGenerate]="true">
<igx-paginator *igxPaginator></igx-paginator>
</igx-row-island>
<igx-paginator></igx-paginator>
</igx-hierarchical-grid>
Paginator Configuration within child grids
IgxHierarchicalGrid의 하위 그리드가 구현되는 방식과 DI 범위 작동 방식에 대한 특정 제한으로 인해 igx-row-island 태그 내부에 페이지네이터 구성 요소를 정의할 때 항상 페이지네이터 자체에서 IgxPaginator 지시어를 사용해야 합니다. 이렇게 하면 하위 그리드에 참조로 올바른 페이지네이터 인스턴스가 있는지 확인됩니다.
<igx-hierarchical-grid>
...
<igx-row-island>
...
<igx-grid-toolbar *igxPaginator>
...
</igx-grid-toolbar>
</igx-row-island>
...
</igx-hierarchical-grid>
Paginator Component Demo
Remote Paging
원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 구성 요소를 선언하여 수행할 수 있습니다. 자세한 내용은 Hierarchical Grid Remote Data Operations 항목을 확인하세요.
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
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub