Class SfRibbon

The Blazor Ribbon component is a structured layout to manage tools with tabs and groups.

Inheritance

System.Object

SfBaseComponent

SfRibbon

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Ribbon

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfRibbon : SfBaseComponent

Examples

A simple Ribbon component.

 
<SfRibbon ID="default">
 <RibbonFileMenuSettings></RibbonFileMenuSettings> 
 <HelpPaneTemplate></HelpPaneTemplate> 
    <RibbonTabs>
        <RibbonTab HeaderText="Home">
            <RibbonGroups>
                <RibbonGroup HeaderText="Clipboard">
                    <RibbonCollections>
                        <RibbonCollection>
                            <RibbonItems>
                                <RibbonItem Type=RibbonItemType.Button AllowedSizes="@((RibbonItemSize)RibbonItemSize.Large | RibbonItemSize.Medium)">
                                    <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
                                </RibbonItem>
                            </RibbonItems>
                        </RibbonCollection>
                    </RibbonCollections>
                </RibbonGroup>
            </RibbonGroups>
        </RibbonTab>
    </RibbonTabs>
</SfRibbon>

Constructors

SfRibbon()

Declaration

public SfRibbon()

Properties

ActiveLayout

Gets or sets the active layout of the SfRibbon. Supports two-way binding.

Declaration

public RibbonLayout ActiveLayout { get; set; }

Property Value

Type	Description
RibbonLayout	The active layout of the SfRibbon. The default value is the Classic. The possible values are: Classic: Specifies the ribbon in classic layout. Simplified: Specifies the ribbon in simplified layout.

Remarks

You can use this property to customize the active layout of the SfRibbon. For example, you can set the RibbonLayout property to Classic to render the ribbon tab contents in classic layout, or set it to Simplified to render the ribbon tab contents in single row. Define @bind- ActiveLayout to use two-way binding.

ActiveLayoutChanged

Declaration

public EventCallback<RibbonLayout> ActiveLayoutChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<RibbonLayout>

ChildContent

Gets or sets a value that indicates the child content for the Ribbon including HTML element.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

Created

Event raised when the rendering of the SfRibbon component is completed.

Declaration

public EventCallback<EventArgs> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.EventArgs>	An event callback that is raised when the SfRibbon component is fully rendered.

CssClass

Gets or sets one or more CSS classes to customize the appearance of the SfRibbon.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a string of one or more CSS class names separated by spaces to customize the appearance of the SfRibbon. The default value is String.Empty, meaning no additional CSS classes are applied by default.

Remarks

This property allows you to apply custom CSS styles to the SfRibbon component by assigning one or more CSS class names. Use this property to tailor the appearance of the Ribbon to match the design requirements of your application or to apply custom themes and styles.

EnableKeyTips

Gets or sets a value indicating whether to enable the key tips for the SfRibbon component.

Declaration

