Pagination Component

Component that displays data in paged format and provides navigation between pages.

Componente che visualizza dati in un formato paginato e fornisce una navigazione tra le pagine.

API Reference

Props

| Name | Type | Description | |:---------------------|:----------|:-------------------------------------------------------------------------------------------------------| | data-aria-label | string | The aria label of the pagination nav element. | | data-page | number | The controlled value of the current page. | | data-pages-number | number | Number of pages in your pagination. | | data-sibling-count | number | How many sibling should be shown around the current page. | | data-show-edges | boolean | When true indicates that the pagination always show first page, last page, and add ellipsis if needed. |

Emit

| Name | Value | Description | |:-----------|:---------------|:--------------------------------------------------| | @update | page: number | Event handler called when the page value changes. |

Slots

| Name | Description | |:-------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | page-first | Scoped slot for an icon used to navigate to the first page. | | page-prev | Scoped slot for an icon used to navigate to the previous page. | | page | Required. Scoped slot used for render the navigable pages rendered based on the configuration in input. Should slot a tag a or a tag button if you want the navigation through keyboard to work, you can also slot a router-link | | page-next | Scoped slot for an icon used to navigate to the next page. | | page-last | Scoped slot for an icon used to navigate to the last page. |

CSS variables

| Name | default | Description | |:------------------------------------------------|:--------------|:---------------------------------------------------------------------------| | --pagination-page-item-gap | 0.25rem | Gap between page-item. | | --pagination-page-item-width | 2.5rem | Value of page-item width. | | --pagination-page-item-height | 2.5rem | Value of page-item height. | | --pagination-page-item-bg-color | transparent | Value of page-item background-color. | | --pagination-page-item-color | #000000 | Value of page-item color. | | --pagination-page-item-border-width | 1px | Value of page-item border-width. | | --pagination-page-item-border-style | solid | Value of page-item border-style. | | --pagination-page-item-border-color | #000000 | Value of page-item border-color. | | --pagination-page-item-border-radius | 0.375rem | Value of page-item border-radius. | | --pagination-page-item-transition-duration | 0.15s | Value of page-item transition-duration. | | --pagination-page-item-active-border-width | 1px | Value of page-item border-width when the page-item has class active. | | --pagination-page-item-active-border-style | solid | Value of page-item border-style when the page-item has class active. | | --pagination-page-item-active-border-color | #000000 | Value of page-item border-color when the page-item has class active. | | --pagination-page-item-active-bg-color | transparent | Value of page-item background-color when the page-item has class active. | | --pagination-page-item-active-color | #000000 | Value of page-item color when the page-item has class active. | | --pagination-page-item-disabled-border-width | 1px | Value of page-item border-width when the page-item has class disabled. | | --pagination-page-item-disabled-border-style | solid | Value of page-item border-style when the page-item has class disabled. | | --pagination-page-item-disabled-border-color | #000000 | Value of page-item border-color when the page-item has class disabled. | | --pagination-page-item-disabled-bg-color | transparent | Value of page-item background-color when the page-item has class disabled. | | --pagination-page-item-disabled-color | #000000 | Value of page-item color when the page-item has class disabled. | | --pagination-page-item-disabled-cursor | not-allowed | Value of page-item cursor when the page-item has class disabled. | | --pagination-page-item-disabled-opacity | 0.333 | Value of page-item opacity when the page-item has class disabled. | | --pagination-page-item-hover-border-width | 1px | Value of page-item border-width when the page-item is in hover status. | | --pagination-page-item-hover-border-style | solid | Value of page-item border-style when the page-item is in hover status. | | --pagination-page-item-hover-border-color | #000000 | Value of page-item border-color when the page-item is in hover status. | | --pagination-page-item-hover-bg-color | transparent | Value of page-item background-color when the page-item is in hover status. | | --pagination-page-item-hover-color | #000000 | Value of page-item color when the page-item is in hover status. | | --pagination-page-item-hover-opacity | 1 | Value of page-item opacity when the page-item is in hover status. |

Usage/Examples

<pagination-cmp
  :data-page="page"
  :data-pages-number="pagesNumber"
  @update="page = $event"
>
  <template #page-first="{ disabled }">
    <a
      href="#"
      aria-label="First page"
      :tabindex="disabled ? '-1' : null"
    >
      <span aria-hidden="true">&laquo;</span>
    </a>
  </template>
  <template #page-prev="{ disabled }">
    <a
      href="#"
      aria-label="Previous page"
      :tabindex="disabled ? '-1' : null"
    >
      <span aria-hidden="true">&lsaquo;</span>
    </a>
  </template>
  <template #page="{ pageN }">
    <a href="#">{{ pageN }}</a>
  </template>
  <template #page-next="{ disabled }">
    <a
      href="#"
      aria-label="Next page"
      :tabindex="disabled ? '-1' : null"
    >
      <span aria-hidden="true">&rsaquo;</span>
    </a>
  </template>
  <template #page-last="{ disabled }">
    <a
      href="#"
      aria-label="Last page"
      :tabindex="disabled ? '-1' : null"
    >
      <span aria-hidden="true">&raquo;</span>
    </a>
  </template>
</pagination-cmp>

Screenshots