Pagination

Pagination component is used to navigate between several pages. It’s mainly used in Web, but can be used across all platforms. It consist of three parts: previous and next arrows, pages and ... indicator, which indicates, that there is more pages than visible in navigation (and only visible then).

1 2 3 4 5
1 2 3 4 5 6 ...

Width

Parent

parent pagination uses full-width of parent container and places next arrow at the right end of it.

1 2 3 4 5 6

Specifications

// Base

$pagination-text-type                     : 'subtitle';
$pagination-active-text-theme             : 'amplified';

$pagination-item-vertical-padding         : unit(4);
$pagination-item-size                     : unit(12);

$pagination-item-disabled-opacity         : 0.48;

$pagination-focused-darkness-unit         : 0.02;
$pagination-clicked-darkness-unit         : ($pagination-focused-darkness-unit * 2);

$pagination-focused-background-color      : rgba(palette(cg1), $pagination-focused-darkness-unit);
$pagination-clicked-background-color      : rgba(palette(cg1), $pagination-clicked-darkness-unit);

API

name type default
width content / parent content
items_count integer 5
total_pages_count integer (items_count)
active_page integer 1