Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Page control

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the PageControl component is PAGE_CONTROL_STYLES.

You can not change the name of the object of tokens.

There are two props that allow to modify different aspects of the component:

  • Variant: modify the styles of the PageControl.
  • ArrowsControlVariant: modify the styles of the PageControl Arrows Control.

Variants

Variants can modify the styles for the PageControl. The tokens used are:

Additionally, there are states to modify each PageControl dot individually. The internal states are:

12345
enum PageControlState {
  CURRENT,
  DEFAULT,
  LAST,
}

And the internal state token is:

Arrows Control variants

The Arrows Control variant tokens are:

Additionally, the arrow variants have styles according to state. The states are:.

1234
enum ArrowsControlState {
  INACTIVE,
  ACTIVE,
};

The token for the Arrows Control variant states is:

Example

PageControl theme object example:

12345678910
const PAGE_CONTROL_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType,
    dotsContainer?: CommonStyleType,
    isBullet?: boolean,
    [DOT_STATE]: {
      pageDot?: CommonStyleType,
    },
  },
  [ARROW_VARIANT]: {
Page controlCode API
Page controlAccessibility