public bool EnableKeyTips { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value that specifies whether key tips are enabled. Defaults to false.

Remarks

When set to true, key tips are displayed when the user presses the "Alt" + "Windows/Command" key combination. Key tips provide a way for users to quickly navigate and access Ribbon items such as tabs, menus (including file and backstage menus), and buttons using keyboard shortcuts. If the same keytip is assigned to multiple Ribbon elements (such as buttons or tabs), the keytip for the first element in the Ribbon's visual hierarchy will be prioritized and triggered when the user presses the assigned keyboard shortcut. This behavior ensures that the most accessible or first defined item responds to the keytip, preventing ambiguity or conflicts when users interact with the Ribbon. Enabling key tips improves the usability of the SfRibbon by providing an efficient method of navigation for users who prefer using the keyboard.

EnablePersistence

Gets or sets a value indicating whether the state of the modes and built-in items SfRibbon are persisted.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value that determines whether the current state of the SfRibbon is persisted. The default value is false.

Remarks

When set to true, the SfRibbon will save its current state of (built-in items and ribbon modes) and restore it when the application is restarted. This feature is useful for maintaining a consistent user experience across sessions. If set to false, the ribbon will not persist its state between application sessions and will reset to its default configuration upon startup.

HideLayoutSwitcher

Gets or sets a value indicating whether the layout switcher button of the SfRibbon is hidden.

Declaration

public bool HideLayoutSwitcher { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value that determines whether the layout switcher button of the SfRibbon is hidden. The default value is false, means the button is visible by default.

Remarks

This property controls the visibility of the layout switcher button, which allows users to toggle between different Ribbon layout styles. When set to true, the button is hidden, preventing users from changing the Ribbon layout. When set to false, the button is visible and allows users to switch between available layout options.

ID

Gets or sets the unique ID for the SfRibbon.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	The ID of the SfRibbon. The default value is String.Empty.

Remarks

This property specifies a unique identifier for the SfRibbon component. The ID is used to uniquely identify the Ribbon within the HTML document, which can be useful for styling, scripting, and accessing the component programmatically.

IsMinimized

Gets or sets a value indicating whether the SfRibbon is minimized.

Declaration

public bool IsMinimized { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value that determines whether the SfRibbon is minimized. The default value is false.

Remarks

When set to true, the SfRibbon component is minimized, typically hiding its content to provide more screen space for other parts of the application. When set to false, the SfRibbon is fully visible, displaying all of its tabs and content. This is the default state where the Ribbon is fully expanded and accessible to the user.

LauncherIconClick

Event raised when the launcher icon is clicked in a SfRibbon group.

Declaration

public EventCallback<LauncherClickEventArgs> LauncherIconClick { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<LauncherClickEventArgs>	An event callback that is triggered when the launcher icon is clicked.

LayoutSwitcherKeyTip

Gets or sets the key tip text for the layout switcher icon in the SfRibbon component.

Declaration

public string LayoutSwitcherKeyTip { get; set; }

Property Value

Type	Description
System.String	A string representing the key tip text for the layout switcher icon. Defaults to an empty string.

Remarks

The LayoutSwitcherKeyTip property allows you to assign a key tip to the layout switcher icon which facilitates quick keyboard access to the layout switcher through shortcuts.

OverflowPopupClosing

Event raised before the overflow popup closes in the SfRibbon component.

Declaration

public EventCallback<OverflowPopupEventArgs> OverflowPopupClosing { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OverflowPopupEventArgs>	An event callback that is triggered before the overflow popup closes.

OverflowPopupOpening

Event raised before the overflow popup opens in the SfRibbon component.

Declaration

public EventCallback<OverflowPopupEventArgs> OverflowPopupOpening { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OverflowPopupEventArgs>	An event callback that is triggered before the overflow popup opens.

RibbonCollapsing

Event raised before the SfRibbon component is collapsed.

Declaration

public EventCallback<CollapseEventArgs> RibbonCollapsing { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<CollapseEventArgs>	An event callback that is triggered before the SfRibbon component is collapsed.

RibbonExpanding

Event raised before the SfRibbon component is expanded.

Declaration

public EventCallback<ExpandEventArgs> RibbonExpanding { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ExpandEventArgs>	An event callback that is triggered before the SfRibbon component is expanded.

SelectedTab

Gets or sets the index of the selected tab in the SfRibbon component.

Declaration

public int SelectedTab { get; set; }

Property Value

Type	Description
System.Int32	An integer representing the index of the currently selected tab. The default value is 0.

Remarks

This property specifies which tab is currently active and selected in the SfRibbon component.

SelectedTabChanged

Declaration

public EventCallback<int> SelectedTabChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Int32>

TabAnimation

Gets or sets the animation settings of the SfRibbon.

Declaration

public TabAnimationSettings TabAnimation { get; set; }

Property Value

Type	Description
TabAnimationSettings	The animation settings of the SfRibbon. The default value is null.

Remarks

This property allows you to customize the animation settings of the SfRibbon.

Examples

A simple Ribbon component.

 
<SfRibbon ID="default" TabAnimation="@tabAnimationSettings">
    <RibbonTabs>
        <RibbonTab Header="Home">
            <RibbonGroups>
                <RibbonGroup Header="Clip">
                    <RibbonCollections>
                        <RibbonCollection>
                            <RibbonItems>
                                <RibbonItem Type=RibbonItemType.Button>
                                    <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
                                </RibbonItem>
                            </RibbonItems>
                        </RibbonCollection>
                    </RibbonCollections>
                </RibbonGroup>
            </RibbonGroups>
        </RibbonTab>
    </RibbonTabs>
</SfRibbon>
@code {
       public TabAnimationSettings tabAnimationSettings = new TabAnimationSettings
       {
           Previous = new TabAnimationPrevious { Effect = Syncfusion.Blazor.AnimationEffect.FadeIn },
           Next = new TabAnimationNext { Effect = Syncfusion.Blazor.AnimationEffect.FadeOut }
       };
}

TabSelected

Event raised after a tab is selected in the SfRibbon component.

Declaration

public EventCallback<TabSelectedEventArgs> TabSelected { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TabSelectedEventArgs>	An event callback that is triggered after a tab is selected.

TabSelecting

Event raised before a tab is selected in the SfRibbon component.

Declaration

public EventCallback<TabSelectingEventArgs> TabSelecting { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TabSelectingEventArgs>	An event callback that is triggered before a tab is selected.

Width

Gets or sets the width of the SfRibbon.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The width of the SfRibbon. The default value is "100%".

Remarks

This property specifies the width of the SfRibbon component. You can set this property to a specific pixel value (e.g., "800px") or a percentage value (e.g., "100%") to control the width of the Ribbon relative to its container. A value of "100%" makes the Ribbon occupy the full width of its parent container, adapting to the container's width.

Methods

AddCollection(RibbonCollection, String, String, Boolean)

Adds a new collection to the ribbon group with the specified ID in the SfRibbon component.

Declaration

public void AddCollection(RibbonCollection collection, string groupID, string targetID = null, bool isAfter = false)

Parameters

Type	Name	Description
RibbonCollection	collection	The ribbon collection model to add.
System.String	groupID	The ID of the ribbon group to add the collection to.
System.String	targetID	The ID of the target collection to add the new collection (optional).
System.Boolean	isAfter	A boolean value that defines whether the collection is added before or after the target (optional).

AddGroup(RibbonGroup, String, String, Boolean)

Adds a new group to the ribbon tab with the specified ID in the SfRibbon component.

Declaration

public void AddGroup(RibbonGroup group, string tabID, string targetID = null, bool isAfter = false)

Parameters

Type	Name	Description
RibbonGroup	group	The ribbon group model to add.
System.String	tabID	The ID of the ribbon tab to add the group to.
System.String	targetID	The ID of the target group to add the new group (optional).
System.Boolean	isAfter	A boolean value that defines whether the group is added before or after the target (optional).

AddItem(RibbonItem, String, String, Boolean)

Adds a new item to the ribbon tab with the specified ID in the SfRibbon component.

Declaration

public void AddItem(RibbonItem item, string collectionId, string targetID = null, bool isAfter = false)

Parameters

Type	Name	Description
RibbonItem	item	The ribbon item model to add.
System.String	collectionId	The ID of the ribbon collection to add the item to.
System.String	targetID	The ID of the target item to add the new item (optional).
System.Boolean	isAfter	A boolean value that defines whether the item is added before or after the target (optional).

AddTab(RibbonTab, String, Boolean)

Adds a new tab to the ribbon with the specified ID in the SfRibbon component.

Declaration

public void AddTab(RibbonTab tab, string targetID = null, bool isAfter = false)

Parameters

Type	Name	Description
RibbonTab	tab	The ribbon tab model to add.
System.String	targetID	The ID of the target tab to add the new tab (optional).
System.Boolean	isAfter	A boolean value that defines whether the tab is added before or after the target (optional).

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

DisableGroup(String)

Disables the group with the specified ID in the SfRibbon component.

Declaration

public void DisableGroup(string groupID)

Parameters

Type	Name	Description
System.String	groupID	The ID of the group to disable.

DisableItem(String)

Disables the item with the specified ID in the SfRibbon component.

Declaration

public void DisableItem(string itemID)

Parameters

Type	Name	Description
System.String	itemID	The ID of the item to disable.

DisableTabAsync(String)

Disables the tab with the specified ID in the SfRibbon component.

Declaration

public Task DisableTabAsync(string tabID)

Parameters

Type	Name	Description
System.String	tabID	The ID of the tab to disable.

Returns

Type
System.Threading.Tasks.Task

EnableGroup(String)

Enables the group with the specified ID in the SfRibbon component.

Declaration

public void EnableGroup(string groupID)

Parameters

Type	Name	Description
System.String	groupID	The ID of the group to enable.

EnableItem(String)

Enables the item with the specified ID in the SfRibbon component.

Declaration

public void EnableItem(string itemID)

Parameters

Type	Name	Description
System.String	itemID	The ID of the item to enable.

EnableTabAsync(String)

Enables the tab with the specified ID in the SfRibbon component.

Declaration

public Task EnableTabAsync(string tabID)

Parameters

Type	Name	Description
System.String	tabID	The ID of the tab to enable.

Returns

Type
System.Threading.Tasks.Task

GetItem(String)

Retrieves a RibbonItem instance by its identifier.

Declaration

public RibbonItem GetItem(string itemId)

Parameters

Type	Name	Description
System.String	itemId	The unique identifier of the ribbon item to locate.

Returns

Type	Description
RibbonItem	A RibbonItem instance matching the specified itemId if found; otherwise, null.

Remarks

Use this method to obtain a specific ribbon item's information.

HideKeyTipsAsync()

Hides all the key tips for the SfRibbon component.

Declaration

public Task HideKeyTipsAsync()

Returns

Type
System.Threading.Tasks.Task

Remarks

Use this method to hide all the key tips that are currently displayed on the SfRibbon component. This is useful for dismissing key tips after the user has interacted with them or when they are no longer needed.

HideTabAsync(String)

Hides a specific tab from the SfRibbon component.

Declaration

public Task HideTabAsync(string tabID)

Parameters

Type	Name	Description
System.String	tabID	The ID of the tab to hide.

Returns

Type
System.Threading.Tasks.Task

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

RefreshLayoutAsync()

Refreshes the layout of the ribbon, ensuring that it checks for overflow and adjusts the display of items accordingly.

Declaration

public Task RefreshLayoutAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A task that represents the asynchronous operation of refreshing the ribbon layout.

Remarks

This method is used to recalculate the ribbon's layout. It is particularly useful when dynamic changes have occurred, and the visual arrangement needs to be updated to maintain a consistent user interface.

RemoveCollection(String)

Removes the collection with the specified ID from the SfRibbon component.

Declaration

public void RemoveCollection(string collectionID)

Parameters

Type	Name	Description
System.String	collectionID	The ID of the collection to remove.

RemoveGroup(String)

Removes the group with the specified ID from the SfRibbon component.

Declaration

public void RemoveGroup(string groupID)

Parameters

Type	Name	Description
System.String	groupID	The ID of the group to remove.

RemoveItem(String)

Removes the item with the specified ID from the SfRibbon component.

Declaration

public void RemoveItem(string itemID)

Parameters

Type	Name	Description
System.String	itemID	The ID of the item to remove.

RemoveTab(String)

Removes the tab with the specified ID from the SfRibbon component.

Declaration

public void RemoveTab(string tabID)

Parameters

Type	Name	Description
System.String	tabID	The ID of the tab to remove.

ShowKeyTipsAsync(String)

Displays key tips for the SfRibbon component, allowing users to access Ribbon items using keyboard shortcuts.

Declaration

public Task ShowKeyTipsAsync(string keyAction = null)

Parameters

Type	Name	Description
System.String	keyAction	A string representing the specific key tip to activate. If set to null, root key tips are displayed by default, similar to pressing the Alt + Windows/Command key combination. Defaults to null.

Returns

Type
System.Threading.Tasks.Task

Remarks

Calling this method triggers the key tip display for Ribbon items. When a specific keyAction is provided, the corresponding key tip is activated. If null is passed, the method automatically displays root key tips, ensuring users can quickly navigate key functionalities.

ShowTabAsync(String)

Displays a specific tab from the SfRibbon component.

Declaration

public Task ShowTabAsync(string tabID)

Parameters

Type	Name	Description
System.String	tabID	The ID of the tab to show.

Returns

Type
System.Threading.Tasks.Task