Toolbar - 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.

Toolbar - Render Style

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

Toolbar - 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.

Toolbar - 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.

Toolbar - Adaptivity

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