Pagination

An a navigation list of page numbers.

Code

<script lang="ts">
  import { Pagination } from '@geoffcox/sterling-svelte';

  let itemRange : {index: number; count: number} = $state();
  let page : number = $state();
  let pageCount : number = $state();
</script>

<Pagination itemCount="163" bind:itemRange bind:page bind:pageCount pageSize="7" pageStep="5" />

Members

Property Name	Type	Default	Comment
itemCount	number	0	The total number of items across all pages.
itemRange	$bindable({index: number; count: number;})	undefined	The range of items expected to be displayed on the current page. This is a read-only property.
page	$bindable(number)	0	The current page, starting at 1.
pageCount	$bindable(number)	undefined	The number of pages based on itemCount and pageSize. This is a read-only property.
pageSize	number \| undefined	1	The number of items to display on each page. Set to one if you have pages of content rather than items.
pageStep	number \| undefined	10	How many pages to move when the step previous button or step next button is clicked.
onChange	((page: number, itemRange: {index: number; count: number;}) => void) \| undefined	undefined	Called when page changes. Includes the range of items on the page.
firstNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 1.
stepPreviousNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 2. Defaults to <<.
previousNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 3.
currentNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 4. Defaults to an input.
nextNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 5.
stepNextNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 6. Defaults to >>.
lastNumber	(Snippet<[number \| undefined]>) \| undefined	undefined	A snippet to render a page number at position 7.

Considerations

Page numbers are positioned in the following order: first, step-previous, previous, current, next, step-next, last.
The previous, next, step-previous, and step-next buttons support holding down the mouse button to continuously move.
Page numbers are evenly spaced based on the number of digits in itemCount.
Includes HTMLDivElement props, events, and methods.

Anatomy

<div class="sterling-pagination">
  <div class="page-number first">
    <button>
      {@render pageNumber(firstNumber, 'first')}
    </button>
  </div>
  <div class="page-number step-previous">
    <button>
      {@render pageNumber(stepPreviousNumber, 'step-previous')}
    </button>
  </div>
  <div class="page-number previous">
    <button>
      {@render pageNumber(previousNumber, 'previous')}
    </button>
  </div>
  <div class="page-number current">
    <button>
      {@render pageNumber(currentNumber, 'current')}
    </button>
  </div>
  <div class="page-number next">
    <button>
      {@render pageNumber(nextNumber, 'next')}
    </button>
  </div>
  <div class="page-number step-next">
    <button>
      {@render pageNumber(stepNextNumber, 'step-next')}
    </button>
  </div>
  <div class="page-number last">
    <button>
      {@render pageNumber(lastNumber, 'last')}
    </button>
  </div>
</div>