Pagination
A page navigating component that supports random page access.
Showcase
Source
<Pagination pages={20} />Properties #
Style Properties
Name | Default | Type | Description |
|---|---|---|---|
showLonePage | true | boolean | Whether the pagination component should be displayed when there's only one page. |
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
pages * | number | The amount of pages to allow for navigation. | |
currentPage | 1 | number | The currently selected page (starting from 1). |
... | any | Everything else will be passed to the underlying <nav> element. |
* Required
Class Properties
All <Pagination> components use the .pagination class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
Events #
Name | Event Detail | Description |
|---|---|---|
change | { value } | Fired when a page is changed. The value contains the currently selected page. |
SCSS Variables #
Name | Description | Default |
|---|---|---|
$main | The color of selection and the focused text fields' borders. | #4300B0 |
$font From Button | The font of the page buttons. | 'Ubuntu' |
$button-radius From Button | The curvature radius of the page buttons. | 1.5625em |
$dark From Button | The color of the page buttons. | #333333 |
$bold-font-weight From Button | The font weight of the page buttons. | 500 |
$textfield-border From TextField | The border color of the unselected text fields. | rgba(0, 0, 0, .42) |
$textfield-bg From TextField | The background color of the text fields. | #F5F5F5 |
$textfield-bg-error From TextField | The background color of the text fields when an invalid page is entered. | #FBEEEE |
$danger From TextField | The color of the text fields' border when an invalid page is entered. | #B80000 |
$font From TextField | The font family of the text inside the text fields. | 'Ubuntu' |
$thin-font-weight From TextField | The thin font weight for the text inside the text fields. | 300 |