Pagination Web Component

Install

npm install cps-pagination

Usage

<cps-pagination total-pages="10"></cps-pagination>

const pagination = document.querySelector('cps-pagination');

pagination.addEventListener('pageChanged', evt => { 
  pagination.currentPage = evt.detail; 
});

Properties

| Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | ----------- | --------- | ----------- | | currentPage | current-page | | number | 1 | | disabled | disabled | | boolean | false | | pagerLimit | pager-limit | | number | 5 | | selectDisabled | select-disabled | | boolean | false | | totalPages | total-pages | | number | 1 |

Events

| Event | Description | Type | | ------------- | --------------------------------- | -------------------------- | | pageChanged | Return value after selected page | CustomEvent<number> |

CSS Variables

--cps-font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

--cps-border-color: #dbdbdb;
--cps-hover-border-color: #a6a6a6;
--cps-bg-color: #fff;
--cps-icon-color: #4a4a4a;
--cps-font-color: #4a4a4a;
--cps-ellipsis-font-color: #b5b5b5;
--cps-selected-bg-color: #686179;
--cps-selected-font-color: #fff;

Overwrite CSS Variables

<style>
  cps-pagination {
    --cps-bg-color: black;
  }
</style>
<cps-pagination total-pages="10"></cps-pagination>

Browser compatibility

• Chrome
• Edge
• Firefox
• Safari
• Opera

Changelog

1.0.1

• Release 06.05.2020

• Doc

  • Updates

1.0.0

• Release 06.05.2020

Built with StencilJS