Getting Started with Blazor Ribbon Component
18 Nov 202510 minutes to read
This guide explains how to add theBlazor Ribbon component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
Prerequisites
Create a new Blazor App in Visual Studio
To create aBlazor WebAssembly App using Visual Studio viaMicrosoft Templates or theSyncfusion® Blazor Extension.
Install Syncfusion® Blazor Ribbon and Themes NuGet in the App
To addBlazor Ribbon component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and installSyncfusion.Blazor.Ribbon andSyncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.
Install-PackageSyncfusion.Blazor.Ribbon-Version32.1.19Install-PackageSyncfusion.Blazor.Themes-Version32.1.19NOTE
Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.
Prerequisites
Create a new Blazor App in Visual Studio Code
To create aBlazor WebAssembly App using Visual Studio Code viaMicrosoft Templates or theSyncfusion® Blazor Extension.
Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`).
dotnetnewblazorwasm-oBlazorAppcdBlazorAppInstall Syncfusion® Blazor Ribbon and Themes NuGet in the App
- PressCtrl+` to open the integrated terminal in Visual Studio Code.
- Ensure the current working directory is the project root, where the
.csprojfile is located. - Run the following command to install aSyncfusion.Blazor.Ribbon andSyncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnetaddpackageSyncfusion.Blazor.Ribbon-v32.1.19dotnetaddpackageSyncfusion.Blazor.Themes-v32.1.19dotnetrestoreNOTE
Syncfusion® Blazor components are available innuget.org. Refer toNuGet packages topic for available NuGet packages list with component details.
Register Syncfusion® Blazor Service
Open~/_Imports.razor file and import theSyncfusion.Blazor andSyncfusion.Blazor.Ribbon namespace.
@using Syncfusion.Blazor@using Syncfusion.Blazor.RibbonNow, register the Syncfusion® Blazor Service in the~/Program.cs file of your Blazor WebAssembly App.
usingMicrosoft.AspNetCore.Components.Web;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingSyncfusion.Blazor;varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});builder.Services.AddSyncfusionBlazor();awaitbuilder.Build().RunAsync();....Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet throughStatic Web Assets. Include the stylesheet and script references in the<head> section of the~/index.html file.
<head> ....<linkhref="_content/Syncfusion.Blazor.Themes/bootstrap5.css"rel="stylesheet"/><scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>NOTE
Check out theBlazor Themes topic to discover various methods (Static Web Assets,CDN, andCRG) for referencing themes in your Blazor application. Also, check out theAdding Script Reference topic to learn different approaches for adding script references in your Blazor application.
Add Syncfusion® Blazor Ribbon component
Add the Syncfusion® Blazor Ribbon component in the~/Pages/Index.razor file.
Adding ribbon tab
In Ribbon component, options are organized into tabs for easy access. You can use theRibbonTabs tag directive to group all the tabs andRibbonTab tag directive to define each ribbon tab as shown below:
<SfRibbon><RibbonTabs><RibbonTabHeaderText="Home"></RibbonTab></RibbonTabs></SfRibbon>Adding ribbon group
To define a ribbon group under each tab, you can use theRibbonGroups tag directive like below. TheOrientation property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
<SfRibbon><RibbonTabs><RibbonTabHeaderText="Home"><RibbonGroups><RibbonGroupHeaderText="Clipboard"Orientation="Orientation.Row"></RibbonGroup></RibbonGroups></RibbonTab></RibbonTabs></SfRibbon>Adding ribbon item
You can use theRibbonCollection tag directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use theRibbonItem tag directive with theType property to specify the type of item to be rendered, using theRibbonItemType such as Button, a DropDown, a ComboBox, and more.
@using Syncfusion.Blazor.Ribbon;@using Syncfusion.Blazor.SplitButtons;<SfRibbon><RibbonTabs><RibbonTabHeaderText="Home"><RibbonGroups><RibbonGroupHeaderText="Clipboard"><RibbonCollections><RibbonCollection><RibbonItems><RibbonItemType=RibbonItemType.SplitButtonDisabled=true><RibbonSplitButtonSettingsContent="Paste"IconCss="e-icons e-paste"Items="@formatItems"></RibbonSplitButtonSettings></RibbonItem></RibbonItems></RibbonCollection><RibbonCollection><RibbonItems><RibbonItemType=RibbonItemType.Button><RibbonButtonSettingsContent="Cut"IconCss="e-icons e-cut"></RibbonButtonSettings></RibbonItem><RibbonItemType=RibbonItemType.Button><RibbonButtonSettingsContent="Copy"IconCss="e-icons e-copy"></RibbonButtonSettings></RibbonItem><RibbonItemType=RibbonItemType.Button><RibbonButtonSettingsContent="Format Painter"IconCss="e-icons e-format-painter"></RibbonButtonSettings></RibbonItem></RibbonItems></RibbonCollection></RibbonCollections></RibbonGroup></RibbonGroups></RibbonTab></RibbonTabs></SfRibbon>@code{ List<DropDownMenuItem> formatItems = new List<DropDownMenuItem>() { new DropDownMenuItem{ Text = "Keep Source Format" }, new DropDownMenuItem{ Text = "Merge Format" }, new DropDownMenuItem{ Text = "Keep Text Only" } };}
PressCtrl+F5 (Windows) or⌘+F5 (macOS) to run the application. The Syncfusion® Blazor Ribbon component will be rendered in your default web browser.
[8]ページ先頭