registerToolbarItem

Description

Registers custom components as elements in the toolbar

Usage

registerToolbarItem(
  type: string, 
  handler: Component<any>,
  config?: { menu?: boolean }
): void;

Parameters

The function accepts the following parameters:

• type – (required) the unique name that identifies the custom toolbar component
• handler – (required) the Vue component (SFC) that implements the custom toolbar item
• config - (optional) a configuration object with the following property:
  • menu - (optional) if true, registeres a separate renderer for the overflow menu

Examples

Register custom component as toolbar's element

<script setup>
  import { Toolbar, registerToolbarItem } from "@svar-ui/vue-toolbar";
  import { Text } from "@svar-ui/vue-core";

  // register custom component
  registerToolbarItem("text", Text);
</script>

<template>
  <Toolbar
    :items="[
      { id: 'label', text: 'Toolbar with text input' },
      { id: 'search', comp: 'text' },
    ]"
  />
</template>

Create custom button control for toolbar

In myControl.vue

<script setup>
  const props = defineProps({ menu: {}, text: {} });
</script>

<template>
  <button :class="{ menu: props.menu }" :onclick="props.onclick">{{ props.text }}</button>
</template>

<style scoped>
  .menu {
    font-weight: bold;
  }
</style>

• custom control can fire onclick event on activation
• menu property will be set to true, when component is inside of popup menu
• any other property set in the item object will be available

In App.vue:

<script setup>
  import { Toolbar, registerToolbarItem } from "@svar-ui/vue-toolbar";
  import MyControl from "./MyControl.vue";

  // register custom component
  registerToolbarItem("cb", MyControl);
</script>

<template>
  <Toolbar
    :items="[
      { id: 'label', text: 'Toolbar with custom button' },
      { id: 'search', comp: 'cb' },
    ]"
  />
</template>

Create custom input control for toolbar

In myControl.vue:

<script setup>
  const value = defineModel('value');
  const props = defineProps({ type: { default: 'text' } });
</script>

<template>
  <input type="text" v-model="value" />
</template>

• value property will contain initial value
• changes to value will be reflected in toolbars state
• any other property set in the item object will be available

In App.vue:

<script setup>
  import { Toolbar, registerToolbarItem } from "@svar-ui/vue-toolbar";
  import MyControl from "./MyControl.vue";

  // register custom component
  registerToolbarItem("ci", MyControl);
</script>

<template>
  <Toolbar
    :items="[
      { id: 'label', text: 'Toolbar with custom input' },
      { id: 'search', comp: 'ci', type: 'search' },
    ]"
  />
</template>

Registering a separate renderer for the overflow menu

You can register two different components under the same type:

• the first one, Segmented, for the default toolbar mode
• the second one, ButtonList, specifically for the menu mode, by passing { menu: true } as the config argument

If no menu-specific component is registered, the default component is reused for both.

<script setup>
  import { Toolbar, ButtonList, registerToolbarItem } from "@svar-ui/vue-toolbar";
  import { Segmented } from "@svar-ui/vue-core";

  // register component for the `toolbar` mode
  registerToolbarItem("segmented", Segmented);
  // register a separate component for the `menu` mode
  registerToolbarItem("segmented", ButtonList, { menu: true });

  const items = [
  // ... more toolbar items
    {
      id: "mode",
      comp: "segmented",
      value: "1",
      options: [
        { id: "1", label: "All" },
        { id: "2", label: "Active" },
      ],
    },
  ];
</script>

<template>
  <Toolbar :items="items" />
</template>

The choice which component (Segmented or ButtonList) to render is resolved automatically based on the item's current location:

• horizontal Segmented component is used when the item is rendered directly in the toolbar
• the ButtonList component is used if the same item collapses into the overflow menu