refactor(module: all): separate the normal and template parameters (#552)

* fix: card title template

* fix: template:badge,collapse

* fix: comment refactor template

* fix: ribbonTests

* feat: descriptions refactor template

* feat: empty refactor template

* feat: list refactor template

* feat: menu refactor template

* feat: confirm add question icon

* feat: pageHeader and statistic refactor template

* feat: popconfirm refactor template

* feat: popver refactor template

* feat: result refactor template

* feat: step refactor template

* feat: switch refactor template

* feat: table refactor template

* feat: transfer refactor template

* feat: optimized code

* fix: pageheader

* refactor(module: empty): remove empty image constant images

Co-authored-by: ElderJames <shunjiey@hotmail.com>

components/badge/Badge.razor

@@ -27,16 +27,12 @@
         {
             <span class="ant-badge-status-text">@Text</span>
         }
-        @if (CountTemplate != null)
+        if (_showSup)
         {
-            @CountTemplate
-        }
-        else if (_showSup)
-        {
-            <sup class="@CountClassMapper.Class" style="@CountStyle @Style" title="@CountNumber">
+            <sup class="@CountClassMapper.Class" style="@CountStyle @Style" title="@Count">
                 @if (!Dot)
                 {
-                    @if (CountNumber <= OverflowCount)
+                    @if (Count <= OverflowCount)
                     {
                         @for (int i = 0; i < _maxNumberArray.Length; i++)
                         {

components/badge/Badge.razor.cs

@@ -1,9 +1,9 @@
-using Microsoft.AspNetCore.Components;
-using OneOf;
-using System;
+using System;
 using System.Globalization;
 using System.Linq;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using OneOf;
 
 namespace AntDesign
 {
@@ -22,7 +22,10 @@ namespace AntDesign
         /// Number to show in badge
         /// </summary>
         [Parameter]
-        public OneOf<int?, RenderFragment> Count { get; set; }
+        public int? Count { get; set; }
+
+        [Parameter]
+        public RenderFragment CountTemplate { get; set; }
 
         /// <summary>
         /// Whether to display a red dot instead of count
@@ -75,10 +78,6 @@ namespace AntDesign
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        private int? CountNumber { get; set; }
-
-        private RenderFragment CountTemplate { get; set; }
-
         private ClassMapper CountClassMapper { get; set; } = new ClassMapper();
 
         private int[] _countArray = Array.Empty<int>();
@@ -95,8 +94,8 @@ namespace AntDesign
 
         private string CountStyle => Offset == default ? null : $"{(Offset.Item1 > 0 ? $"right:-{Offset.Item1}px" : "")};{(Offset.Item2 > 0 ? $"margin-top:{Offset.Item2}px" : "")};";
 
-        private bool ShowSup => (this.ShowDot && this.Dot) || this.CountNumber > 0 ||
-                                (this.CountNumber == 0 && this.ShowZero);
+        private bool ShowSup => (this.ShowDot && this.Dot) || this.Count > 0 ||
+                                (this.Count == 0 && this.ShowZero);
 
         private bool _dotEnter;
 
@@ -193,17 +192,10 @@ namespace AntDesign
             base.OnParametersSet();
             SetClassMap();
 
-            Count.Switch(count =>
+            if (Count.HasValue)
             {
-                this.CountNumber = count;
-                if (count != null)
-                {
-                    this._countArray = DigitsFromInteger(count.Value);
-                }
-            }, template =>
-            {
-                this.CountTemplate = template;
-            });
+                this._countArray = DigitsFromInteger(Count.Value);
+            }
 
             if (OverflowCount > 0)
             {

components/badge/BadgeRibbon.razor

@@ -6,15 +6,8 @@
     {
         @ChildContent
     }
-    <div class="@ClassMapper.Class" style="@colorStyle">
-        @if (Text.IsT0)
-        {
-            @Text.AsT0
-        }
-        else
-        {
-            @Text.AsT1
-        }
-        <div class="ant-ribbon-corner" style="@cornerColorStyle"/>
+    <div class="@ClassMapper.Class" style="@_colorStyle">
+        @if (TextTemplate != null)@TextTemplate else @Text
+        <div class="ant-ribbon-corner" style="@_cornerColorStyle" />
     </div>
 </div>

components/badge/BadgeRibbon.razor.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
 using OneOf;
 
 namespace AntDesign
@@ -18,7 +18,10 @@ namespace AntDesign
         /// Set text contents of ribbon.
         /// </summary>
         [Parameter]
-        public OneOf<string, RenderFragment> Text { get; set; }
+        public string Text { get; set; }
+
+        [Parameter]
+        public RenderFragment TextTemplate { get; set; }
 
         /// <summary>
         /// Set placement of ribbon.
@@ -35,9 +38,9 @@ namespace AntDesign
 
         private string PresetColor => Color.IsIn(_badgePresetColors) ? Color : null;
 
-        private string colorStyle;
+        private string _colorStyle;
 
-        private string cornerColorStyle;
+        private string _cornerColorStyle;
 
         /// <summary>
         /// Sets the default CSS classes.
@@ -58,13 +61,13 @@ namespace AntDesign
         {
             if (PresetColor == null && !string.IsNullOrWhiteSpace(Color))
             {
-                colorStyle = $"background:{Color}; {Style}";
-                cornerColorStyle = $"color:{Color}; {Style}";
+                _colorStyle = $"background:{Color}; {Style}";
+                _cornerColorStyle = $"color:{Color}; {Style}";
             }
             else
             {
-                colorStyle = Style;
-                cornerColorStyle = Style;
+                _colorStyle = Style;
+                _cornerColorStyle = Style;
             }
         }
 

components/card/Card.razor

@@ -3,22 +3,15 @@
 
 <CascadingValue Value="this">
     <div class="@ClassMapper.Class" style="@Style" id="@Id">
-        @if (Title.Value != null || Extra != null || AntCardTab != null)
+        @if (TitleTemplate != null || Title != null || Extra != null || AntCardTab != null)
         {
             <div class="ant-card-head">
                 <div class="ant-card-head-wrapper">
-                    @if (Title.Value != null)
+                    @if (TitleTemplate != null || Title != null)
                     {
 
                         <div class="ant-card-head-title">
-                            @if (Title.IsT0)
-                            {
-                                @Title.AsT0
-                            }
-                            else
-                            {
-                                @Title.AsT1
-                            }
+                            @if (TitleTemplate != null)@TitleTemplate else @Title
                         </div>
                     }
                     @if (Extra != null)

components/card/Card.razor.cs

@@ -37,7 +37,10 @@ namespace AntDesign
         public string Size { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; }
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public RenderFragment Extra { get; set; }

components/collapse/Collapse.razor.cs

@@ -27,7 +27,10 @@ namespace AntDesign
         public EventCallback<string[]> OnChange { get; set; }
 
         [Parameter]
-        public OneOf<bool, RenderFragment<bool>> ExpandIcon { get; set; } = true;
+        public string ExpandIcon { get; set; } = "right";
+
+        [Parameter]
+        public RenderFragment<bool> ExpandIconTemplate { get; set; }
 
         #endregion Parameter
 

components/collapse/Panel.razor

@@ -5,36 +5,22 @@
     <div class="ant-collapse-header" @onclick="OnClickHeader">
         @if (ShowArrow)
         {
-            @if (Collapse.ExpandIcon.IsT0 && Collapse.ExpandIcon.AsT0)
+            @if (Collapse.ExpandIconTemplate != null)
             {
-                <Icon Type="right" Theme="outline" Class="ant-collapse-arrow" Rotate="@(Active ? 90 : 0)" />
+                @Collapse.ExpandIconTemplate(Active)
             }
-            else if (Collapse.ExpandIcon.AsT1 != null)
+            else
             {
-                @Collapse.ExpandIcon.AsT1(Active)
+                <Icon Type="@Collapse.ExpandIcon" Class="ant-collapse-arrow" Rotate="@(Active ? 90 : 0)" />
             }
         }
 
-        @if (Header.IsT0)
-        {
-            @Header.AsT0
-        }
-        else
-        {
-            @Header.AsT1
-        }
+        @if (HeaderTemplate != null)@HeaderTemplate else @Header
 
-        @if (Extra.Value != null)
+        @if (Extra != null || ExtraTemplate != null)
         {
             <div class="ant-collapse-extra">
-                @if (Extra.IsT0)
-                {
-                    @Extra.AsT0
-                }
-                else
-                {
-                    @Extra.AsT1
-                }
+                @if (ExtraTemplate != null)@ExtraTemplate else @Extra
             </div>
         }
     </div>

components/collapse/Panel.razor.cs

@@ -22,10 +22,16 @@ namespace AntDesign
         public bool ShowArrow { get; set; } = true;
 
         [Parameter]
-        public OneOf<string, RenderFragment> Extra { get; set; }
+        public string Extra { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Header { get; set; }
+        public RenderFragment ExtraTemplate { get; set; }
+
+        [Parameter]
+        public string Header { get; set; }
+
+        [Parameter]
+        public RenderFragment HeaderTemplate { get; set; }
 
         [Parameter]
         public EventCallback<bool> OnActiveChange { get; set; }

components/comment/Comment.razor

@@ -4,55 +4,59 @@
 <CascadingValue Value="this">
     <div class="@ClassMapper.Class" style="@Style" id="@Id">
         <div class="ant-comment-inner">
-            @if (Avatar.Value != null && Content.Value != null)
+            @if ((Avatar != null || AvatarTemplate != null) && (Content != null || ContentTemplate != null))
             {
                 <div class="ant-comment-avatar">
-                    @if (Avatar.IsT0)
+                    @if (AvatarTemplate != null)
                     {
-                        <Avatar Src="@Avatar.AsT0" />
+                        @AvatarTemplate
                     }
                     else
                     {
-                        @Avatar.AsT1
+                        <Avatar Src="@Avatar" />
+
                     }
                 </div>
                 <div class="ant-comment-content">
                     <div class="ant-comment-content-author">
-                        @if (Author.Value != null)
+                        @if (Author != null || AuthorTemplate != null)
                         {
                             <span class="ant-comment-content-author-name">
-                                @if (Author.IsT0)
+
+                                @if (AuthorTemplate != null)
                                 {
-                                    <a>@Author.AsT0</a>
+                                    @AuthorTemplate
                                 }
                                 else
                                 {
-                                    @Author.AsT1
+                                    <a>@Author</a>
                                 }
                             </span>
                         }
-                        @if (Datetime.Value != null)
+
+                        @if (Datetime != null || DatetimeTemplate != null)
                         {
                             <span class="ant-comment-content-author-time">
-                                @if (Datetime.IsT0)
+                                @if (DatetimeTemplate != null)
                                 {
-                                    <span>@Datetime.AsT0</span>
+                                    @DatetimeTemplate
                                 }
                                 else
                                 {
-                                    @Datetime.AsT1
+                                    <span>@Datetime</span>
                                 }
                             </span>
                         }
                     </div>
                     <div class="ant-comment-content-detail">
-                        @if (Content.IsT0)
+                        @if (ContentTemplate != null)
                         {
-                            <p>@Content.AsT0</p>
+                            @ContentTemplate
+
                         }
                         else
                         {
-                            @Content.AsT1
+                            <p>@Content</p>
                         }
                     </div>
                     @if (Actions.Count > 0)

components/comment/Comment.razor.cs

@@ -1,8 +1,8 @@
-using Microsoft.AspNetCore.Components;
-using System;
+using System;
 using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
 using OneOf;
 
 namespace AntDesign
@@ -10,19 +10,31 @@ namespace AntDesign
     public partial class Comment : AntDomComponentBase
     {
         [Parameter]
-        public OneOf<string, RenderFragment> Author { get; set; }
+        public string Author { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Avatar { get; set; }
+        public RenderFragment AuthorTemplate { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Content { get; set; }
+        public string Avatar { get; set; }
+
+        [Parameter]
+        public RenderFragment AvatarTemplate { get; set; }
+
+        [Parameter]
+        public string Content { get; set; }
+
+        [Parameter]
+        public RenderFragment ContentTemplate { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Datetime { get; set; }
+        public string Datetime { get; set; }
+
+        [Parameter]
+        public RenderFragment DatetimeTemplate { get; set; }
 
         [Parameter]
         public IList<RenderFragment> Actions { get; set; } = new List<RenderFragment>();

components/descriptions/Descriptions.razor

@@ -6,18 +6,10 @@
 </CascadingValue>
 
 <div @ref="@_divRef" class="@ClassMapper.Class" style="@Style" id="@Id">
-    @if (Title.Value != null)
+    @if (Title != null || TitleTemplate != null)
     {
-
         <div class="ant-descriptions-title">
-            @if (Title.IsT0)
-            {
-                @Title.AsT0
-            }
-            else
-            {
-                @Title.AsT1
-            }
+            @if (TitleTemplate != null)@TitleTemplate else @Title
         </div>
     }
     <div class="ant-descriptions-view">
@@ -36,14 +28,8 @@
                                     <!-- Horizontal & NOT Bordered -->
                                     <td class="ant-descriptions-item" colspan="@item.realSpan">
                                         <span class="ant-descriptions-item-label @(Colon ? "ant-descriptions-item-colon" : null)">
-                                            @if (item.item.Title.IsT0)
-                                            {
-                                                @item.item.Title.AsT0
-                                            }
-                                            else
-                                            {
-                                                @item.item.Title.AsT1
-                                            }
+
+                                            @if (item.item.TitleTemplate != null)@item.item.TitleTemplate else @item.item.Title
                                         </span>
                                         <span class="ant-descriptions-item-content">
                                             @item.item.ChildContent
@@ -55,14 +41,7 @@
                                 {
                                     <!-- Horizontal & Bordered -->
                                     <td class="ant-descriptions-item-label">
-                                        @if (item.item.Title.IsT0)
-                                        {
-                                            @item.item.Title.AsT0
-                                        }
-                                        else
-                                        {
-                                            @item.item.Title.AsT1
-                                        }
+                                        @if (item.item.TitleTemplate != null)@item.item.TitleTemplate else @item.item.Title
                                     </td>
                                     <td class="ant-descriptions-item-content" colspan="@item.realSpan * 2 - 1">
                                         @item.item.ChildContent
@@ -84,14 +63,7 @@
                                 {
                                     <td class="ant-descriptions-item" colspan="@item.realSpan">
                                         <span class="ant-descriptions-item-label @(Colon ? "ant-descriptions-item-colon" : null)">
-                                            @if (item.item.Title.IsT0)
-                                            {
-                                                @item.item.Title.AsT0
-                                            }
-                                            else
-                                            {
-                                                @item.item.Title.AsT1
-                                            }
+                                            @if (item.item.TitleTemplate != null)@item.item.TitleTemplate else @item.item.Title
                                         </span>
                                     </td>
                                 }
@@ -117,14 +89,7 @@
                                 @foreach (var item in row)
                                 {
                                     <td class="ant-descriptions-item-label" colspan="@item.realSpan">
-                                        @if (item.item.Title.IsT0)
-                                        {
-                                            @item.item.Title.AsT0
-                                        }
-                                        else
-                                        {
-                                            @item.item.Title.AsT1
-                                        }
+                                        @if (item.item.TitleTemplate != null)@item.item.TitleTemplate else @item.item.Title
                                     </td>
                                 }
                             </tr>

components/descriptions/Descriptions.razor.cs

@@ -29,7 +29,10 @@ namespace AntDesign
         public string Size { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; }
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public bool Colon { get; set; }

components/descriptions/DescriptionsItem.razor.cs

@@ -10,7 +10,10 @@ namespace AntDesign
     public partial class DescriptionsItem : AntDomComponentBase, IDescriptionsItem
     {
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; } = "";
+        public string Title { get; set; } = "";
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public int Span { get; set; } = 1;

components/descriptions/IDescriptionsItem.cs

@@ -9,7 +9,10 @@ namespace AntDesign
     public interface IDescriptionsItem
     {
         [Parameter]
-        OneOf<string, RenderFragment> Title { get; set; }
+        string Title { get; set; }
+
+        [Parameter]
+        RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         int Span { get; set; }

components/empty/Empty.razor

@@ -3,42 +3,35 @@
 
 <div class="@ClassMapper.Class" @ref="@Ref" style="@Style" id="@Id">
     <div class="@(PrefixCls)-image" style="@ImageStyle">
-        @if (Image.IsT0 && !string.IsNullOrEmpty(Image.AsT0))
+        @if (ImageTemplate != null)
         {
-            Description.TryPickT0(out string des, out _);
-            string alt = !string.IsNullOrEmpty(des) ? des : "empty";
-            <img alt="@alt" src="@Image.AsT0" />
+            @ImageTemplate
+        }
+        else if (string.IsNullOrEmpty(Image) == false)
+        {
+            string alt = Description.TryPickT0(out string des, out _) ? des : LocaleProvider.CurrentLocale.Empty.Description;
+
+            <img alt="@alt" src="@Image" />
         }
         else if (Simple)
         {
-            @PRESENTED_IMAGE_SIMPLE
-        }
-        else if (Image.IsT1 && Image.AsT1 != null)
-        {
-            @Image.AsT1
+            <EmptySimpleImg />
         }
         else
         {
-            @PRESENTED_IMAGE_DEFAULT
+            <EmptyDefaultImg />
         }
     </div>
 
-    @if (Description.IsT0 && !string.IsNullOrEmpty(Description.AsT0))
+    @if (DescriptionTemplate != null)
+    {
+        <p class="@(PrefixCls)-description">@DescriptionTemplate</p>
+    }
+    else if (Description.IsT1 == false || Description.AsT1 == true)
     {
         <p class="@(PrefixCls)-description">@Description.AsT0</p>
     }
-    @if (Description.IsT2 && Description.AsT2 != null)
-    {
-        <p class="@(PrefixCls)-description">@Description.AsT2</p>
-    }
     <div class="@(PrefixCls)-footer">
         @ChildContent
     </div>
-</div>
-
-@code
-{
-    public static RenderFragment PRESENTED_IMAGE_DEFAULT =@<EmptyDefaultImg />;
-
-    public static RenderFragment PRESENTED_IMAGE_SIMPLE = @<EmptySimpleImg />;
-}
+</div>

components/empty/Empty.razor.cs

@@ -27,17 +27,23 @@ namespace AntDesign
         public RenderFragment ChildContent { get; set; }
 
         [Parameter]
-        public OneOf<string, bool, RenderFragment> Description { get; set; } = LocaleProvider.CurrentLocale.Empty.Description;
+        public OneOf<string, bool?> Description { get; set; } = LocaleProvider.CurrentLocale.Empty.Description;
 
         [Parameter]
-        public OneOf<string, RenderFragment> Image { get; set; } = Empty.PRESENTED_IMAGE_DEFAULT;
+        public RenderFragment DescriptionTemplate { get; set; }
+
+        [Parameter]
+        public string Image { get; set; }
+
+        [Parameter]
+        public RenderFragment ImageTemplate { get; set; }
 
         protected void SetClass()
         {
             this.ClassMapper.Clear()
                 .Add(PrefixCls)
-                .If($"{PrefixCls}-normal", () => Image.IsT1 && Image.AsT1 == Empty.PRESENTED_IMAGE_SIMPLE)
-                .If($"{PrefixCls}-{Direction}", () => Direction.IsIn("ltr", "rlt"))
+                .If($"{PrefixCls}-normal", () => Simple)
+                .GetIf(() => $"{PrefixCls}-{Direction}", () => Direction.IsIn("ltr", "rlt"))
                 .If($"{PrefixCls}-small", () => Small)
                 ;
         }
@@ -46,10 +52,5 @@ namespace AntDesign
         {
             this.SetClass();
         }
-
-        protected override void OnParametersSet()
-        {
-            this.SetClass();
-        }
     }
 }

components/list/AntListItemMeta.razor

@@ -3,17 +3,16 @@
 
 <div class="@ClassMapper.Class" style="@Style">
 
-    @if (Avatar.IsT0 && Avatar.AsT0 != "")
+    @if (AvatarTemplate != null)
     {
         <div class="ant-list-item-meta-avatar">
-            <Avatar Src="@Avatar.AsT0"></Avatar>
+            @AvatarTemplate
         </div>
     }
-
-    @if (Avatar.IsT1 && Avatar.AsT1 != null)
+    else if (Avatar == null)
     {
         <div class="ant-list-item-meta-avatar">
-            @Avatar.AsT1
+            <Avatar Src="@Avatar"></Avatar>
         </div>
     }
 
@@ -29,30 +28,3 @@
     </div>
 </div>
 
-@code{
-    public string PrefixName { get; set; } = "ant-list-item-meta";
-
-    [Parameter] public RenderFragment Title { get; set; }
-
-    [Parameter] public OneOf.OneOf<string, RenderFragment> Avatar { get; set; }
-
-    [Parameter] public string Description { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-        SetClassMap();
-    }
-
-    protected override void OnParametersSet()
-    {
-        base.OnParametersSet();
-        SetClassMap();
-    }
-
-    protected void SetClassMap()
-    {
-        ClassMapper.Clear()
-            .Add(PrefixName);
-    }
-}

components/list/AntListItemMeta.razor.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Microsoft.AspNetCore.Components;
+
+namespace AntDesign
+{
+    public partial class AntListItemMeta
+    {
+
+        public string PrefixName { get; set; } = "ant-list-item-meta";
+
+        [Parameter] public RenderFragment Title { get; set; }
+
+        [Parameter] public string Avatar { get; set; }
+
+        [Parameter] public RenderFragment AvatarTemplate { get; set; }
+
+        [Parameter] public string Description { get; set; }
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            SetClassMap();
+        }
+
+        protected override void OnParametersSet()
+        {
+            base.OnParametersSet();
+            SetClassMap();
+        }
+
+        protected void SetClassMap()
+        {
+            ClassMapper.Clear()
+                .Add(PrefixName);
+        }
+
+    }
+}

components/menu/MenuItemGroup.razor

@@ -3,17 +3,7 @@
 
 <li class="@(RootMenu.PrefixCls)-item-group" style="@Style" @key="Key">
     <div class="@(RootMenu.PrefixCls)-item-group-title">
-        @if (Title.Value != null)
-        {
-            @if (Title.IsT0)
-            {
-                @Title.AsT0
-            }
-            else if (Title.IsT1)
-            {
-                @Title.AsT1
-            }
-        }
+        @if (TitleTemplate != null)@TitleTemplate else @Title
     </div>
     <ul class="@(RootMenu.PrefixCls)-item-group-list">
         @ChildContent

components/menu/MenuItemGroup.razor.cs

@@ -14,7 +14,10 @@ namespace AntDesign
         }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; }
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }

components/menu/SubMenu.razor

@@ -10,16 +10,14 @@
 {
     <li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style">
         <div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
-
-            @if (Title.IsT0)
+            @if (TitleTemplate != null)
             {
-                <span>@Title.AsT0</span>
+                @TitleTemplate
             }
-            else
+            else if (Title != null)
             {
-                @Title.AsT1
+                <span>@Title</span>
             }
-
             <i class="@(prefixCls)-arrow"></i>
         </div>
         <ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
@@ -47,15 +45,14 @@ else
                         OverlayHiddenCls="@($"{RootMenu.PrefixCls}-hidden")">
             <ChildContent>
                 <div class="@(prefixCls)-title" role="button">
-                    @if (Title.IsT0)
+                    @if (TitleTemplate != null)
                     {
-                        <span>@Title.AsT0</span>
+                        @TitleTemplate
                     }
-                    else
+                    else if (Title != null)
                     {
-                        @Title.AsT1
+                        <span>@Title</span>
                     }
-
                     @GetArrow()
                 </div>
             </ChildContent>
@@ -97,14 +94,14 @@ else
         if (RootMenu.PrefixCls.Contains("dropdown"))
         {
             return@<span class="@(prefixCls)-arrow">
-                        <span role="img" aria-label="right" class="anticon anticon-right @(prefixCls)-arrow-icon">
-                            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-                                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
-                            </svg>
-                        </span>
-                    </span>;
-         }
+        <span role="img" aria-label="right" class="anticon anticon-right @(prefixCls)-arrow-icon">
+            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
+            </svg>
+        </span>
+    </span>;
+}
 
-         return @<i class="@(prefixCls)-arrow"></i>;
-    }
+return @<i class="@(prefixCls)-arrow"></i>;
+}
 }

components/menu/SubMenu.razor.cs

@@ -17,7 +17,10 @@ namespace AntDesign
         public SubMenu Parent { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; }
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }

components/modal/type/ConfirmIcon.cs

@@ -14,7 +14,8 @@ namespace AntDesign
         Info = 1,
         Warning = 2,
         Error = 3,
-        Success = 4
+        Success = 4,
+        Question = 5,
     }
 
     internal static class ConfirmIconRenderFragments
@@ -51,6 +52,15 @@ namespace AntDesign
             builder.CloseComponent();
         };
 
+        public static RenderFragment Question = (builder) =>
+        {
+            builder.OpenComponent<Icon>(0);
+            builder.AddAttribute(1, "Type", "question-circle");
+            builder.AddAttribute(2, "Theme", "outline");
+            builder.CloseComponent();
+        };
+
+
         public static RenderFragment GetByConfirmIcon(ConfirmIcon confirmIcon)
         {
             switch (confirmIcon)
@@ -59,6 +69,7 @@ namespace AntDesign
                 case ConfirmIcon.Warning: return Warning;
                 case ConfirmIcon.Error: return Error;
                 case ConfirmIcon.Success: return Success;
+                case ConfirmIcon.Question: return Question;
                 default: return null;
             }
         }

components/page-header/PageHeader.razor

@@ -8,13 +8,13 @@
     <div class="ant-page-header-heading">
         <div class="ant-page-header-heading-left">
             <!--back-->
-            @if (BackIcon.Value != null || OnBack.HasDelegate)
+            @if (BackIconTemplate != null || BackIcon.Value != null || OnBack.HasDelegate)
             {
                 <div @onclick="OnBackClick" class="ant-page-header-back">
                     <div role="button" tabindex="0" class="ant-page-header-back-button">
-                        @if (BackIcon.IsT0)
+                        @if (BackIconTemplate != null)
                         {
-                            <Icon Type="arrow-left" Theme="outline" />
+                            @BackIconTemplate
                         }
                         else if (BackIcon.IsT1)
                         {
@@ -22,7 +22,7 @@
                         }
                         else
                         {
-                            @BackIcon.AsT2
+                            <Icon Type="arrow-left" Theme="outline" />
                         }
                     </div>
                 </div>
@@ -32,18 +32,11 @@
             @PageHeaderAvatar
 
             <!--title-->
-            @if (Title.Value != null)
+            @if (TitleTemplate != null || Title != null)
             {
 
                 <span class="ant-page-header-heading-title">
-                    @if (Title.IsT0)
-                    {
-                        @Title.AsT0
-                    }
-                    else
-                    {
-                        @Title.AsT1
-                    }
+                    @if (TitleTemplate != null)@TitleTemplate else @Title
                 </span>
             }
             else
@@ -57,18 +50,11 @@
             }
 
             <!--subtitle-->
-            @if (Subtitle.Value != null)
+            @if (SubtitleTemplate != null || Subtitle != null)
             {
 
                 <span class="ant-page-header-heading-sub-title">
-                    @if (Subtitle.IsT0)
-                    {
-                        @Subtitle.AsT0
-                    }
-                    else
-                    {
-                        @Subtitle.AsT1
-                    }
+                    @if (SubtitleTemplate != null)@SubtitleTemplate else @Subtitle
                 </span>
             }
             else

components/page-header/PageHeader.razor.cs

@@ -12,13 +12,22 @@ namespace AntDesign
         public bool Ghost { get; set; }
 
         [Parameter]
-        public OneOf<bool?, string, RenderFragment> BackIcon { get; set; }
+        public OneOf<bool?, string> BackIcon { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public RenderFragment BackIconTemplate { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Subtitle { get; set; }
+        public string Title { get; set; }
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
+
+        [Parameter]
+        public string Subtitle { get; set; }
+
+        [Parameter]
+        public RenderFragment SubtitleTemplate { get; set; }
 
         [Parameter]
         public EventCallback OnBack { get; set; }

components/popconfirm/Popconfirm.razor

@@ -28,20 +28,16 @@
                 <div class="ant-popover-inner" role="tooltip">
                     <div class="ant-popover-inner-content">
                         <div class="ant-popover-message">
-                            @if (Icon == null)
+                            @if (IconTemplate != null)
                             {
-                                Icon = @<Icon Type="exclamation-circle"/>;
+                                @IconTemplate
+                            }
+                            else
+                            {
+                                <Icon Type="@Icon" />
                             }
-                            @Icon
                             <div class="ant-popover-message-title">
-                                @if (Title.IsT0 && !string.IsNullOrEmpty(Title.AsT0))
-                                {
-                                    @Title.AsT0
-                                }
-                                else if (Title.IsT1 && (Title.AsT1) != null)
-                                {
-                                    @Title.AsT1
-                                }
+                                @if (TitleTemplate != null)@TitleTemplate else @Title
                             </div>
                         </div>
                         <div class="ant-popover-buttons">

components/popconfirm/Popconfirm.razor.cs

@@ -13,7 +13,10 @@ namespace AntDesign
     public partial class Popconfirm : OverlayTrigger
     {
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; } = string.Empty;
+        public string Title { get; set; } = string.Empty;
+
+        [Parameter]
+        public RenderFragment TitleTemplate { get; set; }
 
         [Parameter]
         public string CancelText { get; set; } = "Cancel";
@@ -31,7 +34,10 @@ namespace AntDesign
         public ButtonProps CancelButtonProps { get; set; }
 
         [Parameter]
-        public RenderFragment Icon { get; set; }
+        public string Icon { get; set; } = "exclamation-circle";
+
+        [Parameter]
+        public RenderFragment IconTemplate { get; set; }
 
         [Parameter]
         public EventCallback<MouseEventArgs> OnCancel { get; set; }

components/popover/Popover.razor

@@ -29,24 +29,10 @@
                 </div>
                 <div class="ant-popover-inner" role="tooltip">
                     <div class="ant-popover-title">
-                        @if (Title.IsT0 && !string.IsNullOrEmpty(Title.AsT0))
-                        {
-                            @Title.AsT0
-                        }
-                        else if (Title.IsT1 && (Title.AsT1) != null)
-                        {
-                            @Title.AsT1
-                        }
+                        @if (TitleTemplate != null)@TitleTemplate else @Title
                     </div>
                     <div class="ant-popover-inner-content">
-                        @if (Content.IsT0 && !string.IsNullOrEmpty(Content.AsT0))
-                        {
-                            @Content.AsT0
-                        }
-                        else if (Content.IsT1 && (Content.AsT1) != null)
-                        {
-                            @Content.AsT1
-                        }
+                        @if (ContentTemplate != null)@ContentTemplate else @Content
                     </div>
                 </div>
             </div>

components/popover/Popover.razor.cs

@@ -12,10 +12,16 @@ namespace AntDesign
     public partial class Popover : OverlayTrigger
     {
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; } = string.Empty;
+        public string Title { get; set; } = string.Empty;
 
         [Parameter]
-        public OneOf<string, RenderFragment> Content { get; set; } = string.Empty;
+        public RenderFragment TitleTemplate { get; set; }
+
+        [Parameter]
+        public string Content { get; set; } = string.Empty;
+
+        [Parameter]
+        public RenderFragment ContentTemplate { get; set; }
 
         [Parameter]
         public bool ArrowPointAtCenter { get; set; } = false;

components/result/Result.razor

@@ -2,35 +2,24 @@
 @inherits AntDomComponentBase
 
 <div class="@ClassMapper.Class">
-    <div class="@IconClassMapper.Class">
-        @if (IsImage)
-        {
-            @((MarkupString)_svgImage)
-        }
-        else
-        {
-            @BuildIcon
-        }
-    </div>
+    @if (IsShowIcon)
+    {
+        <div class="@IconClassMapper.Class">
+            @if (IsImage)
+            {
+                @((MarkupString)_svgImage)
+            }
+            else
+            {
+                @BuildIcon
+            }
+        </div>
+    }
     <div class="ant-result-title">
-        @if (Title.IsT0)
-        {
-            @Title.AsT0
-        }
-        else
-        {
-            @Title.AsT1
-        }
+        @if (TitleTemplate != null)@TitleTemplate else @Title
     </div>
     <div class="ant-result-subtitle">
-        @if (SubTitle.IsT0)
-        {
-            @SubTitle.AsT0
-        }
-        else
-        {
-            @SubTitle.AsT1
-        }
+        @if (SubTitleTemplate != null)@SubTitleTemplate else @SubTitle
     </div>
     @if (ChildContent != null)
     {

components/result/Result.razor.cs

@@ -1,6 +1,6 @@
 using System;
-using Microsoft.AspNetCore.Components;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
 using OneOf;
 
 namespace AntDesign
@@ -8,10 +8,16 @@ namespace AntDesign
     public partial class Result : AntDomComponentBase
     {
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; } = string.Empty;
 
         [Parameter]
-        public OneOf<string, RenderFragment> SubTitle { get; set; }
+        public RenderFragment TitleTemplate { get; set; }
+
+        [Parameter]
+        public string SubTitle { get; set; } = string.Empty;
+
+        [Parameter]
+        public RenderFragment SubTitleTemplate { get; set; }
 
         [Parameter]
         public RenderFragment Extra { get; set; }
@@ -26,6 +32,12 @@ namespace AntDesign
         [Parameter]
         public string Icon { get; set; }
 
+        /// <summary>
+        /// 是否显示图标，默认显示
+        /// </summary>
+        [Parameter]
+        public bool IsShowIcon { get; set; } = true;
+
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 

components/statistic/CountDown.razor

@@ -4,22 +4,22 @@
 
 <div class="ant-statistic" style="@Style" @ref="Ref" id="@Id">
     <div class="ant-statistic-title">
-        @if (Title.IsT0)@Title.AsT0 else @Title.AsT1
+        @if (TitleTemplate != null)@TitleTemplate else @Title
     </div>
     <div class="ant-statistic-content" style="@ValueStyle">
-        @if (@Prefix.IsT0 && !string.IsNullOrEmpty(Prefix.AsT0) || @Prefix.IsT1 && Prefix.AsT1 != null)
+        @if (PrefixTemplate != null || Prefix != null)
         {
             <span class="ant-statistic-content-prefix">
-                @if (@Prefix.IsT0)@Prefix.AsT0 else @Prefix.AsT1
+                @if (PrefixTemplate != null)@PrefixTemplate else @Prefix
             </span>
         }
         <span class="ant-statistic-content-value">
             @(Formatter<TimeSpan>.Format(_countDown, Format))
         </span>
-        @if (@Suffix.IsT0 && !string.IsNullOrEmpty(@Suffix.AsT0) || @Suffix.IsT1 && @Suffix.AsT1 != null)
+        @if (SuffixTemplate != null || Suffix != null)
         {
             <span class="ant-statistic-content-suffix">
-                @if (@Suffix.IsT0)@Suffix.AsT0 else @Suffix.AsT1
+                @if (SuffixTemplate != null)@SuffixTemplate else @Suffix
             </span>
         }
     </div>

components/statistic/Statistic.razor

@@ -7,17 +7,14 @@
 }
 
 <div class="ant-statistic" style="@Style" @ref="Ref" id="@Id">
-    @if (Title.Value != null)
-    {
-        <div class="ant-statistic-title">
-            @if (Title.IsT0)@Title.AsT0 else @Title.AsT1
-        </div>
-    }
+    <div class="ant-statistic-title">
+        @if (TitleTemplate != null)@TitleTemplate else @Title
+    </div>
     <div class="ant-statistic-content" style="@ValueStyle">
-        @if (@Prefix.IsT0 && !string.IsNullOrEmpty(Prefix.AsT0) || @Prefix.IsT1 && Prefix.AsT1 != null)
+        @if (PrefixTemplate != null || Prefix != null)
         {
             <span class="ant-statistic-content-prefix">
-                @if (@Prefix.IsT0)@Prefix.AsT0 else @Prefix.AsT1
+                @if (PrefixTemplate != null)@PrefixTemplate else @Prefix
             </span>
         }
         <span class="ant-statistic-content-value">
@@ -31,10 +28,10 @@
                 </span>
             }
         </span>
-        @if (@Suffix.IsT0 && !string.IsNullOrEmpty(@Suffix.AsT0) || @Suffix.IsT1 && @Suffix.AsT1 != null)
+        @if (SuffixTemplate != null || Suffix != null)
         {
             <span class="ant-statistic-content-suffix">
-                @if (@Suffix.IsT0)@Suffix.AsT0 else @Suffix.AsT1
+                @if (SuffixTemplate != null)@SuffixTemplate else @Suffix
             </span>
         }
     </div>

components/statistic/StatisticComponentBase.razor.cs

@@ -6,22 +6,28 @@ using OneOf;
 
 namespace AntDesign
 {
-   public abstract class StatisticComponentBase<T>:AntDomComponentBase
+    public abstract class StatisticComponentBase<T> : AntDomComponentBase
     {
         /// <summary>
         /// 设置数值的前缀
         /// </summary>
-        [Parameter] public OneOf<string, RenderFragment> Prefix { get; set; } = string.Empty;
+        [Parameter] public string Prefix { get; set; }
+
+        [Parameter] public RenderFragment PrefixTemplate { get; set; }
 
         /// <summary>
         /// 设置数值的后缀
         /// </summary>
-        [Parameter] public OneOf<string, RenderFragment> Suffix { get; set; } = string.Empty;
+        [Parameter] public string Suffix { get; set; }
+
+        [Parameter] public RenderFragment SuffixTemplate { get; set; }
 
         /// <summary>
         /// 数值的标题
         /// </summary>
-        [Parameter] public OneOf<string, RenderFragment> Title { get; set; } = string.Empty;
+        [Parameter] public string Title { get; set; }
+
+        [Parameter] public RenderFragment TitleTemplate { get; set; }
 
         /// <summary>
         /// 数值内容

components/steps/Step.razor

@@ -2,7 +2,7 @@
 @inherits AntDomComponentBase
 
 
-<div class="@ClassMapper.Class" style="@Style"id="@Id">
+<div class="@ClassMapper.Class" style="@Style" id="@Id">
     <div class="ant-steps-item-container" @onclick="@HandleClick" tabindex="@GetTabIndex()" @attributes="@_containerAttributes">
         @if (!Last)
         {
@@ -14,12 +14,11 @@
                 @if (Percent != null && Parent.Current == Index)
                 {
                     <div class="ant-steps-progress-icon">
-                        <Progress
-                            Percent="@((double) Percent)"
-                            Width=@(Size == "small" ? 30 : 38)
-                            Type=ProgressType.Circle
-                            StrokeWidth="4"
-                            Format=@((p) => "")/>
+                        <Progress Percent="@((double) Percent)"
+                                  Width=@(Size == "small" ? 30 : 38)
+                                  Type=ProgressType.Circle
+                                  StrokeWidth="4"
+                                  Format=@((p) => "") />
                         <span class="ant-steps-icon">
 
                             @if (string.IsNullOrEmpty(Icon))
@@ -93,39 +92,19 @@
         </div>
         <div class="ant-steps-item-content">
             <div class="ant-steps-item-title">
-                @if (Title.IsT0)
-                {
-                    @Title.AsT0
-                }
-                else
-                {
-                    @Title.AsT1
-                }
-                @if (Subtitle.Value != null)
+                @if (TitleTemplate != null)@TitleTemplate else @Title
+
+                @if (SubtitleTemplate != null || Subtitle != null)
                 {
                     <div class="ant-steps-item-subtitle">
-                        @if (Subtitle.IsT0)
-                        {
-                            @Subtitle.AsT0
-                        }
-                        else
-                        {
-                            @Subtitle.AsT1
-                        }
+                        @if (SubtitleTemplate != null)@SubtitleTemplate else @Subtitle
                     </div>
                 }
             </div>
-            @if (Description.Value != null)
+            @if (DescriptionTemplate != null || Description != null)
             {
                 <div class="ant-steps-item-description">
-                    @if (Description.IsT0)
-                    {
-                        @Description.AsT0
-                    }
-                    else
-                    {
-                        @Description.AsT1
-                    }
+                    @if (DescriptionTemplate != null)@DescriptionTemplate else @Description
                 </div>
             }
         </div>

components/steps/Step.razor.cs

@@ -62,11 +62,17 @@ namespace AntDesign
             }
         }
 
-        [Parameter] public OneOf<string, RenderFragment> Title { get; set; }
+        [Parameter] public string Title { get; set; } = string.Empty;
 
-        [Parameter] public OneOf<string, RenderFragment> Subtitle { get; set; }
+        [Parameter] public RenderFragment TitleTemplate { get; set; }
 
-        [Parameter] public OneOf<string, RenderFragment> Description { get; set; }
+        [Parameter] public string Subtitle { get; set; } = string.Empty;
+
+        [Parameter] public RenderFragment SubtitleTemplate { get; set; }
+
+        [Parameter] public string Description { get; set; } = string.Empty;
+
+        [Parameter] public RenderFragment DescriptionTemplate { get; set; }
 
         [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 

components/switch/Switch.razor

@@ -19,25 +19,11 @@
     <span class="@($"{_prefixCls}-inner")">
         @if (CurrentValue)
         {
-            if (CheckedChildren.IsT0)
-            {
-                @(CheckedChildren.AsT0)
-            }
-            else
-            {
-                @(CheckedChildren.AsT1)
-            }
+            if (CheckedChildrenTemplate != null)@CheckedChildrenTemplate else @CheckedChildren
         }
         else
         {
-            if (UnCheckedChildren.IsT0)
-            {
-                @(UnCheckedChildren.AsT0)
-            }
-            else
-            {
-                @(UnCheckedChildren.AsT1)
-            }
+            if (UnCheckedChildrenTemplate != null)@UnCheckedChildrenTemplate else @UnCheckedChildren
         }
     </span>
 

components/switch/Switch.razor.cs

@@ -25,10 +25,16 @@ namespace AntDesign
         public EventCallback<bool> OnChange { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> CheckedChildren { get; set; }
+        public string CheckedChildren { get; set; } = string.Empty;
 
         [Parameter]
-        public OneOf<string, RenderFragment> UnCheckedChildren { get; set; }
+        public RenderFragment CheckedChildrenTemplate { get; set; }
+
+        [Parameter]
+        public string UnCheckedChildren { get; set; } = string.Empty;
+
+        [Parameter]
+        public RenderFragment UnCheckedChildrenTemplate { get; set; }
 
         private bool _clickAnimating = false;
 

components/table/Table.razor

@@ -17,17 +17,10 @@
         }
         <CascadingValue Value="@this" TValue="ITable">
             <div class="@ClassMapper.Class">
-                @if (@Title.IsT0 && !string.IsNullOrEmpty(Title.AsT0) || @Title.IsT1 && Title.AsT1 != null)
+                @if (TitleTemplate != null || Title != null)
                 {
                     <div class="ant-table-title">
-                        @if (Title.IsT0)
-                        {
-                            @Title.AsT0
-                        }
-                        else
-                        {
-                            @Title.AsT1
-                        }
+                        @if (TitleTemplate != null)@TitleTemplate else @Title
                     </div>
                 }
                 <div class="ant-table-container">
@@ -67,17 +60,10 @@
                         </div>
                     }
                 </div>
-                @if (@Footer.IsT0 && !string.IsNullOrEmpty(Footer.AsT0) || @Footer.IsT1 && Footer.AsT1 != null)
+                @if (FooterTemplate != null || Footer != null)
                 {
                     <div class="ant-table-footer">
-                        @if (Footer.IsT0)
-                        {
-                            @Footer.AsT0
-                        }
-                        else
-                        {
-                            @Footer.AsT1
-                        }
+                        @if (FooterTemplate != null)@FooterTemplate else @Footer
                     </div>
                 }
             </div>
@@ -152,7 +138,7 @@ RenderFragment<Table<TItem>> body = table =>
             var cacheKey = data.GetHashCode();
             if (!table._dataSourceCache.ContainsKey(cacheKey))
             {
-                table._dataSourceCache[cacheKey] = new RowData<TItem>(rowIndex,table.PageIndex, data);
+                table._dataSourceCache[cacheKey] = new RowData<TItem>(rowIndex, table.PageIndex, data);
             }
             var selected = table._dataSourceCache[cacheKey].Selected;
             <CascadingValue Value="@rowIndex" Name="RowIndex">

components/table/Table.razor.cs

@@ -34,10 +34,16 @@ namespace AntDesign
         public bool Loading { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Title { get; set; }
+        public string Title { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Footer { get; set; }
+        public RenderFragment TitleTemplate { get; set; }
+
+        [Parameter]
+        public string Footer { get; set; }
+
+        [Parameter]
+        public RenderFragment FooterTemplate { get; set; }
 
         [Parameter]
         public TableSize Size { get; set; }

components/transfer/Transfer.razor

@@ -2,7 +2,7 @@
 @inherits AntDomComponentBase
 
 <div class="@this.ClassMapper.Class">
-    <div class="ant-transfer-list @(Footer.Value!=null?FooterClass:"")" @onscroll="@(e=>HandleScroll(TransferDirection.Left,e))" style="@Style">
+    <div class="ant-transfer-list @((FooterTemplate != null || Footer != null)?FooterClass:"")" @onscroll="@(e=>HandleScroll(TransferDirection.Left,e))" style="@Style">
         <div class="ant-transfer-list-header">
             @if (ShowSelectAll)
             {
@@ -66,21 +66,14 @@
             </ul>
         </div>
         <div class="ant-transfer-list-footer">
-            @if (Footer.IsT0)
-            {
-                @Footer.AsT0
-            }
-            else if (Footer.IsT1)
-            {
-                @Footer.AsT1
-            }
+            @if (FooterTemplate != null)@FooterTemplate else @Footer
         </div>
     </div>
     <div class="ant-transfer-operation">
         <Button Disabled="@(_leftButtonDisabled||Disabled)" Size="@AntSizeLDSType.Small" Icon="left" Type="@ButtonType.Primary" OnClick="@(e=>MoveItem(e,TransferDirection.Left))">@Operations[0]</Button>
         <Button Disabled="@(_rightButtonDisabled||Disabled)" Size="@AntSizeLDSType.Small" Icon="right" Type="@ButtonType.Primary" OnClick="@(e=>MoveItem(e,TransferDirection.Right))">@Operations[1]</Button>
     </div>
-    <div class="ant-transfer-list @(Footer.Value!=null?FooterClass:"")" @onscroll="@(e => HandleScroll(TransferDirection.Right, e))" style="@Style">
+    <div class="ant-transfer-list @((FooterTemplate != null || Footer != null)?FooterClass:"")" @onscroll="@(e => HandleScroll(TransferDirection.Right, e))" style="@Style">
         <div class="ant-transfer-list-header">
             @if (ShowSelectAll)
             {
@@ -142,14 +135,7 @@
             </ul>
         </div>
         <div class="ant-transfer-list-footer">
-            @if (Footer.IsT0)
-            {
-                @Footer.AsT0
-            }
-            else if (Footer.IsT1)
-            {
-                @Footer.AsT1
-            }
+            @if (FooterTemplate != null)@FooterTemplate else @Footer
         </div>
     </div>
 </div>

components/transfer/Transfer.razor.cs

@@ -1,11 +1,11 @@
 using System;
-using Microsoft.AspNetCore.Components;
-using System.Threading.Tasks;
-using OneOf;
 using System.Collections;
 using System.Collections.Generic;
-using Microsoft.AspNetCore.Components.Web;
 using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using OneOf;
 
 namespace AntDesign
 {
@@ -55,7 +55,10 @@ namespace AntDesign
         public Func<TransferItem, OneOf<string, RenderFragment>> Render { get; set; }
 
         [Parameter]
-        public OneOf<string, RenderFragment> Footer { get; set; }
+        public string Footer { get; set; } = string.Empty;
+
+        [Parameter]
+        public RenderFragment FooterTemplate { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }

site/AntBlazor.Docs/Demos/Components/Badge/demo/Basic.razor

@@ -5,11 +5,14 @@
     <Badge Count="0" ShowZero>
         <a href="#" class="head-example" />
     </Badge>
-    @{
-        RenderFragment count = @<Icon Type="clock-circle" Fill="#f5222d"/>;
-    }
-    <Badge Count="@(count)">
-        <a href="#" class="head-example" />
+
+    <Badge>
+        <CountTemplate>
+            <Icon Type="clock-circle" Fill="#f5222d" />
+        </CountTemplate>
+        <ChildContent>
+            <a href="#" class="head-example" />
+        </ChildContent>
     </Badge>
 </div>
 

site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor

@@ -1,3 +1,12 @@
-<BadgeRibbon Text=@("Pushes open the window")>
+<BadgeRibbon Text="Pushes open the window">
     <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
+<BadgeRibbon >
+    <TextTemplate>
+        <Icon Type="windows" Theme="outline" />Pushes open the window
+    </TextTemplate>
+    <ChildContent>
+        <Card Bordered>And raises the spyglass.</Card>
+    </ChildContent>
 </BadgeRibbon>

site/AntBlazor.Docs/Demos/Components/Card/demo/Basic.razor

@@ -1,34 +1,45 @@
 <div>
-    <Card Bordered Title=@("Default size card")>
+    <Card Bordered Title="Default size card">
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
             <p>Card content</p>
-            <p>Card content</p>
-            <p>Card content</p>
         </Body>
     </Card>
-
-    <Card Bordered Size="small" Title=@("Small size card")>
+    <br />
+    <Card Bordered Size="small" Title="Small size card">
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
             <p>Card content</p>
-            <p>Card content</p>
+        </Body>
+    </Card>
+    <br />
+    <Card Bordered>
+        <TitleTemplate>
+            <Icon Type="credit-card" Theme="outline" /> Title is Template
+        </TitleTemplate>
+        <Extra>
+            <a>More</a>
+        </Extra>
+        <Body>
+            <p>Card content</p>
+        </Body>
+    </Card>
+    <br />
+    <Card Bordered Size="small" TitleTemplate="titleTemplate">
+        <Extra>
+            <a>More</a>
+        </Extra>
+        <Body>
             <p>Card content</p>
         </Body>
     </Card>
-
-
 </div>
-@code
-{
-    private RenderFragment actionSetting =@<Template>  <Icon Type="setting" /></Template>;
 
-    private RenderFragment actionEdit =@<Template><Icon Type="edit" /></Template>;
-
-    private RenderFragment actionEllipsis =@<Template> <Icon Type="ellipsis" /></Template>;
+@code{
+    RenderFragment titleTemplate =@<div><Icon Type="credit-card" Theme="outline" /> Title is Template</div>;
 
 }

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Accordion.razor

@@ -1,11 +1,11 @@
 <Collapse DefaultActiveKey="@(new[]{"1"})" Accordion>
-    <Panel Header=@("This is panel header 1") Key="1">
+    <Panel Header="This is panel header 1" Key="1">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 2") Key="2">
+    <Panel Header="This is panel header 2" Key="2">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 3") Key="3">
+    <Panel Header="This is panel header 3" Key="3">
         <p>@text</p>
     </Panel>
 </Collapse>

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Basic.razor

@@ -1,11 +1,16 @@
 <Collapse DefaultActiveKey="@(new[]{"1"})" OnChange="Callback">
-    <Panel Header=@("This is panel header 1") Key="1">
+    <Panel Header="This is panel header 1" Key="1">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 2") Key="2">
-        <p>@text</p>
+    <Panel Key="2">
+        <HeaderTemplate>
+            This is panel header 2
+        </HeaderTemplate>
+        <ChildContent>
+            <p>@text</p>
+        </ChildContent>
     </Panel>
-    <Panel Header=@("This is panel header 3") Key="3" Disabled>
+    <Panel Header="This is panel header 3" Key="3" Disabled>
         <p>@text</p>
     </Panel>
 </Collapse>

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Borderless.razor

@@ -1,11 +1,11 @@
 <Collapse DefaultActiveKey="@(new[]{"1"})" Bordered="false">
-    <Panel Header=@("This is panel header 1") Key="1">
+    <Panel Header="This is panel header 1" Key="1">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 2") Key="2">
+    <Panel Header="This is panel header 2" Key="2">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 3") Key="3">
+    <Panel Header="This is panel header 3" Key="3">
         <p>@text</p>
     </Panel>
 </Collapse>

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Custom.razor

@@ -1,20 +1,23 @@
-<Collapse
-    Bordered="false"
-    DefaultActiveKey="@(new[]{"1"})" 
-    ExpandIcon="expandIcon"
-    Class="site-collapse-custom-collapse">
-    <Panel Header=@("This is panel header 1") Key="1"
-           Class="site-collapse-custom-panel">
-        <p>@text</p>
-    </Panel>
-    <Panel Header=@("This is panel header 2") Key="2"
-           Class="site-collapse-custom-panel">
-        <p>@text</p>
-    </Panel>
-    <Panel Header=@("This is panel header 3") Key="3" 
-           Class="site-collapse-custom-panel">
-        <p>@text</p>
-    </Panel>
+<Collapse Bordered="false"
+          DefaultActiveKey="@(new[]{"1"})"
+          Class="site-collapse-custom-collapse">
+    <ExpandIconTemplate>
+        <Icon Type="caret-right" Rotate="@(context ? 90 : 0)"></Icon>
+    </ExpandIconTemplate>
+    <ChildContent>
+        <Panel Header="This is panel header 1" Key="1"
+               Class="site-collapse-custom-panel">
+            <p>@text</p>
+        </Panel>
+        <Panel Header="This is panel header 2" Key="2"
+               Class="site-collapse-custom-panel">
+            <p>@text</p>
+        </Panel>
+        <Panel Header="This is panel header 3" Key="3"
+               Class="site-collapse-custom-panel">
+            <p>@text</p>
+        </Panel>
+    </ChildContent>
 </Collapse>
 
 @code{
@@ -25,8 +28,6 @@ Known for its loyalty and faithfulness,
 it can be found as a welcome guest in many households across the world.
 ";
 
-    RenderFragment<bool> expandIcon = isActive => @<Icon Type="caret-right" Rotate="@(isActive ? 90 : 0)"></Icon>;
-
 }
 
 <style>

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Extra.razor

@@ -1,17 +1,21 @@
 <div>
-    <Collapse 
-        DefaultActiveKey="@(new[]{"1"})" 
-        OnChange="Callback"
-        ExpandIconPosition="@expandIconPosition"
-        >
-        <Panel Header=@("This is panel header 1") Key="1" Extra="@extra">
+    <Collapse DefaultActiveKey="@(new[] { "1" })"
+              OnChange="Callback"
+              ExpandIconPosition="@expandIconPosition"
+              ExpandIcon="caret-right">
+        <Panel Header="This is panel header 1" Key="1" ExtraTemplate="@extra">
             <div>@text</div>
         </Panel>
-        <Panel Header=@("This is panel header 2") Key="2" Extra="@extra">
+        <Panel Header="This is panel header 2" Key="2" ExtraTemplate="@extra">
             <div>@text</div>
         </Panel>
-        <Panel Header=@("This is panel header 3") Key="3" Extra="@extra">
-            <div>@text</div>
+        <Panel Header="This is panel header 3" Key="3">
+            <ExtraTemplate>
+                <div @onclick:stopPropagation><Icon Type="snippets" /></div>
+            </ExtraTemplate>
+            <ChildContent>
+                <div>@text</div>
+            </ChildContent>
         </Panel>
     </Collapse>
 </div>
@@ -25,11 +29,10 @@ it can be found as a welcome guest in many households across the world.
 
     RenderFragment extra =@<div @onclick:stopPropagation><Icon Type="setting"></Icon></div>;
 
-    string expandIconPosition = "left";
+        string expandIconPosition = "left";
 
-    void Callback(string[] key)
-    {
-        Console.WriteLine(key);
+        void Callback(string[] key)
+        {
+            Console.WriteLine(key);
+        }
     }
-}
-

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Mix.razor

@@ -1,15 +1,15 @@
 <Collapse OnChange="Callback">
-    <Panel Header=@("This is panel header 1") Key="1">
+    <Panel Header="This is panel header 1" Key="1">
         <Collapse DefaultActiveKey=@(new[]{"1"})>
-            <Panel Header=@("This is panel nest panel") Key="1">
+            <Panel Header="This is panel nest panel" Key="1">
                 <p>@text</p>
             </Panel>
         </Collapse>
     </Panel>
-    <Panel Header=@("This is panel header 2") Key="2">
+    <Panel Header="This is panel header 2" Key="2">
         <p>@text</p>
     </Panel>
-    <Panel Header=@("This is panel header 3") Key="3">
+    <Panel Header="This is panel header 3" Key="3">
         <p>@text</p>
     </Panel>
 </Collapse>

site/AntBlazor.Docs/Demos/Components/Collapse/demo/Noarrow.razor

@@ -1,8 +1,8 @@
 <Collapse DefaultActiveKey="@(new[]{"1"})" OnChange="Callback">
-    <Panel Header=@("This is panel header with arrow icon") Key="1">
+    <Panel Header="This is panel header with arrow icon" Key="1">
         <p>@text</p>
     </Panel>
-    <Panel ShowArrow="false" Header=@("This is panel header with no arrow icon") Key="2">
+    <Panel ShowArrow="false" Header="This is panel header with no arrow icon" Key="2">
         <p>@text</p>
     </Panel>
 </Collapse>

site/AntBlazor.Docs/Demos/Components/Comment/demo/Basic.razor

@@ -1,7 +1,7 @@
 <Comment Actions="@(new []{likeAction,dislikeAction,replyAction})"
-         Author="@("Han Solo")"
-         Avatar="@(@"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png")"
-         Content="@("We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.")"
+         Author="Han Solo"
+         Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+         Content="We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."
          Datetime="dateTime">
 </Comment>
 

site/AntBlazor.Docs/Demos/Components/Comment/demo/Editor.razor

@@ -3,11 +3,15 @@
     {
         <AntList DataSource="datas" TItem="Data" Header="@header">
             <Item Context="item">
-                <Comment Avatar="item.Avatar" Author="item.Author" Datetime="item.Datetime" Content="item.Content"></Comment>
+                <Comment Avatar="@item.Avatar" Author="@item.Author" Datetime="@item.Datetime" Content="@item.Content"></Comment>
             </Item>
         </AntList>
     }
-    <Comment Avatar="@(@"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png")" Content="@(GetEditor(@onSubmit))"></Comment>
+    <Comment Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
+        <ContentTemplate>
+            @GetEditor(@onSubmit)
+        </ContentTemplate>
+    </Comment>
 </div>
 
 

site/AntBlazor.Docs/Demos/Components/Comment/demo/List.razor

@@ -1,6 +1,6 @@
 <AntList DataSource="@datas" TItem="Data" Header="header" ClassName="comment-list">
     <Item Context="item">
-        <Comment Actions="item.Actions" Avatar="item.Avatar" Author="item.Author" Datetime="item.Datetime" Content="item.Content"></Comment>
+        <Comment Actions="@item.Actions" Avatar="@item.Avatar" Author="@item.Author" DatetimeTemplate="@item.Datetime" Content="@item.Content"></Comment>
     </Item>
 </AntList>
 

site/AntBlazor.Docs/Demos/Components/Comment/demo/Nested.razor

@@ -1,7 +1,7 @@
-<Comment Author="author" Avatar="avatar" Content="content" Actions="@(new []{replyAction})">
-    <Comment Author="author" Avatar="avatar" Content="content" Actions="@(new []{replyAction})">
-        <Comment Author="author" Avatar="avatar" Content="content" Actions="@(new []{replyAction})"/>
-        <Comment Author="author" Avatar="avatar" Content="content" Actions="@(new []{replyAction})"/>
+<Comment Author="@author" Avatar="@avatar" Content="@content" Actions="@(new []{replyAction})">
+    <Comment Author="@author" Avatar="@avatar" Content="@content" Actions="@(new []{replyAction})">
+        <Comment Author="@author" Avatar="@avatar" Content="@content" Actions="@(new []{replyAction})"/>
+        <Comment Author="@author" Avatar="@avatar" Content="@content" Actions="@(new []{replyAction})"/>
     </Comment>
 </Comment>
 

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Basic.razor

@@ -1,9 +1,9 @@
-<Descriptions Title="@("User Info")">
-    <DescriptionsItem Title="@("UserName")">Zhou Maomao</DescriptionsItem>
-    <DescriptionsItem Title="@("Telephone")">18100000000</DescriptionsItem>
-    <DescriptionsItem Title="@("Live")">Hangzhou, Zhejiang</DescriptionsItem>
-    <DescriptionsItem Title="@("Remark")">Empty</DescriptionsItem>
-    <DescriptionsItem Title="@("Address")">
+<Descriptions Title="User Info">
+    <DescriptionsItem Title="UserName">Zhou Maomao</DescriptionsItem>
+    <DescriptionsItem Title="Telephone">18100000000</DescriptionsItem>
+    <DescriptionsItem Title="Live">Hangzhou, Zhejiang</DescriptionsItem>
+    <DescriptionsItem Title="Remark">Empty</DescriptionsItem>
+    <DescriptionsItem Title="Address">
         No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
     </DescriptionsItem>
 </Descriptions>

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Border.razor

@@ -1,20 +1,20 @@
-<Descriptions Title="@("User Info")" Bordered>
-    <DescriptionsItem Title="@("Product")">Cloud Database</DescriptionsItem>
-    <DescriptionsItem Title="@("Billing Mode")">Prepaid</DescriptionsItem>
-    <DescriptionsItem Title="@("Automatic Renewal")">YES</DescriptionsItem>
-    <DescriptionsItem Title="@("Order Time")">
+<Descriptions Title="User Info" Bordered>
+    <DescriptionsItem Title="Product">Cloud Database</DescriptionsItem>
+    <DescriptionsItem Title="Billing Mode">Prepaid</DescriptionsItem>
+    <DescriptionsItem Title="Automatic Renewal">YES</DescriptionsItem>
+    <DescriptionsItem Title="Order Time">
         2018-04-24 18:00:00
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Usage Time")" Span="2">
+    <DescriptionsItem Title="Usage Time" Span="2">
         2018-04-24 18:00:00 To 2019-04-24 18:00:00
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Status")" Span="3">
+    <DescriptionsItem Title="Status" Span="3">
         <Badge Status="@BadgeStatus.Processing" Text="Running"></Badge>
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Negotiated Amount")">$80.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Discount")">$20.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Official Receipts")">$60.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Config Info")">
+    <DescriptionsItem Title="Negotiated Amount">$80.00</DescriptionsItem>
+    <DescriptionsItem Title="Discount">$20.00</DescriptionsItem>
+    <DescriptionsItem Title="Official Receipts">$60.00</DescriptionsItem>
+    <DescriptionsItem Title="Config Info">
         Data disk type: MongoDB
         <br />
         Database version: 3.4

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/CustomSize.razor

@@ -5,16 +5,16 @@
 </RadioGroup>
 <br />
 <br />
-<Descriptions Title="@("Custom Size")" Bordered Size="@size">
-    <DescriptionsItem Title="@("Product")">
+<Descriptions Title="Custom Size" Bordered Size="@size">
+    <DescriptionsItem Title="Product">
         Cloud Database
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Billing")">Prepaid</DescriptionsItem>
-    <DescriptionsItem Title="@("time")">18:00:00</DescriptionsItem>
-    <DescriptionsItem Title="@("Amount")">$80.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Discount")">$20.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Official")">$60.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Config Info")">
+    <DescriptionsItem Title="Billing">Prepaid</DescriptionsItem>
+    <DescriptionsItem Title="time">18:00:00</DescriptionsItem>
+    <DescriptionsItem Title="Amount">$80.00</DescriptionsItem>
+    <DescriptionsItem Title="Discount">$20.00</DescriptionsItem>
+    <DescriptionsItem Title="Official">$60.00</DescriptionsItem>
+    <DescriptionsItem Title="Config Info">
         Data disk type: MongoDB
         <br />
         Database version: 3.4

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Responsive.razor

@@ -1,13 +1,13 @@
-<Descriptions Title="@("Responsive Descriptions")" Bordered Column="@column">
-    <DescriptionsItem Title="@("Product")">
+<Descriptions Title="Responsive Descriptions" Bordered Column="@column">
+    <DescriptionsItem Title="Product">
         Cloud Database
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Billing")">Prepaid</DescriptionsItem>
-    <DescriptionsItem Title="@("time")">18:00:00</DescriptionsItem>
-    <DescriptionsItem Title="@("Amount")">$80.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Discount")">$20.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Official")">$60.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Config Info")">
+    <DescriptionsItem Title="Billing">Prepaid</DescriptionsItem>
+    <DescriptionsItem Title="time">18:00:00</DescriptionsItem>
+    <DescriptionsItem Title="Amount">$80.00</DescriptionsItem>
+    <DescriptionsItem Title="Discount">$20.00</DescriptionsItem>
+    <DescriptionsItem Title="Official">$60.00</DescriptionsItem>
+    <DescriptionsItem Title="Config Info">
         Data disk type: MongoDB
         <br />
         Database version: 3.4

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Vertical.razor

@@ -1,9 +1,9 @@
-<Descriptions Title="@("User Info")" Layout="@DescriptionsLayout.Vertical">
-    <DescriptionsItem Title="@("UserName")">Zhou Maomao</DescriptionsItem>
-    <DescriptionsItem Title="@("Telephone")">18100000000</DescriptionsItem>
-    <DescriptionsItem Title="@("Live")">Hangzhou, Zhejiang</DescriptionsItem>
-    <DescriptionsItem Title="@("Address")" Span="2">
+<Descriptions Title="User Info" Layout="@DescriptionsLayout.Vertical">
+    <DescriptionsItem Title="UserName">Zhou Maomao</DescriptionsItem>
+    <DescriptionsItem Title="Telephone">18100000000</DescriptionsItem>
+    <DescriptionsItem Title="Live">Hangzhou, Zhejiang</DescriptionsItem>
+    <DescriptionsItem Title="Address" Span="2">
         No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Remark")">Empty</DescriptionsItem>
+    <DescriptionsItem Title="Remark">Empty</DescriptionsItem>
 </Descriptions>

site/AntBlazor.Docs/Demos/Components/Descriptions/demo/VerticalBorder.razor

@@ -1,20 +1,20 @@
-<Descriptions Title="@("User Info")" Bordered Layout="@DescriptionsLayout.Vertical">
-    <DescriptionsItem Title="@("Product")">Cloud Database</DescriptionsItem>
-    <DescriptionsItem Title="@("Billing Mode")">Prepaid</DescriptionsItem>
-    <DescriptionsItem Title="@("Automatic Renewal")">YES</DescriptionsItem>
-    <DescriptionsItem Title="@("Order Time")">
+<Descriptions Title="User Info" Bordered Layout="@DescriptionsLayout.Vertical">
+    <DescriptionsItem Title="Product">Cloud Database</DescriptionsItem>
+    <DescriptionsItem Title="Billing Mode">Prepaid</DescriptionsItem>
+    <DescriptionsItem Title="Automatic Renewal">YES</DescriptionsItem>
+    <DescriptionsItem Title="Order Time">
         2018-04-24 18:00:00
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Usage Time")" Span="2">
+    <DescriptionsItem Title="Usage Time" Span="2">
         2018-04-24 18:00:00 To 2019-04-24 18:00:00
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Status")" Span="3">
+    <DescriptionsItem Title="Status" Span="3">
         <Badge Status="processing" Text="Running"></Badge>
     </DescriptionsItem>
-    <DescriptionsItem Title="@("Negotiated Amount")">$80.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Discount")">$20.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Official Receipts")">$60.00</DescriptionsItem>
-    <DescriptionsItem Title="@("Config Info")">
+    <DescriptionsItem Title="Negotiated Amount">$80.00</DescriptionsItem>
+    <DescriptionsItem Title="Discount">$20.00</DescriptionsItem>
+    <DescriptionsItem Title="Official Receipts">$60.00</DescriptionsItem>
+    <DescriptionsItem Title="Config Info">
         Data disk type: MongoDB
         <br />
         Database version: 3.4

site/AntBlazor.Docs/Demos/Components/Empty/demo/Customize.razor

@@ -1,9 +1,12 @@
-<Empty Image='"https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"'
+<Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
           ImageStyle='@("height: 60px")'
-          Description="customDescription">
-    <Button type="@ButtonType.Primary">Create Now</Button>
+        >
+    <DescriptionTemplate>
+        <span>Customize <a>Description</a></span>
+    </DescriptionTemplate>
+    <ChildContent>
+        <Button type="@ButtonType.Primary">Create Now</Button>
+    </ChildContent>
+
 </Empty>
 
-@code {
-    private RenderFragment customDescription =@<span>Customize <a>Description</a></span>;
-}

site/AntBlazor.Docs/Demos/Components/Empty/demo/Description.razor

@@ -1 +1 @@
-<Empty Description="@false" />
+<Empty Description="false" />

site/AntBlazor.Docs/Demos/Components/Empty/demo/Simple.razor

@@ -1 +1 @@
-<Empty Image="Empty.PRESENTED_IMAGE_SIMPLE" />
+<Empty Simple/>

site/AntBlazor.Docs/Demos/Components/Empty/demo/simple.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-可以通过设置 `image` 为 `Empty.PRESENTED_IMAGE_SIMPLE` 选择另一种风格的图片。
+可以通过设置 `Simple` 属性为 `true`，选择另一种风格的图片，这里实现与 Ant Design 不同。
 
 ## en-US
 
-You can choose another style of `image` by setting image to `Empty.PRESENTED_IMAGE_SIMPLE`.
+You can choose another style of `image` by setting `Simple` to `true`, here is different from Ant Design.

site/AntBlazor.Docs/Demos/Components/List/demo/Basic.razor

@@ -1,6 +1,6 @@
 <AntList DataSource="@data" TItem="BasicItem" OnItemClick="ItemClick">
     <Item Context="item">
-        <AntListItemMeta  Avatar="avatar" Description="Ant Design, a design language for background applications, is refined by Ant UED Team">
+        <AntListItemMeta Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" Description="Ant Design, a design language for background applications, is refined by Ant UED Team">
             <Title>
                 <a href="https://ng.ant.design">@item.Title</a>
             </Title>
@@ -11,15 +11,13 @@
 
 @code{
 
-    RenderFragment avatar = @<Avatar Src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
-
     public class BasicItem
     {
         public string Title { get; set; }
     }
 
     public List<BasicItem> data = new List<BasicItem>
-    {
+{
         new BasicItem { Title = "Ant Design Title 1"},
         new BasicItem { Title = "Ant Design Title 2"},
         new BasicItem { Title = "Ant Design Title 3"},

site/AntBlazor.Docs/Demos/Components/List/demo/Grid.razor

@@ -1,6 +1,6 @@
 <AntList Grid="gutter" DataSource="@Data">
     <Item Context="item">
-        <Card Bordered Title="@(item.Title)">
+        <Card Bordered Title="@item.Title">
             <Body>
                 Card context
             </Body>

site/AntBlazor.Docs/Demos/Components/List/demo/Loadmore.razor

@@ -2,7 +2,7 @@
 
 <AntList Class="demo-loadmore-list" DataSource="@Data" ItemLayout="AntDirectionVHType.Horizontal" Loading="@InitLoading" Actions="actions">
     <Item Context="item">
-        <AntListItemMeta Avatar="avatar" Description="Ant Design, a design language for background applications, is refined by Ant UED Team">
+        <AntListItemMeta Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" Description="Ant Design, a design language for background applications, is refined by Ant UED Team">
             <Title>
                 <a href="https://ant.design">@item.Name.Last</a>
             </Title>
@@ -35,76 +35,75 @@
 
 @code {
 
-    RenderFragment avatar =@<Avatar Src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
 
-RenderFragment edit = @<a key="list-loadmore-edit">edit</a>;
+    RenderFragment edit = @<a key="list-loadmore-edit">edit</a>;
 
-RenderFragment add = @<a key="list-loadmore-more">more</a>;
+    RenderFragment add = @<a key="list-loadmore-more">more</a>;
 
 
-public List<RenderFragment> actions { get { return new List<RenderFragment> { edit, add }; } }
+        public List<RenderFragment> actions { get { return new List<RenderFragment> { edit, add }; } }
 
-public int count = 3;
+        public int count = 3;
 
-public string FakeDataUrl { get { return $"https://randomuser.me/api/?results={count}&inc=name,gender,email,nat&noinfo"; } }
+        public string FakeDataUrl { get { return $"https://randomuser.me/api/?results={count}&inc=name,gender,email,nat&noinfo"; } }
 
-public List<DataModel> Data { get; set; }
+        public List<DataModel> Data { get; set; }
 
-public bool InitLoading { get; set; } = true;
+        public bool InitLoading { get; set; } = true;
 
-public bool Loading { get; set; } = false;
+        public bool Loading { get; set; } = false;
 
-protected override async Task OnInitializedAsync()
-{
-Data = await GetData();
-InitLoading = false;
-await base.OnInitializedAsync();
-}
+        protected override async Task OnInitializedAsync()
+        {
+            Data = await GetData();
+            InitLoading = false;
+            await base.OnInitializedAsync();
+        }
 
-public async Task OnLoadMore()
-{
-Loading = true;
-var res = await GetData();
-Data.AddRange(res);
-Loading = false;
-}
+        public async Task OnLoadMore()
+        {
+            Loading = true;
+            var res = await GetData();
+            Data.AddRange(res);
+            Loading = false;
+        }
 
-public async Task<List<DataModel>> GetData()
-{
-try
-{
-var res = await HttpClient.GetFromJsonAsync<Response>(FakeDataUrl);
-return res.Results;
-}
-catch (Exception ex)
-{
-Console.WriteLine(ex);
-return new List<DataModel>();
-}
-}
+        public async Task<List<DataModel>> GetData()
+        {
+            try
+            {
+                var res = await HttpClient.GetFromJsonAsync<Response>(FakeDataUrl);
+                return res.Results;
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine(ex);
+                return new List<DataModel>();
+            }
+        }
 
-public class Response
-{
-public List<DataModel> Results { get; set; }
-}
+        public class Response
+        {
+            public List<DataModel> Results { get; set; }
+        }
 
-public class DataModel
-{
-public string Gender { get; set; }
+        public class DataModel
+        {
+            public string Gender { get; set; }
 
-public Name Name { get; set; }
+            public Name Name { get; set; }
 
-public string Email { get; set; }
+            public string Email { get; set; }
 
-public string Nat { get; set; }
-}
+            public string Nat { get; set; }
+        }
 
-public class Name
-{
-public string Title { get; set; }
+        public class Name
+        {
+            public string Title { get; set; }
 
-public string First { get; set; }
+            public string First { get; set; }
 
-public string Last { get; set; }
-}
-}
+            public string Last { get; set; }
+        }
+    }

site/AntBlazor.Docs/Demos/Components/List/demo/Resposive.razor

@@ -1,8 +1,8 @@
 <AntList Grid="gutter" DataSource="@Data">
     <Item Context="item">
-        <Card Bordered Title="@(item.Title)">
+        <Card Bordered Title="@item.Title">
             <Body>
-            Card context
+                Card context
             </Body>
         </Card>
     </Item>
@@ -23,7 +23,7 @@
     };
 
     public List<BasicItem> Data = new List<BasicItem>
-    {
+{
         new BasicItem { Title = "Title 1"},
         new BasicItem { Title = "Title 2"},
         new BasicItem { Title = "Title 3"},

site/AntBlazor.Docs/Demos/Components/List/demo/Vertical.razor

@@ -2,7 +2,7 @@
 
 <AntList DataSource="@ListData" ItemLayout="@AntDirectionVHType.Vertical" Extra="@extra">
     <Item Context="item">
-        <AntListItemMeta Avatar="@avatar" Description="@item.Description">
+        <AntListItemMeta Avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" Description="@item.Description">
             <Title>
                 <a href="@item.Href">@item.Title</a>
             </Title>
@@ -18,8 +18,6 @@
 
 @code {
 
-    RenderFragment avatar =@<Avatar Src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
-
     RenderFragment extra = @<img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />;
 
     public int count = 3;

site/AntBlazor.Docs/Demos/Components/Menu/demo/Horizontal.razor

@@ -4,17 +4,17 @@
         Navigation One
     </MenuItem>
     <MenuItem Key="app" Disabled>
-        <Icon Type="appstore" Theme="outline" ></Icon>
+        <Icon Type="appstore" Theme="outline"></Icon>
         Navigation Two
     </MenuItem>
-    <SubMenu Title=sub1Title>
-        <MenuItemGroup Title=@("Item 1")>
+    <SubMenu TitleTemplate=@sub1Title>
+        <MenuItemGroup Title="Item 1">
             <MenuItem Key="setting:1">Option 1</MenuItem>
-                <MenuItem Key="setting:2">Option 2</MenuItem>
+            <MenuItem Key="setting:2">Option 2</MenuItem>
         </MenuItemGroup>
-        <MenuItemGroup Title=@("Item 2")>
-                <MenuItem Key="setting:3">Option 3</MenuItem>
-                <MenuItem Key="setting:4">Option 4</MenuItem>
+        <MenuItemGroup Title="Item 2">
+            <MenuItem Key="setting:3">Option 3</MenuItem>
+            <MenuItem Key="setting:4">Option 4</MenuItem>
         </MenuItemGroup>
     </SubMenu>
     <MenuItem Key="alipay">
@@ -27,8 +27,8 @@
 @code
 {
     RenderFragment sub1Title =
-        @<Template>
-            <Icon Type="setting" Theme="outline"></Icon>
-            Navigation Three - Submenu
-        </Template>;
+    @<Template>
+        <Icon Type="setting" Theme="outline"></Icon>
+        Navigation Three - Submenu
+    </Template>;
 }

site/AntBlazor.Docs/Demos/Components/Menu/demo/Inline.razor

@@ -1,26 +1,26 @@
 <Menu Style="width: 256px;"
-      DefaultSelectedKeys=@(new[]{"1"})
-      DefaultOpenKeys=@(new[]{"sub1"})
+      DefaultSelectedKeys=@(new[] { "1" })
+      DefaultOpenKeys=@(new[] { "sub1" })
       Mode=@MenuMode.Inline>
-    <SubMenu Key="sub1" Title=sub1Title>
-        <MenuItemGroup Key="g1" Title=@("Item 1")>
+    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
+        <MenuItemGroup Key="g1" Title="Item 1">
             <MenuItem Key="1">Option 1</MenuItem>
             <MenuItem Key="2">Option 2</MenuItem>
         </MenuItemGroup>
-        <MenuItemGroup Key="g2" Title=@("Iem 2")>
+        <MenuItemGroup Key="g2" Title="Item 2">
             <MenuItem Key="3">Option 3</MenuItem>
             <MenuItem Key="4">Option 4</MenuItem>
         </MenuItemGroup>
     </SubMenu>
-    <SubMenu Key="sub2" Title=sub2Title>
+    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
         <MenuItem Key="5">Option 5</MenuItem>
         <MenuItem Key="6">Option 6</MenuItem>
-        <SubMenu Key="sub3" Title=@("Submenu")>
+        <SubMenu Key="sub3" Title="Submenu">
             <MenuItem Key="7">Option 7</MenuItem>
             <MenuItem Key="8">Option 8</MenuItem>
         </SubMenu>
     </SubMenu>
-    <SubMenu Key="sub4" Title=sub4Title>
+    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
         <MenuItem Key="9">Option 9</MenuItem>
         <MenuItem Key="10">Option 10</MenuItem>
         <MenuItem Key="11">Option 11</MenuItem>
@@ -36,15 +36,15 @@
         <span>Navigation One</span>
     </span>;
 
-RenderFragment sub2Title =
-@<span>
-    <Icon Type="appstore" Theme="outline"></Icon>
-    <span>Navigation Two</span>
-</span>;
+    RenderFragment sub2Title =
+    @<span>
+        <Icon Type="appstore" Theme="outline"></Icon>
+        <span>Navigation Two</span>
+    </span>;
 
-RenderFragment sub4Title =
-@<span>
-    <Icon Type="setting" Theme="outline"></Icon>
-    <span>Navigation Three</span>
-</span>;
-}
+    RenderFragment sub4Title =
+    @<span>
+        <Icon Type="setting" Theme="outline"></Icon>
+        <span>Navigation Three</span>
+    </span>;
+    }

site/AntBlazor.Docs/Demos/Components/Menu/demo/InlineCollapsed.razor

@@ -2,20 +2,18 @@
     <Button Type="primary" OnClick="ToggleCollapsed" Style="margin-bottom: 16px">
         @if (collapsed)
         {
-            <Icon  Type="menu-unfold" Theme="outline"></Icon>
+            <Icon Type="menu-unfold" Theme="outline"></Icon>
         }
         else
         {
-            <Icon  Type="menu-fold" Theme="outline"></Icon>
+            <Icon Type="menu-fold" Theme="outline"></Icon>
         }
     </Button>
-    <Menu
-        DefaultSelectedKeys=@(new[]{"1"})
-        DefaultOpenKeys=@(new[]{"sub1"})
-        Mode=MenuMode.Inline
-        Theme=MenuTheme.Dark
-        InlineCollapsed=collapsed
-    >
+    <Menu DefaultSelectedKeys=@(new[] { "1" })
+          DefaultOpenKeys=@(new[] { "sub1" })
+          Mode=MenuMode.Inline
+          Theme=MenuTheme.Dark
+          InlineCollapsed=collapsed>
         <MenuItem Key="1">
             <Icon Type="pie-chart" Theme="outline"></Icon>
             <span>Option 1</span>
@@ -28,19 +26,19 @@
             <Icon Type="container" Theme="outline"></Icon>
             <span>Option 3</span>
         </MenuItem>
-        <SubMenu Key="sub1" Title=sub1Title >
-        <MenuItem Key="5">Option 5</MenuItem>
-        <MenuItem Key="6">Option 6</MenuItem>
-        <MenuItem Key="7">Option 7</MenuItem>
-        <MenuItem Key="8">Option 8</MenuItem>
-        </SubMenu>
-        <SubMenu Key="sub2" Title=sub2Title>
-        <MenuItem Key="9">Option 9</MenuItem>
-        <MenuItem Key="10">Option 10</MenuItem>
-        <SubMenu Key="sub3" Title=@("Submenu")>
-            <MenuItem Key="11">Option 11</MenuItem>
-            <MenuItem Key="12">Option 12</MenuItem>
+        <SubMenu Key="sub1" TitleTemplate=@sub1Title>
+            <MenuItem Key="5">Option 5</MenuItem>
+            <MenuItem Key="6">Option 6</MenuItem>
+            <MenuItem Key="7">Option 7</MenuItem>
+            <MenuItem Key="8">Option 8</MenuItem>
         </SubMenu>
+        <SubMenu Key="sub2" TitleTemplate=@sub2Title>
+            <MenuItem Key="9">Option 9</MenuItem>
+            <MenuItem Key="10">Option 10</MenuItem>
+            <SubMenu Key="sub3" Title="Submenu">
+                <MenuItem Key="11">Option 11</MenuItem>
+                <MenuItem Key="12">Option 12</MenuItem>
+            </SubMenu>
         </SubMenu>
     </Menu>
 </div>
@@ -49,19 +47,19 @@
     bool collapsed = false;
 
     RenderFragment sub1Title =
-        @<span>
-            <Icon Type="mail" Theme="outline"></Icon>
-            <span>Navigation One</span>
-        </span>;
+    @<span>
+        <Icon Type="mail" Theme="outline"></Icon>
+        <span>Navigation One</span>
+    </span>;
 
     RenderFragment sub2Title =
-        @<span>
-            <Icon Type="appstore" Theme="outline"></Icon>
-            <span>Navigation Two</span>
-        </span>;
+    @<span>
+        <Icon Type="appstore" Theme="outline"></Icon>
+        <span>Navigation Two</span>
+    </span>;
 
-    void ToggleCollapsed()
-    {
-        collapsed = !collapsed;
+        void ToggleCollapsed()
+        {
+            collapsed = !collapsed;
+        }
     }
-}

site/AntBlazor.Docs/Demos/Components/Menu/demo/Router.razor

@@ -8,10 +8,10 @@
 
 <div style="width: 256px;">
     <Menu Mode="MenuMode.Inline">
-        <SubMenu Title=@("Sub Menu1")>
+        <SubMenu Title="Sub Menu1">
             <MenuItem RouterLink="/en-US/components/menu" RouterMatch="NavLinkMatch.All">English Menu Document</MenuItem>
         </SubMenu>
-        <SubMenu Title=@("Sub Menu2")>
+        <SubMenu Title="Sub Menu2">
             <MenuItem RouterLink="/zh-CN/components/menu" RouterMatch="NavLinkMatch.All">Chinese Menu Document</MenuItem>
         </SubMenu>
     </Menu>

site/AntBlazor.Docs/Demos/Components/Menu/demo/SiderCurrent.razor

@@ -2,21 +2,21 @@
       OpenKeys=this.openKeys
       OnOpenChange=this.onOpenChange
       Style="width:256px ;">
-    <SubMenu Key="sub1" Title=sub1Title>
+    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
         <MenuItem Key="1">Option 1</MenuItem>
         <MenuItem Key="2">Option 2</MenuItem>
         <MenuItem Key="3">Option 3</MenuItem>
         <MenuItem Key="4">Option 4</MenuItem>
     </SubMenu>
-    <SubMenu Key="sub2" Title=sub2Title>
+    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
         <MenuItem Key="5">Option 5</MenuItem>
         <MenuItem Key="6">Option 6</MenuItem>
-        <SubMenu Key="sub3" Title=@("Submenu")>
+        <SubMenu Key="sub3" Title="Submenu">
             <MenuItem Key="7">Option 7</MenuItem>
             <MenuItem Key="8">Option 8</MenuItem>
         </SubMenu>
     </SubMenu>
-    <SubMenu Key="sub4" Title=sub4Title>
+    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
         <MenuItem Key="9">Option 9</MenuItem>
         <MenuItem Key="10">Option 10</MenuItem>
         <MenuItem Key="11">Option 11</MenuItem>

site/AntBlazor.Docs/Demos/Components/Menu/demo/SwitchMode.razor

@@ -17,15 +17,15 @@
             <Icon Type="calendar" Theme="outline"></Icon>
             Navigation Two
         </MenuItem>
-        <SubMenu Key="sub1" Title=sub1Title>
+        <SubMenu Key="sub1" TitleTemplate=@sub1Title>
             <MenuItem Key="3">Option 3</MenuItem>
             <MenuItem Key="4">Option 4</MenuItem>
-            <SubMenu Key="sub1-2" Title=@("Submenu")>
+            <SubMenu Key="sub1-2" Title="Submenu">
                 <MenuItem Key="5">Option 5</MenuItem>
                 <MenuItem Key="6">Option 6</MenuItem>
             </SubMenu>
         </SubMenu>
-        <SubMenu Key="sub2" Title=sub2Title>
+        <SubMenu Key="sub2" TitleTemplate=@sub2Title>
             <MenuItem Key="7">Option 7</MenuItem>
             <MenuItem Key="8">Option 8</MenuItem>
             <MenuItem Key="9">Option 9</MenuItem>
@@ -61,4 +61,4 @@
         this.theme = value ? MenuTheme.Dark : MenuTheme.Light;
     }
 
-}
+}

site/AntBlazor.Docs/Demos/Components/Menu/demo/Theme.razor

@@ -8,21 +8,21 @@
           DefaultOpenKeys=@(new []{"sub1"})
           SelectedKeys=@(new []{current})
           Mode="MenuMode.Inline">
-        <SubMenu Key="sub1" Title=sub1Title>
+        <SubMenu Key="sub1" TitleTemplate=@sub1Title>
             <MenuItem Key="1">Option 1</MenuItem>
             <MenuItem Key="2">Option 2</MenuItem>
             <MenuItem Key="3">Option 3</MenuItem>
             <MenuItem Key="4">Option 4</MenuItem>
         </SubMenu>
-        <SubMenu Key="sub2" Title=sub2Title>
+        <SubMenu Key="sub2" TitleTemplate=@sub2Title>
             <MenuItem Key="5">Option 5</MenuItem>
             <MenuItem Key="6">Option 6</MenuItem>
-            <SubMenu Key="sub3" Title="@("Submenu")">
+            <SubMenu Key="sub3" Title="Submenu">
                 <MenuItem Key="7">Option 7</MenuItem>
                 <MenuItem Key="8">Option 8</MenuItem>
             </SubMenu>
         </SubMenu>
-        <SubMenu Key="sub4" Title=sub4Title>
+        <SubMenu Key="sub4" TitleTemplate=@sub4Title>
             <MenuItem Key="9">Option 9</MenuItem>
             <MenuItem Key="10">Option 10</MenuItem>
             <MenuItem Key="11">Option 11</MenuItem>

site/AntBlazor.Docs/Demos/Components/Menu/demo/Vertical.razor

@@ -1,52 +1,52 @@
 <Menu OnMenuItemClicked=handleClick Style=" width: 256px" Mode=MenuMode.Vertical>
-    <SubMenu Key="sub1" Title=sub1Title>
-    <MenuItemGroup Title=@("Item 1")>
-        <MenuItem Key="1">Option 1</MenuItem>
-        <MenuItem Key="2">Option 2</MenuItem>
-    </MenuItemGroup>
-    <MenuItemGroup Title=@("Item 2")>
-        <MenuItem Key="3">Option 3</MenuItem>
-        <MenuItem Key="4">Option 4</MenuItem>
-    </MenuItemGroup>
+    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
+        <MenuItemGroup Title="Item 1">
+            <MenuItem Key="1">Option 1</MenuItem>
+            <MenuItem Key="2">Option 2</MenuItem>
+        </MenuItemGroup>
+        <MenuItemGroup Title="Item 2">
+            <MenuItem Key="3">Option 3</MenuItem>
+            <MenuItem Key="4">Option 4</MenuItem>
+        </MenuItemGroup>
     </SubMenu>
-    <SubMenu Key="sub2"  Title=sub2Title >
-    <MenuItem Key="5">Option 5</MenuItem>
-    <MenuItem Key="6">Option 6</MenuItem>
-    <SubMenu Key="sub3" Title=@("Submenu")>
-        <MenuItem Key="7">Option 7</MenuItem>
-        <MenuItem Key="8">Option 8</MenuItem>
+    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
+        <MenuItem Key="5">Option 5</MenuItem>
+        <MenuItem Key="6">Option 6</MenuItem>
+        <SubMenu Key="sub3" Title="Submenu">
+            <MenuItem Key="7">Option 7</MenuItem>
+            <MenuItem Key="8">Option 8</MenuItem>
+        </SubMenu>
     </SubMenu>
-    </SubMenu>
-    <SubMenu Key="sub4" Title=sub4Title >
-    <MenuItem Key="9">Option 9</MenuItem>
-    <MenuItem Key="10">Option 10</MenuItem>
-    <MenuItem Key="11">Option 11</MenuItem>
-    <MenuItem Key="12">Option 12</MenuItem>
+    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
+        <MenuItem Key="9">Option 9</MenuItem>
+        <MenuItem Key="10">Option 10</MenuItem>
+        <MenuItem Key="11">Option 11</MenuItem>
+        <MenuItem Key="12">Option 12</MenuItem>
     </SubMenu>
 </Menu>
 @code {
 
     RenderFragment sub1Title =
-        @<span>
-            <Icon Type="mail" Theme="outline"></Icon>
-            <span>Navigation One</span>
-        </span>;
+    @<span>
+        <Icon Type="mail" Theme="outline"></Icon>
+        <span>Navigation One</span>
+    </span>;
 
     RenderFragment sub2Title =
-        @<span>
-            <Icon Type="appstore" Theme="outline"></Icon>
-            <span>Navigation Two</span>
-        </span>;
+    @<span>
+        <Icon Type="appstore" Theme="outline"></Icon>
+        <span>Navigation Two</span>
+    </span>;
 
     RenderFragment sub4Title =
-        @<span>
-            <Icon Type="setting" Theme="outline"></Icon>
-            <span>Navigation Three</span>
-        </span>;
+    @<span>
+        <Icon Type="setting" Theme="outline"></Icon>
+        <span>Navigation Three</span>
+    </span>;
 
 
-    void handleClick()
-    {
+        void handleClick()
+        {
 
+        }
     }
-}

site/AntBlazor.Docs/Demos/Components/Modal/demo/Confirm_Service.razor

@@ -1,5 +1,9 @@
 @inject MessageService _message
 @inject ConfirmService _confirmService
+
+
+<Divider>Buttons</Divider>
+
 <Space>
     <SpaceItem>
         <Button OnClick="@(async ()=> { await ShowConfirm(ConfirmButtons.OK); })">OK</Button>
@@ -35,6 +39,39 @@
 
 </Space>
 
+<Divider>Icon</Divider>
+
+<Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.Error))">Error</Button>
+    </SpaceItem>
+</Space>
+<Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.Info))">Info</Button>
+    </SpaceItem>
+</Space>   
+ <Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.None))">None</Button>
+    </SpaceItem>
+</Space>   
+ <Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.Question))">Question</Button>
+    </SpaceItem>
+</Space>  
+  <Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.Success))">Success</Button>
+    </SpaceItem>
+</Space>  
+  <Space>
+    <SpaceItem>
+        <Button OnClick="@(async ()=> await ShowConfirmIcon(ConfirmIcon.Warning))">Warning</Button>
+    </SpaceItem>
+</Space>
+
 @code{
 
     private async Task ShowConfirm(ConfirmButtons confirmButtons)
@@ -46,6 +83,15 @@
         var _ = _message.Info($"{confirmResult} button is clicked", 2);
     }
 
