Tabs
The Nuvex UI tabs suite combines ETabGroup and ETab to organize related views behind one active selection. Pair it with EWindow and EWindowItem when each tab controls a content panel with synchronized state and accessible relationships.
Usage
Configure the active value and the main group props in the playground. Each ETab has a stable value, while the shared v-model identifies the current selection.
Selected tab: overview
Content panels
Connect tabs to EWindowItem panels through the same model values. Give ETabGroup and EWindow the same name to generate matching tab and panel IDs.
Review the workspace summary and recent project health.
Orientation
Tabs are horizontal by default. Enable vertical for side navigation; the indicator rotates and keyboard movement changes from Left and Right to Up and Down.
Foundation
Color, type, spacing, and surface foundations.
States and interactions
The model controls active and inactive state and can be updated from tabs or application actions. Individual tabs inherit Button state props such as disabled.
Slots and composition
The group default slot owns the tab sequence, and each tab default slot owns its label. Tabs also inherit Button icon support.
Accessibility and keyboard
Tabs expose tablist, tab, and tabpanel semantics with roving focus. Horizontal groups support Left and Right; vertical groups support Up and Down. Home and End move to the first and last tab.
Focus a tab and use the arrow keys, Home, or End.
Review the workspace summary and recent project health.
API reference
Reference the public props for ETabGroup and the primary ETab props. Events and slots are summarized after the tables.
ETabGroup props
| Property | Type | Default |
|---|---|---|
| modelValue | string | number | undefined |
Active tab value synchronized through update:modelValue. | ||
| color | string | undefined |
Sets the active tab and indicator color. | ||
| inactiveColor | string | undefined |
Sets the color inherited by inactive tabs. | ||
| track | boolean | false |
Renders a baseline beneath the active indicator. | ||
| vertical | boolean | false |
Uses a vertical layout and switches keyboard navigation to the vertical axis. | ||
| grow | boolean | false |
Distributes the available space equally between tabs. | ||
| tabAlign | "start" | "center" | "end" | "center" |
Aligns tabs along the group main axis. | ||
| name | string | undefined |
Prefixes tab and panel IDs used by the accessible relationship. | ||
ETab props
| Property | Type | Default |
|---|---|---|
| value | string | number | required |
Unique identity matched against the parent group model. | ||
| icon | string | IconPath | IconPath[] | undefined |
Renders an icon in the tab button. | ||
| disabled | boolean | false |
Disables pointer and keyboard activation for this tab button. | ||
| color | string | inherited |
Overrides the group color for this tab when active. | ||
| to | RouteLocationRaw | undefined |
Forwards a navigation target to the inherited button contract. | ||
Events and slots
ETabGroup emits update:modelValue and exposes the default slot. ETab emits click and exposes default and activator slots. A custom activator must preserve the tab role, ARIA attributes, and keyboard behavior.