Overview

The Toolbar component allows you to implement an adaptive button-based interface in your Blazor application. Toolbar buttons are stored in the Items collection, and each button is represented by a DxToolbarItem object that can display an icon, text or both.

The main Toolbar item’s API members are listed below:

  • Click - Fires when users click the toolbar item. Handle this event to specify different click handlers for different items. To specify a common click handler for all toolbar items, use the Toolbar’s ItemClick event.
  • Text - Specifies the item’s text.
  • BeginGroup – Set this property to true to create a new item group.
  • IconCssClass – Specifies the name of the CSS class applied to the toolbar item’s icon.
  • NavigateUrl – Specifies the item’s navigation URL. When this property is specified, the button is rendered as a hyperlink.
  • Alignment - Specifies the item’s alignment.

Drop-Down Items

A toolbar item displays a drop-down list if you populate the DxToolbarItem.Items collection. The drop-down list can be displayed as a regular sub-menu, as a modal dialog, or as a modal bottom sheet. You can specify the type explicitly or let the component adapt to the device type. To specify the display mode, use the following properties:

You can turn a parent toolbar item into a split button where the drop-down action is separate from the main click area. To enable this behavior, set the SplitDropDownButton property to true.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.

Render Style

You can use the following API members to customize the appearance of the Toolbar’s root-level items:

Checked and Radio Buttons

A group of radio buttons enables users to select one option from a group of options. To create a group of radio buttons within the Toolbar, use the same GroupName property value to arrange toolbar items into a group.

Similarly to radio buttons, you can define separate checked buttons that support checked and unchecked states. To create a checked button, set the GroupName property to a unique value. This changes the item’s state (checked/unchecked) on every user click.

The list below includes the related API members:

  • Checked - Specifies the item's checked state.
  • CheckedChanged - Fires when the item’s checked state changes.
  • Click - Fires when a user clicks the item.

Item Templates

The Toolbar component supports item templates that customize item layout and appearance. Use the Template property to define a template for a specific toolbar item.

Adaptivity

The Toolbar component supports adaptive mode. The following properties control how the toolbar responds when the container’s width changes: