@chameleon-ds/paginator

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>
  `;
};