+    private async Task ShowConfirmIcon(ConfirmIcon confirmIcon)
+    {
+        var content = "You can set different icons";
+        var title = confirmIcon.ToString();
+        var confirmResult = await _confirmService.Show(content, title, ConfirmButtons.OK, confirmIcon);
+
+        var _ = _message.Info($"{confirmResult} button is clicked", 2);
+    }
+
     private async Task ShowAbortRetryIgnore()
     {
         var content = "Here is from ConfirmService, you can get which button is click from result";

site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Actions.razor

@@ -8,11 +8,11 @@
     </PageHeaderExtra>
     <PageHeaderContent>
         <Descriptions Size="small" Column="3">
-            <DescriptionsItem Title="@("Created")" Span="1">Lili Qu</DescriptionsItem>
-            <DescriptionsItem Title="@("Association")" Span="1"><a>421421</a></DescriptionsItem>
-            <DescriptionsItem Title="@("Creation Time")" Span="1">2017-01-10</DescriptionsItem>
-            <DescriptionsItem Title="@("Effective Time")" Span="1">2017-10-10</DescriptionsItem>
-            <DescriptionsItem Title="@("Remarks")" Span="2">
+            <DescriptionsItem Title="Created" Span="1">Lili Qu</DescriptionsItem>
+            <DescriptionsItem Title="Association" Span="1"><a>421421</a></DescriptionsItem>
+            <DescriptionsItem Title="Creation Time" Span="1">2017-01-10</DescriptionsItem>
+            <DescriptionsItem Title="Effective Time" Span="1">2017-10-10</DescriptionsItem>
+            <DescriptionsItem Title="Remarks" Span="2">
                 Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
             </DescriptionsItem>
         </Descriptions>
@@ -32,9 +32,9 @@
     </PageHeaderExtra>
     <PageHeaderContent>
         <Row Type="flex">
-            <Statistic Title="@("Status")" Value=@("Pending")></Statistic>
-            <Statistic Title="@("Price")" Value="568.08" Prefix="@("$")" Style="margin: 0 32px"></Statistic>
-            <Statistic Title="@("Balance")" Value="3345.08" Prefix="@("$")"></Statistic>
+            <Statistic Title="Status" Value=@("Pending")></Statistic>
+            <Statistic Title="Price" Value="568.08" Prefix="$" Style="margin: 0 32px"></Statistic>
+            <Statistic Title="Balance" Value="3345.08" Prefix="$"></Statistic>
         </Row>
     </PageHeaderContent>
 </PageHeader>

site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Basic.razor

@@ -1,12 +1,12 @@
-<PageHeader Class="site-page-header" Title="@_title" Subtitle="@("This is a subtitle")" />
+<PageHeader Class="site-page-header" Title="@_title" Subtitle="This is a subtitle" />
 <br />
-<PageHeader Class="site-page-header" Title="@_title" Subtitle="@("Custom `OnBack` callback")" OnBack="@(()=> { Console.WriteLine("OnBack");})" />
+<PageHeader Class="site-page-header" Title="@_title" Subtitle="Custom `OnBack` callback" OnBack="@(()=> { Console.WriteLine("OnBack");})" />
 <br />
-<PageHeader Class="site-page-header" Title="@_title" Subtitle="@("Custom Icon")" BackIcon="@("backward")" />
+<PageHeader Class="site-page-header" Title="@_title" Subtitle="Custom Icon" BackIcon="@("backward")" />
 <br />
-<PageHeader Class="site-page-header" Title="@_title" Subtitle="@("Custom Icon and `OnBack` callback")" BackIcon="icon" OnBack="@(()=> { Console.WriteLine("OnBack");})" />
+<PageHeader Class="site-page-header" Title="@_title" Subtitle="Custom Icon and `OnBack` callback" BackIconTemplate="icon" OnBack="@(()=> { Console.WriteLine("OnBack");})" />
 @code{
     private string _title = "Title";
 
     RenderFragment icon =@<Icon Type="backward" />;
-}
+}

