From 4b85b4ba93b10debd71e985545e93f629526b438 Mon Sep 17 00:00:00 2001 From: SwathiRavi14 <102658583+SwathiRavi14@users.noreply.github.com> Date: Tue, 19 Mar 2024 15:55:09 +0530 Subject: [PATCH 1/4] 876873: Added the topic in UG for blazor toolbar spacer support --- blazor-toc.html | 1 + blazor/toolbar/align-items.md | 95 ++++++++++++++++++ ...-toolbar-spacer-left-right-center-item.png | Bin 0 -> 8683 bytes .../blazor-toolbar-spacer-left-right-item.png | Bin 0 -> 8911 bytes .../blazor-toolbar-spacer-right-item.png | Bin 0 -> 8765 bytes blazor/toolbar/item-configuration.md | 6 ++ 6 files changed, 102 insertions(+) create mode 100644 blazor/toolbar/align-items.md create mode 100644 blazor/toolbar/images/blazor-toolbar-spacer-left-right-center-item.png create mode 100644 blazor/toolbar/images/blazor-toolbar-spacer-left-right-item.png create mode 100644 blazor/toolbar/images/blazor-toolbar-spacer-right-item.png diff --git a/blazor-toc.html b/blazor-toc.html index d0f348b0d0..b470e2a0c4 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -4246,6 +4246,7 @@
  • Item Configuration
    • +
  • Align Items
  • Responsive Mode
  • Accessibility
  • Style and Appearance
    • diff --git a/blazor/toolbar/align-items.md b/blazor/toolbar/align-items.md new file mode 100644 index 0000000000..76795f9dd3 --- /dev/null +++ b/blazor/toolbar/align-items.md @@ -0,0 +1,95 @@ +--- +layout: post +title: Align Items in Blazor Toolbar Component | Syncfusion +description: Checkout and learn here all about align the items in Syncfusion Blazor Toolbar component and more. +platform: Blazor +control: Toolbar +documentation: ug +--- + +# Align Items in Blazor Toolbar Component + +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. + +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. 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 0000000000000000000000000000000000000000..338ad081a02db01b25775bcfddfe93b070eb83b9 GIT binary patch literal 8683 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 O!T7qxHT2b6kNy|5s?22o literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9050d709a74957849c89e2c8b14cec10b530d362 GIT binary patch literal 8765 zcmd^kc~q0hwyz#rXl;RZKokU2R1^h7CK=Nxf`Wj^BoIJFK!OA$3_>7jM6n$ZX__%W z1e75_0u3Z20n&)f1cVTVBqSn3n3Bj4VhBkd-nZ=6{m!{(-T&Tt_wKd6s@mWBR_(oi zRqNYT`}g#kqpjRd<(*r$Y>~Ti+4}mHEi!VOW3TUJHrwaa{o$M4R>*bR3tP~Ahvqhw z?}DrxthQ{aN&R8t*7i+(NBCt=$d)bgtzVz59bsj6wrn{vc*WYv^?@%ZUm<=UKVJaI z+hbU`4^P0#Sj-jo)Z2Iuo(9rC*OhP{$KB@rl!pB|`}HOD7c%khPrjDfSFLFGUc+nK z@MqWeJ3XwrnUEBW8a|{(+kANXj5oCKw=Z#quD@Wf&<{@w#W`c+XNV^z4o~!p#OGED zc=3U-T75J9mW}8jnL|e3Z@TwQ9HEkI_e`k@KVpJUVj#@_(^oH}m?{s$ls5)m z<|3;#|M7oZ`8v`hrY<97O19Ev{_3Rv3#TK3moI|;3cw%b?*W`ja`#$NS$S&cxY>h0v6@WpA%(avs?-{AdiEMF(N5(Wg`^Gh7SBgC zr;mm4jOaH4uuE~ZDd}V*9V7ZEY%0Dq(VJvEvbc??z9>?Cu=BTe)wvSE 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 can refer [here](https://blazor.syncfusion.com/documentation/toolbar/align-items) to integrate the spacer in Toolbar component. + ## Visible It specifies whether an item should be hidden or not. From 8d8b6681bf71320e64f160425f3def28358bf39f Mon Sep 17 00:00:00 2001 From: SwathiRavi14 <102658583+SwathiRavi14@users.noreply.github.com> Date: Tue, 19 Mar 2024 16:20:58 +0530 Subject: [PATCH 2/4] 876873: Added the topic in UG for blazor toolbar spacer support --- blazor/toolbar/item-configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/toolbar/item-configuration.md b/blazor/toolbar/item-configuration.md index 3764646c43..28de1ecef9 100644 --- a/blazor/toolbar/item-configuration.md +++ b/blazor/toolbar/item-configuration.md @@ -384,7 +384,7 @@ The following code explains how to add `NumericTextBox`, `DropDownList`, `RadioB ### Spacer -N>you can refer [here](https://blazor.syncfusion.com/documentation/toolbar/align-items) to integrate the spacer in Toolbar component. +N>you can refer [Align Items](https://blazor.syncfusion.com/documentation/toolbar/align-items) for guidance on integrating the spacer in the Toolbar component. ## Visible From 593ba96d27c05a8d549191f58f3fb708292eb78b Mon Sep 17 00:00:00 2001 From: SwathiRavi14 <102658583+SwathiRavi14@users.noreply.github.com> Date: Tue, 19 Mar 2024 17:55:25 +0530 Subject: [PATCH 3/4] 876873: Added the topic in UG for blazor toolbar spacer support --- blazor/toolbar/align-items.md | 4 +--- blazor/toolbar/item-configuration.md | 4 +++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/toolbar/align-items.md b/blazor/toolbar/align-items.md index 76795f9dd3..a748ba7f0d 100644 --- a/blazor/toolbar/align-items.md +++ b/blazor/toolbar/align-items.md @@ -1,7 +1,7 @@ --- layout: post title: Align Items in Blazor Toolbar Component | Syncfusion -description: Checkout and learn here all about align the items in Syncfusion Blazor Toolbar component and more. +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 @@ -9,8 +9,6 @@ documentation: ug # Align Items in Blazor Toolbar Component -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. - 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: diff --git a/blazor/toolbar/item-configuration.md b/blazor/toolbar/item-configuration.md index 28de1ecef9..85de41d901 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. @@ -384,7 +386,7 @@ The following code explains how to add `NumericTextBox`, `DropDownList`, `RadioB ### Spacer -N>you can refer [Align Items](https://blazor.syncfusion.com/documentation/toolbar/align-items) for guidance on integrating the spacer in the Toolbar component. +N>you can refer [here](./align-items.md) to integrate the spacer in Toolbar component. ## Visible From cd7891b0d2c6e33544654afe83ee33f4067fa040 Mon Sep 17 00:00:00 2001 From: SwathiRavi14 <102658583+SwathiRavi14@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:50:41 +0530 Subject: [PATCH 4/4] 876873: Addressed review comments --- blazor-toc.html | 2 +- .../toolbar/{align-items.md => align-items-using-spacer.md} | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename blazor/toolbar/{align-items.md => align-items-using-spacer.md} (93%) diff --git a/blazor-toc.html b/blazor-toc.html index b470e2a0c4..db903e67a4 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -4246,7 +4246,7 @@
  • Item Configuration
    • -
  • Align Items
    • +
  • Align Items
  • Responsive Mode
  • Accessibility
  • Style and Appearance
    • diff --git a/blazor/toolbar/align-items.md b/blazor/toolbar/align-items-using-spacer.md similarity index 93% rename from blazor/toolbar/align-items.md rename to blazor/toolbar/align-items-using-spacer.md index a748ba7f0d..9a410da938 100644 --- a/blazor/toolbar/align-items.md +++ b/blazor/toolbar/align-items-using-spacer.md @@ -1,13 +1,13 @@ --- layout: post -title: Align Items in Blazor Toolbar Component | Syncfusion +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 in Blazor Toolbar Component +# 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.