Accordion
A single expand/collapse unit with header (icon + title + optional description + optional trailing actions) and a body. Compose multiple together for a typical FAQ or settings group. Toggle Vue / CSS to switch the live demo and source together.
Basic
Single accordion with a label and body.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
States
Default-open, default-closed and disabled.
Vue SFC
Icon & description
Leading icon plus a sub-text under the title.
Vue SFC
Group
Multiple stacked items with the optional group helper.
Vue SFC
Slots
Custom label, description, icon, actions and body via named slots.
Vue SFC
Event log
Live log of mno-toggle events.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Types
Import
import { AccordionProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
label | string | '' | Title text shown in the accordion header. |
description | string | '' | Secondary description text shown under the title. |
modelValue | boolean | false | Bound open state; true when the accordion is expanded. |
disabled | boolean | false | Disables interaction and dims the accordion. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size of the accordion. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme of the accordion. |
cssClass | AccordionCssClass | {} | Per-element class overrides. |