diff --git a/components/pagination/pager.component.ts b/components/pagination/pager.component.ts index b53828c6d0..0582204e44 100644 --- a/components/pagination/pager.component.ts +++ b/components/pagination/pager.component.ts @@ -7,15 +7,16 @@ const pagerConfig = { itemsPerPage: 10, previousText: '« Previous', nextText: 'Next »', + pageBtnClass: '', align: true }; const PAGER_TEMPLATE = ` diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts index f30e5fd664..93e254f15c 100644 --- a/components/pagination/pagination.component.ts +++ b/components/pagination/pagination.component.ts @@ -21,6 +21,8 @@ export interface PaginationConfig extends KeyAttribute { previousText:string; nextText:string; lastText:string; + // css + pageBtnClass:string; rotate:boolean; } @@ -38,6 +40,7 @@ const paginationConfig:PaginationConfig = { previousText: 'Previous', nextText: 'Next', lastText: 'Last', + pageBtnClass: '', rotate: true }; @@ -45,31 +48,36 @@ const PAGINATION_TEMPLATE = ` `; @@ -94,6 +102,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina @Input() public nextText:string; @Input() public lastText:string; @Input() public rotate:boolean; + // css + @Input() public pageBtnClass:string; @Input() public disabled:boolean; @@ -189,6 +199,9 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina this.directionLinks = typeof this.directionLinks !== 'undefined' ? this.directionLinks : paginationConfig.directionLinks; + this.pageBtnClass = typeof this.pageBtnClass !== 'undefined' + ? this.pageBtnClass + : paginationConfig.pageBtnClass; // base class this.itemsPerPage = typeof this.itemsPerPage !== 'undefined' diff --git a/components/pagination/readme.md b/components/pagination/readme.md index 747624a9a9..5dd5728580 100644 --- a/components/pagination/readme.md +++ b/components/pagination/readme.md @@ -23,6 +23,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, IPagin @Input() public nextText:string; @Input() public lastText:string; @Input() public rotate:boolean; + // css + @Input() public pageBtnClass: string; @Input() public disabled:boolean; @Input() public get itemsPerPage():number {} @@ -49,6 +51,7 @@ export class PagerComponent extends Pagination {} - `nextText` (`?string='Next'`) - next button text - `firstText` (`?string='First'`) - first button text - `lastText` (`?string='Last'`) - last button text + - `pageBtnClass` (`?string=''`) - add class to `
  • ` ### Pagination events - `numPages` - fired when total pages count changes, `$event:number` equals to total pages count @@ -61,6 +64,7 @@ export class PagerComponent extends Pagination {} - `itemsPerPage` (`?number=10`) - maximum number of items per page. If value less than 1 will display all items on one page - `previousText` (`?string='Previous'`) - previous button text - `nextText` (`?string='Next'`) - next button text + - `pageBtnClass` (`?string=''`) - add class to `
  • ` ### Pager events - `numPages` - fired when total pages count changes, `$event:number` equals to total pages count diff --git a/demo/components/pagination/pagination-demo.html b/demo/components/pagination/pagination-demo.html index f273a25e6e..0b9fadaef7 100644 --- a/demo/components/pagination/pagination-demo.html +++ b/demo/components/pagination/pagination-demo.html @@ -14,7 +14,7 @@

    Default


    Pager

    - +

    Limit the maximum visible buttons