Allow to specify class on NavItems

vikramlearning · Sep 27, 2023 · 6ba3f39 · 6ba3f39
1 parent 30eb31e
commit 6ba3f39
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor
@@ -30,10 +30,10 @@
             new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},
 
             new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
-            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
-            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
-            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
-            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
+            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8", Class="px-3"},
+            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8", Class="px-3"},
+            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8", Class="px-3"},
+            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8", Class="px-3"},
         };
 
         return navItems;

diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor
@@ -65,7 +65,8 @@
                          Href="@childItem.Href"
                          Text="@childItem.Text"
                          Target="@childItem.Target"
-                         Match="@childItem.Match"/>
+                         Match="@childItem.Match"
+                         Class="@childItem.Class" />
         }
     }
 </div>
diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor
@@ -14,7 +14,8 @@
                          Target="@item.Target"
                          Match="@item.Match"
                          HasChilds="@item.HasChilds"
-                         ChildItems="@item.ChildItems"/>
+                         ChildItems="@item.ChildItems"
+                         Class="@item.Class"/>
         }
     }
 </nav>
diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs
@@ -57,6 +57,11 @@ public class NavItem
     /// Gets or sets the navigation link text.
     /// </summary>
     public string? Text { get; set; }
+
+    /// <summary>
+    /// Gets or sets an additional css class for the item
+    /// </summary>
+    public string? Class { get; set; }
 
     #endregion
 }