Merge pull request #6712 from syncfusion-content/983717-UG-docs-Ribbon-4

983717: Enhanced the blazor documentation for Ribbon

Author: IndrajithSrinivasan

blazor/ribbon/images/show-hide-keytip.png renamed to blazor/ribbon/images/keytip/show-hide-keytip.png

@@ -9,15 +9,15 @@ documentation: ug
 
 # KeyTips in Blazor Ribbon component
 
-The Blazor Ribbon component supports keyboard navigation through KeyTips, enabling users to interact with Ribbon interface without using a mouse. KeyTips can be enabled by setting the `EnableKeyTips` property, allowing users to quickly access commands using shortcut keys.
+The Blazor Ribbon component supports keyboard navigation through keytips, enabling users to interact with the Ribbon interface without a mouse. Keytips can be enabled by setting the `EnableKeyTips` property, allowing users to quickly access commands using keyboard shortcuts.
 
 The keyTips will be shown when the **Alt + Windows/Command(on macOS)** keys are pressed.
 
 ## KeyTips for different ribbon elements
 
 ### Ribbon items keytip
 
-You can add keytips to the Ribbon items by using the `KeyTip` property in the `RibbonItem` directive.
+Keytips can be added to Ribbon items by using the `KeyTip` property in the `RibbonItem` directive.
 
 {% tabs %}
 {% highlight razor %}
