Vuance UI Kit

Navigation

Toolbar

Horizontal or vertical action container with optional selection state.

Toolbar

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Properties

Layout

Type

Multiple

Vue

<m-toolbar
  :items='[{&quot;id&quot;:&quot;preview&quot;,&quot;icon&quot;:&quot;ic:round-visibility&quot;},{&quot;id&quot;:&quot;code&quot;,&quot;icon&quot;:&quot;ic:round-code&quot;},{&quot;id&quot;:&quot;share&quot;,&quot;icon&quot;:&quot;ic:round-share&quot;}]'
  layout="horizontal"
  type="standard"
  :multiple="false"
  v-model="value"
 />

MToolbar API

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

MToolbar

Navigation family
src/runtime/components/ui/toolbar

Props

NameTypeDefault
items
MToolbarItem[]() => []
layout
'horizontal' | 'vertical''horizontal'
type
'standard' | 'baseline''standard'
multiple
booleanfalse

Slots

Events

@selectToolbarItem