Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Pagination

See deprecated code
expiry date: 30/04/2021

Pagination is used to split up content or data into several pages, with a control for navigating to the next or previous page.

last modified: 08/06/2022 11:30:04

Overview

Depending on pages size, content can be split up into several pages. Especially usefull on results pages or product catalog, use pagination to keep good balance between a long page and and extra action for the users.

Tables

We developped a specific pagination for data tables, the "data pagination". This specific pagination offers more options than the traditional pagination component.
More infos about the data table


States

The pagination is composed of different components of the Design System. For more details on the pagination states, please refer to the articles select and navigation arrows articles.

  1. Default state
    State visible before click.
  2. Hover/Focused state
    State visible when the cursor hovers the navigation arrows and triggered by keyboard navigation or click.
  3. Disabled state
    State visible when the minimum or maximum numbers of elements is reach. The navigation arrow is than not clickable anymore.

Anatomy

The pagination is composed of different components of the Design System. For more details on the pagination anatomy, please refer to related articles.

  1. Select
    Select allows the user to navigate to a specific page by selecting the page number and identify which page he is on.
    This is the default select of the Design System, without label. Anatomy details available in select article.
  2. Total
    Provide context into how many pages/items there are in total.
  3. Separator
    Anatomy details available in separator article.
  4. Previous and next
    Navigate backward and forward from the currently selected page.
    Anatomy details available in navigation arrows article.

Place it correctly

Users will want to change the page after reading the results. For that reason, use pagination at the end of the page and prefer a centered alignement.


Not too few, not too much

Pagination by definition adds a layer of friction for the users. It is important to use it wisely. Depending on the type of page you'd like to add pagination to, try to find a good balance between the number of entries and the pagination. In other words, find the equilibrium between scrolling and changing page.

In specific cases, such as table, you can offer more control to users by allowing the customise the number of entries per page. That being said, when possible, try to remember the preferences of the users when giving such an option. So the next visit, the number of entries displayed will already be fitted to the users' needs.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/09/2022 10:20:06

Pagination is using default and negative "Navigation arrows" basic element. See ad hoc documentation for more details.

There must always be a selected page on <select> even if you're on the first one. Add selected attribute on the <option> element.
Simply add disabled attribute on the <option> element to disable a link to a page.

Accessibility
  • aria-label='Pagination' has to be added to the pagination container and must be translated.
  • "Select" component requires some accessibility attributes. See ad hoc documentation for more details.
  • Select label is required but only visible for screen readers. Be sure it has the class show-for-sr .
Razor

All @rsPagination objects can receive all following optionnal parameters in this exact order:

Parameter Default value if nothing is set
Select: "ID" "ac-selectBox"
Select: number of items 10
Select: selected item 1
"Extra class for pagination container" ""
"Lang" ("en" or "fr" or "nl") "en"


Default pagination

of 10 pages


Default negative pagination

Add rs-pagination-neg class to pagination container.
Wrap rs-form-item layer with a rs-form-neg layer.

Navigation arrows

Use negative version of the "Navigation arrows" component. See ad hoc documentation for more details.

of 10 pages

Alignment

By default, pagination is centered. You can easily change this alignment by adding an utility class (eg: rs-justify-left to align left or rs-justify-right to align right) on pagination container.

of 10 pages

Deprecated

EXPIRY DATE: 30/04/2021

The pagination below is not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class pagination

last modified: 16/09/2022 12:45:14

Configuration metadata (PaginationComponent)

Selector: lib-pagination

Class: PaginationComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
translations IPaginationTranslations undefined Yes Defines the component translations
cypressTag string undefined No Automation tag of the component
setPaginationArray IPaginationElementOptions { value: 0, label: $0, isSelected: true } No Sets the pagination options

Outputs

Name Type Description
setPageClicked >EventEmitter<number> Emits when a page is selected from the dropdown list
nextPageClicked >EventEmitter Emits when next pagination number is clicked
previousPageClicked >EventEmitter Emits when previous pagination number is clicked
page >EventEmitter Emits the selected page number

Models

        export interface IPaginationTranslations {
            pages: string;
            of: string;
            nextPage: string;
            previousPage: string;
            selectPage: string;
            pagination: string;
        }

        export interface IPaginationElementOptions {
            totalPages: number;
            number: number; // the initial value is 0
            selectId?: string;
            extraClasses?: string;
            negative?: boolean;
            alignment?: 'left' | 'right' | 'center';
        }