Toolbar API

Initialization

<script>
  import { Toolbar } from "wx-svelte-toolbar";

  const items = [
    { id: "label", text: "My App" },
    { comp: "spacer" },
    {
      id: "search",
      comp: "button",
      icon: "wxi-search",
      css: "right",
    },
  ];

  function handler(ev) {
    console.log(`item ${ev.detail.id} was clicked`);
  }
</script>

<Toolbar {items} on:click={handler} />

Related resources

• Visit the Features Guide to learn more about the widget's functionality.
• Explore the samples to visualize the available features.

Properties

css	Sets a CSS class for the top container of the Toolbar.
items	Defines items such as buttons, icons, and labels within the toolbar.
menuCss	Defines a CSS class for the top container of the popup menu.
overflow	Controls how the toolbar handles items that can't fit on the screen.
values	Sets and retrieves the current values of controls inside the toolbar.

Events

change	Triggers when the value of a control in the toolbar changes.
click	Triggers when a control element is clicked.

Helpers

registerToolbarItem	Registers custom components as elements in the toolbar.