SVAR Svelte Toolbar

Documentation • Demos

SVAR Toolbar is a Svelte UI component for building flexible button panels, from simple button sets to complex structures with numerous buttons and select boxes. It provides an easy way to organize and display multiple toolbar items, with support for multiline layouts and collapsible item groups that can be shown on demand.

How to Use

To use the widget, simply import the package and include the component in your Svelte file:

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

	function onClick(item) {
		message = "Button '" + item.id + "' clicked";
	}

	let items = [
		{ id: "label", text: "Toolbar with icon buttons" },
		{
			id: "search",
			comp: "button",
			icon: "wxi-search",
			handler: onClick,
		},
	];
</script>

<Toolbar {items} />

How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

1. Install vite-plus (curl -fsSL https://vite.plus | bash on Mac/Linux, irm https://vite.plus/ps1 | iex on Windows). The project uses pnpm workspaces under the hood, so plain npm will not work.
2. Run vp i from the project root to install dependencies.
3. Run vp run build to build all packages.
4. Start the demo app in development mode with vp run start.

Need help?

Join our community forum to get help or post feature requests.