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.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/pagination.js"></script>
Code
html
<z-pagination pages="100" value="1" show-edges></z-pagination>