From 75e85dd21bf5d16ba6970c83dfad9314ed40d073 Mon Sep 17 00:00:00 2001
From: Kirupa522 <159987666+Kirupa522@users.noreply.github.com>
Date: Mon, 9 Dec 2024 12:02:04 +0530
Subject: [PATCH 1/5] 903618: added server and WASM getting started for Ribbon

---
 blazor-toc.html                           |  10 +
 blazor/ribbon/getting-started-webapp.md   |   0
 blazor/ribbon/getting-started.md          | 262 ++++++++++++++++++++++
 blazor/ribbon/images/getting-started1.png | Bin 0 -> 2535 bytes
 4 files changed, 272 insertions(+)
 create mode 100644 blazor/ribbon/getting-started-webapp.md
 create mode 100644 blazor/ribbon/getting-started.md
 create mode 100644 blazor/ribbon/images/getting-started1.png

diff --git a/blazor-toc.html b/blazor-toc.html
index b222eaff59..e37da58efe 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -4020,6 +4020,16 @@
 			</li>
 		</ul>
 		</li>
+	<li>Ribbon
+		<ul>
+			<li>Getting Started
+				<ul>
+					<li> <a href="/blazor/rating/getting-started-webapp">Blazor Web App</a></li>
+					<li><a href="/blazor/rating/getting-started">Blazor Server and WASM App</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
 
 	<li>RichTextEditor
 		<ul>
diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/blazor/ribbon/getting-started.md b/blazor/ribbon/getting-started.md
new file mode 100644
index 0000000000..fe82a2d9be
--- /dev/null
+++ b/blazor/ribbon/getting-started.md
@@ -0,0 +1,262 @@
+---
+layout: post
+title: Getting Started with Blazor Ribbon Component | Syncfusion
+description: Checkout and learn about getting started with Blazor Ribbon component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: Ribbon
+documentation: ug
+---
+
+# Getting Started with Blazor Ribbon Component
+
+This section briefly explains about how to include [Blazor Ribbon](https://www.syncfusion.com/blazor-components/blazor-ribbon) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor App in Visual Studio
+
+You can create a **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
+## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App
+
+To add **Blazor Ribbon** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.Ribbon` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+
+## Register Syncfusion Blazor Service
+
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespace.
+
+{% tabs %}
+{% highlight razor tabtitle="~/_Imports.razor" %}
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Ribbon
+
+{% endhighlight %}
+{% endtabs %}
+
+Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Server App or Blazor WebAssembly App.
+
+{% tabs %}
+{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
+
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorPages();
+builder.Services.AddServerSideBlazor();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
+
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+builder.Services.AddSyncfusionBlazor();
+await builder.Build().RunAsync();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
+
+* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file.
+
+* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file.
+
+* For Blazor WebAssembly app, include it in the **~/index.html** file.
+
+```html
+<head>
+    ....
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</head>
+```
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) 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.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor Ribbon component in your default web browser.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/default-prompt.png)" %}
+
+## Adding Ribbon Tab
+
+In SfRibbon, the options are arranged in tabs for easy access. You can use the `<RibbonTabs>` tag directive of ribbon to define the ribbon tab like below.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding Ribbon Group
+
+To define a ribbon group under each tab, you can use the `<RibbonGroups>` tag directive of ribbon tab like below. The `Orientation` property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row"></RibbonGroup>
+            </RibbonGroups>
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding Ribbon Item
+
+You can use the `RibbonCollections` tag directive of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `items` property of ribbon collection and the `type` property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
+                    <RibbonCollections>
+                        <RibbonCollection ID="paste-collection">
+                            <RibbonItems>
+                                <RibbonItem Disabled="true" AllowedSizes=RibbonItemSize.Large Type=RibbonItemType.SplitButton ID="pastebtn">
+                                    <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
+                                </RibbonItem>
+                            </RibbonItems>
+                        </RibbonCollection>
+                        <RibbonCollection ID="cutcopy-collection">
+                            <RibbonItems>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" ></RibbonButtonSettings>
+                                </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></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" }
+    };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Configure suggestions and responses
+
+You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
+
+{% tabs %}
+{% highlight razor %}
+
+@* desired render mode define here *@
+@rendermode InteractiveAuto
+
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight razor %}
+
+<div class="aiassist-container" style="height: 350px; width: 650px;">
+    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
+</div>
+
+@code {
+    List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
+    public class AssistModel
+    {
+        public string Prompt { get; set; }
+        public string Response { get; set; }
+    }
+    private List<AssistModel> prompts = new List<AssistModel>()
+    {
+        new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
+        new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
+    };
+    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
+    {
+        await Task.Delay(3000);
+        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
+        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
+        var defaultResponse = "For real-time prompt processing, connect the Ribbon component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
+        args.Response = isPromptFound ? promptData.Response : defaultResponse;
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon default prompt](./images/default-prompt.png)" %}
+
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AIAssistView).
diff --git a/blazor/ribbon/images/getting-started1.png b/blazor/ribbon/images/getting-started1.png
new file mode 100644
index 0000000000000000000000000000000000000000..965d4525f8252330dd860868951eba189c9c5729
GIT binary patch
literal 2535
zcmeH|X;hL~7{_0e>11h!g<CF-mMzn?r?$D|LPlw7U?pzYQOX1g=Y*o7bt)yr%G3!>
zolH$s$dqH5TMg)GO3gA<lqhUOWedd=7nql7zRaijGIKg}=EHk`_qpdj&;S44_r3R~
zAMu47Ew)??0DzIt0nY#cfTV!^x<w1YR%#eD4nmI@0N)QVJFP~+021wf*c||BvX;z6
zd<Vt`gagNk0I>8|-J{ozzjqQGOZ4${KS~Of3GmpEXzNy`(4fws8H;cqTS2GNV()8G
z`x(WkUvS$T0@0FVh$Lv$A=CONj&T80n%aT(K47l)`^eIPe8U1L<mx5lOj*T6xp8%f
z0KIlyq{o@#A^gr+(gQNihaOjUs$`T^WIR|PE|~pb^>9j%CoTxiIRV-NuAzczb^cbZ
z*IT5+u5S;I7(Mi@hX~_6qfrph;)~02^#r|J`e4B~XZX=`XCTM?VJ&Ql&E^hGkGBm=
z+%w@#PXb-1ATnWYAc1EFe}UP%zUwCX#%#=_KqiKS#E1PLCowqP=jjH~8RWMwl_q<V
zUr~RLoSoE88s#|i80B>bGYr|HTryvLqPZI8!73b5d*X9QbuMsm!*d0m`%W`O$%TSa
z1hq*@)Ll;ZdsHHZoNnE2-yBbbwe+L8yeuzie-K8kUu}MCMe6DDgNBAT&D8|h0KQsG
z*@D61)0@M3+Y8s#C<&b278LijlQ$Y!RFA*UVNx8m1Inoc&BZkfwcY4?m#*BIy;;(#
zEUhnO0VwIPJS9p*NN*NEn<^Q7+KbG-arFjXXb^W8{}We(hodQWn4wOSk`C4OrQR9I
zrBs<jqAp^J-YR%QT<GJ%A8X{3X+oh8CXo#F3SYwZ;4_cCqW0C`(LJYf%&j&m$Jt1!
zfQPOx6jIK^{FrIxGqLF*?fH*DZNNxx#4TRo$RIZHtg*wl{V`p(cHU!tI7uv0wFAB<
zfyua|<)=A?Zm3b5B;Jqo=L}02QRO@&mk*OgX!95&)>E;nDh9@*$yyUkro0#-uCdt#
zRo>2L9CLo3Uy136wnOnslHh!}PHi`&m<u&#x=h6&<~9AHq*6_76%{Fv&8IUSCLAZL
zp2o;z7KqA`*vr=YY_a&DH;ThYipc)kr6l#6G^epxVOCih(lwLRoUHg5jMLW#OFEdO
z<f6J;DkKFgBSe1uPzG(EFxs8-^pkuwBDb!-B$@>zwD^%Ng`ANV{(vnW=SsvfdXqY+
zc3^VKQa!9gn+tmg+Ri6uTgBK6HlB1RlWSBjV(_j#1IfcLkFsDv1?(HTZSzoS;I{q#
zIjJeD_n?(C`BE2oZ0L&Q@cgq+q1`U$YE+Ju*FQCh95;hg!)GAH6DY2@d0EW^n6fo6
zn=%@sBBVdbv*RT)sO&%&d+e|&^Bx8<pJ_y!KQq_wx}DO%d5MeA>HK^Mpr;nXkbCQP
zi$+pSD(l&z?r4NGp2?ww)ro3dvq&0y<lMRWje}J7J*sA<eS)87)c~KWFs^6qsjG$6
zC$c<+l8(K)_d5$Iwy3~#lrj4ruNPgGr#%VFnI5N^=)>(D2hm(x#jWXVxmlpXOd@&f
z@1+%`y%)$Nnvda}2Y#rtC$q&`um+HgEahcHT*xl>b+QM;aL2eVe6sRX?r}Zc(Q>T-
z_?Li2p6(!Z1{0zyEtD-Ehg)0nbsKie$_8;)jCbwx#jC(5<pbmkHdO?-`WEgMWPpRf
zrX-x6?q7L#XIY9azOnqD#-={3m1Xiq8ygL=@wL@0#1~gfwpm^&jNe%3JdJB46V}-z
zN6EcbeZD-x+vw91d0A~v@`io#CP`)YZ22Rz)Gt{U7G@M&%X;Q$h4CcXdZjoVV)EI3
z=K!{GTGi#yRz%xn{&nueE1IjHX7aaZ%JN9spSAgAP|EJ%BVW_XBr=b!<HI|(`!sPo
zpd&-@srIXQr*@4oBOs=Y`1V;~`R8?QEoG54jZr%uR{^?1>VWUx26F>D$`DL(+m8bD
lK(1c<KmG$taMx66JFv5far4Yw5%^UBA1_}|=Kk;te*owbB0T^A

literal 0
HcmV?d00001


From 4c79746ed1c4f043d276f12e1da36419dea9f0a7 Mon Sep 17 00:00:00 2001
From: manikandan-mariappan <manikandan.mariappan@syncfusion.com>
Date: Mon, 9 Dec 2024 20:54:14 +0530
Subject: [PATCH 2/5] 903618: Updated getting started for Ribbon

---
 blazor/ribbon/getting-started-webapp.md   | 149 ++++++++++++++++++++++
 blazor/ribbon/getting-started.md          | 118 ++---------------
 blazor/ribbon/images/getting-started1.png | Bin 2535 -> 10717 bytes
 3 files changed, 158 insertions(+), 109 deletions(-)

diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md
index e69de29bb2..00d24833a8 100644
--- a/blazor/ribbon/getting-started-webapp.md
+++ b/blazor/ribbon/getting-started-webapp.md
@@ -0,0 +1,149 @@
+---
+layout: post
+title: Getting started with Syncfusion Ribbon in Blazor Web App
+description: Check out the documentation for getting started with Syncfusion Blazor Ribbon Components in Blazor Web App.
+platform: Blazor
+control: Ribbon
+documentation: ug
+---
+
+# Getting Started with Blazor Ribbon in Blazor Web App
+
+This section briefly explains about how to include [Blazor Ribbon](https://www.syncfusion.com/blazor-components/blazor-ribbon) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor Web App
+
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
+You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+
+## Install Syncfusion Blazor Ribbon and Themes NuGet in the App
+
+To add **Blazor Ribbon** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.Ribbon` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion Blazor components NuGet packages within the client project.
+
+Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Ribbon -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+
+## Register Syncfusion Blazor Service
+
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Ribbon` namespace.
+
+```cshtml
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Ribbon
+
+```
+
+Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+
+If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor Web App.
+
+```cshtml
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+```
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
+
+```html
+<head>
+    ....
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+</head>
+
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+```
+
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) 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/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+
+{% tabs %}
+{% highlight razor %}
+
+@* desired render mode define here *@
+@rendermode InteractiveAuto
+
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard">
+                    <RibbonCollections>
+                        <RibbonCollection>
+                            <RibbonItems>
+                                <RibbonItem Disabled="true" AllowedSizes=RibbonItemSize.Large Type=RibbonItemType.SplitButton ID="pastebtn">
+                                    <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
+                                </RibbonItem>
+                            </RibbonItems>
+                        </RibbonCollection>
+                        <RibbonCollection>
+                            <RibbonItems>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" ></RibbonButtonSettings>
+                                </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
+                                </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="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" }
+    };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor Ribbon component in your default web browser.
+
+![Blazor Ribbon Component](./images/getting-started1.png)
diff --git a/blazor/ribbon/getting-started.md b/blazor/ribbon/getting-started.md
index fe82a2d9be..7081b2f71b 100644
--- a/blazor/ribbon/getting-started.md
+++ b/blazor/ribbon/getting-started.md
@@ -19,7 +19,7 @@ This section briefly explains about how to include [Blazor Ribbon](https://www.s
 
 You can create a **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-## Install Syncfusion Blazor InteractiveChat and Themes NuGet in the App
+## Install Syncfusion Blazor Ribbon and Themes NuGet in the App
 
 To add **Blazor Ribbon** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.Ribbon` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -112,78 +112,20 @@ Add the Syncfusion Blazor Ribbon component in the **~/Pages/Index.razor** file.
 {% tabs %}
 {% highlight razor %}
 
-<SfRibbon>
-    <RibbonTabs>
-        <RibbonTab HeaderText="Home">
-        </RibbonTab>
-    </RibbonTabs>
-</SfRibbon>
-
-{% endhighlight %}
-{% endtabs %}
-
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor Ribbon component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/default-prompt.png)" %}
-
-## Adding Ribbon Tab
-
-In SfRibbon, the options are arranged in tabs for easy access. You can use the `<RibbonTabs>` tag directive of ribbon to define the ribbon tab like below.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfRibbon>
-    <RibbonTabs>
-        <RibbonTab HeaderText="Home">
-        </RibbonTab>
-    </RibbonTabs>
-</SfRibbon>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding Ribbon Group
-
-To define a ribbon group under each tab, you can use the `<RibbonGroups>` tag directive of ribbon tab like below. The `Orientation` property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.
-
-{% tabs %}
-{% highlight razor %}
-
 <SfRibbon>
     <RibbonTabs>
         <RibbonTab HeaderText="Home">
             <RibbonGroups>
-                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row"></RibbonGroup>
-            </RibbonGroups>
-        </RibbonTab>
-    </RibbonTabs>
-</SfRibbon>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding Ribbon Item
-
-You can use the `RibbonCollections` tag directive of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `items` property of ribbon collection and the `type` property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfRibbon>
-    <RibbonTabs>
-        <RibbonTab HeaderText="Home">
-            <RibbonGroups>
-                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
+                <RibbonGroup HeaderText="Clipboard">
                     <RibbonCollections>
-                        <RibbonCollection ID="paste-collection">
+                        <RibbonCollection>
                             <RibbonItems>
                                 <RibbonItem Disabled="true" AllowedSizes=RibbonItemSize.Large Type=RibbonItemType.SplitButton ID="pastebtn">
                                     <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
                                 </RibbonItem>
                             </RibbonItems>
                         </RibbonCollection>
-                        <RibbonCollection ID="cutcopy-collection">
+                        <RibbonCollection>
                             <RibbonItems>
                                 <RibbonItem Type=RibbonItemType.Button>
                                     <RibbonButtonSettings Content="Cut" IconCss="e-icons e-cut" ></RibbonButtonSettings>
@@ -191,6 +133,9 @@ You can use the `RibbonCollections` tag directive of ribbon group to define each
                                 <RibbonItem Type=RibbonItemType.Button>
                                     <RibbonButtonSettings Content="Copy" IconCss="e-icons e-copy"></RibbonButtonSettings>
                                 </RibbonItem>
+                                <RibbonItem Type=RibbonItemType.Button>
+                                    <RibbonButtonSettings Content="Format Painter" IconCss="e-icons e-format-painter"></RibbonButtonSettings>
+                                </RibbonItem>
                             </RibbonItems>
                         </RibbonCollection>
                     </RibbonCollections>
@@ -212,51 +157,6 @@ You can use the `RibbonCollections` tag directive of ribbon group to define each
 {% endhighlight %}
 {% endtabs %}
 
-## Configure suggestions and responses
-
-You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed.
-
-{% tabs %}
-{% highlight razor %}
-
-@* desired render mode define here *@
-@rendermode InteractiveAuto
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight razor %}
-
-<div class="aiassist-container" style="height: 350px; width: 650px;">
-    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
-</div>
-
-@code {
-    List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
-    public class AssistModel
-    {
-        public string Prompt { get; set; }
-        public string Response { get; set; }
-    }
-    private List<AssistModel> prompts = new List<AssistModel>()
-    {
-        new AssistModel() { Prompt = "How do I prioritize my tasks?", Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!" },
-        new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
-    };
-    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
-    {
-        await Task.Delay(3000);
-        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
-        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
-        var defaultResponse = "For real-time prompt processing, connect the Ribbon component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
-        args.Response = isPromptFound ? promptData.Response : defaultResponse;
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhTCNsCMKFGRhuU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon default prompt](./images/default-prompt.png)" %}
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor Ribbon component in your default web browser.
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AIAssistView).
+![Blazor Ribbon Component](./images/getting-started1.png)
diff --git a/blazor/ribbon/images/getting-started1.png b/blazor/ribbon/images/getting-started1.png
index 965d4525f8252330dd860868951eba189c9c5729..113edb5a2481fa98078b25b1748fbcaf0e98f454 100644
GIT binary patch
literal 10717
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
Yl;UbA0zo{tL7(g0GQ5er@$j#I172UQlmGw#

literal 2535
zcmeH|X;hL~7{_0e>11h!g<CF-mMzn?r?$D|LPlw7U?pzYQOX1g=Y*o7bt)yr%G3!>
zolH$s$dqH5TMg)GO3gA<lqhUOWedd=7nql7zRaijGIKg}=EHk`_qpdj&;S44_r3R~
zAMu47Ew)??0DzIt0nY#cfTV!^x<w1YR%#eD4nmI@0N)QVJFP~+021wf*c||BvX;z6
zd<Vt`gagNk0I>8|-J{ozzjqQGOZ4${KS~Of3GmpEXzNy`(4fws8H;cqTS2GNV()8G
z`x(WkUvS$T0@0FVh$Lv$A=CONj&T80n%aT(K47l)`^eIPe8U1L<mx5lOj*T6xp8%f
z0KIlyq{o@#A^gr+(gQNihaOjUs$`T^WIR|PE|~pb^>9j%CoTxiIRV-NuAzczb^cbZ
z*IT5+u5S;I7(Mi@hX~_6qfrph;)~02^#r|J`e4B~XZX=`XCTM?VJ&Ql&E^hGkGBm=
z+%w@#PXb-1ATnWYAc1EFe}UP%zUwCX#%#=_KqiKS#E1PLCowqP=jjH~8RWMwl_q<V
zUr~RLoSoE88s#|i80B>bGYr|HTryvLqPZI8!73b5d*X9QbuMsm!*d0m`%W`O$%TSa
z1hq*@)Ll;ZdsHHZoNnE2-yBbbwe+L8yeuzie-K8kUu}MCMe6DDgNBAT&D8|h0KQsG
z*@D61)0@M3+Y8s#C<&b278LijlQ$Y!RFA*UVNx8m1Inoc&BZkfwcY4?m#*BIy;;(#
zEUhnO0VwIPJS9p*NN*NEn<^Q7+KbG-arFjXXb^W8{}We(hodQWn4wOSk`C4OrQR9I
zrBs<jqAp^J-YR%QT<GJ%A8X{3X+oh8CXo#F3SYwZ;4_cCqW0C`(LJYf%&j&m$Jt1!
zfQPOx6jIK^{FrIxGqLF*?fH*DZNNxx#4TRo$RIZHtg*wl{V`p(cHU!tI7uv0wFAB<
zfyua|<)=A?Zm3b5B;Jqo=L}02QRO@&mk*OgX!95&)>E;nDh9@*$yyUkro0#-uCdt#
zRo>2L9CLo3Uy136wnOnslHh!}PHi`&m<u&#x=h6&<~9AHq*6_76%{Fv&8IUSCLAZL
zp2o;z7KqA`*vr=YY_a&DH;ThYipc)kr6l#6G^epxVOCih(lwLRoUHg5jMLW#OFEdO
z<f6J;DkKFgBSe1uPzG(EFxs8-^pkuwBDb!-B$@>zwD^%Ng`ANV{(vnW=SsvfdXqY+
zc3^VKQa!9gn+tmg+Ri6uTgBK6HlB1RlWSBjV(_j#1IfcLkFsDv1?(HTZSzoS;I{q#
zIjJeD_n?(C`BE2oZ0L&Q@cgq+q1`U$YE+Ju*FQCh95;hg!)GAH6DY2@d0EW^n6fo6
zn=%@sBBVdbv*RT)sO&%&d+e|&^Bx8<pJ_y!KQq_wx}DO%d5MeA>HK^Mpr;nXkbCQP
zi$+pSD(l&z?r4NGp2?ww)ro3dvq&0y<lMRWje}J7J*sA<eS)87)c~KWFs^6qsjG$6
zC$c<+l8(K)_d5$Iwy3~#lrj4ruNPgGr#%VFnI5N^=)>(D2hm(x#jWXVxmlpXOd@&f
z@1+%`y%)$Nnvda}2Y#rtC$q&`um+HgEahcHT*xl>b+QM;aL2eVe6sRX?r}Zc(Q>T-
z_?Li2p6(!Z1{0zyEtD-Ehg)0nbsKie$_8;)jCbwx#jC(5<pbmkHdO?-`WEgMWPpRf
zrX-x6?q7L#XIY9azOnqD#-={3m1Xiq8ygL=@wL@0#1~gfwpm^&jNe%3JdJB46V}-z
zN6EcbeZD-x+vw91d0A~v@`io#CP`)YZ22Rz)Gt{U7G@M&%X;Q$h4CcXdZjoVV)EI3
z=K!{GTGi#yRz%xn{&nueE1IjHX7aaZ%JN9spSAgAP|EJ%BVW_XBr=b!<HI|(`!sPo
zpd&-@srIXQr*@4oBOs=Y`1V;~`R8?QEoG54jZr%uR{^?1>VWUx26F>D$`DL(+m8bD
lK(1c<KmG$taMx66JFv5far4Yw5%^UBA1_}|=Kk;te*owbB0T^A


From c214b705b03880bcc38a8fd152d55905ec017023 Mon Sep 17 00:00:00 2001
From: Mani <119287057+manikandan-mariappan@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:06:46 +0530
Subject: [PATCH 3/5] 903618: Updated Ribbon filepath

---
 blazor-toc.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/blazor-toc.html b/blazor-toc.html
index b67094c2e5..b53667850c 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -4023,8 +4023,8 @@
 		<ul>
 			<li>Getting Started
 				<ul>
-					<li> <a href="/blazor/rating/getting-started-webapp">Blazor Web App</a></li>
-					<li><a href="/blazor/rating/getting-started">Blazor Server and WASM App</a></li>
+					<li> <a href="/blazor/ribbon/getting-started-webapp">Blazor Web App</a></li>
+					<li><a href="/blazor/ribbon/getting-started">Blazor Server and WASM App</a></li>
 				</ul>
 			</li>
 		</ul>

From e38831d328455f7ee431e883c044fbbe1f485bfd Mon Sep 17 00:00:00 2001
From: Mani <119287057+manikandan-mariappan@users.noreply.github.com>
Date: Tue, 10 Dec 2024 19:04:46 +0530
Subject: [PATCH 4/5] 903618: Added step by step instructions for rendering
 Ribbon

---
 blazor/ribbon/getting-started-webapp.md | 44 +++++++++++++++++++++++--
 blazor/ribbon/getting-started.md        | 44 +++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md
index 00d24833a8..4b951c999d 100644
--- a/blazor/ribbon/getting-started-webapp.md
+++ b/blazor/ribbon/getting-started-webapp.md
@@ -96,6 +96,46 @@ Add the Syncfusion Blazor Ribbon component in the **~Pages/.razor** file. If an
 {% endhighlight %}
 {% endtabs %}
 
+### Adding Ribbon Tab
+
+In Ribbon component, options are organized into tabs for easy access. You can use the `<RibbonTabs>` directive to group all the tabs and `<RibbonTab>` directive to define each ribbon tab as shown below:
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home"></RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding Ribbon Group
+
+To define a ribbon group under each tab, you can use the `<RibbonGroups>` directive like below. The `Orientation` property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row"></RibbonGroup>
+            </RibbonGroups>
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding Ribbon Item
+
+You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, like a button, a drop-down button, a combo box, and more.
+
 {% tabs %}
 {% highlight razor %}
 
@@ -103,11 +143,11 @@ Add the Syncfusion Blazor Ribbon component in the **~Pages/.razor** file. If an
     <RibbonTabs>
         <RibbonTab HeaderText="Home">
             <RibbonGroups>
-                <RibbonGroup HeaderText="Clipboard">
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
                     <RibbonCollections>
                         <RibbonCollection>
                             <RibbonItems>
-                                <RibbonItem Disabled="true" AllowedSizes=RibbonItemSize.Large Type=RibbonItemType.SplitButton ID="pastebtn">
+                                <RibbonItem Type=RibbonItemType.SplitButton Disabled=true>
                                     <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
                                 </RibbonItem>
                             </RibbonItems>
diff --git a/blazor/ribbon/getting-started.md b/blazor/ribbon/getting-started.md
index 7081b2f71b..a2fd461cbb 100644
--- a/blazor/ribbon/getting-started.md
+++ b/blazor/ribbon/getting-started.md
@@ -109,6 +109,46 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 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 the `<RibbonTabs>` directive to group all the tabs and `<RibbonTab>` directive to define each ribbon tab as shown below:
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home"></RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding Ribbon Group
+
+To define a ribbon group under each tab, you can use the `<RibbonGroups>` directive like below. The `Orientation` property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
+
+{% tabs %}
+{% highlight razor %}
+
+<SfRibbon>
+    <RibbonTabs>
+        <RibbonTab HeaderText="Home">
+            <RibbonGroups>
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row"></RibbonGroup>
+            </RibbonGroups>
+        </RibbonTab>
+    </RibbonTabs>
+</SfRibbon>
+
+{% endhighlight %}
+{% endtabs %}
+
+### Adding Ribbon Item
+
+You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, like a button, a drop-down button, a combo box, and more.
+
 {% tabs %}
 {% highlight razor %}
 
@@ -116,11 +156,11 @@ Add the Syncfusion Blazor Ribbon component in the **~/Pages/Index.razor** file.
     <RibbonTabs>
         <RibbonTab HeaderText="Home">
             <RibbonGroups>
-                <RibbonGroup HeaderText="Clipboard">
+                <RibbonGroup HeaderText="Clipboard" Orientation="Orientation.Row">
                     <RibbonCollections>
                         <RibbonCollection>
                             <RibbonItems>
-                                <RibbonItem Disabled="true" AllowedSizes=RibbonItemSize.Large Type=RibbonItemType.SplitButton ID="pastebtn">
+                                <RibbonItem Type=RibbonItemType.SplitButton Disabled=true>
                                     <RibbonSplitButtonSettings Content="Paste" IconCss="e-icons e-paste" Items="@formatItems"></RibbonSplitButtonSettings>
                                 </RibbonItem>
                             </RibbonItems>

From 76b175246cd3998403fe67b22b4b67f6c6c7ad0b Mon Sep 17 00:00:00 2001
From: Indrajith <93306904+IndrajithSrinivasan@users.noreply.github.com>
Date: Tue, 10 Dec 2024 19:25:37 +0530
Subject: [PATCH 5/5] 903618: updated the corrections.

---
 blazor/ribbon/getting-started-webapp.md | 8 ++++----
 blazor/ribbon/getting-started.md        | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/blazor/ribbon/getting-started-webapp.md b/blazor/ribbon/getting-started-webapp.md
index 4b951c999d..e59ba68da4 100644
--- a/blazor/ribbon/getting-started-webapp.md
+++ b/blazor/ribbon/getting-started-webapp.md
@@ -96,7 +96,7 @@ Add the Syncfusion Blazor Ribbon component in the **~Pages/.razor** file. If an
 {% endhighlight %}
 {% endtabs %}
 
-### Adding Ribbon Tab
+### Adding ribbon tab
 
 In Ribbon component, options are organized into tabs for easy access. You can use the `<RibbonTabs>` directive to group all the tabs and `<RibbonTab>` directive to define each ribbon tab as shown below:
 
@@ -112,7 +112,7 @@ In Ribbon component, options are organized into tabs for easy access. You can us
 {% endhighlight %}
 {% endtabs %}
 
-### Adding Ribbon Group
+### Adding ribbon group
 
 To define a ribbon group under each tab, you can use the `<RibbonGroups>` directive like below. The `Orientation` property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
 
@@ -132,9 +132,9 @@ To define a ribbon group under each tab, you can use the `<RibbonGroups>` direct
 {% endhighlight %}
 {% endtabs %}
 
-### Adding Ribbon Item
+### Adding ribbon item
 
-You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, like a button, a drop-down button, a combo box, and more.
+You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, using the `RibbonItemType` such as Button, a DropDown, a ComboBox, and more.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/ribbon/getting-started.md b/blazor/ribbon/getting-started.md
index a2fd461cbb..94ee373b6e 100644
--- a/blazor/ribbon/getting-started.md
+++ b/blazor/ribbon/getting-started.md
@@ -109,7 +109,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 Add the Syncfusion Blazor Ribbon component in the **~/Pages/Index.razor** file.
 
-### Adding Ribbon Tab
+### Adding ribbon tab
 
 In Ribbon component, options are organized into tabs for easy access. You can use the `<RibbonTabs>` directive to group all the tabs and `<RibbonTab>` directive to define each ribbon tab as shown below:
 
@@ -125,7 +125,7 @@ In Ribbon component, options are organized into tabs for easy access. You can us
 {% endhighlight %}
 {% endtabs %}
 
-### Adding Ribbon Group
+### Adding ribbon group
 
 To define a ribbon group under each tab, you can use the `<RibbonGroups>` directive like below. The `Orientation` property of ribbon group defines whether the collection of items inside the group will be rendered column-wise or row-wise.
 
@@ -145,9 +145,9 @@ To define a ribbon group under each tab, you can use the `<RibbonGroups>` direct
 {% endhighlight %}
 {% endtabs %}
 
-### Adding Ribbon Item
+### Adding ribbon item
 
-You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, like a button, a drop-down button, a combo box, and more.
+You can use the `<RibbonCollection>` directive to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `<RibbonItem>` directive with the `Type` property to specify the type of item to be rendered, using the `RibbonItemType` such as Button, a DropDown, a ComboBox, and more.
 
 {% tabs %}
 {% highlight razor %}