Vuance UI Kit

Navigation

Tabs

Related-view navigation with automatic activation and linked panels.

Tabs

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

The active panel is controlled by v-model.

Properties

Tab

Vue

<m-tabs
  :items='[{&quot;value&quot;:&quot;overview&quot;,&quot;label&quot;:&quot;Overview&quot;},{&quot;value&quot;:&quot;api&quot;,&quot;label&quot;:&quot;API&quot;},{&quot;value&quot;:&quot;tokens&quot;,&quot;label&quot;:&quot;Tokens&quot;}]'
  v-model="value"
>
  The active panel is controlled by v-model.
</m-tabs>

MTabs API

Props, slots, and events are extracted from the current public UI Kit contract.

MTabs

Navigation family
src/runtime/components/ui/tabs

Props

NameTypeDefault
items
MTabItem[]undefined

Slots

Events

MTabs does not emit component-specific events. Native events fall through to its root element.