Built-in Tools
The Telerik ToolBar for Blazor allows you to use built-in buttons and button groups or to add a custom tool. The available built-in tools are:
ToolBarButton
A toolbar button is a plain button that you can click and it raises an event so the application can respond to that.
You can add multiple buttons to the Telerik Toolbar. To do that you should add the <ToolBarButton>
to the <TelerikToolBar>
.
You can customize the buttons using the following features:
Enabled
-bool
, defaults totrue
- specifies if the button is clickable.Visible
-bool
, defaults totrue
- specifies if the button will be visible in the toolbar.Title
-string
- maps to thetitle
HTML attribute for the<button>
.Class
-string
- the CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles.OnClick
-EventCallback
- allows you to execute a method upon the click of the button. For more information see the Events article.Icon
-string
- adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in Telerik Font Icons article.ImageURL
-string
- adds an image to the button. You can provide an image url to this parameter.SpriteClass
-string
- add a sprite class image to the button. Set this attribute tok-icon MySpriteClass
whereMySpriteClass
defines the CSS rules for the sprite.IconClass
-string
- allows you to set a CSS class that provides the required font name, font size and content for the::before
pseudo-element.
The Telerik ToolBar with ToolBarButtons
@*This example shows the TelerikToolBar with ToolBarButtons and their features*@
<TelerikToolBar>
<ToolBarButton Icon="bold" Class="myBoldButton" Enabled="@true" Visible="true" Title="Bold Button" OnClick="@OnBold">Bold</ToolBarButton>
<ToolBarButton Icon="italic" Class="myItalicButton" Enabled="@false" Visible="true" Title="Italic Button" OnClick="@OnItalic">Italic</ToolBarButton>
<ToolBarButton Icon="underline" Class="myUnderlineButton" Enabled="@true" Visible="true" Title="Underline Button" OnClick="@OnUnderline">Underline</ToolBarButton>
</TelerikToolBar>
@code {
public void OnBold()
{
Console.WriteLine("The user clicked on the bold button");
}
public void OnItalic()
{
Console.WriteLine("The user clicked on the italic button");
}
public void OnUnderline()
{
Console.WriteLine("The user clicked on the underline button");
}
}
ToolBarToggleButton
A toolbar toggle button has two states - normal and selected - and clicking it can toggle between them through two-way binding or an event.
You can add multiple toggle buttons to the Telerik Toolbar. To do that you should add the <ToolBarToggleButton>
to the <TelerikToolBar>
.
You can customize the toggle buttons using the following features:
Selected
-bool
- specifies whether the button is in selected state. You can use it with one and two-way data binding with theSelectedChanged
event. For more information on how to handle theSelectedChanged
event see the Events article.Enabled
-bool
, defaults totrue
- specifies if the button is clickable.Visible
-bool
, defaults totrue
- specifies if the button will be visible in the toolbar.Title
-string
- maps to thetitle
HTML attribute for the<button>
.Class
-string
- the CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles.OnClick
-EventCallback
- allows you to execute an method upon the click of the button. For more information read the Events article.Icon
-string
- adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in Telerik Font Icons article.ImageURL
-string
- adds an image to the button. You can provide an image url to this parameter.SpriteClass
-string
- add a sprite class image to the button. Set this attribute tok-icon MySpriteClass
whereMySpriteClass
defines the CSS rules for the sprite.IconClass
-string
- allows you to set a CSS class that provides the required font name, font size and content for the::before
pseudo-element.
The Telerik ToolBar with ToolBarToggleButtons
@*This example shows the TelerikToolBar with ToolBarToggleButton and its available features*@
<TelerikToolBar>
<ToolBarToggleButton @bind-Selected="@Selected"
Enabled="true"
Class="myToggleFullScreenButton"
Icon="toggle-full-screen-mode"
OnClick="@ToggleFullScreen">
Toggle Fullscreen
</ToolBarToggleButton>
</TelerikToolBar>
@code {
public bool Selected { get; set; } = true;
public void ToggleFullScreen()
{
if (Selected)
{
Console.WriteLine("The user is in full screen");
}
else
{
Console.WriteLine("The user exited full screen");
}
}
}
ToolBarButtonGroup
The button group is a container for one or more buttons that renders them together and spaces them out from the adacent buttons or groups.
You can add one or more group of buttons to the Toolbar. To do that you should add the <ToolBarButtonGroup>
to the <TelerikToolBar>
. In the button group you can place either the ToolBarButton
or the ToolBarToggleButton
.
You can customize the groups using the following features:
Visible
-bool
, defaults totrue
- specifies if the group will be visible in the toolbar.-
SelectionMode
-enum
- specifies whether you can select one or multiple buttons from the group at the same time (applicable forToolBarToggleButton
instances inside it). It takes a member of theButtonGroupSelectionMode
enum:- Single - this is the default value
- Multiple
Enabled
-bool
, defaults totrue
- specifies if the group is clickable.Class
-string
- the CSS class that will be rendered on the main wrapping element of the ToolBarButtonGroup. You could use that class to cascade styles.Width
-string
- allows you to control the width of the group.
The Telerik ToolBar with grouped buttons
@*This example shows the TelerikToolBar with grouped ToolBarButtons*@
<TelerikToolBar>
<ToolBarButtonGroup Visible="true"
SelectionMode="@ButtonGroupSelectionMode.Multiple"
Class="formattingButtons"
Enabled="true">
<ToolBarButton Icon="bold">Bold</ToolBarButton>
<ToolBarButton Icon="italic">Italic</ToolBarButton>
<ToolBarButton Icon="underline">Underline</ToolBarButton>
</ToolBarButtonGroup>
</TelerikToolBar>