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 Svelte component that implements the custom toolbar item

Examples​

Register custom component as toolbar's element​

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

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

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

Create custom button control for toolbar​

In myControl.svelte

<script>
  export let menu;
  export let text;
</script>

<button class:menu onclick>{text}</button>

<style>
  .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.svelte:

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

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

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

Create custom input control for toolbar​

In myControl.svelte:

<script>
  export let value;
  export let type = "text";
</script>

<input type="text" bind:value />
  • 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.svelte:

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

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

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