Skip to content

Pagination - Web Component โ€‹

Browser support โ€‹

Detected engine: ย 

  • Chromium

  • Webkit

  • Gecko

Parameters โ€‹

The Web component uses the <z-pagination> tag:

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
pagesnumberTotal number of pages
show-edgesbooleanShow first and last page buttons
disabledbooleanBlocks user interaction with the component

The events emitted from the component are:

NamePayloadDescription
onchangenumberReturns the new value of the "value" attribute

pages โ€‹

The pages parameter is used to set the number of pages that the pagination will have.

show-edges โ€‹

The show-edges parameter is used to set the visibility of the first and last pages.

disabled โ€‹

The disabled parameter is used to block the interaction with the component.

Playground โ€‹

Customization โ€‹

HTML Examples โ€‹

Imports
html
<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/pagination.js"></script>
Code
html
<z-pagination pages="100" value="1" show-edges></z-pagination>