@@ -275,11 +275,11 @@ You can add keytips to the Ribbon items by using the `KeyTip` property in the `R
 {% endhighlight %}
 {% endtabs %}
 
-![Ribbon Items Keytip](./images/keytip/items-keytip.png)
+![Ribbon items keytip](./images/keytip/items-keytip.png)
 
 ### File menu keytip
 
-You can add keytip to the File menu by using the `KeyTip` property.
+A keytip can be added to the File menu by using the `KeyTip` property.
 
 {% tabs %}
 {% highlight razor %}
@@ -346,11 +346,11 @@ You can add keytip to the File menu by using the `KeyTip` property.
 {% endhighlight %}
 {% endtabs %}
 
-![Ribbon File Menu Keytip](./images/keytip/file-menu-keytip.png)
+![Ribbon file menu keytip](./images/keytip/file-menu-keytip.png)
 
 ### Backstage menu keytip
 
-You can add keytips for the backstage button and menu items by using `KeyTip` property.
+Keytips can be added for the backstage button and menu items by using the `KeyTip` property.
 
 {% tabs %}
 {% highlight razor %}
@@ -418,11 +418,11 @@ You can add keytips for the backstage button and menu items by using `KeyTip` pr
 {% endhighlight %}
 {% endtabs %}
 
-![Ribbon Backstage menu keytip](./images/keytip/backstage-keytip.png)
+![Ribbon backstage menu keytip](./images/keytip/backstage-keytip.png)
 
 ### Ribbon layout switcher keytip
 
-You can add keytip to the layout switcher by using the `LayoutSwitcherKeyTip` property for switching between **Classic** and **Simplified** Ribbon layouts.
+A keytip can be added to the layout switcher by using the `LayoutSwitcherKeyTip` property to switch between the `Classic` and `Simplified` Ribbon layouts.
 
 {% tabs %}
 {% highlight razor %}
@@ -493,7 +493,7 @@ You can add keytip to the layout switcher by using the `LayoutSwitcherKeyTip` pr
 
 ### Ribbon launcher icon keytip
 
-You can add keytip to the launcher icon by using `LauncherIconKeyTip` property allowing you to quickly open additional options in Ribbon groups.
+A keytip can be added to the launcher icon by using the `LauncherIconKeyTip` property to quickly open additional options in Ribbon groups.
 
 {% tabs %}
 {% highlight razor %}
@@ -567,14 +567,14 @@ You can add keytip to the launcher icon by using `LauncherIconKeyTip` property a
 
 ### Show keytips
 
-You can use the `ShowKeyTipsAsync` method to dynamically display keytips.
+The `ShowKeyTipsAsync` method displays keytips dynamically for the Ribbon.
 
 - To activate a specific key action, pass the corresponding keytip string as an argument.
 - For example, calling `ShowKeyTipsAsync('H')` will look for the specific item associated with the **H** key and trigger its respective action.
 
 ### Hide keytips
 
-You can use the `HideKeyTipsAsync` method to remove all visible keytips from the Ribbon dynamically.
+The `HideKeyTipsAsync` method removes all visible keytips from the Ribbon dynamically.
 
 {% tabs %}
 {% highlight razor %}
@@ -654,16 +654,16 @@ You can use the `HideKeyTipsAsync` method to remove all visible keytips from the
 {% endhighlight %}
 {% endtabs %}
 
-![Ribbon Show Hide keytips](./images/show-hide-keytip.png)
+![Ribbon show and hide keytips](./images/keytip/show-hide-keytip.png)
 
 ## Guidelines for adding keytips
 
-Before adding keytips to the Ribbon items, follow these best practices:
+Before adding keytips to Ribbon items, follow these best practices:
 
-* Avoid using the same keytip setting on multiple items.
+* Avoid assigning the same keytip to multiple items.
 
-> Each keytip should be distinct. If multiple items share the same keytip (e.g., `H` or `HF`), only the first occurrence will be activated, while any subsequent instances of H or HF are ignored.
+> Each keytip must be unique. If multiple items share the same keytip (for example, `H` or `HF`), only the first occurrence is activated; subsequent items using the same keytip are ignored.
 
-* Do not use the same first letter for the single and double keytip items.
+* Do not use the same first letter for single- and multi-character keytips on different items.
 
-> When using multi-character keytips (e.g., `F`, `FP`, and `FPF`) for different items, pressing `F` will activate only the first-level keytip (`F`), while `FP` and `FPF` will be ignored.
+> When using multi-character keytips (for example, `F`, `FP`, and `FPF`) for different items, pressing `F` activates only the first-level keytip (`F`), and `FP` and `FPF` are ignored.

blazor/ribbon/keytip.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Layouts in Blazor Ribbon component
 
-The Ribbon component allows customization of its layout through the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property. It supports two primary layouts: `Classic` and `Simplified`.
+The Ribbon component supports customizable layouts through the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property. Two primary layouts are available: `Classic` and `Simplified`.
 
 ## Classic layout
 
-The Classic layout organizes Ribbon items and groups in a traditional format. You can set the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property to `RibbonLayout.Classic` to enable this layout. By default, the Ribbon component renders in the `Classic` layout.
+The Classic layout organizes Ribbon items and groups in a traditional, multi-row format with group headers and collections. Set the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property to `RibbonLayout.Classic` to enable this layout. By default, the Ribbon renders in the `Classic` layout.
 
 {% tabs %}
 {% highlight razor %}
@@ -73,13 +73,13 @@ The Classic layout organizes Ribbon items and groups in a traditional format. Yo
 
 ### Defining items size
 
-You can control the size of Ribbon items using the [AllowedSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_AllowedSizes) property in the [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) directive. The Ribbon supports three item sizes:
+Control the size of Ribbon items using the [AllowedSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_AllowedSizes) property in the [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) directive. The Ribbon supports three item sizes:
 
 - **Large**: Large icon with text.
 - **Medium**: Small icon with text.
 - **Small**: Small icon only.
 
-When resizing to smaller screen, the item sizes adjust based on the available tab content width in the order: Large → Medium → Small, and vice versa.
+When resizing to a smaller screen, item sizes adapt based on the available tab content width in the order Large → Medium → Small, and vice versa when space increases.
 
 {% tabs %}
 {% highlight razor %}
@@ -139,10 +139,10 @@ When resizing to smaller screen, the item sizes adjust based on the available ta
 
 ### Defining items orientation
 
-You can use the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Orientation) property of the [RibbonGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html) tag directive to arrange items vertically (Column) or horizontally (Row). By default, the orientation is `Column`.
+Use the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Orientation) property of the [RibbonGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html) tag directive to arrange items vertically (Column) or horizontally (Row). The default orientation is `Column`.
 
-Row: A group may have up to three collections, each containing multiple items.
-Column: A group can have any number of collections, with each collection containing one large-sized item or up to three medium/small-sized items.
+- Row: A group may contain up to three collections, and each collection can include multiple items.
+- Column: A group can contain any number of collections. Each collection can include either one large-sized item or up to three medium/small-sized items.
 
 {% tabs %}
 {% highlight razor %}
@@ -261,15 +261,15 @@ Column: A group can have any number of collections, with each collection contain
 
 ### Defining group properties
 
-You can customize the appearance and functionalities of Ribbon groups by using properties of [RibbonGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html) such as `HeaderText`, `GroupIconCss`, `ShowLauncherIcon`, `IsCollapsible` and `Priority`.
+Customize the appearance and functionality of Ribbon groups using [RibbonGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html) properties such as `HeaderText`, `GroupIconCss`, `ShowLauncherIcon`, `IsCollapsible`, and `Priority`.
 
 |Name|DataType|Description|
 |---|---|---|
-|[HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_HeaderText)|string|Defines the text that appears as the header for the group|
-|[GroupIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_GroupIconCss)|string|Icon that appears in group popup button while resizing|
-|[ShowLauncherIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_ShowLauncherIcon)|boolean|Enables or disables the launcher icon for each group. By default, the property is set to `false`|
-|[IsCollapsible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_IsCollapsible)|boolean|Controls whether a group can be collapsed or not during resizing. By default, the property is set to `true`|
-|[Priority](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Priority)|int|Determines the collapse and expand order of groups during resizing. Higher priority values collapse first, while lower values expand first|
+|[HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_HeaderText)|string|Defines the text that appears as the header for the group.|
+|[GroupIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_GroupIconCss)|string|Specifies the icon displayed in the group popup button during resizing.|
+|[ShowLauncherIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_ShowLauncherIcon)|bool|Enables or disables the launcher icon for the group. By default, this property is set to `false`.|
+|[IsCollapsible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_IsCollapsible)|bool|Controls whether a group can be collapsed during resizing. By default, this property is set to `true`.|
+|[Priority](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_Priority)|int|Determines the collapse/expand order during resizing. Higher values collapse first; lower values expand first.|
 
 {% tabs %}
 {% highlight razor %}
@@ -388,7 +388,7 @@ You can customize the appearance and functionalities of Ribbon groups by using p
 
 ## Simplified layout
 
-In simplified layout, the Ribbon component organizes the items and groups into a single row. Set the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property to `RibbonLayout.Simplified` to enable this layout.
+In the Simplified layout, the Ribbon organizes items and groups into a single row to save vertical space and emphasize frequently used commands. Set the [ActiveLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_ActiveLayout) property to `RibbonLayout.Simplified` to enable this layout.
 
 {% tabs %}
 {% highlight razor %}
@@ -448,7 +448,7 @@ In simplified layout, the Ribbon component organizes the items and groups into a
 
 ### Enabling group overflow popup
 
-You can control how overflow items appear in the group while resizing using the [EnableGroupOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_EnableGroupOverflow) property.
+Control how overflow items appear within a group during resizing using the [EnableGroupOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonGroup.html#Syncfusion_Blazor_Ribbon_RibbonGroup_EnableGroupOverflow) property.
 
 - Set to `true` to display overflow items in a separate popup near the group.
 - Set to `false` to display overflow items in a common popup at the right end of the tab content.
@@ -570,9 +570,9 @@ You can control how overflow items appear in the group while resizing using the
 
 ## Minimized state
 
-You can hide the Ribbon contents and display only the tab headers by double-clicking on the tab header. When the Ribbon is on minimized state, it expands to its normal state when click on the tab header.
+Hide Ribbon contents and display only the tab headers by double-clicking a tab header to toggle the minimized state. When the Ribbon is in a minimized state, clicking a tab header temporarily expands the content; the Ribbon returns to the minimized state when focus moves away.
 
-Also, you can programmatically control the minimized state of Ribbon using the [IsMinimized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_IsMinimized) property. By default, the value is `false`.
+The minimized state can also be controlled programmatically using the [IsMinimized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_IsMinimized) property. By default, this property is set to `false`.
 
 {% tabs %}
 {% highlight razor %}
@@ -632,7 +632,7 @@ Also, you can programmatically control the minimized state of Ribbon using the [
 
 ## Show or hide the layout switcher
 
-You can use the [HideLayoutSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_HideLayoutSwitcher) property to show/hide the Ribbon layout switcher button. By default, the value is `false`, meaning the switcher will be visible.
+Use the [HideLayoutSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.SfRibbon.html#Syncfusion_Blazor_Ribbon_SfRibbon_HideLayoutSwitcher) property to show or hide the Ribbon layout switcher button. By default, this property is set to `false`, so the switcher is visible.
 
 {% tabs %}
 {% highlight razor %}

blazor/ribbon/layouts.md

@@ -9,14 +9,14 @@ documentation: ug
 
 # Resizing in Blazor Ribbon component
 
-The Ribbon dynamically adjusts its elements during resizing. When the ribbon's size increases, elements expand, and when it decreases, elements collapse. Resizing is supported in both Classic and Simplified modes, with the flexibility to customize the order in which elements resize.
+The Ribbon dynamically adjusts item sizes when the available width changes. As space increases, items expand; as space decreases, items reduce in size. Resizing is supported in both Classic mode and Simplified mode. The sizes that an item can take during resizing can be constrained using the AllowedSizes property.
 
-- **Classic Mode**: During resizing, the size of items adjusts sequentially based on the available width of the tab content in the order: `Large → Medium → Small` (and vice versa).  
-- **Simplified Mode**: During resizing, the size of items adjusts sequentially in the order: `Medium → Small` (and vice versa).
+- **Classic mode**: During resizing, item sizes adjust sequentially based on the available width of the tab content in the order: Large → Medium → Small (and vice versa).
+- **Simplified mode**: During resizing, item sizes adjust sequentially in the order: Medium → Small (and vice versa). In Simplified mode, the Large size is not used.
 
 ## Defining items allowed size
 
-You can use the [AllowedSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_AllowedSizes) property within [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) to specify the sizes that an item can maintain during resizing. When set, the item's size remains constant within the defined value, irrespective of resizing.
+Use the [AllowedSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_AllowedSizes) property on a [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) to restrict the sizes that the item can take during resizing. When set, the item only switches among the specified sizes, regardless of overall Ribbon resizing.
 
 {% tabs %}
 {% highlight razor %}
@@ -53,4 +53,4 @@ You can use the [AllowedSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ## Defining items active size
 
-The [ActiveSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_ActiveSize) property within [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) indicates the current size of the rendered item. By default, the value is `Medium`. It is a read-only property.
+The [ActiveSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html#Syncfusion_Blazor_Ribbon_RibbonItem_ActiveSize) property on a [RibbonItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonItem.html) indicates the current size of the rendered item. By default, the value is Medium. This property is read-only and reflects the item’s current state during resizing.