ToolBar Overview
The Blazor ToolBar component is a container for buttons or other application-specifc tools. This article explains the available features.
The ToolBar component is part of Telerik UI for Blazor, a
professional grade UI library with 70+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In This Article
Basics
To use the Telerik Toolbar component:
- Add the
<TelerikToolBar>tag to your page. - Populate it with Built-In Tools or Custom Tools.
- Handle their respective events so your application can respond to the user actions.
Basic Telerik Toolbar
@*Add a basic Telerik ToolBar to your page with a few built-in buttons.*@
<TelerikToolBar>
<ToolBarButtonGroup>
<ToolBarButton Icon="bold" OnClick="@OnBold">Bold</ToolBarButton>
<ToolBarButton Icon="italic" OnClick="@OnItalic">Italic</ToolBarButton>
<ToolBarButton Icon="underline" OnClick="@OnUnderline">Underline</ToolBarButton>
</ToolBarButtonGroup>
<ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
<ToolBarButton Icon="undo">Undo</ToolBarButton>
</TelerikToolBar>
<br />
@Result
@code {
public bool Selected { get; set; } = true;
public string Result { get; set; }
public void OnBold()
{
Result = "The user clicked on the bold button";
}
public void OnItalic()
{
Result = "The user clicked on the italic button";
}
public void OnUnderline()
{
Result = "The user clicked on the underline button";
}
}
Components namespace and reference
@*Component namespace and reference*@
<TelerikToolBar @ref="@ToolbarReference">
<ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
<ToolBarButton Icon="undo">Undo</ToolBarButton>
</TelerikToolBar>
@code {
public Telerik.Blazor.Components.TelerikToolBar ToolbarReference { get; set; }
public bool Selected { get; set; } = true;
}
Features
The ToolBar provides the following features:
Class-string- the CSS class that will be rendered on the main wrapping element of the ToolBar component. You could use that class to control the size of the component through CSS.ToolBarButton- renders a button in the ToolBar. You can find more information and examples in the Built-In Tools article.ToolBarToggleButton- renders a toggle button in the ToolBar. You can find more information and examples in the Built-In Tools article.ToolBarButtonGroup- creates a group of buttons in the component. You can find more information and examples in the Built-In Tools article.ToolBarTemplateItem- allows you to create a custom item for the ToolBar. You can read more about this in the Templated Item article.ToolBarSeparator- adds a line that separates items in the ToolBar. You can find more information in the Separators article.ToolBarSpacer- adds empty space that separates the items into different groups. You can find more information in the Separators article.