Navigation

Pagination

Themed pagination control with ellipsis windowing, accessible nav, and two-way page binding.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjPaginationComponent } from '@kouji-ui/components';
04

Playground

#playground
…
variant
size
<kj-pagination
  [(kjPage)]="page"
  [kjTotalPages]="10"
  [kjSiblingCount]="1"
  [kjBoundaryCount]="1"
  kjVariant="default"
  kjSize="md"
  #p="kjPagination"
>
  <kj-pagination-first>«</kj-pagination-first>
  <kj-pagination-previous>‹</kj-pagination-previous>
  @for (token of p.pages(); track token) {
    @if (token === 'ellipsis-left' || token === 'ellipsis-right') {
      <kj-pagination-ellipsis>…</kj-pagination-ellipsis>
    } @else {
      <kj-pagination-item [kjPage]="token">{{ token }}</kj-pagination-item>
    }
  }
  <kj-pagination-next>›</kj-pagination-next>
  <kj-pagination-last>»</kj-pagination-last>
</kj-pagination>