site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Ghost.razor

@@ -9,11 +9,11 @@
         </PageHeaderExtra>
         <PageHeaderContent>
             <Descriptions Size="small" Column="3">
-                <DescriptionsItem Title="@("Created")" Span="1">Lili Qu</DescriptionsItem>
-                <DescriptionsItem Title="@("Association")" Span="1"><a>421421</a></DescriptionsItem>
-                <DescriptionsItem Title="@("Creation Time")" Span="1">2017-01-10</DescriptionsItem>
-                <DescriptionsItem Title="@("Effective Time")" Span="1">2017-10-10</DescriptionsItem>
-                <DescriptionsItem Title="@("Remarks")" Span="2">
+                <DescriptionsItem Title="Created" Span="1">Lili Qu</DescriptionsItem>
+                <DescriptionsItem Title="Association" Span="1"><a>421421</a></DescriptionsItem>
+                <DescriptionsItem Title="Creation Time" Span="1">2017-01-10</DescriptionsItem>
+                <DescriptionsItem Title="Effective Time" Span="1">2017-10-10</DescriptionsItem>
+                <DescriptionsItem Title="Remarks" Span="2">
                     Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
                 </DescriptionsItem>
             </Descriptions>

site/AntBlazor.Docs/Demos/Components/PageHeader/demo/PageHeaderBreadcrumb.razor

@@ -1,4 +1,4 @@
-<PageHeader Class="site-page-header" Title="@_title" Subtitle="@_subtitle">
+<PageHeader Class="site-page-header" Title="Title" Subtitle="This is a subtitle">
     <PageHeaderBreadcrumb>
         <Breadcrumb>
             <BreadcrumbItem>First-level Menu</BreadcrumbItem>
@@ -8,12 +8,4 @@
             <BreadcrumbItem>Third-level Menu</BreadcrumbItem>
         </Breadcrumb>
     </PageHeaderBreadcrumb>
-</PageHeader>
-
-@code{
-
-    private string _title = "Title";
-
-    private string _subtitle = "This is a subtitle";
-
-}
+</PageHeader>

site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Responsive.razor

@@ -10,19 +10,19 @@
         <div class="pageheader-content">
             <div class="pageheader-main">
                 <Descriptions Size="small" Column="2">
-                    <DescriptionsItem Title="@("Created")" Span="1">Lili Qu</DescriptionsItem>
-                    <DescriptionsItem Title="@("Association")" Span="1"><a>421421</a></DescriptionsItem>
-                    <DescriptionsItem Title="@("Creation Time")" Span="1">2017-01-10</DescriptionsItem>
-                    <DescriptionsItem Title="@("Effective Time")" Span="1">2017-10-10</DescriptionsItem>
-                    <DescriptionsItem Title="@("Remarks")" Span="2">
+                    <DescriptionsItem Title="Created" Span="1">Lili Qu</DescriptionsItem>
+                    <DescriptionsItem Title="Association" Span="1"><a>421421</a></DescriptionsItem>
+                    <DescriptionsItem Title="Creation Time" Span="1">2017-01-10</DescriptionsItem>
+                    <DescriptionsItem Title="Effective Time" Span="1">2017-10-10</DescriptionsItem>
+                    <DescriptionsItem Title="Remarks" Span="2">
                         Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
                     </DescriptionsItem>
                 </Descriptions>
             </div>
             <div class="pageheader-extra">
                 <div>
-                    <Statistic Title="@("Status")" Value=@("Pending")></Statistic>
-                    <Statistic Title="@("Price")" Value="568.08" Prefix="@("$")" Style="margin: 0 32px"></Statistic>
+                    <Statistic Title="Status" Value="@("Pending")"></Statistic>
+                    <Statistic Title="Price" Value="568.08" Prefix="$" Style="margin: 0 32px"></Statistic>
                 </div>
             </div>
         </div>

site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Basic.razor

@@ -1,6 +1,6 @@
 @inject MessageService _message
 
-<Popconfirm Title="@("Are you sure delete this task?")"
+<Popconfirm Title="Are you sure delete this task?"
             OnConfirm="Confirm"
             OnCancel="Cancel"
             OkText="Yes"

site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/DynamicTrigger.razor

@@ -1,7 +1,7 @@
 @inject MessageService _message
 
 <div>
-    <Popconfirm Title="@("Are you sure delete this task?")"
+    <Popconfirm Title="Are you sure delete this task?"
                 Visible="_visible"
                 OnVisibleChange="OnVisibleChange"
                 OnConfirm="Confirm"

site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Icon.razor

@@ -1,5 +1,10 @@
-<Popconfirm Title="@("Are you sure£¿")" 
-            Icon="_icon">
+<Popconfirm Title="Are you sure？"
+            Icon="close-circle">
+    <a>Delete</a>
+</Popconfirm>
+<br />
+<Popconfirm Title="Are you sure？"
+            IconTemplate="@_icon">
     <a>Delete</a>
 </Popconfirm>
 
