Accordion

Classes for the Accordeon component.

Overview

The Accordion component in VulcanUI features a hierarchical structure that mirrors the actual HTML DOM. This documentation provides a comprehensive guide to all available BEM classes for the Sidebar styling and customization.

The Sidebar component follows a strict hierarchical structure with the root container ds-sidebar__viewport containing all sub-elements. Each level serves a specific purpose and can be styled independently.

[CODE]

[IMAGEN]

Class hierarchy

The hierarchical class structure is as follows. Modifiers are in parenthesis.

 * ds-accordion (root --expanded --collapsed --draggable)
 * ├── ds-accordion__toggle (--disabled --expanded --collapsed)
 * ├── ds-accordion__content (--visible --hidden --animated)
 * ├── ds-accordion__header (--expanded --collapsed)
 * │   ├── ds-accordion__header-container
 * │   ├── ds-accordion__header-title
 * │   ├── ds-accordion__header-subtitle
 * │   ├── ds-accordion__header-details
 * │   └── ds-accordion__header-actions (--visible --hidden)
 * ├── ds-accordion__chevron (--expanded --collapsed)
 * │   └── ds-accordion__chevron-icon
 * ├── ds-accordion__drag
 * │   ├── ds-accordion__drag-handle
 * │   └── ds-accordion__drag-icon
 * └── ds-accordion__item (--active)
 *     └── ds-accordion__item-label

The below images map the classes of the Sidebar by number so when using them, you know which part to target specifically with your custom CSS stylesheet:

Accordion classes