Skip to main content

layout

Description​

Optional. Defines the direction in which toolbar items are arranged

Usage​

layout?: "row" | "column";

Parameters​

  • "row" - (default) items are arranged horizontally
  • "column" - items are arranged vertically

Examples​

Vertical toolbar​

<template>
  <Toolbar
    layout="column"
    :items="[
      { comp: 'icon', icon: 'wxi-search' },
      { comp: 'icon', icon: 'wxi-plus' },
      { comp: 'icon', icon: 'wxi-pencil' },
    ]"
  />
</template>

Vertical toolbar with row groups​

<script setup>
const options = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
]
</script>

<template>
  <Toolbar
    layout="column"
    :items="[
      {
        items: [
          { comp: 'icon', icon: 'wxi-close', id: 'close' },
          { comp: 'spacer' },
          { type: 'primary', comp: 'button', text: 'Save', id: 'save' },
        ],
      },
      {
        items: [
          { comp: 'tabs', id: 'batch', options },
        ],
      },
    ]"
  />
</template>

Related article: Changing Toolbar orientation