Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Carousel

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the Carousel component is CAROUSEL_STYLES.

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

Carousel component has one way to modify the styles and another to modify the arrows styles:

  • Variant: modify the styles of the Carousel.

Variants

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

12345678910
const CAROUSEL_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType,
    arrowAndCarouselContainer?: CommonStyleType,
    leftArrowIcon?: IconTypes,
    rightArrowIcon?: IconTypes,
    leftArrowIconDisabled?: IconTypes,
    rightArrowIconDisabled?: IconTypes,
    carouselContainer?: CommonStyleType,
    content?: CommonStyleType,

Carousel Arrows States

Additionally, the Carousel control arrows have state-based tokens. The states are:

123456
enum CarouselArrowStateType {
  DEFAULT,
  HOVER,
  PRESSED,
  DISABLED,
}

And the Carousel arrows styles states tokens are:

12345678910
const CAROUSEL_STYLES = {
  [VARIANT]: {
    ...restTokens,
    [ARROW_STATE]: {
      arrowLeftIconContainer?: CommonStyleType,
      arrowLeftIconButtonContainer?: CommonStyleType,
      arrowRightIconContainer?: CommonStyleType,
      arrowRightIconButtonContainer?: CommonStyleType,
    },
  },

Example

Carousel theme object example:

12345678910
const CAROUSEL_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType,
    arrowAndCarouselContainer?: CommonStyleType,
    leftArrowIcon?: IconTypes,
    rightArrowIcon?: IconTypes,
    leftArrowIconDisabled?: IconTypes,
    rightArrowIconDisabled?: IconTypes,
    carouselContainer?: CommonStyleType,
    content?: CommonStyleType,
CarouselCode API
CarouselAccessibility