0.0.1 • Published 4 years ago

svelte-pagination v0.0.1

Weekly downloads
18
License
MIT
Repository
-
Last release
4 years ago

svelte-pagination

NPM npm bundle size (minified + gzip)

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 NameDescriptionDefault Value
pageCount10
pageRangeDisplayed2
marginPagesDisplayed3
previousLabel"Previous"
nextLabel"Next"
breakLabel"..."
hrefBuilder
initialPage
forcePage
disableInitialCallbackfalse
containerClassName
pageClassName
pageLinkClassName
activeClassName"selected"
activeLinkClassName
previousClassName"previous"
nextClassName"next"
previousLinkClassName
nextLinkClassName
disabledClassName"disabled"
breakClassName
breakLinkClassName
extraAriaContext
ariaLabelBuilder
startPageIndex1

Slots

NA

Events

Event NameDescriptionevent.detail info
change{event: event, selected}

Examples

Click here to view stories implementation

Credits

TBD

License

MIT

sveltesvelte3svelte-componentssvelte-paginatepaginationsvelte-paginationsveltejs
@infinitebrahmanuniverse/nolb-svelte-p@everything-registry/sub-chunk-2856
0.0.1

4 years ago

0.0.1-beta.0

4 years ago