Cps-pagination NPM

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	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

cps-select

@infinitebrahmanuniverse/nolb-cp @everything-registry/sub-chunk-1395 cps-tour-list

1.0.1

4 years ago

1.0.0

4 years ago