• Skip to the menu
  • Skip to the main content
Back
Logo Ipedis

COMPONENTS

Pagination

Pagination is a tool used to navigate through extended content on multiple pages. Generally placed at the bottom of the page, it offers links to move between the following, previous, numbered and sometimes the first or last pages, thus making large sets of content more accessible and manageable, improving user experience and use.

Demo

Code

Documentation

Installation

Follow these steps to install and use the le composant ip-pagination dans votre projet.

Step 1

Install the ip-pagination component as a dependency in your project:

npm install ip-accordion

Step 2

Import the module into your script file:

Usage

To use this component, add the properties as attributes.

Properties

Property Attribute Necessity Description Type Default
totalPages total-pages Required The total number of pages. number 10
currentPage current-page OptionalThe current active page. number 1
visiblePages visible-pages OptionalThe number of pages to display in the pagination controls. number 5

Customization

We have a set of predefined variables used to customize the pagination:

  • --pagination-button-color
  • --pagination-button-background
  • --pagination-button-border-radius
  • --pagination-button-padding
  • --pagination-button-active-background
  • --pagination-button-disabled-color

To update the values, use the following CSS:

    
  

Event listening

To listen this event emitted,we have definied pageChanged event in this component.

The pageChanged event is fired when the current page changes. You can listen to this event to handle page changes.

    
  
  • Privacy and cookie policy Opens in a new window
  • Legal Notice Opens in a new window
  • Ipedis.com Opens in a new window