feat(TButton): 自定义标记渲染的按钮 (#302)

tdesign-blazor · Jun 20, 2023 · 0c466ec · 0c466ec
2 parents edaeb7b + 8eecfba
commit 0c466ec
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 57 deletions.
diff --git a/doc/TDesign.Docs.ServerSide/TDesign.xml b/doc/TDesign.Docs.ServerSide/TDesign.xml
diff --git a/doc/TDesign.Docs.Shared/Pages/Components/Basic/ButtonPage.razor b/doc/TDesign.Docs.Shared/Pages/Components/Basic/ButtonPage.razor
@@ -1,5 +1,5 @@
 @page "/components/button"
-<LayoutContent AnchorItems="@(new[]{"示例","幽灵按钮","图标按钮","Block 按钮","不同颜色主题按钮","不同状态的按钮","不同尺寸的按钮","不同形状的按钮","OnClick 点击事件","API"})">
+<LayoutContent AnchorItems="@(new[]{"示例","幽灵按钮","图标按钮","Block 按钮","不同颜色主题按钮","不同状态的按钮","不同尺寸的按钮","不同形状的按钮","OnClick 点击事件","自定义渲染元素","API"})">
 <PageHeader Title="Button 按钮">
     按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
 </PageHeader>
@@ -15,9 +15,9 @@
         @Code.Create(@"
  ```cshtml-razor
 <TButton>普通按钮</TButton>
-<TButton Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Varient=""ButtonVarient.Text"">文本按钮</TButton>
 ```
 ")
     </CodeContent>
@@ -65,29 +65,29 @@
         @Code.Create(@"
 ```cshtml-razor
 <TButton Ghost>普通按钮</TButton>
-<TButton Ghost Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Ghost Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Ghost Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Ghost Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Ghost Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Ghost Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Ghost Theme=""Theme.Primary"">普通按钮</TButton>
-<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Ghost Theme=""Theme.Success"">普通按钮</TButton>
-<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Ghost Theme=""Theme.Warning"">普通按钮</TButton>
-<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Ghost Theme=""Theme.Danger"">普通按钮</TButton>
-<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 ```
 ")
     </CodeContent>
@@ -142,9 +142,9 @@
         @Code.Create(@"
 ```cshtml-razor
 <TButton Block>普通按钮</TButton>
-<TButton Varient=""ButtonType.Outline"" Block>边框按钮</TButton>
-<TButton Varient=""ButtonType.Dashed"" Block>虚框按钮</TButton>
-<TButton Varient=""ButtonType.Text"" Block>文本按钮</TButton>
+<TButton Varient=""ButtonVarient.Outline"" Block>边框按钮</TButton>
+<TButton Varient=""ButtonVarient.Dashed"" Block>虚框按钮</TButton>
+<TButton Varient=""ButtonVarient.Text"" Block>文本按钮</TButton>
 ```
 ")
     </CodeContent>
@@ -187,29 +187,29 @@
         @Code.Create(@"
 ```cshtml-razor
 <TButton>普通按钮</TButton>
-<TButton Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Theme=""Theme.Primary"">普通按钮</TButton>
-<TButton Theme=""Theme.Primary"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Theme=""Theme.Primary"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Theme=""Theme.Primary"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Theme=""Theme.Success"">普通按钮</TButton>
-<TButton Theme=""Theme.Success"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Theme=""Theme.Success"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Theme=""Theme.Success"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Theme=""Theme.Warning"">普通按钮</TButton>
-<TButton Theme=""Theme.Warning"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Theme=""Theme.Warning"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Theme=""Theme.Warning"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 
 <TButton Theme=""Theme.Danger"">普通按钮</TButton>
-<TButton Theme=""Theme.Danger"" Varient=""ButtonType.Outline"">边框按钮</TButton>
-<TButton Theme=""Theme.Danger"" Varient=""ButtonType.Dashed"">虚框按钮</TButton>
-<TButton Theme=""Theme.Danger"" Varient=""ButtonType.Text"">文本按钮</TButton>
+<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
+<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
+<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
 ```
 ")
     </CodeContent>
@@ -384,6 +384,39 @@
 ```cshtml-razor
 <TButton OnClick=""@(e=>JS.InvokeVoidAsync(""alert"",""按钮被点击""))"">点击我</TButton>
 ```
+")
+    </CodeContent>
+</Example>
+    <Example Title="自定义渲染元素">
+        <Description>支持自定义渲染元素</Description>
+        <RunContent>
+            <TSpace>
+                <TSpaceItem>
+                    <TButton TagName="div" Theme="Theme.Primary">div</TButton>
+                </TSpaceItem>
+                <TSpaceItem>
+                    <TButton TagName="a" Theme="Theme.Primary">a</TButton>
+                </TSpaceItem>
+                <TSpaceItem>
+                    <TButton TagName="span" Theme="Theme.Primary">span</TButton>
+                </TSpaceItem>
+            </TSpace>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```cshtml-razor
+<TSpace>
+    <TSpaceItem>
+        <TButton TagName=""div"" Theme=""Theme.Primary"">div</TButton>
+    </TSpaceItem>
+    <TSpaceItem>
+        <TButton TagName=""a"" Theme=""Theme.Primary"">a</TButton>
+    </TSpaceItem>
+    <TSpaceItem>
+        <TButton TagName=""span"" Theme=""Theme.Primary"">span</TButton>
+    </TSpaceItem>
+</TSpace>
+```
 ")
     </CodeContent>
 </Example>

diff --git a/doc/TDesign.Docs.WebAssembly/wwwroot/TDesign.xml b/doc/TDesign.Docs.WebAssembly/wwwroot/TDesign.xml
diff --git a/src/TDesign.Test/Components/Basic/ButtonTest.cs b/src/TDesign.Test/Components/Basic/ButtonTest.cs
@@ -88,9 +88,16 @@ public void Test_Loading_Parameter()
     [Fact(DisplayName ="按钮 - 有图标和文字一起适配")]
     public void Test_Icon_With_Text()
     {
-        RenderComponent(m => m.Add(p => p.Icon, IconName.Add)).MarkupMatches(builder =>
-        {
-            builder.Component<TButton>().Content(content => content.Component<TIcon>().Attribute(m => m.Name, IconName.Add).Close()).Close();
-        });
+        var button= RenderComponent(m => m.Add(p => p.Icon, IconName.Add));
+        button.FindComponent<TIcon>().MarkupMatches(b => b.Component<TIcon>().Attribute(m => m.Name, IconName.Add).Close());
+    }
+
+    [Theory(DisplayName ="按钮 - 不同的 HTML 标记渲染按钮")]
+    [InlineData(new object[] { "div"})]
+    [InlineData(new object[] { "a" })]
+    [InlineData(new object[] { "span" })]
+    public void Test_Button_With_TagName(string tag)
+    {
+        RenderComponent(m => m.Add(p => p.TagName, tag)).Should().HaveTag(tag);
     }
 }
diff --git a/src/TDesign/Components/TButton.cs b/src/TDesign/Components/TButton.cs
@@ -5,18 +5,13 @@ namespace TDesign;
 /// <summary>
 /// 表示用于开启一个闭环的操作任务的按钮。
 /// </summary>
-[HtmlTag("button")]
 [CssClass("t-button")]
-public class TButton : TDesignComponentBase, IHasChildContent
+public class TButton : TDesignAdditionParameterWithChildContentComponentBase
 {
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     [Parameter][HtmlAttribute("onclick")] public EventCallback<MouseEventArgs?> OnClick { get; set; }
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    [Parameter] public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
     /// 设置按钮的 HTML 类型。默认时 <see cref="ButtonHtmlType.Button"/> 类型。
@@ -57,10 +52,19 @@ public class TButton : TDesignComponentBase, IHasChildContent
     /// </summary>
     [Parameter][CssClass("t-is-loading")] public bool Loading { get; set; }
 
+    /// <summary>
+    /// 设置按钮风格的 HTML 元素名称。默认是 button。
+    /// </summary>
+    [Parameter] public string? TagName { get; set; } = "button";
+
     /// <summary>
     /// 图标的名称。
     /// </summary>
     [Parameter]public object? Icon { get; set; }
+
+    /// <inheritdoc/>
+    public override string GetTagName() => TagName;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>