Home /
UI Kit /
Accordion /

Accordion

Overview

The VAccordionItemCustom component is a versatile accordion component that enables expandable and collapsible sections. This component can be used to structure FAQ items, dropdowns, and other information that needs to be presented in an organized, interactive way. It supports flexible props for size, color, transparency, and default expansion state. The VAccordionItemCustom component in UiKit is highly customizable through SASS variables. It allows defining component-specific styles in ui-kit/src/components/VAccordion/index.sass.

Props

size ('large' | 'small', default: 'small') Defines the size of the accordion title and content text. Use 'large' for prominent headers or 'small' for compact display.
color ('primary' | 'white', default: 'primary') Sets the color theme of the accordion. Use 'primary' for standard coloring or 'white' for a lighter theme.
expanded (boolean, default: false) If true, the accordion item is expanded by default.
transparent (boolean, default: false) If true, the accordion header's background remains transparent.

Emits

update:isOpen (boolean) Emitted when the accordion item's expanded state changes. It sends the current state (true or false).

Usage

The component provides scoped slots for defining the title and content of the accordion. The component manages open/close functionality internally.

Example

vue

<VAccordionItemCustom
  size="large"
  color="primary"
  :expanded="true"
  transparent
  @update:isOpen="handleAccordionState"
>
  <template #title>
    <div class="accordion-title">
      Accordion Title Here
    </div>
  </template>
  
  <template #content>
    <div class="accordion-content">
      This is the detailed content for this accordion item. It can contain text, HTML, or even other Vue components.
    </div>
  </template>
</VAccordionItemCustom>

Styling & Modifiers

The component includes a variety of classes to customize its look and feel based on the provided props:

.is--large and .is--small Apply size-specific styling to the accordion's title and content elements.
.is--primary and .is--white Control the color theme of the accordion's text and icons.
.is--transparent Keeps the header background transparent, allowing for custom designs or effects.
.is--open Applied to the accordion when it's expanded. Adds transitions for height changes and icon rotations.

Customization & Styling

The component comes with default styles but also includes hooks for further styling:

Header Background: Set by default to either a solid or transparent style based on the transparent prop.
Open/Close Icon: The SVG icon rotates when the accordion is expanded, providing a visual indicator.
Transitions: Transitions are applied to both the height of the content area and the rotation of the icon for smooth animations.

Integration Tips

Ensure the update:isOpen event is properly handled if you want to track the open/close state of multiple accordion items. This can be useful for implementing a single-open or multi-open pattern.
Leverage the scoped slots to insert customized titles or rich content into the accordion.

This structured approach mirrors the format of the Breadcrumb documentation, providing clear and concise information about the component, its props, events, usage, and customization options.