@@ -7,4 +12,4 @@
 
     private RenderFragment _icon = @<AntDesign.Icon Type="question-circle" Fill="outline" Style="@("color: 'red'")"/>;
 
-}
+}

site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Locale.razor

@@ -1,3 +1,3 @@
-<Popconfirm Title="@("Are you sure£¿")" OkText="Yes" CancelText="No">
+<Popconfirm Title="Are you sure£¿" OkText="Yes" CancelText="No">
     <a>Delete</a>
 </Popconfirm>

site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Placement.razor

@@ -2,46 +2,46 @@
 
 <div class="demo">
     <div style="margin-left: @($"{ButtonWidth}px"); white-space: nowrap;">
-        <Popconfirm Placement="@PlacementType.TopLeft" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.TopLeft" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>TL</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.Top" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.Top" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>Top</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.TopRight" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.TopRight" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>TR</Button>
         </Popconfirm>
     </div>
     <div style="width: @($"{ButtonWidth}px"); float: left;">
-        <Popconfirm Placement="@PlacementType.LeftTop" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.LeftTop" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>LT</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.Left" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.Left" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>Left</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.LeftBottom" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.LeftBottom" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>LB</Button>
         </Popconfirm>
     </div>
     <div style="width: @($"{ButtonWidth}px"); margin-left: @($"{ButtonWidth * 4 + 24}px");">
