Pagination

This component helps in rendering content for browsing.

To use a full-featured pagination, some additional data attributes are required. You can find these attributes in Mobile.

It is recommended that the amount of items displayed be limited. I.e. no more than 13 .pagination__item should be shown in the list. This already includes the icons.

The single arrows should go back/forward only one step, while the double arrows should go back/forward ten steps.

A good structure of a pagination would be for example

HTML

The pagination is built with list HTML elements so screen readers can announce the number of available links.

The usage of simple div-Tags instead of nav-, ul-, li-, a-Tags is also possible.

Active

Show active Indicator by adding the Modifier .pagination__item--active to an Item. Their should be only one active item.

Load

Show load indicator while pagination loads elements after click with the .pagination--load modifier.

Disable

1. Disable the whole pagination Component pagination--disable
2. Disable all pagination-Items (Selective disabling possible) pagination__item--disable
3. Disable the Mobile Navigation pagination--disable

Stretch

• .pagination–stretch - stretch always
• .pagination–stretch-lg - stretch until breakpoint lg
• .pagination–stretch-md - stretch until breakpoint md
• .pagination–stretch-sm - stretch until breakpoint sm
• .pagination–stretch-xs - stretch until breakpoint xs

Mobile

If the correct data attributes will set, the pagination will automatically add a mobile version of the pagination. The following attributes are required

Data attribute of the .pagination block:

• data-sg-pagination-mobile - boolean - If this flag is set to true, the component try to render the mobile pagination initially in the background.
• data-sg-pagination-range - number[] - This list of numbers must contain all page entries, based on which the mobile select box is built.
• data-sg-pagination-range-min - number - Instead of the range, you can set a min/max value with the two min/max data attributes.
• data-sg-pagination-range-max - number - Instead of the range, you can set a min/max value with the two min/max data attributes.
• data-sg-pagination-link - string - If this attribute is set, a web page will be called, with the text “{PAGE}” being replaced with the selected page.
• onchange - string - Instead of the link, a callback javascript function can be called. Add a onchange Attribute to your .pagination block. This will receive a CustomEvent with the filled detail property, use them like onchange="callSomeFunction(event.detail.page)".

Data attribute of the .pagination__item elements:

• data-sg-pagination-page - number - Every item (except those with arrow icons) must have this attribute.

Special Constellations

Pagination items are currently limited to not overflow the item box based on the available space.

Simple example of pagination with only one available pagination item: