feat(BreadcrumbItem): add CssClass property (#6673)

* refactor: 增加 IsFixed 关键字

* doc: 更新注释

* refactor: 精简代码

* test: 更新单元测试

* refactor: 精简代码

* refactor: 调整级联参数位置

* feat: 增加 CssClass 参数

支持自定义样式

* test: 更新单元测试

* doc: 更新注释

Author: ArgoZhang

src/BootstrapBlazor/Components/Breadcrumb/Breadcrumb.razor

@@ -1,20 +1,20 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<CascadingValue Value=this>
-    <nav @attributes="@AdditionalAttributes" aria-label="breadcrumb">
-        <ol class="breadcrumb">
+<nav @attributes="@AdditionalAttributes" aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        <CascadingValue Value="this" IsFixed="true">
             @foreach (var item in Value)
             {
                 @RenderItem(item)
             }
-        </ol>
-    </nav>
-</CascadingValue>
+        </CascadingValue>
+    </ol>
+</nav>
 
 @code {
     RenderFragment<BreadcrumbItem> RenderItem => item =>
-    @<li class="@GetItemClassName(item)" aria-current="@CurrentPage(item)">
+    @<li class="@GetItemClassString(item)">
         @if (!string.IsNullOrEmpty(item.Url))
         {
             <a href="@item.Url">@item.Text</a>
@@ -24,4 +24,4 @@
             @item.Text
         }
     </li>;
-}
+}

src/BootstrapBlazor/Components/Breadcrumb/Breadcrumb.razor.cs

@@ -14,11 +14,20 @@ public sealed partial class Breadcrumb
     /// 获得/设置 数据集
     /// </summary>
     [Parameter]
-    public IEnumerable<BreadcrumbItem> Value { get; set; } = Enumerable.Empty<BreadcrumbItem>();
+    [NotNull]
+    public IEnumerable<BreadcrumbItem>? Value { get; set; }
 
-    private string? GetItemClassName(BreadcrumbItem item) => CssBuilder.Default("breadcrumb-item")
+    private static string? GetItemClassString(BreadcrumbItem item) => CssBuilder.Default("breadcrumb-item")
+        .AddClass(item.CssClass)
         .Build();
 
-    private string? CurrentPage(BreadcrumbItem item) => CssBuilder.Default()
-        .Build();
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Value ??= [];
+    }
 }

src/BootstrapBlazor/Components/Breadcrumb/BreadcrumbItem.cs

@@ -6,28 +6,25 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// BreadcrumbItem 实体类
+/// BreadcrumbItem Class
 /// </summary>
-public class BreadcrumbItem
+/// <param name="text"></param>
+/// <param name="url"></param>
+/// <param name="cssClass"></param>
+public class BreadcrumbItem(string text, string? url = null, string? cssClass = null)
 {
     /// <summary>
-    /// 获得/设置 导航地址
+    /// 获得/设置 显示文字
     /// </summary>
-    public string? Url { get; }
+    public string Text { get; } = text;
 
     /// <summary>
-    /// 获得/设置 显示文字
+    /// 获得/设置 导航地址
     /// </summary>
-    public string Text { get; }
+    public string? Url { get; } = url;
 
     /// <summary>
-    /// 构造函数
+    /// 获得/设置 样式名称
     /// </summary>
-    /// <param name="text"></param>
-    /// <param name="url"></param>
-    public BreadcrumbItem(string text, string? url = null)
-    {
-        Text = text;
-        Url = url;
-    }
+    public string? CssClass { get; } = cssClass;
 }

src/BootstrapBlazor/Components/Button/Button.razor.cs

@@ -22,10 +22,8 @@ public partial class Button : ButtonBase
     protected ElementReference ButtonElement { get; set; }
 
     /// <summary>
-    /// OnAfterRenderAsync 方法
+    /// <inheritdoc/>
     /// </summary>
-    /// <param name="firstRender"></param>
-    /// <returns></returns>
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);

test/UnitTest/Components/BreadcrumbsTest.cs

@@ -13,14 +13,15 @@ public void ButtonStyle_Ok()
         var DataSource = new List<BreadcrumbItem>
         {
             new("Library"),
-            new("Data")
+            new("Data", "", "cssClass")
         };
 
         var cut = Context.RenderComponent<Breadcrumb>(pb =>
         {
             pb.Add(b => b.Value, DataSource);
         });
         Assert.Contains("Library", cut.Markup);
+        Assert.Contains("class=\"breadcrumb-item cssClass\"", cut.Markup);
         Assert.DoesNotContain("href", cut.Markup);
 
         DataSource.Add(new BreadcrumbItem("Home", "https://www.blazor.zone/"));
@@ -35,5 +36,12 @@ public void ButtonStyle_Ok()
         {
             pb.Add(b => b.AdditionalAttributes, new Dictionary<string, object>() { ["tag"] = "tagok" });
         });
+        cut.Contains("tag=\"tagok\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(b => b.Value, null);
+        });
+        Assert.DoesNotContain("li", cut.Markup);
     }
 }