Class SfRibbon

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

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfRibbon

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Ribbon

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfRibbon : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
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.

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

[Parameter]
public EventCallback<RibbonLayout> ActiveLayoutChanged { get; set; }

Property Value

Type
EventCallback<RibbonLayout>

Created

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

Declaration

[Parameter]
public EventCallback<EventArgs> Created { get; set; }

Property Value

Type	Description
EventCallback<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

[Parameter]
public string CssClass { get; set; }

Property Value

Type	Description
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

[Parameter]
public bool EnableKeyTips { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
[JsonPropertyName("enablePersistence")]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public bool HideLayoutSwitcher { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
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

[Parameter]
public bool IsMinimized { get; set; }

Property Value

Type	Description
bool	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

[Parameter]
public EventCallback<LauncherClickEventArgs> LauncherIconClick { get; set; }

Property Value

Type	Description
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

[Parameter]
public string LayoutSwitcherKeyTip { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<OverflowPopupEventArgs> OverflowPopupClosing { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<OverflowPopupEventArgs> OverflowPopupOpening { get; set; }

Property Value

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

RibbonCollapsing

Event raised before the SfRibbon component is collapsed.

Declaration

[Parameter]
public EventCallback<CollapseEventArgs> RibbonCollapsing { get; set; }

Property Value

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

RibbonExpanding

Event raised before the SfRibbon component is expanded.

Declaration

[Parameter]
public EventCallback<ExpandEventArgs> RibbonExpanding { get; set; }

Property Value

Type	Description
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

[Parameter]
public int SelectedTab { get; set; }

Property Value

Type	Description
int	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

[Parameter]
public EventCallback<int> SelectedTabChanged { get; set; }

Property Value

Type
EventCallback<int>

TabAnimation

Gets or sets the animation settings of the SfRibbon.

Declaration

[Parameter]
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

[Parameter]
public EventCallback<TabSelectedEventArgs> TabSelected { get; set; }

Property Value

Type	Description
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

[Parameter]
public EventCallback<TabSelectingEventArgs> TabSelecting { get; set; }

Property Value

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

Width

Gets or sets the width of the SfRibbon.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
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?, bool)

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.
string	groupID	The ID of the ribbon group to add the collection to.
string	targetID	The ID of the target collection to add the new collection (optional).
bool	isAfter	A boolean value that defines whether the collection is added before or after the target (optional).

AddGroup(RibbonGroup, string, string?, bool)

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.
string	tabID	The ID of the ribbon tab to add the group to.
string	targetID	The ID of the target group to add the new group (optional).
bool	isAfter	A boolean value that defines whether the group is added before or after the target (optional).

AddItem(RibbonItem, string, string?, bool)

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.
string	collectionId	The ID of the ribbon collection to add the item to.
string	targetID	The ID of the target item to add the new item (optional).
bool	isAfter	A boolean value that defines whether the item is added before or after the target (optional).

AddTab(RibbonTab, string?, bool)

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.
string	targetID	The ID of the target tab to add the new tab (optional).
bool	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
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

DisableGroup(string)

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

Declaration

public void DisableGroup(string groupID)

Parameters

Type	Name	Description
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
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
string	tabID	The ID of the tab to disable.

Returns

Type
Task

EnableGroup(string)

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

Declaration

public void EnableGroup(string groupID)

Parameters

Type	Name	Description
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
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
string	tabID	The ID of the tab to enable.

Returns

Type
Task

GetItem(string)

Retrieves a RibbonItem instance by its identifier.

Declaration

public RibbonItem? GetItem(string itemId)

Parameters

Type	Name	Description
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
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
string	tabID	The ID of the tab to hide.

Returns

Type
Task

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
Task

Overrides

ComponentBase.OnParametersSetAsync()

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
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
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
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
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
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
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
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
string	tabID	The ID of the tab to show.

Returns

Type
Task

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable