ToolBar Overview

The Blazor ToolBar component is a container for buttons or other application-specifc tools. This article explains the available features.

Telerik UI for Blazor Ninja image

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:

  1. Add the <TelerikToolBar> tag to your page.
  2. Populate it with Built-In Tools or Custom Tools.
  3. Handle their respective events so your application can respond to the user actions.

Basic Telerik Toolbar

basic toolbar screenshot

@*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.

See Also

In this article
Not finding the help you need? Improve this article