Toolbar Widget

License

MIT License

Installing Dependencies

Using npm

To set up the Toolbar widget, install the Toolbar component:

npm install wx-svelte-toolbar

Import the Toolbar component into the project:

import { Toolbar } from "wx-svelte-toolbar";

Working with Svelte 4.x

If you want to use the library with an older version of the Svelte toolkit, you can do so by using the 1.x version of the widget.

npm install wx-svelte-toolbar@1.3.0

Initialization

Minimal Initialization Code

A basic example of initializing the Toolbar widget in a Svelte application:

<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} />

Overview of Configuration

• items: An array of objects defining the toolbar items. Each item can have properties like id, text, comp, icon, and css.
  • { id: "label", text: "My App" }: A simple label with the text "My App".
  • { comp: "spacer" }: A spacer component to create space between items.
  • { id: "search", comp: "button", icon: "wxi-search", css: "right" }: A button with an icon. The css property adds a CSS class, and the id is used to identify the button.
• handler: A function to handle click events on the toolbar items. The event object (ev) contains details like the id of the clicked item.

Related Resources

• Check Toolbar API Reference to see the list of configuration properties and events.
• Explore the samples to visualize the available features.

Supported Button Types

Built-in Types

The widget supports various built-in button types that can be used to create a toolbar with different functionalities.

Define Button Inside of Toolbar

This feature allows defining a button directly inside the toolbar. It is useful for adding clickable buttons with icons and custom styles.

<script>
  let items = [
    {
      id: "search",
      comp: "button",
      icon: "wxi-search",
      css: "right",
      handler: onClick,
    },
  ];
</script>

<Toolbar {items} />

• id: Unique identifier for the button.
• comp: Specifies the component type as "button".
• icon: Icon class to be displayed on the button.
• css: CSS class to apply custom styling.
• handler: Function to handle click events.

Define a Group of Items (Column)

This feature allows organizing multiple items in a vertical layout within the toolbar.

<Toolbar
  items={[
    { label: "My App" },
    {
      layout: "column",
      items: [
        { comp: "icon", id: "add", icon: "wxi-plus" },
        { comp: "icon", id: "edit", icon: "wxi-pencil" },
        { comp: "icon", id: "delete", icon: "wxi-trash" },
      ],
    },
  ]}
/>

• layout: Specifies the layout type as "column".
• items: Array of items to be displayed in the column.

Define Icon Inside of Toolbar

This feature allows adding an icon directly inside the toolbar.

<Toolbar items={[{ comp: "icon", icon: "wxi-search" }]} />

• comp: Specifies the component type as "icon".
• icon: Icon class to be displayed.

Define Label Inside of Toolbar

This feature allows adding a text label inside the toolbar.

<Toolbar items={[{ text: "My App" }]} />

• text: Text to be displayed as a label.

Define a Group of Items (Row)

This feature allows organizing multiple items in a horizontal layout within the toolbar.

<Toolbar
  items={[
    { label: "My App" },
    {
      layout: "row",
      items: [
        { comp: "icon", id: "add", icon: "wxi-plus" },
        { comp: "icon", id: "edit", icon: "wxi-pencil" },
        { comp: "icon", id: "delete", icon: "wxi-trash" },
      ],
    },
  ]}
/>

• layout: Specifies the layout type as "row".
• items: Array of items to be displayed in the row.

Push Items to the Right Side of Toolbar

This feature allows pushing specific items to the right side of the toolbar.

<Toolbar
  items={[
    { id: "label", text: "My App" },
    { comp: "spacer" },
    {
      comp: "icon",
      icon: "wxi-search",
      css: "right",
    },
  ]}
/>

• comp: Specifies the component type.
• spacer: Represents a spacer to push the next item to the right.
• css: CSS class to apply custom styling.

External Types

The widget also supports external components like checkboxes, combo boxes, and other input elements.

Add Checkbox to Toolbar

This feature allows adding a checkbox inside the toolbar.

<script>
  import { Checkbox } from "wx-svelte-core";
</script>

<Toolbar items={[{ id: "check", comp: Checkbox }]} values={{ check: true }} />

• comp: Specifies the component type as Checkbox.
• values: Object to set the initial value of the checkbox.

Add Combo to Toolbar

This feature allows adding a combo box inside the toolbar.

<script>
  import { Combo } from "wx-svelte-core";
</script>

<Toolbar
  items={[
    {
      id: "lead",
      comp: Combo,
      options: [
        { id: 1, label: "Kristina" },
        { id: 2, label: "Dorian" },
      ],
    },
  ]}
  values={{ lead: 1 }}
/>

• comp: Specifies the component type as Combo.
• options: Array of options for the combo box.
• values: Object to set the initial value of the combo box.

Add Datepicker to Toolbar

This feature allows adding a datepicker inside the toolbar.

<script>
  import { Datepicker } from "wx-svelte-core";
</script>

