Pagination

Updated on 23 November 2016

Docs are work in progress, check open issues and see how you can help!

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