overflow

Description

Optional. Controls how the toolbar handles items that do not fit on the screen

Usage

overflow?: "collapse" | "wrap" | "menu";

Examples

When button's group can't fit on a screen, collapse it to an icon:

<template>
  <Toolbar
    overflow="collapse"
    :items="[
      {
        id: 'font-family',
        comp: 'richselect',
      },
      {
        id: 'font-size',
        comp: 'richselect',
      },
      {
        // this group may collapse on overflow
        layout: 'row',
        items: [
          {
            id: 'font-bold',
            comp: 'icon',
            icon: 'wxi-bold',
          },
          {
            id: 'font-italic',
            comp: 'icon',
            icon: 'wxi-italic',
          },
          {
            id: 'font-underline',
            comp: 'icon',
            icon: 'wxi-underline',
          },
        ],
      },
    ]"
  />
</template>

If you want to collapse whole toolbar, put all icons in top level "row" block.

When buttons can't fit on a screen, wrap them on the next line:

<template>
  <Toolbar overflow="wrap" />
</template>

this is the default behavior. on overflow, menu item will be placed on next line of the toolbar.

When button's group can't fit on a screen, move them to the popup menu:

<template>
  <Toolbar overflow="menu" />
</template>