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

label

...label

100

...

100

/ 100

code

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

<bp-field control-width="shrink">
  <label>label</label>
  <bp-input></bp-input>
</bp-field>

...

<bp-field control-width="shrink">
  <label>label</label>
  <bp-select>
    <bp-option value="10">10</bp-option>
    <bp-option value="20">20</bp-option>
    <bp-option value="50">50</bp-option>
    <bp-option value="100">100</bp-option>
  </bp-select>
</bp-field>

...

<bp-pagination aria-label="pagination">
  <bp-select slot="page-size" control-width="shrink">
    <bp-option value="10">10</bp-option>
    <bp-option value="20">20</bp-option>
    <bp-option value="50">50</bp-option>
    <bp-option value="100">100</bp-option>
  </bp-select>
  <bp-button-icon slot="first"></bp-button-icon>
  <bp-button-icon slot="prev"></bp-button-icon>
  <bp-field novalidate layout="compact" control-width="shrink">
    <bp-input type="number" value="1" size="2" min="1" max="99" aria-label="current page"></bp-input>
    <bp-field-message>/ 100</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`