<Toolbar items={[{ id: "date", comp: Datepicker }]} values={{ date: new Date() }} />

• comp: Specifies the component type as Datepicker.
• values: Object to set the initial value of the datepicker.

Add Radio to Toolbar

This feature allows adding a radio group inside the toolbar.

<script>
  import { RadioGroup } from "wx-svelte-core";
</script>

<Toolbar
  items={[
    {
      id: "radio",
      comp: RadioGroup,
      options: [
        { id: 1, label: "Kristina" },
        { id: 2, label: "Dorian" },
      ],
    },
  ]}
  values={{ radio: 1 }}
/>

• comp: Specifies the component type as RadioGroup.
• options: Array of options for the radio group.
• values: Object to set the initial value of the radio group.

Add Richselect to Toolbar

This feature allows adding a rich select dropdown inside the toolbar.

<script>
  import { Richselect } from "wx-svelte-core";
</script>

<Toolbar
  items={[
    {
      id: "lead",
      comp: { Richselect },
      options: [
        { id: 1, label: "Kristina" },
        { id: 2, label: "Dorian" },
      ],
    },
  ]}
  values={{ lead: 1 }}
/>

• comp: Specifies the component type as Richselect.
• options: Array of options for the rich select dropdown.
• values: Object to set the initial value of the rich select dropdown.

Add Slider to Toolbar

This feature allows adding a slider inside the toolbar.

<script>
  import { Slider } from "wx-svelte-core";
</script>

<Toolbar
  items={[{ id: "limit", comp: Slider, min: 2, max: 20 }]}
  values={{ limit: 10 }}
/>

• comp: Specifies the component type as Slider.
• min: Minimum value for the slider.
• max: Maximum value for the slider.
• values: Object to set the initial value of the slider.

Add Text Input to Toolbar

This feature allows adding a text input field inside the toolbar.

<script>
  import { Text } from "wx-svelte-core";
</script>

<Toolbar items={[{ id: "name", comp: Text }]} values={{ name: "John" }} />

• comp: Specifies the component type as Text.
• values: Object to set the initial value of the text input field.

How to layout buttons

Push Items to the Right Side of Toolbar

This feature allows certain items to be aligned to the right side of the toolbar. It is useful for placing commonly used icons such as search or settings on the far right for easy access.

<Toolbar
  items={[
    { id: "label", text: "My App" },
    { comp: "spacer" },
    {
      comp: "icon",
      icon: "wxi-search",
      css: "right",
    },
  ]}
/>

The spacer component creates space between the label and the icon, pushing the icon to the right.

Define Rows and Columns Inside of Toolbar (Multi-Line Toolbar)

This feature enables the creation of multi-line toolbars by defining rows and columns within the toolbar. It is useful for organizing a complex set of tools and controls in a structured manner.

<Toolbar
  items={[
    {
      layout: "column",
      items: [
        {
          layout: "row",
          items: [
            {
              id: "font-family",
              comp: "richselect",
            },
            {
              id: "font-size",
              comp: "richselect",
            },
          ],
        },
        {
          layout: "row",
          items: [
            {
              id: "font-bold",
              comp: "icon",
              icon: "wxi-bold",
            },
            {
              id: "font-italic",
              comp: "icon",
              icon: "wxi-italic",
            },
            {
              id: "font-underline",
              comp: "icon",
              icon: "wxi-underline",
            },
          ],
        },
      ],
    },
  ]}
/>

The layout: "column" and layout: "row" properties define the structure, organizing the toolbar items into columns and rows.

Create Toolbar with Mixed Columns and Rows

This feature allows for a combination of columns and rows within the same toolbar. It is useful for creating complex layouts where different groups of controls need to be organized differently.

<Toolbar
  items={[
    { id: "label", text: "My App" },
    {
      layout: "column",
      items: [
        { text: "Actions" },
        {
          layout: "row",
          items: [
            {
              comp: "icon",
              icon: "wxi-search",
            },
            {
              comp: "icon",
              icon: "wxi-trash",
            },
          ],
        },
      ],
    },
  ]}
/>

The combination of layout: "column" and layout: "row" enables the creation of mixed layouts within the toolbar.

Move Some Controls to Popup Panel

This feature allows certain controls to be moved to a popup panel. Collapsed groups are rendered as icons, and their content is shown as popup elements after clicking on the icon. It is useful for saving space and decluttering the toolbar.

<Toolbar
  items={[
    { id: "label", text: "My App" },
    {
      layout: "row",
      collapsed: true,
      icon: "wxi-group",
      text: "Actions",
      items: [
        {
          comp: "icon",
          icon: "wxi-search",
        },
        {
          comp: "icon",
          icon: "wxi-trash",
        },
      ],
    },
  ]}
/>

The collapsed: true property indicates that the group should be collapsed, and the icon: "wxi-group" provides the icon for the collapsed group. The content of the group appears in a popup when the icon is clicked.