From 070e077d5d7fa13a70b64a21153c97d6fff902b6 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:32:00 +0200 Subject: [PATCH 01/11] Refactor sidebar to IEnumerable --- .../Layout/server/Layout_Server_Demo_01.razor | 21 +-- .../Layout_WebAssembly_Demo_01.razor | 22 +-- .../Sidebar/Sidebar_Demo_01_Basic_Usage.razor | 26 +-- ...Sidebar_Demo_02_Two_level_navigation.razor | 62 ++++--- .../Sidebar_Demo_03_Change_Icons_Color.razor | 71 +++++--- ...bar_Demo_04_Full_layout_with_sidebar.razor | 71 +++++--- ...05_Toggle_Sidebar_to_Show_Icons_Only.razor | 71 +++++--- .../Sidebar/Sidebar_Demo_06_Show_Badge.razor | 69 +++++--- .../Sidebar_Demo_07_Custom_Brand_Icon.razor | 72 +++++--- ...bar_Demo_08_Show_Image_as_Brand_Logo.razor | 72 +++++--- .../Sidebar_Demo_09_Customize_Sidebar.razor | 71 +++++--- ...10_Apply_Custom_CSS_Class_to_NavItem.razor | 68 +++++--- .../Shared/MainLayout.razor | 2 +- .../Shared/MainLayout.razor.cs | 163 ++++++++++++------ .../Components/Sidebar/Sidebar.razor | 2 +- .../Components/Sidebar/Sidebar.razor.cs | 35 +--- .../Components/Sidebar/SidebarItem.razor | 33 ++-- .../Components/Sidebar/SidebarItem.razor.cs | 27 +-- .../Components/Sidebar/SidebarItemGroup.razor | 11 +- blazorbootstrap/Models/NavItem.cs | 6 +- .../Models/SidebarDataProviderDelegate.cs | 6 - .../Models/SidebarDataProviderRequest.cs | 38 ---- .../Models/SidebarDataProviderResult.cs | 13 -- 23 files changed, 557 insertions(+), 475 deletions(-) delete mode 100644 blazorbootstrap/Models/SidebarDataProviderDelegate.cs delete mode 100644 blazorbootstrap/Models/SidebarDataProviderRequest.cs delete mode 100644 blazorbootstrap/Models/SidebarDataProviderResult.cs diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor index 9ea046b01..17c1e9745 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor @@ -5,7 +5,7 @@ + Items="GetNavItems()" />
@@ -23,25 +23,12 @@ @code { private Sidebar sidebar = default!; - private IEnumerable navItems = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All}, - new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"}, - new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"}, - }; - - return navItems; + yield return new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All }; + yield return new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor index 9ea046b01..f3f2ed4cf 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor @@ -5,7 +5,7 @@ + Items="GetNavItems()" />
@@ -23,25 +23,11 @@ @code { private Sidebar sidebar = default!; - private IEnumerable navItems = default!; - - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All}, - new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"}, - new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"}, - }; - - return navItems; + yield return new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All }; + yield return new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor index 426aa477c..d27f0ebbc 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor @@ -1,30 +1,18 @@  + Items="GetNavItems()" /> @code { - Sidebar sidebar; - IEnumerable navItems; + Sidebar sidebar = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"}, - new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"}, - new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"}, - new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"}, - }; - return navItems; + yield return new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}; + yield return new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"}; + yield return new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"}; + yield return new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"}; + yield return new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }; } } 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 index 17aae064c..8a9b490e1 100644 --- 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 @@ -1,41 +1,55 @@  + Items="GetNavItems()" /> @code { - Sidebar sidebar; - IEnumerable navItems; + Sidebar sidebar = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"} + } + }; - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" } + } + }; + + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + ChildItems = new List + { + 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" } + } }; - return navItems; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor index bfe64662b..7b1987e54 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor @@ -1,41 +1,62 @@  + Items="GetNavItems()" /> @code { - Sidebar sidebar; - IEnumerable navItems; - - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } + Sidebar sidebar = default!; private IEnumerable GetNavItems() { - navItems = new List + + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" } + } + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } }; - return navItems; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor index 60e9e0b55..c0fa794b6 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor @@ -3,7 +3,7 @@ + Items="GetNavItems()" />
@@ -18,38 +18,59 @@
@code { - Sidebar sidebar; - IEnumerable navItems; + Sidebar sidebar = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List - { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem + { + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor index a05af1f4d..296a02bc6 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -3,7 +3,7 @@ + Items="GetNavItems()" />
@@ -19,39 +19,60 @@
@code { - Sidebar sidebar; - IEnumerable navItems; + Sidebar sidebar = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } + private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } private void ToogleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor index d1c3f2e00..00362ec3b 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor @@ -4,7 +4,7 @@ IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v1.3.1" - DataProvider="SidebarDataProvider" /> + Items="GetNavItems()" />
@@ -20,39 +20,60 @@
@code { - Sidebar sidebar; - IEnumerable navItems; + Sidebar sidebar = default!; - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } private void ToogleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor index 6239414fe..eb7e03448 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor @@ -4,7 +4,7 @@ CustomIconName="bi bi-apple" Title="Blazor Bootstrap" BadgeText="v1.3.1" - DataProvider="SidebarDataProvider" /> + Items="GetNavItems()" />
@@ -20,39 +20,59 @@
@code { - Sidebar sidebar; - IEnumerable navItems; - - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } + Sidebar sidebar = default!; + private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } private void ToogleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor index 9bb62a7a1..5be99ea17 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor @@ -4,7 +4,7 @@ ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg" Title="Blazor Bootstrap" BadgeText="v1.3.1" - DataProvider="SidebarDataProvider" /> + Items="GetNavItems()" />
@@ -20,39 +20,59 @@
@code { - Sidebar sidebar; - IEnumerable navItems; - - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } + Sidebar sidebar = default!; + private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } private void ToogleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor index 3c8feb1d9..20852c7f4 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor @@ -4,7 +4,7 @@ IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v1.3.1" - DataProvider="SidebarDataProvider" /> + Items="GetNavItems()" />
@@ -21,40 +21,59 @@
@code { - Sidebar sidebar; + Sidebar sidebar = default!; bool applyPurpleStyle = false; - IEnumerable navItems; - - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, - - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + } + }; - new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger }, - 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"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + } }; - return navItems; + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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" }, + } + }; } private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor index 0331c63ab..11cb19f8f 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor @@ -1,41 +1,65 @@  + Items="GetNavItems()" /> @code { Sidebar sidebar; - IEnumerable navItems; + - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List + yield return new NavItem { - new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, + Id = "1", + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; - new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, + yield return new NavItem + { + Id = "2", + IconName = IconName.LayoutSidebarInset, + Text = "Content", + IconColor = IconColor.Primary, + ChildItems = new List + { + new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2", Class = "px-3" }, + } + }; - new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4", Class="px-3"}, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4", Class="px-3"}, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4", Class="px-3"}, + yield return new NavItem + { + Id = "4", + IconName = IconName.ExclamationTriangleFill, + Text = "Components", + IconColor = IconColor.Success, + ChildItems = new List + { + new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4", Class = "px-3" }, + new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4", Class = "px-3" }, + new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4", Class = "px-3" }, + } + }; - 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"}, + yield return new NavItem + { + Id = "8", + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + 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.Demo.RCL/Shared/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor index 57786fc78..92965574c 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor @@ -8,7 +8,7 @@ ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg" Title="Blazor Bootstrap" BadgeText="@version" - DataProvider="SidebarDataProvider" /> + Items="GetNavItems()" />
diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs index 2a6b06799..b72866d56 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs @@ -4,7 +4,7 @@ public partial class MainLayout : LayoutComponentBase { private string version = default!; private Sidebar sidebar = default!; - private IEnumerable navItems = default!; + [Inject] public IConfiguration Configuration { get; set; } = default!; @@ -14,72 +14,125 @@ protected override void OnInitialized() base.OnInitialized(); } - private async Task SidebarDataProvider(SidebarDataProviderRequest request) - { - if (navItems is null) - navItems = GetNavItems(); - return await Task.FromResult(request.ApplyTo(navItems)); - } private IEnumerable GetNavItems() { - navItems = new List + + yield return new() { - new (){ Id = "1", Text = "Getting Started", IconName = IconName.HouseDoorFill }, - new (){ Id = "100", Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome, ParentId = "1" }, - new (){ Id = "101", Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server, ParentId = "1" }, - new (){ Id = "102", Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill, ParentId = "1" }, + Id = "1", + Text = "Getting Started", + IconName = IconName.HouseDoorFill, + ChildItems = new List + { + new (){ Id = "100", Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome, ParentId = "1" }, + new (){ Id = "101", Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server, ParentId = "1" }, + new (){ Id = "102", Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill, ParentId = "1" }, + } + }; - new (){ Id = "2", Text = "Layout", IconName = IconName.LayoutTextWindowReverse, IconColor = IconColor.Success }, - new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, - new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, + yield return new() + { + Id = "2", + Text = "Layout", + IconName = IconName.LayoutTextWindowReverse, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, + new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, + } + }; - new (){ Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary }, - new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, + yield return new() + { + Id = "3", + Text = "Content", + IconName = IconName.BodyText, + IconColor = IconColor.Primary, + ChildItems = new List + { + new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, + } + }; - new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, - new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, - new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, - new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "404", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "405", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + yield return new() + { + Id = "4", + Text = "Forms", + IconName = IconName.InputCursorText, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, + new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, + new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, + new (){ Id = "404", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, + new (){ Id = "405", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + } + }; - new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, - new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, - new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, - new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, - new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, - new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, - new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, - new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, - new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, - new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, - new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, - new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, - new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, - new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, - new (){ Id = "515", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, - new (){ Id = "516", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, - new (){ Id = "517", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, - new (){ Id = "518", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "519", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "520", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "521", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, - new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + yield return new() + { + Id = "5", + Text = "Components", + IconName = IconName.GearFill, + IconColor = IconColor.Danger, + ChildItems = new List + { + new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, + new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, + new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, + new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, + new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, + new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, + new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, + new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, + new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, + new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, + new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, + new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, + new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, + new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, + new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, + new (){ Id = "515", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, + new (){ Id = "516", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, + new (){ Id = "517", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, + new (){ Id = "518", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, + new (){ Id = "519", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, + new (){ Id = "520", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, + new (){ Id = "521", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, + } + }; - new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, - new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + yield return new() + { + Id = "6", + Text = "Data Visualization", + IconName = IconName.BarChartFill, + IconColor = IconColor.Warning, + ChildItems = new List + { + new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + } }; - return navItems; + yield return new() + { + Id = "7", + Text = "Services", + IconName = IconName.WrenchAdjustableCircleFill, + IconColor = IconColor.Success, + ChildItems = new List + { + new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + } + }; } } diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor b/blazorbootstrap/Components/Sidebar/Sidebar.razor index 5b53ecbba..51f328a5d 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor @@ -32,7 +32,7 @@
- +
diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index 856e1f128..f3330aa18 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -1,4 +1,6 @@ -namespace BlazorBootstrap; +using Microsoft.AspNetCore.Components.Web.Virtualization; + +namespace BlazorBootstrap; public partial class Sidebar : BlazorBootstrapComponentBase { @@ -10,8 +12,6 @@ public partial class Sidebar : BlazorBootstrapComponentBase private bool isMobile = false; - private IEnumerable? items = null; - private DotNetObjectReference objRef = default!; private bool requestInProgress = false; @@ -35,7 +35,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { var width = await JS.InvokeAsync("window.blazorBootstrap.sidebar.windowSize"); await bsWindowResize(width); - await RefreshDataAsync(firstRender); } await base.OnAfterRenderAsync(firstRender); @@ -59,29 +58,6 @@ public async Task bsWindowResize(int width) isMobile = false; } - /// - /// Refresh the sidebar data. - /// - /// Task - public async Task RefreshDataAsync(bool firstRender = false) - { - if (requestInProgress) - return; - - requestInProgress = true; - - if (DataProvider != null) - { - var request = new SidebarDataProviderRequest(); - var result = await DataProvider.Invoke(request); - items = result != null ? result.Data : new List(); - } - - requestInProgress = false; - - await InvokeAsync(StateHasChanged); - } - /// /// Toggles sidebar. /// @@ -138,9 +114,8 @@ private string GetNavMenuCssClass() /// DataProvider is for items to render. /// The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed. /// - [Parameter] - [EditorRequired] - public SidebarDataProviderDelegate? DataProvider { get; set; } + [Parameter, EditorRequired] + public IEnumerable Items { get; set; } = Enumerable.Empty(); /// /// Gets or sets the IconName. diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor index 11e9bc5e6..bd8ab36c7 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor @@ -2,24 +2,24 @@ @inherits BlazorBootstrapComponentBase
- @if (HasChilds) + @if (Item.ChildItems.Any()) { @if (!CollapseSidebar) { - } else { - + - } - @Text + @Item.Text @if (navitemGroupExpanded) { @@ -36,37 +36,30 @@ } else { - + @if (!CollapseSidebar) { - } else { - + - } - @Text + @Item.Text } - @if (navitemGroupExpanded && HasChilds && ChildItems is not null && ChildItems.Any()) + @if (navitemGroupExpanded && Item.ChildItems.Any()) { - @foreach (var childItem in ChildItems) + @foreach (var childItem in Item.ChildItems) { - + } }
\ No newline at end of file diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index f1b419244..e29a5f41c 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -13,7 +13,7 @@ public partial class SidebarItem : BlazorBootstrapComponentBase protected override void BuildClasses(CssClassBuilder builder) { builder.Append("nav-item"); - builder.Append("nav-item-group", HasChilds); + builder.Append("nav-item-group", Item.ChildItems.Any()); builder.Append("active", navitemGroupExpanded); base.BuildClasses(builder); @@ -21,10 +21,10 @@ protected override void BuildClasses(CssClassBuilder builder) protected override void OnParametersSet() { - if (!HasChilds || ChildItems is null || !ChildItems.Any()) + if (!Item.ChildItems.Any()) return; - foreach (var childItem in ChildItems) + foreach (var childItem in Item.ChildItems) if (ShouldExpand(NavigationManager.Uri, childItem.Href)) { navitemGroupExpanded = true; @@ -93,21 +93,12 @@ private bool ShouldExpand(string currentUriAbsolute, string href) /// protected override bool ShouldAutoGenerateId => true; - [Parameter] public IEnumerable? ChildItems { get; set; } + private string iconColorCssClass => BootstrapClassProvider.IconColor(Item.IconColor); [CascadingParameter] public bool CollapseSidebar { get; set; } + [Parameter, EditorRequired] + public NavItem Item { get; set; } = new(); - [Parameter] public string? CustomIconName { get; set; } - - [Parameter] public bool HasChilds { get; set; } - - [Parameter] public string? Href { get; set; } - - [Parameter] public IconColor IconColor { get; set; } - - private string iconColorCssClass => BootstrapClassProvider.IconColor(IconColor); - - [Parameter] public IconName IconName { get; set; } /// /// Gets or sets a value representing the URL matching behavior. @@ -119,11 +110,9 @@ private bool ShouldExpand(string currentUriAbsolute, string href) [CascadingParameter] public Sidebar Parent { get; set; } = default!; - [Parameter] public Target Target { get; set; } - - private string targetString => Target.ToTargetString(); + private string targetString => Item.Target.ToTargetString(); - [Parameter] public string? Text { get; set; } + #endregion } diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor index 5ffb74af8..5b3664e40 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor @@ -6,16 +6,7 @@ { foreach (var item in NavItems) { - + } } \ No newline at end of file diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs index ca4908e58..600fa42eb 100644 --- a/blazorbootstrap/Models/NavItem.cs +++ b/blazorbootstrap/Models/NavItem.cs @@ -7,7 +7,7 @@ public class NavItem /// /// Gets or sets the collection of child navigation items. /// - internal IEnumerable? ChildItems { get; set; } + public IEnumerable ChildItems { get; set; } = Enumerable.Empty(); /// /// Gets or sets an additional CSS class. @@ -19,10 +19,6 @@ public class NavItem /// public string? CustomIconName { get; set; } - /// - /// Gets or sets a Boolean value indicating whether the navigation item has child items. - /// - internal bool HasChildItems { get; set; } /// /// Gets or sets the HyperText Reference (href). diff --git a/blazorbootstrap/Models/SidebarDataProviderDelegate.cs b/blazorbootstrap/Models/SidebarDataProviderDelegate.cs deleted file mode 100644 index 902a6d93a..000000000 --- a/blazorbootstrap/Models/SidebarDataProviderDelegate.cs +++ /dev/null @@ -1,6 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Data provider (delegate). -/// -public delegate Task SidebarDataProviderDelegate(SidebarDataProviderRequest request); diff --git a/blazorbootstrap/Models/SidebarDataProviderRequest.cs b/blazorbootstrap/Models/SidebarDataProviderRequest.cs deleted file mode 100644 index d26e5cbe7..000000000 --- a/blazorbootstrap/Models/SidebarDataProviderRequest.cs +++ /dev/null @@ -1,38 +0,0 @@ -namespace BlazorBootstrap; - -public class SidebarDataProviderRequest -{ - #region Methods - - public SidebarDataProviderResult ApplyTo(IEnumerable data) - { - if (data is null) - return new SidebarDataProviderResult { Data = Enumerable.Empty() }; - - var result = new List(); - var parentNavItems = data.Where(x => string.IsNullOrWhiteSpace(x.ParentId))?.OrderBy(x => x.Sequence); - - if (parentNavItems is null || !parentNavItems.Any()) - return new SidebarDataProviderResult { Data = Enumerable.Empty() }; - - result.AddRange(parentNavItems); - - foreach (var navItem in parentNavItems) - { - if (string.IsNullOrWhiteSpace(navItem.Id)) - continue; - - var childNavItems = data.Where(x => x.ParentId == navItem.Id)?.OrderBy(x => x.Sequence); - - if (childNavItems is not null && childNavItems.Any()) - { - navItem.HasChildItems = true; - navItem.ChildItems = childNavItems; - } - } - - return new SidebarDataProviderResult { Data = result }; - } - - #endregion -} diff --git a/blazorbootstrap/Models/SidebarDataProviderResult.cs b/blazorbootstrap/Models/SidebarDataProviderResult.cs deleted file mode 100644 index f28eabbda..000000000 --- a/blazorbootstrap/Models/SidebarDataProviderResult.cs +++ /dev/null @@ -1,13 +0,0 @@ -namespace BlazorBootstrap; - -public class SidebarDataProviderResult -{ - #region Properties, Indexers - - /// - /// The provided items by the request. - /// - public IEnumerable? Data { get; init; } - - #endregion -} From c7d2250ee2e8cabfe1efc8230348583679c44036 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:43:42 +0200 Subject: [PATCH 02/11] Remove Id & ParentId --- .../Layout/server/Layout_Server_Demo_01.razor | 6 +- .../Layout_WebAssembly_Demo_01.razor | 6 +- ...Sidebar_Demo_02_Two_level_navigation.razor | 21 ++--- .../Sidebar_Demo_03_Change_Icons_Color.razor | 20 ++--- ...bar_Demo_04_Full_layout_with_sidebar.razor | 20 ++--- ...05_Toggle_Sidebar_to_Show_Icons_Only.razor | 21 ++--- .../Sidebar/Sidebar_Demo_06_Show_Badge.razor | 20 ++--- .../Sidebar_Demo_07_Custom_Brand_Icon.razor | 20 ++--- ...bar_Demo_08_Show_Image_as_Brand_Logo.razor | 22 +++-- .../Sidebar_Demo_09_Customize_Sidebar.razor | 20 ++--- ...10_Apply_Custom_CSS_Class_to_NavItem.razor | 25 ++---- .../Shared/MainLayout.razor.cs | 85 +++++++++---------- blazorbootstrap/Models/NavItem.cs | 10 --- 13 files changed, 122 insertions(+), 174 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor index 17c1e9745..a56e09cd5 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor @@ -27,8 +27,8 @@ private IEnumerable GetNavItems() { - yield return new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All }; - yield return new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; - yield return new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; + yield return new NavItem { Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All }; + yield return new NavItem { Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor index f3f2ed4cf..aba3227c3 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor @@ -26,8 +26,8 @@ private IEnumerable GetNavItems() { - yield return new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All }; - yield return new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; - yield return new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; + yield return new NavItem { Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match = NavLinkMatch.All }; + yield return new NavItem { Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter" }; + yield return new NavItem { Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data" }; } } \ No newline at end of file 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 index 8a9b490e1..f7124a9ea 100644 --- 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 @@ -11,43 +11,40 @@ private IEnumerable GetNavItems() { - yield return new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" }; + yield return new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" }; yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"} + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" } } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" } + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" } } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" } } }; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor index 7b1987e54..cc9a0d792 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor @@ -11,7 +11,6 @@ yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -19,42 +18,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" } + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" } } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor index c0fa794b6..ac88c4338 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor @@ -26,7 +26,6 @@ yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -34,42 +33,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor index 296a02bc6..3f188c686 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -27,7 +27,6 @@ { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -35,42 +34,40 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", + IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor index 00362ec3b..e87b74b28 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor @@ -28,7 +28,6 @@ { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -36,42 +35,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor index eb7e03448..5eb0b053e 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor @@ -27,7 +27,6 @@ { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -35,42 +34,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor index 5be99ea17..0d57cfcba 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor @@ -27,7 +27,6 @@ { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -35,44 +34,43 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; + + } private void ToogleSidebar() => sidebar.ToggleSidebar(); diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor index 20852c7f4..5b8258525 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor @@ -28,7 +28,6 @@ { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -36,42 +35,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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 { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch" }, } }; } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor index 11cb19f8f..b0dc363a5 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor @@ -4,16 +4,12 @@ Items="GetNavItems()" /> @code { - Sidebar sidebar; + Sidebar sidebar = default!; - - - private IEnumerable GetNavItems() { yield return new NavItem { - Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started" @@ -21,42 +17,39 @@ yield return new NavItem { - Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary, ChildItems = new List { - new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId = "2", Class = "px-3" }, + new NavItem { Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", Class = "px-3" }, } }; yield return new NavItem { - Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success, ChildItems = new List { - new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId = "4", Class = "px-3" }, - new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId = "4", Class = "px-3" }, - new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId = "4", Class = "px-3" }, + new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", Class = "px-3" }, + new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", Class = "px-3" }, + new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", Class = "px-3" }, } }; yield return new NavItem { - Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger, ChildItems = new List { - 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" }, + new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", Class = "px-3" }, + new NavItem { Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", Class = "px-3" }, + new NavItem { Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", Class = "px-3" }, + new NavItem { Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", Class = "px-3" }, } }; diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs index b72866d56..9eff3353a 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs @@ -21,117 +21,110 @@ private IEnumerable GetNavItems() yield return new() { - Id = "1", Text = "Getting Started", IconName = IconName.HouseDoorFill, ChildItems = new List { - new (){ Id = "100", Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome, ParentId = "1" }, - new (){ Id = "101", Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server, ParentId = "1" }, - new (){ Id = "102", Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill, ParentId = "1" }, + new (){ Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome }, + new (){ Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server }, + new (){ Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill }, } }; yield return new() { - Id = "2", Text = "Layout", IconName = IconName.LayoutTextWindowReverse, IconColor = IconColor.Success, ChildItems = new List { - new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, - new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, + new (){ Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge }, + new (){ Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server }, } }; yield return new() { - Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary, ChildItems = new List { - new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, + new (){ Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare }, } }; yield return new() { - Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success, ChildItems = new List { - new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, - new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, - new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "404", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "405", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, + new (){ Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText }, + new (){ Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar }, + new (){ Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate }, + new (){ Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor }, + new (){ Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn }, + new (){ Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill }, } }; yield return new() { - Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger, ChildItems = new List { - new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, - new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, - new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, - new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, - new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, - new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, - new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, - new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, - new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, - new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, - new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, - new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, - new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, - new (){ Id = "515", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, - new (){ Id = "516", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, - new (){ Id = "517", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, - new (){ Id = "518", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "519", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "520", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "521", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, + new (){ Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand }, + new (){ Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill }, + new (){ Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator }, + new (){ Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav }, + new (){ Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn }, + new (){ Text = "Callout", Href = "/callout", IconName = IconName.StickyFill }, + new (){ Text = "Card", Href = "/card", IconName = IconName.CardHeading }, + new (){ Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, Match = NavLinkMatch.All }, + new (){ Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse }, + new (){ Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill }, + new (){ Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill }, + new (){ Text = "Grid", Href = "/grid", IconName = IconName.Grid }, + new (){ Text = "Modals", Href = "/modals", IconName = IconName.WindowStack }, + new (){ Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse }, + new (){ Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots }, + new (){ Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap }, + new (){ Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise }, + new (){ Text = "Progress", Href = "/progress", IconName = IconName.UsbC }, + new (){ Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar }, + new (){ Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus }, + new (){ Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill }, + new (){ Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill }, } }; yield return new() { - Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning, ChildItems = new List { - new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, Match = NavLinkMatch.All }, + new (){ Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, Match = NavLinkMatch.All }, + new (){ Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, Match = NavLinkMatch.All }, + new (){ Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, Match = NavLinkMatch.All }, } }; yield return new() { - Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success, ChildItems = new List { - new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + new (){ Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack }, } }; } diff --git a/blazorbootstrap/Models/NavItem.cs b/blazorbootstrap/Models/NavItem.cs index 600fa42eb..63145fcdf 100644 --- a/blazorbootstrap/Models/NavItem.cs +++ b/blazorbootstrap/Models/NavItem.cs @@ -35,21 +35,11 @@ public class NavItem /// public IconName IconName { get; set; } - /// - /// Gets or sets the Id. - /// - public string? Id { get; set; } - /// /// Gets or sets the URL matching behavior. /// public NavLinkMatch Match { get; set; } - /// - /// Gets or sets the parent Id. - /// - public string? ParentId { get; set; } - /// /// Gets or sets the sequence. /// From a2aa2324934422bcd374ecb9b891ac973f458565 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:45:05 +0200 Subject: [PATCH 03/11] Provide class as parameter to get it set by ClassBuilder --- blazorbootstrap/Components/Sidebar/SidebarItem.razor | 9 +++++---- .../Components/Sidebar/SidebarItemGroup.razor | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor index bd8ab36c7..e0449fba1 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor @@ -8,7 +8,7 @@ @if (!CollapseSidebar) { - } else @@ -23,13 +23,13 @@ @if (navitemGroupExpanded) { - + } else { - + } @@ -59,7 +59,8 @@ { @foreach (var childItem in Item.ChildItems) { - + } }
\ No newline at end of file diff --git a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor index 5b3664e40..f3a8449ca 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItemGroup.razor @@ -6,7 +6,8 @@ { foreach (var item in NavItems) { - + } } \ No newline at end of file From 7a7e79337d9bbe1d1141fe1f022e7ca54085b647 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:48:29 +0200 Subject: [PATCH 04/11] Add demo for third level navigation --- .../Pages/Sidebar/SidebarDocumentation.razor | 4 ++ ...debar_Demo_11_Three_level_navigation.razor | 45 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor index e14bb5915..642d97520 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/SidebarDocumentation.razor @@ -49,6 +49,10 @@
Set the Class property of a NavItem to apply a custom CSS class.
+ +
You can nest multiple levels by providing more ChildItems
+ + @code { private string pageUrl = "/sidebar"; private string title = "Blazor Sidebar Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor new file mode 100644 index 000000000..b27bc0557 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor @@ -0,0 +1,45 @@ + + +@code { + Sidebar sidebar = default!; + + private IEnumerable GetNavItems() + { + yield return new NavItem + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; + + + yield return new NavItem + { + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem + { + IconName = IconName.InputCursorText, + Text = "Second level", + ChildItems = new List + { + new NavItem + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Third level item" + } + } + }, + } + }; + + + } +} From ce64736d9e501a58d38c587aebcaacb731eacf98 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:49:20 +0200 Subject: [PATCH 05/11] Fix nullable warning --- blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index e29a5f41c..343dbed6e 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -24,7 +24,7 @@ protected override void OnParametersSet() if (!Item.ChildItems.Any()) return; - foreach (var childItem in Item.ChildItems) + foreach (NavItem childItem in Item.ChildItems) if (ShouldExpand(NavigationManager.Uri, childItem.Href)) { navitemGroupExpanded = true; @@ -75,7 +75,7 @@ private static bool IsStrictlyPrefixWithSeparator(string value, string prefix) ); } - private bool ShouldExpand(string currentUriAbsolute, string href) + private bool ShouldExpand(string currentUriAbsolute, string? href) { var hrefAbsolute = href == null ? null : NavigationManager.ToAbsoluteUri(href).AbsoluteUri; From 4b3d2b848ecca696147944069e64874f02ac6cb0 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 24 Oct 2023 17:51:01 +0200 Subject: [PATCH 06/11] Add documentation --- blazorbootstrap/Components/Sidebar/Sidebar.razor.cs | 3 +-- blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index f3330aa18..d85013c3c 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -111,8 +111,7 @@ private string GetNavMenuCssClass() public string? CustomIconName { get; set; } /// - /// DataProvider is for items to render. - /// The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed. + /// Gets or sets the collection of which should be displayed by the sidebar. /// [Parameter, EditorRequired] public IEnumerable Items { get; set; } = Enumerable.Empty(); diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index 343dbed6e..d1302766b 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -96,6 +96,10 @@ private bool ShouldExpand(string currentUriAbsolute, string? href) private string iconColorCssClass => BootstrapClassProvider.IconColor(Item.IconColor); [CascadingParameter] public bool CollapseSidebar { get; set; } + + /// + /// Gets or sets the which should be displayed. + /// [Parameter, EditorRequired] public NavItem Item { get; set; } = new(); From 2006a07fec3666f9d8ce4fe651c64ee884c25c6d Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Thu, 23 Nov 2023 12:44:38 +0100 Subject: [PATCH 07/11] Update Three level navigation demo --- ...debar_Demo_11_Three_level_navigation.razor | 55 ++++++++++++------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor index b27bc0557..4eefd00a5 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor @@ -1,31 +1,43 @@ - +
+ +
+
+ + About +
+ +
+
Page content goes here
+
+
+
@code { Sidebar sidebar = default!; private IEnumerable GetNavItems() { yield return new NavItem - { - Href = "/getting-started", - IconName = IconName.HouseDoorFill, - Text = "Getting Started" - }; + { + Href = "/getting-started", + IconName = IconName.HouseDoorFill, + Text = "Getting Started" + }; yield return new NavItem - { - IconName = IconName.WindowPlus, - Text = "Forms", - IconColor = IconColor.Danger, - ChildItems = new List { - new NavItem - { - IconName = IconName.InputCursorText, + IconName = IconName.WindowPlus, + Text = "Forms", + IconColor = IconColor.Danger, + ChildItems = new List + { + new NavItem + { + IconName = IconName.InputCursorText, Text = "Second level", ChildItems = new List { @@ -36,10 +48,13 @@ Text = "Third level item" } } - }, + }, } - }; + }; + - } + + private void ToogleSidebar() => sidebar.ToggleSidebar(); + } From 4295f5de1b31ed63b09110fe8275f200abee996a Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Thu, 23 Nov 2023 14:11:25 +0100 Subject: [PATCH 08/11] Add spacing to Sidebar --- blazorbootstrap/Components/Sidebar/SidebarItem.razor | 11 +++++++++++ .../Components/Sidebar/SidebarItem.razor.cs | 9 +++++++++ .../Components/Sidebar/SidebarItem.razor.css | 7 +++---- blazorbootstrap/wwwroot/blazor.bootstrap.css | 1 + 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor index e0449fba1..e2405ff3d 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor @@ -7,6 +7,11 @@ @if (!CollapseSidebar) { + @for (int i = 0; i < SubLevel; i++) + { + + } + @@ -39,6 +44,10 @@ @if (!CollapseSidebar) { + @for (int i = 0; i < SubLevel; i++) + { + + } @@ -60,6 +69,8 @@ @foreach (var childItem in Item.ChildItems) { } } diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index d1302766b..5cbc03273 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -14,6 +14,7 @@ protected override void BuildClasses(CssClassBuilder builder) { builder.Append("nav-item"); builder.Append("nav-item-group", Item.ChildItems.Any()); + builder.Append("nav-sub-item", IsSubItem); builder.Append("active", navitemGroupExpanded); base.BuildClasses(builder); @@ -103,6 +104,14 @@ private bool ShouldExpand(string currentUriAbsolute, string? href) [Parameter, EditorRequired] public NavItem Item { get; set; } = new(); + /// + /// If set to true then this nav item is marked as nav-sub-item + /// + [Parameter] + public bool IsSubItem { get; set; } + + [Parameter] + public int SubLevel { get; set; } /// /// Gets or sets a value representing the URL matching behavior. diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css index a84c36502..f3f65aa3f 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.css @@ -28,7 +28,6 @@ font-weight: 600; } -/* MDN REFERENCE: https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */ -.bb-sidebar nav .nav-item.nav-item-group:has(.nav-link.active) { - background-color: var(--bb-sidebar-nav-item-group-background-color); -} +.bb-sidebar nav .nav-item .indent { + padding-left: var(--bb-sidebar-nav-sub-level-padding-left); +} \ No newline at end of file diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css index ff1e79faf..f1e399dff 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.css +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css @@ -33,6 +33,7 @@ --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); + --bb-sidebar-nav-sub-level-padding-left: 1em; /* custom tooltip */ --bb-tooltip-primary: var(--bs-primary); --bb-tooltip-secondary: var(--bs-secondary); From 6e13f4634cb8f37bfb027caccf21b16c60733e34 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Thu, 23 Nov 2023 14:12:37 +0100 Subject: [PATCH 09/11] Add documentation --- blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index 5cbc03273..609a57204 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -110,6 +110,9 @@ private bool ShouldExpand(string currentUriAbsolute, string? href) [Parameter] public bool IsSubItem { get; set; } + /// + /// Gets or sets the current level of this + /// [Parameter] public int SubLevel { get; set; } From 41d89d7c68036e449b4bede3d08e591deae9f814 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 22 Jan 2024 16:08:53 +0100 Subject: [PATCH 10/11] Revert to SidebarDataProviderDelegate --- .../Layout/server/Layout_Server_Demo_01.razor | 10 +++++- .../Layout_WebAssembly_Demo_01.razor | 11 +++++- .../Sidebar/Sidebar_Demo_01_Basic_Usage.razor | 12 ++++++- ...Sidebar_Demo_02_Two_level_navigation.razor | 10 +++++- .../Sidebar_Demo_03_Change_Icons_Color.razor | 11 +++++- ...bar_Demo_04_Full_layout_with_sidebar.razor | 10 +++++- ...05_Toggle_Sidebar_to_Show_Icons_Only.razor | 10 +++++- .../Sidebar/Sidebar_Demo_06_Show_Badge.razor | 10 +++++- .../Sidebar_Demo_07_Custom_Brand_Icon.razor | 12 +++++-- ...bar_Demo_08_Show_Image_as_Brand_Logo.razor | 12 +++++-- .../Sidebar_Demo_09_Customize_Sidebar.razor | 12 ++++++- ...10_Apply_Custom_CSS_Class_to_NavItem.razor | 13 +++++-- ...debar_Demo_11_Three_level_navigation.razor | 11 +++++- .../Shared/MainLayout.razor | 2 +- .../Shared/MainLayout.razor.cs | 8 ++++- blazorbootstrap.sln | 1 - .../Components/Sidebar/Sidebar.razor | 2 +- .../Components/Sidebar/Sidebar.razor.cs | 34 +++++++++++++++++-- .../Models/SidebarDataProviderDelegate.cs | 6 ++++ .../Models/SidebarDataProviderRequest.cs | 17 ++++++++++ .../Models/SidebarDataProviderResult.cs | 13 +++++++ 21 files changed, 204 insertions(+), 23 deletions(-) create mode 100644 blazorbootstrap/Models/SidebarDataProviderDelegate.cs create mode 100644 blazorbootstrap/Models/SidebarDataProviderRequest.cs create mode 100644 blazorbootstrap/Models/SidebarDataProviderResult.cs diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor index a56e09cd5..dfc5f6349 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/server/Layout_Server_Demo_01.razor @@ -5,7 +5,7 @@ + DataProvider="SidebarDataProvider" />
@@ -23,7 +23,15 @@ @code { private Sidebar sidebar = default!; + private IEnumerable navItems = default!; + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor index aba3227c3..3b8f75a2e 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor @@ -5,7 +5,7 @@ + DataProvider="SidebarDataProvider" />
@@ -23,6 +23,15 @@ @code { private Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor index d27f0ebbc..0ee8863c1 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor @@ -1,11 +1,21 @@  + DataProvider="SidebarDataProvider" /> @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + private IEnumerable GetNavItems() { 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 index f7124a9ea..5f5956514 100644 --- 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 @@ -1,11 +1,19 @@  + DataProvider="SidebarDataProvider" /> @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor index cc9a0d792..ba8976e01 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor @@ -1,10 +1,19 @@  + DataProvider="SidebarDataProvider" /> @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor index ac88c4338..8e92dc7c0 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor @@ -3,7 +3,7 @@ + DataProvider="SidebarDataProvider" />
@@ -19,7 +19,15 @@ @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor index 3f188c686..e3c489ee2 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor @@ -3,7 +3,7 @@ + DataProvider="SidebarDataProvider" />
@@ -20,7 +20,15 @@ @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor index e87b74b28..84cbc10d6 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor @@ -4,7 +4,7 @@ IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v1.3.1" - Items="GetNavItems()" /> + DataProvider="SidebarDataProvider" />
@@ -21,7 +21,15 @@ @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor index 5eb0b053e..9f116479f 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor @@ -4,7 +4,7 @@ CustomIconName="bi bi-apple" Title="Blazor Bootstrap" BadgeText="v1.3.1" - Items="GetNavItems()" /> + DataProvider="SidebarDataProvider" />
@@ -21,7 +21,15 @@ @code { Sidebar sidebar = default!; - + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor index 0d57cfcba..19a6d7678 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor @@ -4,7 +4,7 @@ ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg" Title="Blazor Bootstrap" BadgeText="v1.3.1" - Items="GetNavItems()" /> + DataProvider="SidebarDataProvider" />
@@ -21,7 +21,15 @@ @code { Sidebar sidebar = default!; - + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor index 5b8258525..d6b5a9c64 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor @@ -4,7 +4,7 @@ IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v1.3.1" - Items="GetNavItems()" /> + DataProvider="SidebarDataProvider" />
@@ -22,6 +22,16 @@ @code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + bool applyPurpleStyle = false; private IEnumerable GetNavItems() diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor index b0dc363a5..78ccf29e7 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_10_Apply_Custom_CSS_Class_to_NavItem.razor @@ -1,11 +1,20 @@  + DataProvider="SidebarDataProvider" /> @code { Sidebar sidebar = default!; - + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } + private IEnumerable GetNavItems() { yield return new NavItem diff --git a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor index 4eefd00a5..8243c9928 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Sidebar/Sidebar_Demo_11_Three_level_navigation.razor @@ -2,7 +2,7 @@ + DataProvider="SidebarDataProvider" />
@@ -17,6 +17,15 @@
@code { Sidebar sidebar = default!; + private IEnumerable navItems = default!; + + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor index 92965574c..57786fc78 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor @@ -8,7 +8,7 @@ ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg" Title="Blazor Bootstrap" BadgeText="@version" - Items="GetNavItems()" /> + DataProvider="SidebarDataProvider" />
diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs index 9eff3353a..70dfddcbb 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs @@ -4,7 +4,7 @@ public partial class MainLayout : LayoutComponentBase { private string version = default!; private Sidebar sidebar = default!; - + private IEnumerable navItems = default!; [Inject] public IConfiguration Configuration { get; set; } = default!; @@ -15,7 +15,13 @@ protected override void OnInitialized() } + private async Task SidebarDataProvider(SidebarDataProviderRequest request) + { + if (navItems is null) + navItems = GetNavItems(); + return await Task.FromResult(request.ApplyTo(navItems)); + } private IEnumerable GetNavItems() { diff --git a/blazorbootstrap.sln b/blazorbootstrap.sln index 9daa09e4f..bcc900136 100644 --- a/blazorbootstrap.sln +++ b/blazorbootstrap.sln @@ -59,7 +59,6 @@ Global {CA121C94-88EC-4902-9FCD-8394BDEB0355} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} {7103F2DB-2A6E-4164-B531-34D6CCC72458} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} {190E07ED-8888-4F3B-8484-46BF6FC4C982} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} - {710E0A10-0567-495D-AA48-A99293D2EA62} = {7DABA756-9F2F-48A6-B8D3-B104262D11B1} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {810B19D0-6AB6-4959-A8D7-340A2F72DF6F} diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor b/blazorbootstrap/Components/Sidebar/Sidebar.razor index 51f328a5d..5b53ecbba 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor @@ -32,7 +32,7 @@
- +
diff --git a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs index d85013c3c..f8deb043f 100644 --- a/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs +++ b/blazorbootstrap/Components/Sidebar/Sidebar.razor.cs @@ -12,6 +12,8 @@ public partial class Sidebar : BlazorBootstrapComponentBase private bool isMobile = false; + private IEnumerable? items = null; + private DotNetObjectReference objRef = default!; private bool requestInProgress = false; @@ -35,6 +37,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { var width = await JS.InvokeAsync("window.blazorBootstrap.sidebar.windowSize"); await bsWindowResize(width); + await RefreshDataAsync(firstRender); } await base.OnAfterRenderAsync(firstRender); @@ -58,6 +61,29 @@ public async Task bsWindowResize(int width) isMobile = false; } + /// + /// Refresh the sidebar data. + /// + /// Task + public async Task RefreshDataAsync(bool firstRender = false) + { + if (requestInProgress) + return; + + requestInProgress = true; + + if (DataProvider != null) + { + var request = new SidebarDataProviderRequest(); + var result = await DataProvider.Invoke(request); + items = result != null ? result.Data : new List(); + } + + requestInProgress = false; + + await InvokeAsync(StateHasChanged); + } + /// /// Toggles sidebar. /// @@ -111,10 +137,12 @@ private string GetNavMenuCssClass() public string? CustomIconName { get; set; } /// - /// Gets or sets the collection of which should be displayed by the sidebar. + /// DataProvider is for items to render. + /// The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed. /// - [Parameter, EditorRequired] - public IEnumerable Items { get; set; } = Enumerable.Empty(); + [Parameter] + [EditorRequired] + public SidebarDataProviderDelegate? DataProvider { get; set; } /// /// Gets or sets the IconName. diff --git a/blazorbootstrap/Models/SidebarDataProviderDelegate.cs b/blazorbootstrap/Models/SidebarDataProviderDelegate.cs new file mode 100644 index 000000000..902a6d93a --- /dev/null +++ b/blazorbootstrap/Models/SidebarDataProviderDelegate.cs @@ -0,0 +1,6 @@ +namespace BlazorBootstrap; + +/// +/// Data provider (delegate). +/// +public delegate Task SidebarDataProviderDelegate(SidebarDataProviderRequest request); diff --git a/blazorbootstrap/Models/SidebarDataProviderRequest.cs b/blazorbootstrap/Models/SidebarDataProviderRequest.cs new file mode 100644 index 000000000..4e6f6e9c8 --- /dev/null +++ b/blazorbootstrap/Models/SidebarDataProviderRequest.cs @@ -0,0 +1,17 @@ +namespace BlazorBootstrap; + +public class SidebarDataProviderRequest +{ + #region Methods + + public SidebarDataProviderResult ApplyTo(IEnumerable data) + { + if (data is null) + return new SidebarDataProviderResult { Data = Enumerable.Empty() }; + + return new SidebarDataProviderResult { Data = data }; + } + + #endregion +} + diff --git a/blazorbootstrap/Models/SidebarDataProviderResult.cs b/blazorbootstrap/Models/SidebarDataProviderResult.cs new file mode 100644 index 000000000..f5ba99737 --- /dev/null +++ b/blazorbootstrap/Models/SidebarDataProviderResult.cs @@ -0,0 +1,13 @@ +namespace BlazorBootstrap; + +public class SidebarDataProviderResult +{ + #region Properties, Indexers + + /// + /// The provided items by the request. + /// + public IEnumerable? Data { get; init; } + + #endregion +} \ No newline at end of file From bfa5fb0a12cc4177167fcbf4e5e59cf8b0d0c900 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 22 Jan 2024 16:46:25 +0100 Subject: [PATCH 11/11] Fix Match --- blazorbootstrap/Components/Sidebar/SidebarItem.razor | 2 +- blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor b/blazorbootstrap/Components/Sidebar/SidebarItem.razor index e2405ff3d..fc47e5c3a 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor @@ -41,7 +41,7 @@ } else { - + @if (!CollapseSidebar) { @for (int i = 0; i < SubLevel; i++) diff --git a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs index 609a57204..91dc39c3b 100644 --- a/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs +++ b/blazorbootstrap/Components/Sidebar/SidebarItem.razor.cs @@ -82,7 +82,7 @@ private bool ShouldExpand(string currentUriAbsolute, string? href) return hrefAbsolute != null && (EqualsHrefExactlyOrIfTrailingSlashAdded(currentUriAbsolute, hrefAbsolute) - || (Match == NavLinkMatch.Prefix && IsStrictlyPrefixWithSeparator(currentUriAbsolute, hrefAbsolute))); + || (Item.Match == NavLinkMatch.Prefix && IsStrictlyPrefixWithSeparator(currentUriAbsolute, hrefAbsolute))); } private void ToggleNavItemGroup() => navitemGroupExpanded = !navitemGroupExpanded; @@ -116,12 +116,6 @@ private bool ShouldExpand(string currentUriAbsolute, string? href) [Parameter] public int SubLevel { get; set; } - /// - /// Gets or sets a value representing the URL matching behavior. - /// - [Parameter] - public NavLinkMatch Match { get; set; } - [Inject] private NavigationManager NavigationManager { get; set; } = default!; [CascadingParameter] public Sidebar Parent { get; set; } = default!;