@terminus/ui-paginator NPM

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-paginator

CSS 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>

tslib @angular-devkit/schematics @schematics/angular

@infinitebrahmanuniverse/nolb-_ter @zalastax/nolb-_ter @everything-registry/sub-chunk-905

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago