Skip to content

Commit 22e67cf

Browse files
ArgoZhangArgoZhang
authored
feat(DynamicElement): support html attribute (#6561)
* refactor: 使用代码生成组件支持 @OnClick 写法 * refactor: 更新 LinkButton 移除 Razor 文件 * refactor: 精简代码 * refactor: 使用原生元素 * Revert "refactor: 使用代码生成组件支持 @OnClick 写法" This reverts commit c81d0a9. * Reapply "refactor: 使用代码生成组件支持 @OnClick 写法" This reverts commit bea469b. * feat: 增加 AdditionalAttributes 支持 * refactor: 调整序列 * refactor: 增加 AddImage 方法 * refactor: 调整顺序
1 parent 278b990 commit 22e67cf

File tree

9 files changed

+100
-47
lines changed

9 files changed

+100
-47
lines changed

‎src/BootstrapBlazor/Components/Button/LinkButton.razor.cs‎ renamed to ‎src/BootstrapBlazor/Components/Button/LinkButton.cs‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
55

6+
using Microsoft.AspNetCore.Components.Rendering;
7+
using Microsoft.AspNetCore.Components.Web;
8+
using System;
9+
610
namespace BootstrapBlazor.Components;
711

812
/// <summary>
913
/// LinkButton 组件
1014
/// </summary>
11-
public partial class LinkButton
15+
public sealed class LinkButton : ButtonBase
1216
{
1317
/// <summary>
1418
/// 获得/设置 Url 默认为 #
@@ -59,12 +63,68 @@ public partial class LinkButton
5963

6064
private bool TriggerClick => !IsDisabled || (string.IsNullOrEmpty(Url));
6165

66+
/// <summary>
67+
/// <inheritdoc />
68+
/// </summary>
69+
/// <param name="builder"></param>
70+
protected override void BuildRenderTree(RenderTreeBuilder builder)
71+
{
72+
builder.OpenElement(0, TagName);
73+
builder.AddAttribute(10, "class", ClassString);
74+
builder.AddAttribute(20, "href", UrlString);
75+
builder.AddAttribute(30, "target", Target);
76+
builder.AddAttribute(40, "disabled", Disabled);
77+
builder.AddAttribute(50, "aria-disabled", DisabledString);
78+
builder.AddAttribute(60, "tabindex", Tab);
79+
builder.AddAttribute(70, "id", Id);
80+
builder.AddAttribute(80, "role", "button");
81+
builder.AddMultipleAttributes(90, AdditionalAttributes);
82+
83+
if (TriggerClick)
84+
{
85+
builder.AddAttribute(100, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClickButton));
86+
builder.AddEventPreventDefaultAttribute(10, "onclick", Prevent);
87+
builder.AddEventStopPropagationAttribute(11, "onclick", StopPropagation);
88+
}
89+
90+
if (!string.IsNullOrEmpty(Icon))
91+
{
92+
builder.AddContent(110, new MarkupString($"<i class=\"{Icon}\"></i>"));
93+
}
94+
95+
if (!string.IsNullOrEmpty(ImageUrl))
96+
{
97+
builder.AddContent(120, AddImage());
98+
}
99+
100+
if (!string.IsNullOrEmpty(Text))
101+
{
102+
builder.AddContent(130, new MarkupString($"<span>{Text}</span>"));
103+
}
104+
105+
builder.AddContent(140, ChildContent);
106+
builder.CloseElement();
107+
}
108+
109+
private RenderFragment AddImage() => builder =>
110+
{
111+
builder.OpenElement(0, "img");
112+
builder.AddAttribute(10, "alt", "img");
113+
if (!string.IsNullOrEmpty(ImageCss))
114+
{
115+
builder.AddAttribute(20, "class", ImageCss);
116+
}
117+
builder.AddAttribute(30, "src", ImageUrl);
118+
builder.CloseElement();
119+
};
120+
62121
private async Task OnClickButton()
63122
{
64123
if (OnClickWithoutRender != null)
65124
{
66125
await OnClickWithoutRender();
67126
}
127+
68128
if (OnClick.HasDelegate)
69129
{
70130
await OnClick.InvokeAsync();

‎src/BootstrapBlazor/Components/Button/LinkButton.razor‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
else if (context is ContextMenuItem item)
1717
{
1818
var disabled = GetItemTriggerClick(item);
19-
<DynamicElement @key="item" TagName="div" class="@GetItemClassString(disabled)"
19+
<DynamicElement @key="item" class="@GetItemClassString(disabled)"
2020
TriggerClick="!disabled" OnClick="() => OnClickItem(item)">
2121
<i class="@GetItemIconString(item)"></i>
2222
<span>@item.Text</span>

‎src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
</button>
3939
}
4040
<div class="d-flex align-items-center justify-content-center flex-fill">
41-
<DynamicElement TagName="span" role="button" class="picker-panel-header-label" OnClick="() => SwitchView(DatePickerViewMode.Year)">@YearString</DynamicElement>
42-
<DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" OnClick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</DynamicElement>
41+
<span role="button" class="picker-panel-header-label" @onclick="() => SwitchView(DatePickerViewMode.Year)">@YearString</span>
42+
<span role="button" class="@CurrentMonthViewClassName" @onclick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</span>
4343
@if (IsDateTimeMode)
4444
{
4545
<span role="button" class="picker-panel-header-label" @onclick="SwitchTimeView">@CurrentTime.ToString(TimeFormat)</span>

‎src/BootstrapBlazor/Components/Input/BootstrapInputGroupLabel.razor.cs‎ renamed to ‎src/BootstrapBlazor/Components/Input/BootstrapInputGroupLabel.cs‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
55

6+
using Microsoft.AspNetCore.Components.Rendering;
7+
68
namespace BootstrapBlazor.Components;
79

810
/// <summary>
911
/// BootstrapInputGroupLabel 组件
1012
/// </summary>
11-
public partial class BootstrapInputGroupLabel
13+
public sealed class BootstrapInputGroupLabel : DisplayBase<string>
1214
{
1315
private string? ClassString => CssBuilder.Default()
1416
.AddClass("input-group-text", IsInputGroupLabel)
@@ -54,7 +56,7 @@ public partial class BootstrapInputGroupLabel
5456
private bool IsInputGroupLabel => InputGroup != null;
5557

5658
/// <summary>
57-
/// OnParametersSet 方法
59+
/// <inheritdoc/>
5860
/// </summary>
5961
protected override void OnParametersSet()
6062
{
@@ -65,4 +67,26 @@ protected override void OnParametersSet()
6567
DisplayText ??= FieldIdentifier?.GetDisplayName();
6668
}
6769
}
70+
71+
/// <summary>
72+
/// <inheritdoc/>
73+
/// </summary>
74+
/// <param name="builder"></param>
75+
protected override void BuildRenderTree(RenderTreeBuilder builder)
76+
{
77+
builder.OpenElement(0, TagName);
78+
builder.AddMultipleAttributes(10, AdditionalAttributes);
79+
builder.AddAttribute(20, "class", ClassString);
80+
builder.AddAttribute(30, "style", StyleString);
81+
builder.AddAttribute(40, "required", Required);
82+
if (ChildContent != null)
83+
{
84+
builder.AddContent(50, ChildContent);
85+
}
86+
else
87+
{
88+
builder.AddContent(60, DisplayText);
89+
}
90+
builder.CloseElement();
91+
}
6892
}

‎src/BootstrapBlazor/Components/Input/BootstrapInputGroupLabel.razor‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/BootstrapBlazor/Components/Select/MultiSelect.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
<div class="toolbar">
6868
@if (ShowDefaultButtons)
6969
{
70-
<DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
71-
<DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
72-
<DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
70+
<button type="button" class="btn" @onclick="SelectAll">@SelectAllText</button>
71+
<button type="button" class="btn" @onclick="InvertSelect">@ReverseSelectText</button>
72+
<button type="button" class="btn" @onclick="Clear">@ClearText</button>
7373
}
7474
@ButtonTemplate
7575
</div>

‎src/BootstrapBlazor/Components/SelectGeneric/MultiSelectGeneric.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@
6060
<div class="toolbar">
6161
@if (ShowDefaultButtons)
6262
{
63-
<DynamicElement TagName="button" type="button" class="btn" OnClick="SelectAll">@SelectAllText</DynamicElement>
64-
<DynamicElement TagName="button" type="button" class="btn" OnClick="InvertSelect">@ReverseSelectText</DynamicElement>
65-
<DynamicElement TagName="button" type="button" class="btn" OnClick="Clear">@ClearText</DynamicElement>
63+
<button type="button" class="btn" @onclick="SelectAll">@SelectAllText</button>
64+
<button type="button" class="btn" @onclick="InvertSelect">@ReverseSelectText</button>
65+
<button type="button" class="btn" @onclick="Clear">@ClearText</button>
6666
}
6767
@ButtonTemplate
6868
</div>

‎src/BootstrapBlazor/Components/Upload/CardUpload.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@
5353
</div>
5454
@if (ShowDeleteButton)
5555
{
56-
<DynamicElement TagName="button" type="button" class="btn btn-sm btn-outline-danger"
57-
disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
58-
TriggerClick="@(!IsDisabled)" OnClick="@(() => OnCardFileDelete(item))">
56+
<button type="button" class="btn btn-sm btn-outline-danger"
57+
disabled="@GetDeleteButtonDisabledString(item)" aria-label="delete"
58+
@onclick="() => OnCardFileDelete(item)">
5959
<i class="@RemoveIcon"></i>
60-
</DynamicElement>
60+
</button>
6161
}
6262
</div>
6363
@if (GetShowProgress(item))

0 commit comments

Comments
 (0)