Adds MaxItems to Breadcrumbs

chanan · Dec 18, 2024 · 065f81d · 065f81d
1 parent ab9b1b6
commit 065f81d
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 21 deletions.
diff --git a/src/BlazorStrap.Docs/wwwroot/Static/V4/Components/Breadcrumb.md b/src/BlazorStrap.Docs/wwwroot/Static/V4/Components/Breadcrumb.md
@@ -3,11 +3,12 @@
 See [shared](layout/shared) for additional parameters    
 :::
 
-| Parameter | Type                       | Valid                      | Remarks/Output                                  | 
-|-----------|----------------------------|----------------------------|-------------------------------------------------|
-| Divider   | string                     | string                     |                                                 | {.table-striped}  
-| BasePath  | string                     | string                     | Turns on auto generate using supplied base path |
-| Labels    | Dictionary<string, string> | Dictionary<string, string> | Custom Labels for your paths see example        |
+| Parameter | Type                       | Valid                      | Remarks/Output                                     | 
+|-----------|----------------------------|----------------------------|----------------------------------------------------|
+| Divider   | string                     | string                     |                                                    | {.table-striped}  
+| BasePath  | string                     | string                     | Turns on auto generate using supplied base path    |
+| Labels    | Dictionary<string, string> | Dictionary<string, string> | Custom Labels for your paths see example           |
+| MaxItems  | int                        | int                        | Maximum number of items to show in the breadcrumb. |
 
 :::
 

diff --git a/src/BlazorStrap.Docs/wwwroot/Static/V5/Components/Breadcrumb.md b/src/BlazorStrap.Docs/wwwroot/Static/V5/Components/Breadcrumb.md
@@ -3,11 +3,12 @@
 See [shared](layout/shared) for additional parameters    
 :::
 
-| Parameter | Type                       | Valid                      | Remarks/Output                                  | 
-|-----------|----------------------------|----------------------------|-------------------------------------------------|
-| Divider   | string                     | string                     |                                                 | {.table-striped}  
-| BasePath  | string                     | string                     | Turns on auto generate using supplied base path |
-| Labels    | Dictionary<string, string> | Dictionary<string, string> | Custom Labels for your paths see example        |
+| Parameter | Type                       | Valid                      | Remarks/Output                                     | 
+|-----------|----------------------------|----------------------------|----------------------------------------------------|
+| Divider   | string                     | string                     |                                                    | {.table-striped}  
+| BasePath  | string                     | string                     | Turns on auto generate using supplied base path    |
+| Labels    | Dictionary<string, string> | Dictionary<string, string> | Custom Labels for your paths see example           |
+| MaxItems  | int                        | int                        | Maximum number of items to show in the breadcrumb. |
 
 :::
 

diff --git a/src/BlazorStrap.V4/BlazorStrap.V4.csproj b/src/BlazorStrap.V4/BlazorStrap.V4.csproj
@@ -14,7 +14,7 @@
 		<PackageProjectUrl>https://blazorstrap.io/</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/chanan/BlazorStrap</RepositoryUrl>
 		<RootNamespace>BlazorStrap.V4</RootNamespace>
-		<PackageVersion>5.2.103</PackageVersion>
+		<PackageVersion>5.2.103.121824</PackageVersion>
 	</PropertyGroup>
 
 	<ItemGroup Condition="  '$(TargetFramework)' == 'net7.0'  ">

