registerToolbarItem
registerToolbarItem(name: string, component: any)
used to register custom components as elements in the toolbar. Allows for creating and utilizing custom controls within the toolbar interface.
Usage
Register custom component as toolbar's element
<script>
import { Toolbar, registerToolbarItem } from "wx-svelte-toolbar";
import { Text } from "wx-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 on:click>{text}</button>
<style>
.menu {
font-weight: bold;
}
</style>
In App.svelte
<script>
import { Toolbar, registerToolbarItem } from "wx-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 />
In App.svelte
<script>
import { Toolbar, registerToolbarItem } from "wx-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" },
]}
/>