feat(DynamicElement): support html attribute

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

@@ -3,12 +3,16 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Web;
+using System;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
 /// LinkButton 组件
 /// </summary>
-public partial class LinkButton
+public sealed class LinkButton : ButtonBase
 {
     /// <summary>
     /// 获得/设置 Url 默认为 #
@@ -59,12 +63,68 @@ public partial class LinkButton
 
     private bool TriggerClick => !IsDisabled || (string.IsNullOrEmpty(Url));
 
+    /// <summary>
+    /// <inheritdoc />
+    /// </summary>
+    /// <param name="builder"></param>
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(0, TagName);
+        builder.AddAttribute(10, "class", ClassString);
+        builder.AddAttribute(20, "href", UrlString);
+        builder.AddAttribute(30, "target", Target);
+        builder.AddAttribute(40, "disabled", Disabled);
+        builder.AddAttribute(50, "aria-disabled", DisabledString);
+        builder.AddAttribute(60, "tabindex", Tab);
+        builder.AddAttribute(70, "id", Id);
+        builder.AddAttribute(80, "role", "button");
+        builder.AddMultipleAttributes(90, AdditionalAttributes);
+
+        if (TriggerClick)
+        {
+            builder.AddAttribute(100, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClickButton));
+            builder.AddEventPreventDefaultAttribute(10, "onclick", Prevent);
+            builder.AddEventStopPropagationAttribute(11, "onclick", StopPropagation);
+        }
+
+        if (!string.IsNullOrEmpty(Icon))
+        {
+            builder.AddContent(110, new MarkupString($"<i class=\"{Icon}\"></i>"));
+        }
+
+        if (!string.IsNullOrEmpty(ImageUrl))
+        {
+            builder.AddContent(120, AddImage());
+        }
+
+        if (!string.IsNullOrEmpty(Text))
+        {
+            builder.AddContent(130, new MarkupString($"<span>{Text}</span>"));
+        }
+
+        builder.AddContent(140, ChildContent);
+        builder.CloseElement();
+    }
+
+    private RenderFragment AddImage() => builder =>
+    {
+        builder.OpenElement(0, "img");
+        builder.AddAttribute(10, "alt", "img");
+        if (!string.IsNullOrEmpty(ImageCss))
+        {
+            builder.AddAttribute(20, "class", ImageCss);
+        }
+        builder.AddAttribute(30, "src", ImageUrl);
+        builder.CloseElement();
+    };
+
     private async Task OnClickButton()
     {
         if (OnClickWithoutRender != null)
         {
             await OnClickWithoutRender();
         }
+
         if (OnClick.HasDelegate)
         {
             await OnClick.InvokeAsync();

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor

@@ -16,7 +16,7 @@
             else if (context is ContextMenuItem item)
             {
                 var disabled = GetItemTriggerClick(item);
-                <DynamicElement @key="item" TagName="div" class="@GetItemClassString(disabled)"
+                <DynamicElement @key="item" class="@GetItemClassString(disabled)"
                                 TriggerClick="!disabled" OnClick="() => OnClickItem(item)">
                     <i class="@GetItemIconString(item)"></i>
                     <span>@item.Text</span>

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor

@@ -38,8 +38,8 @@
                             </button>
                         }
                         <div class="d-flex align-items-center justify-content-center flex-fill">
-                            <DynamicElement TagName="span" role="button" class="picker-panel-header-label" OnClick="() => SwitchView(DatePickerViewMode.Year)">@YearString</DynamicElement>
-                            <DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" OnClick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</DynamicElement>
+                            <span role="button" class="picker-panel-header-label" @onclick="() => SwitchView(DatePickerViewMode.Year)">@YearString</span>
+                            <span role="button" class="@CurrentMonthViewClassName" @onclick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</span>
                             @if (IsDateTimeMode)
                             {
                                 <span role="button" class="picker-panel-header-label" @onclick="SwitchTimeView">@CurrentTime.ToString(TimeFormat)</span>

src/BootstrapBlazor/Components/Input/BootstrapInputGroupLabel.razor.cs → src/BootstrapBlazor/Components/Input/BootstrapInputGroupLabel.cs

@@ -3,12 +3,14 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Rendering;
+
 namespace BootstrapBlazor.Components;
 
 /// <summary>
 /// BootstrapInputGroupLabel 组件
 /// </summary>
-public partial class BootstrapInputGroupLabel
+public sealed class BootstrapInputGroupLabel : DisplayBase<string>
 {
     private string? ClassString => CssBuilder.Default()
         .AddClass("input-group-text", IsInputGroupLabel)
@@ -54,7 +56,7 @@ public partial class BootstrapInputGroupLabel
     private bool IsInputGroupLabel => InputGroup != null;
 
     /// <summary>
-    /// OnParametersSet 方法
+    /// <inheritdoc/>
     /// </summary>
     protected override void OnParametersSet()
     {
@@ -65,4 +67,26 @@ protected override void OnParametersSet()
             DisplayText ??= FieldIdentifier?.GetDisplayName();
         }
     }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="builder"></param>
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(0, TagName);
+        builder.AddMultipleAttributes(10, AdditionalAttributes);
+        builder.AddAttribute(20, "class", ClassString);
+        builder.AddAttribute(30, "style", StyleString);
+        builder.AddAttribute(40, "required", Required);
+        if (ChildContent != null)
+        {
+            builder.AddContent(50, ChildContent);
+        }
+        else
+        {
+            builder.AddContent(60, DisplayText);
+        }
+        builder.CloseElement();
+    }
 }

src/BootstrapBlazor/Components/Select/MultiSelect.razor

@@ -67,9 +67,9 @@
             <div class="toolbar">
                 @if (ShowDefaultButtons)
                 {
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
+                    <button type="button" class="btn" @onclick="SelectAll">@SelectAllText</button>
+                    <button type="button" class="btn" @onclick="InvertSelect">@ReverseSelectText</button>
+                    <button type="button" class="btn" @onclick="Clear">@ClearText</button>
                 }
                 @ButtonTemplate
             </div>

src/BootstrapBlazor/Components/SelectGeneric/MultiSelectGeneric.razor

@@ -60,9 +60,9 @@
             <div class="toolbar">
                 @if (ShowDefaultButtons)
                 {
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
-                    <DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
+                    <button type="button" class="btn" @onclick="SelectAll">@SelectAllText</button>
+                    <button type="button" class="btn" @onclick="InvertSelect">@ReverseSelectText</button>
+                    <button type="button" class="btn" @onclick="Clear">@ClearText</button>
                 }
                 @ButtonTemplate
             </div>

src/BootstrapBlazor/Components/Upload/CardUpload.razor

@@ -53,11 +53,11 @@
                     </div>
                     @if (ShowDeleteButton)
                     {
-                        <DynamicElement TagName="button" type="button" class="btn btn-sm btn-outline-danger"
-                                        disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
-                                        TriggerClick="@(!IsDisabled)" OnClick="@(() => OnCardFileDelete(item))">
+                        <button type="button" class="btn btn-sm btn-outline-danger"
+                                disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
+                                @onclick="() => OnCardFileDelete(item)">
                             <i class="@RemoveIcon"></i>
-                        </DynamicElement>
+                        </button>
                     }
                 </div>
                 @if (GetShowProgress(item))