Skip to content
On this page

BnPagination

BnPagination is a component to handle the pagination of content.

Basic Usage

html
<bn-pagination
  :total-pages="20"
  :current-page="currentPage"
  @page-changed="handlePageChange"
/>

Total Pages and Current Page

The pagination component receives two props to configure its behavior:

  • total-pages: The total number of pages.
  • current-page: The current page.
html
<bn-pagination
  :total-pages="100"
  :current-page="30"
/>

Delta

The delta prop allows you to configure the number of pages to display on either side of the current page. The default value is 1.

html
<bn-pagination
  :total-pages="100"
  :current-page="30"
  :delta="3"
/>

Page Changed Event

When the user clicks a page button, the pagination component will emit the page-changed event with the number of the new page. You can handle this event to update the current page either by using a function or by assigning the value directly.

javascript
const currentPage = ref(10);

function handlePageChange(newPage) {
  currentPage.value = newPage;
}
html
<bn-pagination
  :total-pages="20"
  :current-page="currentPage"
  @page-changed="handlePageChange"
/>
html
<bn-pagination
  :total-pages="20"
  :current-page="currentPage"
  @page-changed="currentPage = $event"
/>

Colors

You can change the color of the pagination buttons using the color prop.

html
<bn-pagination
  :total-pages="20"
  :current-page="currentPage"
  color="lime"
/>

TIP

The color prop only supports the colors set when configuring the library. See Colors for more information.

Customization

There are two ways to customize the appearance of the BnPagination component:

classes prop

Every component has a classes prop that will accept an object where each key corresponds to an internal element of the component. The value of each key will be the classes that will be applied to that element. For the values, you can use strings, objects or arrays, the same way it works with Vue's class binding.

html
<bn-pagination
  :total-pages="50"
  :current-page="currentPage"
  :classes="{ list: 'justify-between flex-1' }"
  @page-changed="currentPage = $event"
/>

Default styles will still be applied, but the classes you provide will take precedence, so you can use this to override any existing style.

The available keys for this component are:

  • list: The <ul> element that wraps the pagination buttons.

Theming

You can change the default appearance or even add variants by editing the configuration of the TailwindCSS plugin.

javascript
plugins: [
    require('@tailwindcss/forms'),
    require('@headlessui/tailwindcss'),
    banano.tailwindPlugin({
      theme: {
        BnPagination: {
          '.bn-pagination': {
            '@apply text-green-600': {},
          }
        }
      }
    }),
  ],

You can find more information about customizing the library in Theme Customization.

API Reference

Props

PropDefaultDescription
as'nav'string

Determines the HTML element that will wrap the pagination elements.
templateUrlundefinedstring

If provided, the buttons of the pagination will be anchors (<a> tags) and this value should be a URL template where {page} will be replaced by the page number. If not provided, the buttons will be <button> tags.
totalPages--number

The total number of pages.
currentPage--number

The current page number.
delta1number

The number of page buttons to show before and after the current page.
colorundefinedstring

Determines the color of the pagination buttons.
classes{}object

Allows you to customize the classes of the elements of the component.

Events

EventPayloadDescription
page-changednumberEmitted when a page button is clicked. The payload is the number of the page clicked.