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