-        <Popconfirm Placement="@PlacementType.RightTop" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.RightTop" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>RT</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.Right" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.Right" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>Right</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.RightBottom" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.RightBottom" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>RB</Button>
         </Popconfirm>
     </div>
     <div style="margin-left: @($"{ButtonWidth}px"); clear: both; white-space: nowrap;">
-        <Popconfirm Placement="@PlacementType.BottomLeft" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.BottomLeft" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>BL</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.Bottom" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.Bottom" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>Bottom</Button>
         </Popconfirm>
-        <Popconfirm Placement="@PlacementType.BottomRight" Title="_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
+        <Popconfirm Placement="@PlacementType.BottomRight" Title="@_title" OkText="@_okText" CancelText="@_cancelText" OnConfirm="Confirm">
             <Button>BR</Button>
         </Popconfirm>
     </div>

site/AntBlazor.Docs/Demos/Components/Popover/demo/ArrowPointAtCenter.razor

@@ -1,8 +1,8 @@
 <div>
-    <Popover Placement="PlacementType.TopLeft" Title="_text" Content="_content">
+    <Popover Placement="PlacementType.TopLeft" TitleTemplate="@_text" ContentTemplate="@_content">
         <Button>Align edge / 边缘对齐</Button>
     </Popover>
-    <Popover Placement="PlacementType.TopLeft" Title="_text" Content="_content" ArrowPointAtCenter="true">
+    <Popover Placement="PlacementType.TopLeft" TitleTemplate="@_text" ContentTemplate="@_content" ArrowPointAtCenter="true">
         <Button>Arrow points to center / 箭头指向中心</Button>
     </Popover>
 </div>

