@chameleon-ds/paginator

Chameleon paginator

Usage no npm install needed!

<script type="module">
  import chameleonDsPaginator from 'https://cdn.skypack.dev/@chameleon-ds/paginator';
</script>

README

Chameleon Pagniator

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, number } from "@open-wc/demoing-storybook";
import "./chameleon-paginator.js";

export default {
  title: "Components|Navigation/Paginator",
  component: "chameleon-paginator",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name Type(s) Default Value Description
totalItems Number null The total number of items in all pages
pageSize Number null The amount of pages of items
currentPage Number 1 The multiselect's current page
maxLength Number 7 The max length of visible pages
separator String "..." The separator for skipped pages

Examples

Default

export const Default = () => {
  const totalItems = number("Total Items", 100);
  const pageSize = number("Page Size", 10);

  return html`
    <chameleon-paginator
      totalItems="${totalItems ? totalItems : 0}"
      pageSize="${pageSize ? pageSize : 0}"
    ></chameleon-paginator>
  `;
};