Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Accordion

v.1.0.0 | Saturn

Usage

The name of the tokens object to style accordion is ACCORDION_STYLES.

You can not change the name of the tokens object.

Accordion component style can be configured through the variant prop:

  • Variant: modify the styles of the Accordion.

The structure of the ACCORDION_STYLES object is:

Variants

Variants can modify the styles for the Accordion.

The tokens used are:

Some of these tokens are being deprecated and they will be removed in the version 2.0.0:

  • link: Currently, it is used instead of trigger when tittle is not type of string. In the next major only trigger styles will be used.
12345678910
const ACCORDION_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType;
    decorative?: CommonStyleType;
    headerExternalContainer?: CommonStyleType;
    headerInternalContainer?: CommonStyleType;
    headerMainContainer?: CommonStyleType;
    trigger?: CommonStyleType;
    link?: CommonStyleType;
    triggerIconContainer?: CommonStyleType;

Example

accordion theme object example:

12345678910
const ACCORDION_STYLES = {
  [VARIANT]: {
    container?: {
      background_color: 'background-color',
      display: 'display',
      flex_direction: 'flex-direction',
      position: 'position',
      border: 'border',
    },
    headerExternalContainer?: {
AccordionCode API
AccordionAccessibility