@frankhoodbs/pagination-cmp

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