svelte-pagination

Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.

Demo

Click here for Storybook link

REPL Link

Installation

npm install svelte-pagination

or

yarn add svelte-pagination

Usage

<script>
  import Pagination from "svelte-pagination";

  let checkedValue = 1;

  function handleChange(e) {
    const { selected } = e.detail;
    checkedValue = selected;
  }
</script>

<Pagination
  pageCount={100}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={handleChange} />
<br />

API

Props

Prop Name	Description	Default Value
pageCount		10
pageRangeDisplayed		2
marginPagesDisplayed		3
previousLabel		"Previous"
nextLabel		"Next"
breakLabel		"..."
hrefBuilder
initialPage
forcePage
disableInitialCallback		false
containerClassName
pageClassName
pageLinkClassName
activeClassName		"selected"
activeLinkClassName
previousClassName		"previous"
nextClassName		"next"
previousLinkClassName
nextLinkClassName
disabledClassName		"disabled"
breakClassName
breakLinkClassName
extraAriaContext
ariaLabelBuilder
startPageIndex		1

Slots

NA

Events

Event Name	Description	event.detail info
change		{event: event, selected}

Examples

Click here to view stories implementation

Credits

TBD

License

MIT