Banano

Appearance

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.