diff --git a/src/BlazorStrap.V4/Components/Common/BSBreadcrumb.razor b/src/BlazorStrap.V4/Components/Common/BSBreadcrumb.razor
@@ -13,12 +13,27 @@ else
 {
     <nav style="--bs-breadcrumb-divider: @Divider;" aria-label="breadcrumb">
         <ol class="@ClassBuilder" @attributes="Attributes">
-            @foreach(var item in Tree)
+            @if (Tree.Count > MaxItems)
             {
-                if (NavigationManager?.Uri == item.Key )
+                if (NavigationManager?.Uri == Tree.First().Key)
                 {
-                    <li class="breadcrumb-item active" >
-                    @item.Value
+                    <li class="breadcrumb-item active">
+                        @Tree.First().Value
+                    </li>
+                }
+                else
+                {
+                    <li class="breadcrumb-item">
+                        <a href="Tree.First().Key">...</a>
+                    </li>
+                }
+            }
+            @foreach (var item in Tree.Skip(_skip))
+            {
+                if (NavigationManager?.Uri == item.Key)
+                {
+                    <li class="breadcrumb-item active">
+                        @item.Value
                     </li>
                 }
                 else

diff --git a/src/BlazorStrap.V4/Components/Common/BSBreadcrumb.razor.cs b/src/BlazorStrap.V4/Components/Common/BSBreadcrumb.razor.cs
@@ -6,11 +6,21 @@ namespace BlazorStrap.V4
 {
     public partial class BSBreadcrumb : BSBreadcrumbBase
     {
+        private int _skip = 0;
         protected override string? LayoutClass => LayoutClassBuilder.Build(this);
 
         protected override string? ClassBuilder => new CssBuilder("breadcrumb")
                 .AddClass(LayoutClass, !string.IsNullOrEmpty(LayoutClass))
                 .AddClass(Class, !string.IsNullOrEmpty(Class))
                 .Build().ToNullString();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            if (Tree.Count > MaxItems)
+            {
+                _skip = Tree.Count - MaxItems;
+            }
+        }
     }
 }
diff --git a/src/BlazorStrap.V5/BlazorStrap.V5.csproj b/src/BlazorStrap.V5/BlazorStrap.V5.csproj
@@ -13,7 +13,7 @@
 		<PackageProjectUrl>https://blazorstrap.io/</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/chanan/BlazorStrap</RepositoryUrl>
 		<RootNamespace>BlazorStrap.V5</RootNamespace>
-		<PackageVersion>5.2.103</PackageVersion>
+		<PackageVersion>5.2.103.121824</PackageVersion>
 	</PropertyGroup>
 
 	<ItemGroup>

diff --git a/src/BlazorStrap.V5/Components/Common/BSBreadcrumb.razor b/src/BlazorStrap.V5/Components/Common/BSBreadcrumb.razor
@@ -13,12 +13,27 @@ else
 {
     <nav style="--bs-breadcrumb-divider: @Divider;" aria-label="breadcrumb">
         <ol class="@ClassBuilder" @attributes="Attributes">
-            @foreach(var item in Tree)
+            @if (Tree.Count > MaxItems)
             {
-                if (NavigationManager?.Uri == item.Key )
+                if (NavigationManager?.Uri == Tree.First().Key)
                 {
-                    <li class="breadcrumb-item active" >
-                    @item.Value
+                    <li class="breadcrumb-item active">
+                        @Tree.First().Value
+                    </li>
+                }
+                else
+                {
+                    <li class="breadcrumb-item">
+                        <a href="Tree.First().Key">...</a>
+                    </li>
+                }
+            }
+            @foreach (var item in Tree.Skip(_skip))
+            {
+                if (NavigationManager?.Uri == item.Key)
+                {
+                    <li class="breadcrumb-item active">
+                        @item.Value
                     </li>
                 }
                 else
@@ -28,6 +43,7 @@ else
                     </li>
                 }
             }
+
         </ol>
     </nav>
 }
diff --git a/src/BlazorStrap.V5/Components/Common/BSBreadcrumb.razor.cs b/src/BlazorStrap.V5/Components/Common/BSBreadcrumb.razor.cs
@@ -6,11 +6,21 @@ namespace BlazorStrap.V5
 {
     public partial class BSBreadcrumb : BSBreadcrumbBase
     {
+        private int _skip = 0;
         protected override string? LayoutClass => LayoutClassBuilder.Build(this);
 
         protected override string? ClassBuilder => new CssBuilder("breadcrumb")
                 .AddClass(LayoutClass, !string.IsNullOrEmpty(LayoutClass))
                 .AddClass(Class, !string.IsNullOrEmpty(Class))
                 .Build().ToNullString();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            if (Tree.Count > MaxItems)
+            {
+                _skip = Tree.Count - MaxItems;
+            }
+        }
     }
 }
diff --git a/src/BlazorStrap/BlazorStrap.csproj b/src/BlazorStrap/BlazorStrap.csproj
@@ -13,7 +13,7 @@
 		<PackageProjectUrl>https://blazorstrap.io/</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/chanan/BlazorStrap</RepositoryUrl>
 		<RootNamespace>BlazorStrap</RootNamespace>
-		<PackageVersion>5.2.103.121624</PackageVersion>
+		<PackageVersion>5.2.103.121824</PackageVersion>
 		<AnalysisLevel>6.0</AnalysisLevel><!--Next Use 5.2.104-Preview1-->
 	</PropertyGroup>
 

diff --git a/src/BlazorStrap/Shared/Components/Common/BSBreadcrumbBase.cs b/src/BlazorStrap/Shared/Components/Common/BSBreadcrumbBase.cs
@@ -22,6 +22,11 @@ public abstract class BSBreadcrumbBase : BlazorStrapBase
         /// Custom labels for paths. The key is the path and the value is the custom label.
         /// </summary>
         [Parameter] public Dictionary<string, string> Labels { get; set; } = new();
+
+        /// <summary>
+        /// Will only show the last x items in the breadcrumb tree. Starts from the end of the tree. Home will shown as ... if there are more items than MaxItems.
+        /// </summary>
+        [Parameter] public int MaxItems { get; set; } = 0;
         protected abstract string? LayoutClass { get; }
         protected abstract string? ClassBuilder { get; }