site/AntBlazor.Docs/Demos/Components/Popover/demo/Basic.razor

@@ -1,4 +1,4 @@
-<Popover Content="_content" Title="@("Title")">
+<Popover ContentTemplate="@_content" Title="Title">
     <Button type="primary">Hover me</Button>
 </Popover>
 

site/AntBlazor.Docs/Demos/Components/Popover/demo/Control.razor

@@ -1,4 +1,4 @@
-<Popover OnVisibleChange="OnVisibleChange" Visible="_visible" Content="_content" Title="@("Title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
+<Popover OnVisibleChange="OnVisibleChange" Visible="_visible" ContentTemplate="@_content" Title="Title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
   <Button type="primary">Click me</Button>
 </Popover>
 

site/AntBlazor.Docs/Demos/Components/Popover/demo/HoverWithClick.razor

@@ -1,18 +1,25 @@
-<Popover Style="{width: 500}" OnVisibleChange="OnHoverVisibleChange" Visible="_hoverVisible" Content="_hoverContent" Title="@("Hover title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Hover})">
-    <Popover OnVisibleChange="OnClickVisibleChange" Visible="_clickVisible" Content="_clickContent" Title="@("Click title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
-        <Button>Hover and click / 悬停并单击</Button>
-    </Popover>
+<Popover Style="{width: 500}" OnVisibleChange="OnHoverVisibleChange" Visible="_hoverVisible" Title="Hover title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Hover})">
+    <ContentTemplate>
+        <div> This is hover content.</div>
+    </ContentTemplate>
+    <ChildContent>
+        <Popover OnVisibleChange="OnClickVisibleChange" Visible="_clickVisible" Content="_clickContent" Title="Click title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
+            <ContentTemplate>
+                <div>
+                    <div>This is click content.</div>
+                    <a @onclick="_=>Close()">Close</a>
+                </div>
+            </ContentTemplate>
+            <ChildContent>
+                <Button>Hover and click / 悬停并单击</Button>
+            </ChildContent>
+
+        </Popover>
+    </ChildContent>
 </Popover>
 
 @code{
 
-    private RenderFragment _hoverContent =@<div> This is hover content.</div>;
-    private RenderFragment _clickContent => 
-        @<div>
-            <div>This is click content.</div>
-            <a @onclick="_=>Close()">Close</a>
-        </div>;
-
     private bool _hoverVisible = false;
     private bool _clickVisible = false;
 

site/AntBlazor.Docs/Demos/Components/Popover/demo/Placement.razor

@@ -1,45 +1,45 @@
 <div class="demo">
     <div style="margin-left: @($"{ButtonWidth}px"); white-space: nowrap;">
-        <Popover Placement="@PlacementType.TopLeft" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.TopLeft" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>TL</Button>
         </Popover>
-        <Popover Placement="@PlacementType.Top" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.Top" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>Top</Button>
         </Popover>
-        <Popover Placement="@PlacementType.TopRight" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.TopRight" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>TR</Button>
         </Popover>
     </div>
     <div style="width: @($"{ButtonWidth}px"); float: left;">
-        <Popover Placement="@PlacementType.LeftTop" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.LeftTop" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>LT</Button>
         </Popover>
-        <Popover Placement="@PlacementType.Left" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.Left" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>Left</Button>
         </Popover>
-        <Popover Placement="@PlacementType.LeftBottom" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.LeftBottom" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>LB</Button>
         </Popover>
     </div>
     <div style="width: @($"{ButtonWidth}px"); margin-left: @($"{ButtonWidth * 4 + 24}px");">
-        <Popover Placement="@PlacementType.RightTop" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.RightTop" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>RT</Button>
         </Popover>
-        <Popover Placement="@PlacementType.Right" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.Right" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>Right</Button>
         </Popover>
-        <Popover Placement="@PlacementType.RightBottom" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.RightBottom" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>RB</Button>
         </Popover>
     </div>
     <div style="margin-left: @($"{ButtonWidth}px"); clear: both; white-space: nowrap;">
-        <Popover Placement="@PlacementType.BottomLeft" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.BottomLeft" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>BL</Button>
         </Popover>
-        <Popover Placement="@PlacementType.Bottom" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.Bottom" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>Bottom</Button>
         </Popover>
-        <Popover Placement="@PlacementType.BottomRight" Title="_text" Content="_content">
+        <Popover Placement="@PlacementType.BottomRight" TitleTemplate="@_text" ContentTemplate="@_content">
             <Button>BR</Button>
         </Popover>
     </div>

site/AntBlazor.Docs/Demos/Components/Popover/demo/TriggerType.razor

@@ -1,11 +1,11 @@
 <div>
-    <Popover Content="_content" Title="@("Title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Hover})">
+    <Popover ContentTemplate="@_content" Title="Title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Hover})">
         <AntDesign.Button>Hover me</AntDesign.Button>
     </Popover>
-    <Popover Content="_content" Title="@("Title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Focus})">
+    <Popover ContentTemplate="@_content" Title="Title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Focus})">
         <AntDesign.Button>Focus me</AntDesign.Button>
     </Popover>
-    <Popover Content="_content" Title="@("Title")" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
+    <Popover ContentTemplate="@_content" Title="Title" Trigger="@(new AntDesign.TriggerType[] { AntDesign.TriggerType.Click})">
         <AntDesign.Button>Click me</AntDesign.Button>
     </Popover>
 </div>

site/AntBlazor.Docs/Demos/Components/Result/demo/CustomIcon.razor

@@ -1,10 +1,14 @@
-<Result
-    Icon="smile-outline"
-    Title=@("Great, we have done all the operations!")
-    Extra="extra">
+<Result Icon="smile-outline"
+        Title="Great, we have done all the operations!"
+        Extra="extra">
+</Result>
+<Divider></Divider>
+<Result IsShowIcon="false"
+        Title="Great, we can hide the icon!"
+        Extra="extra">
 </Result>
 
 @code
 {
-    RenderFragment extra = @<Button Type="primary">Next</Button>;
+    RenderFragment extra =@<Button Type="primary">Next</Button>;
 }

site/AntBlazor.Docs/Demos/Components/Result/demo/Error.razor

@@ -1,7 +1,7 @@
 <Result
     Status="error"
-    Title=@("Submission Failed")
-    SubTitle=@("Please check and modify the following information before resubmitting.")
+    Title="Submission Failed"
+    SubTitle="Please check and modify the following information before resubmitting."
     Extra=extra
 >
 <div class="desc">

site/AntBlazor.Docs/Demos/Components/Result/demo/Info.razor

@@ -1,5 +1,5 @@
 <Result
-    Title=@("Your operation has been executed")
+    Title="Your operation has been executed"
     Extra=extra
 />
 @code {