Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Compact-Paginator Info

What does the component do?

The Compact Paginator component enables navigation through large amounts of content by dividing the content into several pages. It shows users which page they are on and provides control elements for switching between pages.

When should the component be used?

  • When a large number of entries or content needs to be managed efficiently.
  • When an alternative to infinite scrolling is required.
  • If there is not enough space for the Paginator component

Rules

  • If the number of pages is small, an alternative solution such as ‘Load more’ can be considered instead of a paginator.
Paginator
Demo

Playground

Sizes M S Pager position At the beginning At end Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Default
Try it out on Storybook Show HTML
Negative
Try it out on Storybook Show HTML
Disabled
Try it out on Storybook Show HTML
Disabled Negative
Try it out on Storybook Show HTML
Size S
Try it out on Storybook Show HTML
Negative Size S
Try it out on Storybook Show HTML
Pager Position End
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

The sbb-compact-paginator provides an alternative to the sbb-paginator
as a navigation for content split across multiple pages, e.g. a table with many rows.
Differently from the sbb-paginator, it displays only the current page and the total number of pages
together with the sbb-mini-button-group to move to previous or next page.

It can be controlled via the following properties:

  • length: the total number of items being paged;
  • pageSize: the number of items per page (default: 10);
  • pageIndex: the index of the current displayed page (default: 0).
<sbb-compact-paginator length="100" page-size="20"></sbb-compact-paginator>

By default, a sbb-mini-button-group with two buttons is displayed,
which allows moving to the previous/next pages.
The positioning of this element relative to the page numbers is set using the pagerPosition property (default: start):

<sbb-compact-paginator length="100" page-size="20" pager-position="end"></sbb-compact-paginator>

States

The component can be disabled by using the disabled property.

<sbb-compact-paginator length="100" page-size="20" disabled></sbb-compact-paginator>

Style

The component has two size, named s and m (default).

<sbb-compact-paginator length="100" page-size="20" size="s"></sbb-compact-paginator>

Events

Consumers can listen to the page event on the sbb-compact-paginator component to intercept the page change event.
The event.detail contains both the information about the pageIndex and the previousPageIndex,
as well as the length and the pageSize.

Accessibility

The component has role="group" to semantically group its child controls;
consumers should add an appropriate aria-label attribute with a text
that describes the content controlled by the paginator.

<sbb-compact-paginator aria-label="Select page" length="100" page-size="20"></sbb-compact-paginator>

Properties

Name Attribute Privacy Type Default Description
accessibilityNextPageLabel accessibility-next-page-label public string '' Accessibility label for the next page. Defaults to next page. Can be set for cases like a carousel, where slide or image fits better.
accessibilityPageLabel accessibility-page-label public string '' Accessibility label for the page. Defaults to page. Can be set for cases like a carousel, where slide or image fits better.
accessibilityPreviousPageLabel accessibility-previous-page-label public string '' Accessibility label for the previous page. Defaults to previous page. Can be set for cases like a carousel, where slide or image fits better.
disabled disabled public boolean false Whether the component is disabled.
length length public number 0 Total number of items.
negative negative public boolean false Negative coloring variant flag.
pageIndex page-index public number 0 Current page index.
pagerPosition pager-position public 'start' | 'end' 'start' Position of the prev/next buttons.
pageSize page-size public number 10 Number of items per page.
size size public 'm' | 's' 'm' / 's' (lean) Size variant, either m or s.

Methods

Name Privacy Description Parameters Return Inherited From
firstPage public Move to the first page if not already there. void SbbPaginatorCommonElementMixin
hasNextPage public Whether there is a next page. boolean SbbPaginatorCommonElementMixin
hasPreviousPage public Whether there is a previous page. boolean SbbPaginatorCommonElementMixin
lastPage public Move to the last page if not already there. void SbbPaginatorCommonElementMixin
nextPage public Advances to the next page if it exists. void SbbPaginatorCommonElementMixin
numberOfPages public Calculates the current number of pages based on the length and the pageSize; value must be rounded up (e.g. length = 21 and pageSize = 10 means 3 pages). number SbbPaginatorCommonElementMixin
previousPage public Move back to the previous page if it exists. void SbbPaginatorCommonElementMixin
selectPage public Move to a specific page index. index: number void SbbPaginatorCommonElementMixin

Events

Name Type Description Inherited From
page CustomEvent<SbbPaginatorPageEventDetails> The page event is dispatched when the page index, length or page size changes. SbbPaginatorCommonElementMixin
Contact

Do you have any questions? Maybe our FAQ or our help will be helpful, otherwise you can post your question on the corresponding board on Github.

Imprint Contact Data privacy Cookie settings