@terminus/ui-paginator
v4.0.0
Published
<h1>Paginator</h1>
Downloads
9
Keywords
Readme
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-paginatorCSS imports
In your top level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Pass in an array of pages, and the currently active page:
<ts-paginator
[pages]="myPages"
[activePage]="myActivePage"
></ts-paginator>export class Example {
myPages: TS_PAGINATOR_PAGE[] = [
{ pageNumber: 0, pageDisplay: 1 },
{ pageNumber: 1, pageDisplay: 2 },
{ pageNumber: 2, pageDisplay: 3 },
];
myActivePage: TS_PAGINATOR_PAGE = this.myPages[0];
}Summary
Pass in the summary text:
<ts-paginator
[pages]="myPages"
[activePage]="myActivePage"
paginatorSummary="1 - 25 of 243 Accounts"
></ts-paginator>Events
In order to know where the user has requested to navigate, listen for 3 events:
<ts-paginator
[pages]="myPages"
[activePage]="myActivePage"
(previousPageClicked)="goBack()"
(nextPageClicked)="goForward()"
(pageClicked)="jumpToPage($event)"
></ts-paginator>Simple mode
Simple mode hides all page buttons and only shows the previous and next buttons:
<ts-paginator
[pages]="myPages"
[activePage]="myActivePage"
[isSimpleMode]="true"
></ts-paginator>Tooltips
The next and previous button tooltips can be customized:
<ts-paginator
[pages]="myPages"
[activePage]="myActivePage"
previousPageTooltip="Go back one page"
nextPageTooltip="Go forward one page"
></ts-paginator>