Docs toolbar component

_config.yml

@@ -347,6 +347,7 @@ intro_columns:
       "Tab Strip": "components/tabstrip/overview"
       "TreeView": "components/treeview/overview"
       "Pager": "pager-overview"
+      "ToolBar": "toolbar-overview"
 
   -
     title: "Interactivity and UX"

accessibility/keyboard-navigation.md

@@ -86,6 +86,8 @@ The following list shows the Telerik components that support specific keyboard c
 
 * [TimePicker](https://demos.telerik.com/blazor-ui/timepicker/keyboard-navigation)
 
+* [ToolBar](https://demos.telerik.com/blazor-ui/toolbar/keyboard-navigation)
+
 * [ToggleButton](https://demos.telerik.com/blazor-ui/togglebutton/keyboard-navigation)
 
 * TreeList - will have keyboard navigation in an upcoming release.

components/toolbar/built-in-tools.md

@@ -0,0 +1,181 @@
+---
+title: Built-in Tools
+page_title: ToolBar - Built-in Tools
+description: Built-in Tools in the Telerik ToolBar for Blazor
+slug: toolbar-built-in-tools
+tags: telerik,blazor,toolbar,builtin,tools,button,buttons
+published: True
+position: 1
+---
+
+# Built-in Tools
+
+The Telerik ToolBar for Blazor allows you to use built-in buttons and button groups or to add a [custom tool]({%slug toolbar-templated-item%}). The available built-in tools are:
+
+* [ToolBarButton](#toolbarbutton)
+* [ToolBarToggleButton](#toolbartogglebutton)
+* [ToolbarButtonGroup](#toolbarbuttongroup)
+
+## 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 to `true` - specifies if the button is clickable.
+
+* `Visible` - `bool`, defaults to `true` - specifies if the button will be visible in the toolbar.
+
+* `Title` - `string` - maps to the `title` 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]({%slug toolbar-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]({%slug general-information/font-icons%}#icon-in-telerik-component).
+
+* `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 to `k-icon MySpriteClass` where `MySpriteClass` 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.
+
+>caption The Telerik ToolBar with ToolBarButtons
+
+![](images/toolbar-toolbarbutton-example.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with ToolBarButtons and their features*@
+
+<TelerikToolBar>
+    <ToolBarButton Icon="@IconName.Bold" Class="myBoldButton" Enabled="@true" Visible="true" Title="Bold Button" OnClick="@OnBold">Bold</ToolBarButton>
+    <ToolBarButton Icon="@IconName.Italic" Class="myItalicButton" Enabled="@false" Visible="true" Title="Italic Button" OnClick="@OnItalic">Italic</ToolBarButton>
+    <ToolBarButton Icon="@IconName.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 the `SelectedChanged` event. For more information on how to handle the `SelectedChanged` event see the [Events]({%slug toolbar-events%}) article.
+
+* `Enabled` - `bool`, defaults to `true` - specifies if the button is clickable.
+
+* `Visible` - `bool`, defaults to `true` - specifies if the button will be visible in the toolbar.
+
+* `Title` - `string` - maps to the `title` 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]({%slug toolbar-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]({%slug general-information/font-icons%}#icon-in-telerik-component).
+
+* `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 to `k-icon MySpriteClass` where `MySpriteClass` 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.
+
+>caption The Telerik ToolBar with ToolBarToggleButtons
+
+![](images/toolbar-togglebutton-example.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with ToolBarToggleButton and its available features*@
+
+<TelerikToolBar>
+    <ToolBarToggleButton @bind-Selected="@Selected" 
+                         Enabled="true" 
+                         Class="myToggleFullScreenButton" 
+                         Icon="@IconName.ToggleFullScreenMode" 
+                         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 to `true` - 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 for `ToolBarToggleButton` instances inside it). It takes a member of the `ButtonGroupSelectionMode` enum:
+
+    * Single - this is the default value
+    * Multiple
+
+* `Enabled` - `bool`, defaults to `true` - 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.
+
+>caption The Telerik ToolBar with grouped buttons
+
+![](images/toolbar-grouped-buttons.png)
+
+````CSHTML
+@*This example shows the TelerikToolBar with grouped ToolBarButtons*@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup Visible="true" 
+                        SelectionMode="@ButtonGroupSelectionMode.Multiple" 
+                        Class="formattingButtons" 
+                        Enabled="true">
+        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+</TelerikToolBar>
+````
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+  * [ToolBar Overview]({%slug toolbar-overview%})

components/toolbar/events.md

@@ -0,0 +1,72 @@
+---
+title: Events
+page_title: ToolBar - Events
+description: Events in the Telerik ToolBar for Blazor
+slug: toolbar-events
+tags: telerik,blazor,toolbar,events
+published: True
+position: 25
+---
+
+# Events
+
+The ToolBar exposes events for its [built-in buttons]({%slug toolbar-built-in-tools%}) which allow you to react when the user perform actions on them. Such actions would be a click event or changing the selected state for the toggle button. The available events are:
+
+* [OnClick](#onclick)
+* [SelectedChanged](#selectedchanged)
+
+For [custom (templated) items]({%slug toolbar-templated-item%}), handle the corresponding events exposed by the components/elements you place inside them.
+
+## OnClick
+
+The `OnClick` event fires when the user clicks on a button in the ToolBar (also applicable to toggle buttons).
+
+>caption The OnClick event for the ToolBar buttons
+
+````CSHTML
+@*When clicking on the button a message will be printed in your console*@
+
+<TelerikToolBar>
+    <ToolBarButton Icon="@IconName.HyperlinkEmail" OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
+</TelerikToolBar>
+
+
+@code {
+    public void OnHyperlinkClick()
+    {
+        Console.WriteLine("The user clicked on the hyperlink button");
+    }
+}
+````
+
+## SelectedChanged
+
+The `SelectedChanged` event will fire when the user changes the state of the [`ToolBarToggleButton`]({%slug toolbar-built-in-tools%}#toolbartogglebutton). It is used for one-way data binding of the `Selected` parameter and will prevent you from using two-way data binding (`@bind-Selected`)
+
+>caption The SelectedChanged event for the ToolBarToggleButton
+
+````CSHTML
+@*Handle the SelectedChangedEvent*@
+
+<TelerikToolBar>
+    <TelerikToggleButton Selected="@Selected" SelectedChanged="@SelectedChangedHandler"></TelerikToggleButton>
+
+</TelerikToolBar>
+
+
+@code {
+    public bool Selected { get; set; }
+
+    public void SelectedChangedHandler(bool value)
+    {
+        Selected = value;
+
+        //your application logic regarding the change of the value
+    }
+}
+````
+
+## See Also
+
+  * [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+  * [ToolBar Overview]({%slug toolbar-overview%})

components/toolbar/overview.md

@@ -0,0 +1,115 @@
+---
+title: Overview
+page_title: ToolBar Overview
+description: Overview of the ToolBar component for Blazor.
+slug: toolbar-overview
+tags: telerik,blazor,toolbar,tools,buttoncontainer
+published: True
+position: 0
+---
+
+# ToolBar Overview
+
+The ToolBar component is a container for buttons or other application-specifc tools. This article explains the available features.
+
+#### In This Article
+
+* [Basics](#basics)
+* [Features](#features)
+
+## Basics
+
+To use the Telerik Toolbar component:
+
+1. Add the `<TelerikToolBar>` tag to your page.
+1. Populate it with [Built-In Tools]({%slug toolbar-built-in-tools%}) or [Custom Tools]({%slug toolbar-templated-item%}).
+1. Handle their respective events so your application can respond to the user actions.
+
+>caption Basic Telerik Toolbar
+
+![basic toolbar screenshot](images/basic-toolbar-screenshot.png)
+
+````CSHTML
+@*Add a basic Telerik ToolBar to your page with a few built-in buttons.*@
+
+<TelerikToolBar>
+    <ToolBarButtonGroup>
+        <ToolBarButton Icon="@IconName.Bold" OnClick="@OnBold">Bold</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Italic" OnClick="@OnItalic">Italic</ToolBarButton>
+        <ToolBarButton Icon="@IconName.Underline" OnClick="@OnUnderline">Underline</ToolBarButton>
+    </ToolBarButtonGroup>
+
+    <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
+
+    <ToolBarButton Icon="@IconName.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";
+    }
+}
+````
+
+
+>caption Components namespace and reference
+
+````CSHTML
+@*Component namespace and reference*@
+
+<TelerikToolBar @ref="@ToolbarReference">
+    <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
+
+    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+</TelerikToolBar>
+
+@code {
+    public Telerik.Blazor.Components.TelerikToolBar ToolbarReference { get; set; }
+
+    public bool Selected { get; set; } = true;
+}
+````
+
+## Features
+
+>caption 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]({%slug toolbar-built-in-tools%}#toolbarbutton) article.
+
+* `ToolBarToggleButton` - renders a toggle button in the ToolBar. You can find more information and examples in the [Built-In Tools]({%slug toolbar-built-in-tools%}#toolbartogglebutton) article.
+
+* `ToolBarButtonGroup` - creates a group of buttons in the component. You can find more information and examples in the [Built-In Tools]({%slug toolbar-built-in-tools%}#toolbarbuttongroup) article.
+
+* `ToolBarTemplateItem` - allows you to create a custom item for the ToolBar. You can read more about this in the [Templated Item]({%slug toolbar-templated-item%}) article.
+
+* `ToolBarSeparator` - adds a line that separates items in the ToolBar. You can find more information in the [Separators]({%slug toolbar-separators%}) article.
+
+* `ToolBarSpacer` - adds empty space that separates the items into different groups. You can find more information in the [Separators]({%slug toolbar-separators%}) article.
+
+
+
+## See Also
+
+* [Live Demo: ToolBar Overview](https://demos.telerik.com/blazor-ui/toolbar/overview)
+* [Live Demo: ToolBar Tools](https://demos.telerik.com/blazor-ui/toolbar/tools)