diff --git a/blazor-toc.html b/blazor-toc.html index d9d5998556..4b345aee93 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -4254,6 +4254,7 @@
  • Item Configuration
    • +
  • Align Items
  • Responsive Mode
  • Accessibility
  • Style and Appearance
    • diff --git a/blazor/toolbar/align-items-using-spacer.md b/blazor/toolbar/align-items-using-spacer.md new file mode 100644 index 0000000000..605e402c36 --- /dev/null +++ b/blazor/toolbar/align-items-using-spacer.md @@ -0,0 +1,84 @@ +--- +layout: post +title: Align Items Using Spacer in Blazor Toolbar Component | Syncfusion +description: Checkout and learn here all about align the items using spacer in Syncfusion Blazor Toolbar component and more. +platform: Blazor +control: Toolbar +documentation: ug +--- + +# Align Items Using Spacer in Blazor Toolbar Component + +A Toolbar [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) is used for managing the alignment of a toolbar items. It creates an adjustable empty space within the toolbar, providing a clear separation between different items. The spacer dynamically adapts to the toolbar's width. + +To achieve different alignment styles, the spacer can be strategically placed among the toolbar items: + +## Left, Center, and Right alignment + +Insert spacers at the end of the items on the left and in the center. This will push the remaining items to the right and center, creating a balanced distribution across the toolbar. + +```cshtml +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + + + + +``` +![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.png) + +## Left and Right alignment + +Insert the spacer between the items you want on the left and those you want on the right. This will push the right-aligned items towards the edge of the toolbar. + +```cshtml +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + + + +``` +![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.png) + +## Right alignment + +Insert the spacer as the first item in the toolbar. This will push all other items towards the right edge of the toolbar. + +```cshtml +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + + + +``` +![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.png) + + +N> Avoid using the `Align` property in the toolbar item if `Spacer` was utilized. \ No newline at end of file diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png new file mode 100644 index 0000000000..338ad081a0 Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png differ diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png new file mode 100644 index 0000000000..f600c52555 Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png differ diff --git a/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png b/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png new file mode 100644 index 0000000000..9050d709a7 Binary files /dev/null and b/blazor/toolbar/images/blazor-toolbar-spacer-right-item.png differ diff --git a/blazor/toolbar/item-configuration.md b/blazor/toolbar/item-configuration.md index 2fc76d2be7..19d827809f 100644 --- a/blazor/toolbar/item-configuration.md +++ b/blazor/toolbar/item-configuration.md @@ -56,6 +56,8 @@ It specifies the location for aligning Toolbar items on the Toolbar. Each comman ![Aligning Blazor Toolbar Item](./images/blazor-toolbar-align-item.png) +To optimize the alignment of Toolbar items without using [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Align) property, utilize the [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) in toolbar. Refer [here](./align-items.md) to integrate spacer in Toolbar. + ## CssClass Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item `CssClass` property. Refer [Set command customization](https://blazor.syncfusion.com/documentation/toolbar/how-to/set-command-customization) for snippet and output. @@ -238,6 +240,8 @@ It specifies the types of command to be rendered in the Toolbar. Supported types 3. **Input**: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList, AutoComplete, etc. +4. **Spacer**: Adds a space within the Toolbar item. [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type) can be used to align the Toolbar items to the left, center, and right. + ### Button `Button` is the default command [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type), and it can be rendered by using the `Text` property.