Merge pull request #7022 from syncfusion-content/988608-samples

988608: Updated the code snippet of our component

Author: IndrajithSrinivasan

blazor/chat-ui/header.md

@@ -89,6 +89,12 @@ The [HeaderIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inte
     };
 }
 
+<style>
+    #chatui-header .e-header .e-header-icon {
+        display: flex;
+    }
+</style>
+
 ```
 
 ![Blazor Chat UI HeaderIconCss](./images/header-iconCss.png)

blazor/chat-ui/images/timestamp.png

@@ -852,7 +852,7 @@ Customize backstage menu items and their content using the [Template](https://he
     {
         if (backstageMenus.TryGetValue(id, out var menuItem))
         {
-            selectedContent = menuItem.name;
+            selectedContent = menuItem.name.ToLowerInvariant();
         }
     }
 
@@ -863,16 +863,22 @@ Customize backstage menu items and their content using the [Template](https://he
         new DropDownMenuItem{ Text = "Keep Text Only" }
     };
 
-        RenderFragment GetBackstageContent(string item) => item switch
+     private RenderFragment RenderWrapperContent(string icon, string name, string description) => @<div class="section-content">
+        <span class="e-icons @icon doc_icon"></span>
+        <span>@name</span>
+        <div class="desc" style="font-size:12px;color:#555;margin-left:26px;">@description</div>
+    </div>;
+
+        RenderFragment GetBackstageContent(string item) => (item ?? string.Empty).ToLowerInvariant() switch
     {
-        "New" => @<div class="new-wrapper" style="padding: 20px;">
+        "new" => @<div class="new-wrapper" style="padding: 20px;">
         <div class="section-title">New</div>
         <div class="category_container">
             <div class="doc_category_image"></div>
             <span class="doc_category_text">New document</span>
         </div>
     </div>,
-        "Open" => @<div class="block-wrapper">
+        "open" => @<div class="block-wrapper">
         <div class="section-title">Recent</div>
         @{
     var recentDocuments = new List<(string icon, string name, string description)>
@@ -886,7 +892,7 @@ Customize backstage menu items and their content using the [Template](https://he
         @RenderWrapperContent(doc.icon, doc.name, doc.description)
     }
     </div>,
-        "Save" => @<div class="block-wrapper">
+        "save" => @<div class="block-wrapper">
         <div class="section-title">Save</div>
         @{
     var saveItems = new List<(string icon, string name, string description)>

blazor/ribbon/backstage.md

@@ -180,6 +180,21 @@ Apply custom styling to a gallery item by setting its [CssClass](https://help.sy
     };
 }
 
+<style>
+
+    .e-ribbon-gallery-item.bad {
+        background: #ffb6b6;
+    }
+
+    .e-ribbon-gallery-item.good {
+        background: #c7ebc9;
+    }
+
+    .e-ribbon-gallery-item.neutral {
+        background: #eedd9d;
+    }
+</style>
+
 {% endhighlight %}
 {% endtabs %}
 

blazor/ribbon/gallery.md

@@ -86,6 +86,7 @@ This example shows how to configure Checkbox items and handle their events.
 {% highlight razor %}
 
 @using Syncfusion.Blazor.Ribbon
+@using Syncfusion.Blazor.Buttons
 
 <div style="width:30%">
     <SfRibbon>
@@ -122,7 +123,7 @@ This example shows how to configure Checkbox items and handle their events.
 @code {
     private void Created() { /* your actions here */ }
 
-    private void ValueChange(ChangeEventArgs args) { /* your actions here */ }
+    private void ValueChange(ChangeEventArgs<bool> args) { /* your actions here */ }
 }
 
 {% endhighlight %}
@@ -444,6 +445,7 @@ This example shows how to configure a ColorPicker item and handle its events.
 
 @using Syncfusion.Blazor.Ribbon
 @using Syncfusion.Blazor.SplitButtons
+@using Syncfusion.Blazor.Inputs
 
 <div style="width:30%">
     <SfRibbon>