Tabs
A horizontal tab strip with sizes, color variants, three visual styles (underline / pill / ghost), optional count badges, optional SVG icons via slot, and per-item disabled state. Content panes live outside the strip — drive them off the bound model-value. Toggle Vue / CSS to switch the live demo and source together.
Basic
Three tabs with text panes that swap on click.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
Variants
underline, pill and ghost.
Vue SFC
Badges
Tabs with trailing count badges.
Vue SFC
Icons
Leading SVG icons via the icon-{id} slot.
Vue SFC
Disabled
Whole-strip disabled, plus per-item disabled.
Vue SFC
Event log
Live log of mno-click events.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Types
Import
import { TabsProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
items | TabItem[] | [] | List of tabs to render. |
modelValue | string | '' | Two-way bound id of the active tab. |
value | string | '' | Id of the active tab (kept in sync with modelValue). |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the tabs. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme of the tabs. |
variant | 'pill' | 'underline' | 'ghost' | 'underline' | Visual style of the tabs. |
disabled | boolean | false | Disables interaction with all tabs. |
cssClass | TabsCssClass | {} | Per-part class overrides for styling internal elements. |