Pagination

npm2.0.0

The Pagination component is used to navigate through a large number of pages. It allows users to easily switch between pages by clicking on page numbers or navigating to the first, previous, next, or last page.

Example

/ 3

code

<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="first"></bp-button-icon>
  <bp-button-icon slot="prev"></bp-button-icon>
  <bp-field novalidate>
    <bp-input type="number" value="1" size="2" min="1" max="99" aria-label="current page"></bp-input>
    <bp-field-message>/ 3</bp-field-message>
  </bp-field>
  <bp-button-icon slot="next"></bp-button-icon>
  <bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>

Basic

code

<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="prev"></bp-button-icon>
  <bp-button-icon slot="next"></bp-button-icon>
</bp-pagination>

Basic Pagination Number

1 / 3

code

<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="prev" action="flat"></bp-button-icon>
  <span aria-label="current page">1 / 3</span>
  <bp-button-icon slot="next" action="flat"></bp-button-icon>
</bp-pagination>

First And Last

1 / 3

code

<script type="module">
  import '@blueprintui/components/include/pagination.js';
</script>

<bp-pagination aria-label="pagination">
  <bp-button-icon slot="first"></bp-button-icon>
  <bp-button-icon slot="prev"></bp-button-icon>
  <span aria-label="current page">1 / 3</span>
  <bp-button-icon slot="next"></bp-button-icon>
  <bp-button-icon slot="last"></bp-button-icon>
</bp-pagination>

Input Interactive

code

<form id="pagination-form" bp-layout="block gap:md">
  <bp-pagination-input name="pagination" value="1" max="500" size="10" size-options="[10, 50, 100]"></bp-pagination-input>
  <bp-button type="submit" action="secondary">Submit <span>1</span></bp-button>
</form>
<script type="module">
  import '@blueprintui/components/include/button.js';
  import '@blueprintui/components/include/pagination.js';
  const form = document.querySelector('#pagination-form');
  const pagination = document.querySelector('#pagination-form bp-pagination-input');
  pagination.addEventListener('change', (e) => (document.querySelector('#pagination-form span').innerHTML = e.target.value));
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('submit', Object.fromEntries(new FormData(form)));
  });
</script>

The pagination input is a form control type that can be used within forms providing a input, change and compatible with FormData.

Install

NPM

// npm package
import '@blueprintui/components/include/pagination.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/pagination.js/+esm';
</script>

Accessibility

The Pagination component should be keyboard accessible and support keyboard navigation.
The Pagination buttons should have appropriate aria-labels that describe each action.

bp-pagination

Properties

Name	Types	Description
`i18n`		set default aria/i18n strings

Attributes

Name	Types	Description
`i18n`		set default aria/i18n strings

CSS Properties

Name	Types	Description
`--gap`

Slots

Name	Types	Description
`default`
`first`
`next`
`prev`
`last`