Skip to main content

registerToolbarItem

Description​

Registers custom components as elements in the toolbar

Usage​

registerToolbarItem(type: string, handler: Component)<any>): void;

Parameters​

The function accepts the following parameters:

  • type - the unique name that identifies the custom toolbar component.

  • handler - the Vue component that implements the custom toolbar item

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: {} });
  const emit = defineEmits(["click"]);
</script>

<template>
  <button :class="{ menu: props.menu }" @click="emit('click')">{{ 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>