components
Page control
v.1.0.0 | Saturn
StorybookComponents
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | Indicates the first and the last page. |
2 Required | Indicates the page you are placed. |
3 Required | Indicates the rest of the pages. |
4 | It is used to move from different pages. |
States
Active page (current)A solid, wider dot denotes the current page.
Inactive page (default)A solid circular dot denotes the available pages.
Active arrowA color arrow indicates is clickable to move to forward the next element or go back to the previus.
Disabled arrowA color arrow indicates is not clickable. Not exist action.
Behaviour
PaginateA solid, wider dot denotes the current page.
Circular paginationPagination can be circular. When the user reaches the end, the carousel starts again. Circular pagination will always show the active arrows.
Start-to-end paginationThe user will be able to scroll to the last page and can return to previous pages by swiping from left to right.
Options
Start-to-end pagination
- 2 to 4 pages
All dots can change to current page.
- 5 pages
All dots can change to current page.
- More than 5 pages
All dots can change to current page.
Circular pagination
When the user reaches the end, the carousel starts again. Circular pagination will always show the active arrows.
Layout
Vertical groupingThe page controller must respect a margin of 16px with the pager element.
Do's and dont's
Do’s
The current page state must have to keep the shape and color.
Don’t
Small dots on the sides cannot change state.
Don’t
To avoid excess information, when there are more than six pages we will use the variant over 6.