diff --git a/components/badge/Badge.razor b/components/badge/Badge.razor
index a3fd552a..e13ba7d1 100644
--- a/components/badge/Badge.razor
+++ b/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++)
                         {
diff --git a/components/badge/Badge.razor.cs b/components/badge/Badge.razor.cs
index 7ccdcfbd..fbe84d88 100644
--- a/components/badge/Badge.razor.cs
+++ b/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)
             {
diff --git a/components/badge/BadgeRibbon.razor b/components/badge/BadgeRibbon.razor
index 88336c3f..7f06694b 100644
--- a/components/badge/BadgeRibbon.razor
+++ b/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>
\ No newline at end of file
diff --git a/components/badge/BadgeRibbon.razor.cs b/components/badge/BadgeRibbon.razor.cs
index 78340760..a828f161 100644
--- a/components/badge/BadgeRibbon.razor.cs
+++ b/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;
             }
         }
 
diff --git a/components/card/Card.razor b/components/card/Card.razor
index c8a1f0a5..13494677 100644
--- a/components/card/Card.razor
+++ b/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)
diff --git a/components/card/Card.razor.cs b/components/card/Card.razor.cs
index 7d474c5f..f6c66fa6 100644
--- a/components/card/Card.razor.cs
+++ b/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; }
diff --git a/components/collapse/Collapse.razor.cs b/components/collapse/Collapse.razor.cs
index 937da7d5..de84ef8f 100644
--- a/components/collapse/Collapse.razor.cs
+++ b/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
 
diff --git a/components/collapse/Panel.razor b/components/collapse/Panel.razor
index ddc204f9..9454cbe1 100644
--- a/components/collapse/Panel.razor
+++ b/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>
diff --git a/components/collapse/Panel.razor.cs b/components/collapse/Panel.razor.cs
index f437e31e..11172caa 100644
--- a/components/collapse/Panel.razor.cs
+++ b/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; }
diff --git a/components/comment/Comment.razor b/components/comment/Comment.razor
index ea819520..1fa6cb4c 100644
--- a/components/comment/Comment.razor
+++ b/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)
diff --git a/components/comment/Comment.razor.cs b/components/comment/Comment.razor.cs
index 995d21e1..1db3baea 100644
--- a/components/comment/Comment.razor.cs
+++ b/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>();
diff --git a/components/descriptions/Descriptions.razor b/components/descriptions/Descriptions.razor
index cedaa669..339b8834 100644
--- a/components/descriptions/Descriptions.razor
+++ b/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>
diff --git a/components/descriptions/Descriptions.razor.cs b/components/descriptions/Descriptions.razor.cs
index 5707f95d..5e91815f 100644
--- a/components/descriptions/Descriptions.razor.cs
+++ b/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; }
diff --git a/components/descriptions/DescriptionsItem.razor.cs b/components/descriptions/DescriptionsItem.razor.cs
index fb81f256..6a4f9c6d 100644
--- a/components/descriptions/DescriptionsItem.razor.cs
+++ b/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;
diff --git a/components/descriptions/IDescriptionsItem.cs b/components/descriptions/IDescriptionsItem.cs
index 855ef41c..5bdef001 100644
--- a/components/descriptions/IDescriptionsItem.cs
+++ b/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; }
diff --git a/components/empty/Empty.razor b/components/empty/Empty.razor
index 4be7c3f4..d6892a32 100644
--- a/components/empty/Empty.razor
+++ b/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 />;
-}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/components/empty/Empty.razor.cs b/components/empty/Empty.razor.cs
index 44804893..bfc48078 100644
--- a/components/empty/Empty.razor.cs
+++ b/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();
-        }
     }
 }
diff --git a/components/list/AntListItemMeta.razor b/components/list/AntListItemMeta.razor
index 8744e70f..fead06e4 100644
--- a/components/list/AntListItemMeta.razor
+++ b/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);
-    }
-}
\ No newline at end of file
diff --git a/components/list/AntListItemMeta.razor.cs b/components/list/AntListItemMeta.razor.cs
new file mode 100644
index 00000000..071c11a5
--- /dev/null
+++ b/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);
+        }
+
+    }
+}
diff --git a/components/menu/MenuItemGroup.razor b/components/menu/MenuItemGroup.razor
index ed5fa9b7..18eafd75 100644
--- a/components/menu/MenuItemGroup.razor
+++ b/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
diff --git a/components/menu/MenuItemGroup.razor.cs b/components/menu/MenuItemGroup.razor.cs
index 6a5a9cf0..11b211a4 100644
--- a/components/menu/MenuItemGroup.razor.cs
+++ b/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; }
diff --git a/components/menu/SubMenu.razor b/components/menu/SubMenu.razor
index 33fd643a..2fda82dd 100644
--- a/components/menu/SubMenu.razor
+++ b/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>;
+}
 }
\ No newline at end of file
diff --git a/components/menu/SubMenu.razor.cs b/components/menu/SubMenu.razor.cs
index 55b04c1e..28e82a3e 100644
--- a/components/menu/SubMenu.razor.cs
+++ b/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; }
diff --git a/components/modal/type/ConfirmIcon.cs b/components/modal/type/ConfirmIcon.cs
index 44db9ba3..7b07cc7e 100644
--- a/components/modal/type/ConfirmIcon.cs
+++ b/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;
             }
         }
diff --git a/components/page-header/PageHeader.razor b/components/page-header/PageHeader.razor
index a298a80e..3d7199e7 100644
--- a/components/page-header/PageHeader.razor
+++ b/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
diff --git a/components/page-header/PageHeader.razor.cs b/components/page-header/PageHeader.razor.cs
index 4ed681ea..902a1968 100644
--- a/components/page-header/PageHeader.razor.cs
+++ b/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; }
diff --git a/components/popconfirm/Popconfirm.razor b/components/popconfirm/Popconfirm.razor
index ab01bb52..d2b2cdb6 100644
--- a/components/popconfirm/Popconfirm.razor
+++ b/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">
diff --git a/components/popconfirm/Popconfirm.razor.cs b/components/popconfirm/Popconfirm.razor.cs
index dccbad57..294bc09e 100644
--- a/components/popconfirm/Popconfirm.razor.cs
+++ b/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; }
diff --git a/components/popover/Popover.razor b/components/popover/Popover.razor
index ea8310d3..f5b2ebe3 100644
--- a/components/popover/Popover.razor
+++ b/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>
diff --git a/components/popover/Popover.razor.cs b/components/popover/Popover.razor.cs
index 3c3e073f..a656f01e 100644
--- a/components/popover/Popover.razor.cs
+++ b/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;
diff --git a/components/result/Result.razor b/components/result/Result.razor
index 4259998c..38d4c084 100644
--- a/components/result/Result.razor
+++ b/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)
     {
diff --git a/components/result/Result.razor.cs b/components/result/Result.razor.cs
index 0f5146ae..f78b461d 100644
--- a/components/result/Result.razor.cs
+++ b/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; }
 
diff --git a/components/statistic/CountDown.razor b/components/statistic/CountDown.razor
index d07850fd..102db4bd 100644
--- a/components/statistic/CountDown.razor
+++ b/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>
diff --git a/components/statistic/Statistic.razor b/components/statistic/Statistic.razor
index c1766e23..6b6c193b 100644
--- a/components/statistic/Statistic.razor
+++ b/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>
diff --git a/components/statistic/StatisticComponentBase.razor.cs b/components/statistic/StatisticComponentBase.razor.cs
index 418f34ef..d1f9bf32 100644
--- a/components/statistic/StatisticComponentBase.razor.cs
+++ b/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>
         /// 数值内容
diff --git a/components/steps/Step.razor b/components/steps/Step.razor
index 506b590c..bfa380e1 100644
--- a/components/steps/Step.razor
+++ b/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>
diff --git a/components/steps/Step.razor.cs b/components/steps/Step.razor.cs
index 2c1a31c4..e6194089 100644
--- a/components/steps/Step.razor.cs
+++ b/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; }
 
diff --git a/components/switch/Switch.razor b/components/switch/Switch.razor
index 05556647..e613be09 100644
--- a/components/switch/Switch.razor
+++ b/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>
 
diff --git a/components/switch/Switch.razor.cs b/components/switch/Switch.razor.cs
index 45d0aec8..dd6186cd 100644
--- a/components/switch/Switch.razor.cs
+++ b/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;
 
diff --git a/components/table/Table.razor b/components/table/Table.razor
index 6ddc36b6..4460b538 100644
--- a/components/table/Table.razor
+++ b/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">
diff --git a/components/table/Table.razor.cs b/components/table/Table.razor.cs
index cebdeb3c..f94236d2 100644
--- a/components/table/Table.razor.cs
+++ b/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; }
diff --git a/components/transfer/Transfer.razor b/components/transfer/Transfer.razor
index 7b1e3555..8ef952fc 100644
--- a/components/transfer/Transfer.razor
+++ b/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>
\ No newline at end of file
diff --git a/components/transfer/Transfer.razor.cs b/components/transfer/Transfer.razor.cs
index 84cd383d..905cff3d 100644
--- a/components/transfer/Transfer.razor.cs
+++ b/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; }
diff --git a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Badge/demo/Basic.razor
index b98973aa..aef1bb9f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Basic.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor b/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
index 33c2d3e7..80ba9f9f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
+++ b/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>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Card/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Card/demo/Basic.razor
index e4406a4f..8c6f3e0d 100644
--- a/site/AntBlazor.Docs/Demos/Components/Card/demo/Basic.razor
+++ b/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>;
 
 }
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Accordion.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Accordion.razor
index 8e330fd7..a824d361 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Accordion.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Basic.razor
index 1c238020..be2756ad 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Basic.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Borderless.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Borderless.razor
index ee9307d0..8ec2e669 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Borderless.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Custom.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Custom.razor
index aa491f5b..b2b9e261 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Custom.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Extra.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Extra.razor
index 61efbf46..44461d34 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Extra.razor
+++ b/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);
+        }
     }
-}
-
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Mix.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Mix.razor
index b4e3c80c..274301de 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Mix.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Noarrow.razor b/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Noarrow.razor
index 1422a36b..cb223395 100644
--- a/site/AntBlazor.Docs/Demos/Components/Collapse/demo/Noarrow.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Comment/demo/Basic.razor
index 69ec827e..2e4f68d0 100644
--- a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Basic.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Editor.razor b/site/AntBlazor.Docs/Demos/Components/Comment/demo/Editor.razor
index f148de27..4d2767cd 100644
--- a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Editor.razor
+++ b/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>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Comment/demo/List.razor b/site/AntBlazor.Docs/Demos/Components/Comment/demo/List.razor
index 7a5b1bd3..8f3b2a9d 100644
--- a/site/AntBlazor.Docs/Demos/Components/Comment/demo/List.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Nested.razor b/site/AntBlazor.Docs/Demos/Components/Comment/demo/Nested.razor
index 28d79f70..227f813f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Comment/demo/Nested.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Basic.razor
index 5b45c882..eeb99074 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Basic.razor
+++ b/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>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Border.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Border.razor
index ef741899..30ef13de 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Border.razor
+++ b/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
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/CustomSize.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/CustomSize.razor
index 113940b0..e8a67c88 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/CustomSize.razor
+++ b/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
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Responsive.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Responsive.razor
index 2cc1aad5..e9739171 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Responsive.razor
+++ b/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
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Vertical.razor
index 173aa20f..21baae3a 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/Vertical.razor
+++ b/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>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/VerticalBorder.razor b/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/VerticalBorder.razor
index 05727a79..fce40995 100644
--- a/site/AntBlazor.Docs/Demos/Components/Descriptions/demo/VerticalBorder.razor
+++ b/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
diff --git a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Customize.razor b/site/AntBlazor.Docs/Demos/Components/Empty/demo/Customize.razor
index defdd7c8..ca836044 100644
--- a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Customize.razor
+++ b/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>;
-}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Description.razor b/site/AntBlazor.Docs/Demos/Components/Empty/demo/Description.razor
index 4a8920b4..237c318e 100644
--- a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Description.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Empty/demo/Description.razor
@@ -1 +1 @@
-<Empty Description="@false" />
\ No newline at end of file
+<Empty Description="false" />
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Simple.razor b/site/AntBlazor.Docs/Demos/Components/Empty/demo/Simple.razor
index 6746d188..cf6f93fe 100644
--- a/site/AntBlazor.Docs/Demos/Components/Empty/demo/Simple.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Empty/demo/Simple.razor
@@ -1 +1 @@
-<Empty Image="Empty.PRESENTED_IMAGE_SIMPLE" />
\ No newline at end of file
+<Empty Simple/>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Empty/demo/simple.md b/site/AntBlazor.Docs/Demos/Components/Empty/demo/simple.md
index 1dd2fdcd..f376500d 100644
--- a/site/AntBlazor.Docs/Demos/Components/Empty/demo/simple.md
+++ b/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.
diff --git a/site/AntBlazor.Docs/Demos/Components/List/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/List/demo/Basic.razor
index 7879cb4e..b500afb7 100644
--- a/site/AntBlazor.Docs/Demos/Components/List/demo/Basic.razor
+++ b/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"},
diff --git a/site/AntBlazor.Docs/Demos/Components/List/demo/Grid.razor b/site/AntBlazor.Docs/Demos/Components/List/demo/Grid.razor
index ec4e6407..37f79620 100644
--- a/site/AntBlazor.Docs/Demos/Components/List/demo/Grid.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/List/demo/Loadmore.razor b/site/AntBlazor.Docs/Demos/Components/List/demo/Loadmore.razor
index 3004d2f8..4d18a293 100644
--- a/site/AntBlazor.Docs/Demos/Components/List/demo/Loadmore.razor
+++ b/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; }
+        }
+    }
diff --git a/site/AntBlazor.Docs/Demos/Components/List/demo/Resposive.razor b/site/AntBlazor.Docs/Demos/Components/List/demo/Resposive.razor
index 3ce01994..0c6065cc 100644
--- a/site/AntBlazor.Docs/Demos/Components/List/demo/Resposive.razor
+++ b/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"},
diff --git a/site/AntBlazor.Docs/Demos/Components/List/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Components/List/demo/Vertical.razor
index be73be35..b1965bdf 100644
--- a/site/AntBlazor.Docs/Demos/Components/List/demo/Vertical.razor
+++ b/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;
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Horizontal.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/Horizontal.razor
index 2c54a583..8344ad1b 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Horizontal.razor
+++ b/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>;
 }
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Inline.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/Inline.razor
index d97905f0..fafb1626 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Inline.razor
+++ b/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>;
+    }
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/InlineCollapsed.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/InlineCollapsed.razor
index efb4b5d0..ef9df8fd 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/InlineCollapsed.razor
+++ b/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;
+        }
     }
-}
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Router.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/Router.razor
index 2829ba82..2a3af728 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Router.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/SiderCurrent.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/SiderCurrent.razor
index 4ec459ce..2495864e 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/SiderCurrent.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/SwitchMode.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/SwitchMode.razor
index 078289e0..2420041f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/SwitchMode.razor
+++ b/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;
     }
 
-}
+}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Theme.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/Theme.razor
index 541bd536..582ff691 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Theme.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Components/Menu/demo/Vertical.razor
index 94baed46..ad00918e 100644
--- a/site/AntBlazor.Docs/Demos/Components/Menu/demo/Vertical.razor
+++ b/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()
+        {
 
+        }
     }
-}
diff --git a/site/AntBlazor.Docs/Demos/Components/Modal/demo/Confirm_Service.razor b/site/AntBlazor.Docs/Demos/Components/Modal/demo/Confirm_Service.razor
index cba170ca..fa3e2839 100644
--- a/site/AntBlazor.Docs/Demos/Components/Modal/demo/Confirm_Service.razor
+++ b/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";
diff --git a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Actions.razor b/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Actions.razor
index 4230b5b7..7aa0adc2 100644
--- a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Actions.razor
+++ b/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>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Basic.razor
index f1e398e5..86fef1e5 100644
--- a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Basic.razor
+++ b/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" />;
-}
\ No newline at end of file
+}
diff --git a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Ghost.razor b/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Ghost.razor
index ef56a6d3..67eb2d6e 100644
--- a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Ghost.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/PageHeaderBreadcrumb.razor b/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/PageHeaderBreadcrumb.razor
index 9764fa21..725e32cc 100644
--- a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/PageHeaderBreadcrumb.razor
+++ b/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";
-
-}
\ No newline at end of file
+</PageHeader>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Responsive.razor b/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Responsive.razor
index 9d3ed888..6e1c29b8 100644
--- a/site/AntBlazor.Docs/Demos/Components/PageHeader/demo/Responsive.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Basic.razor
index cae3ca1f..11bc373f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Basic.razor
+++ b/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"
diff --git a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/DynamicTrigger.razor b/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/DynamicTrigger.razor
index e689ff4c..407fbb76 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/DynamicTrigger.razor
+++ b/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"
diff --git a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Icon.razor b/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Icon.razor
index fb592025..ec78e7f9 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Icon.razor
+++ b/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'")"/>;
 
-}
\ No newline at end of file
+}
diff --git a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Locale.razor b/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Locale.razor
index e7aeed4c..591c6aa5 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Locale.razor
+++ b/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>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Placement.razor b/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Placement.razor
index 6d918684..87edf507 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popconfirm/demo/Placement.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/ArrowPointAtCenter.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/ArrowPointAtCenter.razor
index f6d5488d..68a3da9f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/ArrowPointAtCenter.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/Basic.razor
index e96d34f7..5bca031b 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Basic.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Control.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/Control.razor
index 6268167b..73a67576 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Control.razor
+++ b/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>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/HoverWithClick.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/HoverWithClick.razor
index 91f16136..24fba50a 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/HoverWithClick.razor
+++ b/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;
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Placement.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/Placement.razor
index f3654ff9..d0f691ba 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/Placement.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Popover/demo/TriggerType.razor b/site/AntBlazor.Docs/Demos/Components/Popover/demo/TriggerType.razor
index 38160be3..07af0798 100644
--- a/site/AntBlazor.Docs/Demos/Components/Popover/demo/TriggerType.razor
+++ b/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>
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/CustomIcon.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/CustomIcon.razor
index 874ebf03..ccf0f9b9 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/CustomIcon.razor
+++ b/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>;
 }
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/Error.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/Error.razor
index 59a26d85..336d8e70 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/Error.razor
+++ b/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">
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/Info.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/Info.razor
index c372ffc3..cc064acf 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/Info.razor
+++ b/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 {
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/Success.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/Success.razor
index 71371d16..801191e2 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/Success.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Result/demo/Success.razor
@@ -1,14 +1,9 @@
 <Result Status="success"
-        Title=@("Successfully Purchased Cloud Server ECS!")
-        SubTitle=@("Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.")
-        Extra=extra />
-
-@code
-{
-    RenderFragment extra =
-    @<Template>
+        Title="Successfully Purchased Cloud Server ECS!"
+        SubTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.">
+    <Extra>
         <Button Type="primary">Go Console</Button>
         <Button>Buy Again</Button>
-    </Template>
-    ;
-}
\ No newline at end of file
+    </Extra>
+
+</Result>
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/Warning.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/Warning.razor
index c1229863..3dc33f23 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/Warning.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Result/demo/Warning.razor
@@ -1,7 +1,7 @@
 <Result Status="warning"
-        Title=@("There are some problems with your operation.")
+        Title="There are some problems with your operation."
         Extra=extra />
 @code
 {
-    RenderFragment extra = @<Button Type="primary">Go Console</Button>;
+    RenderFragment extra =@<Button Type="primary">Go Console</Button>;
 }
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/_403.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/_403.razor
index fc58801d..2da4a8e7 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/_403.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Result/demo/_403.razor
@@ -1,6 +1,6 @@
 <Result Status="403"
-        Title=@("403")
-        SubTitle=@("Sorry, you are not authorized to access this page.")
+        Title="403"
+        SubTitle="Sorry, you are not authorized to access this page."
         Extra="extra" />
 
 @code
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/_404.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/_404.razor
index 738126ce..50fa5699 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/_404.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Result/demo/_404.razor
@@ -1,6 +1,6 @@
 <Result Status="404"
-        Title=@("404")
-        SubTitle=@("Sorry, the page you visited does not exist.")
+        Title="404"
+        SubTitle="Sorry, the page you visited does not exist."
         Extra="extra" />
 
 @code
diff --git a/site/AntBlazor.Docs/Demos/Components/Result/demo/_500.razor b/site/AntBlazor.Docs/Demos/Components/Result/demo/_500.razor
index 1e1e8477..1d6e337c 100644
--- a/site/AntBlazor.Docs/Demos/Components/Result/demo/_500.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Result/demo/_500.razor
@@ -1,6 +1,6 @@
 <Result Status="500"
-        Title=@("500")
-        SubTitle=@("Sorry, something went wrong.")
+        Title="500"
+        SubTitle="Sorry, something went wrong."
         Extra="extra" />
 
 @code
diff --git a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Basic.razor
index dcaef175..e7fd0278 100644
--- a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Basic.razor
@@ -1,10 +1,10 @@
 
 <Row Gutter="16">
     <Col Span="12">
-        <Statistic Title="@("Active Users")" Value="112893" />
+        <Statistic Title="Active Users" Value="112893" />
     </Col>
     <Col Span="12">
-        <Statistic Title="@("Account Balance (CNY)")" Value="112893" Precision="2"/>
+        <Statistic Title="Account Balance (CNY)" Value="112893" Precision="2"/>
         <Button Style="margin-top: 16px;" Type="primary">
             Recharge
         </Button>
diff --git a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Card_.razor b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Card_.razor
index 54db3331..88bd41c3 100644
--- a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Card_.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Card_.razor
@@ -1,14 +1,22 @@
 <div class="site-statistic-demo-card">
     <Row Gutter="16">
         <Col Span="12">
-            <Card>
-                <Statistic Title="@("Active")" Value="11.28" Precision="2" ValueStyle="color: #3f8600;" Prefix="@prefix1" Suffix="@("%")" />
-            </Card>
+        <Card>
+            <Statistic Title="Active" Value="11.28" Precision="2" ValueStyle="color: #3f8600;" Suffix="%">
+                <PrefixTemplate>
+                    <span><Icon Type="arrow-up" /></span>
+                </PrefixTemplate>
+            </Statistic>
+        </Card>
         </Col>
         <Col Span="12">
-            <Card>
-                <Statistic Title="@("Idle")" Value="9.3" Precision="2" ValueStyle="color: #cf1322;" Prefix="@prefix2" Suffix="@("%")" />
-            </Card>
+        <Card>
+            <Statistic Title="Idle" Value="9.3" Precision="2" ValueStyle="color: #cf1322;" Suffix="%">
+                <PrefixTemplate>
+                    <span><Icon Type="arrow-down" /></span>
+                </PrefixTemplate>
+            </Statistic>
+        </Card>
         </Col>
     </Row>
 </div>
@@ -19,10 +27,3 @@
         padding: 30px;
     }
 </style>
-
-@code
-{
-    RenderFragment prefix1 = @<span><Icon Type="arrow-up"/></span>;
-    RenderFragment prefix2 = @<span><Icon Type="arrow-down"/></span>;
-}
-
diff --git a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Countdown.razor b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Countdown.razor
index 203d8741..22688f47 100644
--- a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Countdown.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Countdown.razor
@@ -1,12 +1,12 @@
 <Row Gutter="16">
     <Col Span="12">
-    <CountDown Title="@("Countdown")" Value="@deadline" OnFinish="OnFinish" />
+        <CountDown Title="Countdown" Value="@deadline" OnFinish="OnFinish" />
     </Col>
     <Col Span="12">
-    <CountDown Title="@("Million")" Value="@deadline" Format="hh:mm:ss:fff" />
+        <CountDown Title="Million" Value="@deadline" Format="hh:mm:ss:fff" />
     </Col>
     <Col Span="24">
-    <CountDown Title="@("Day Level")" Value="@deadline" Format="dd 天 h 时 m 分 s 秒" />
+        <CountDown Title="Day Level" Value="@deadline" Format="dd 天  h 小时 m 分钟 s 秒" />
     </Col>
 </Row>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Unit.razor b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Unit.razor
index 68ff3476..278deebd 100644
--- a/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Unit.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Statistic/demo/Unit.razor
@@ -1,16 +1,14 @@
 <Row Gutter=16>
     <Col Span=12>
-    <Statistic Title="@("Feedback")" Value="1128" Prefix="prefix1" />
+    <Statistic Title="Feedback" Value="1128" PrefixTemplate="@prefix1" />
     </Col>
     <Col Span=12>
-    <Statistic Title="@("Unmerged")" Value="93" Suffix="@("/ 100")" />
+    <Statistic Title="Unmerged" Value="93" Suffix="/ 100" />
     </Col>
 </Row>
 
 
 @code
 {
-    string title1 = "Feedback";
-
     RenderFragment prefix1 =@<Icon Type="like" />;
 }
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Clickable.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Clickable.razor
index fbecf6b7..1d962a72 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Clickable.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Clickable.razor
@@ -1,16 +1,16 @@
 <div>
     <Steps Current=current OnChange=onChange>
-        <Step Title="@("Step 1")" Description="@("This is a description.")" />
-        <Step Title="@("Step 2")" Description="@("This is a description.")" />
-        <Step Title="@("Step 3")" Description="@("This is a description.")" />
+        <Step Title="Step 1" Description="This is a description." />
+        <Step Title="Step 2" Description="This is a description." />
+        <Step Title="Step 3" Description="This is a description." />
     </Steps>
 
     <Divider />
 
     <Steps Current=current OnChange=onChange Direction="vertical">
-        <Step Title="@("Step 1")" Description="@("This is a description.")" />
-        <Step Title="@("Step 2")" Description="@("This is a description.")" />
-        <Step Title="@("Step 3")" Description="@("This is a description.")" />
+        <Step Title="Step 1" Description="This is a description." />
+        <Step Title="Step 2" Description="This is a description." />
+        <Step Title="Step 3" Description="This is a description." />
     </Steps>
 </div>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/CustomizedProgressDot.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/CustomizedProgressDot.razor
index 58ce6710..d98df2f5 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/CustomizedProgressDot.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/CustomizedProgressDot.razor
@@ -1,8 +1,8 @@
-<Steps Current=1 ProgressDot=customDot>
-    <Step Title="@("Finished")" Description="@("You can hover on the dot.")" />
-    <Step Title="@("In Progress")" Description="@("You can hover on the dot.")" />
-    <Step Title="@("Waiting")" Description="@("You can hover on the dot.")" />
-    <Step Title="@("Waiting")" Description="@("You can hover on the dot.")" />
+<Steps Current=1 ProgressDot=@customDot>
+    <Step Title="Finished" Description="You can hover on the dot." />
+    <Step Title="In Progress" Description="You can hover on the dot." />
+    <Step Title="Waiting" Description="You can hover on the dot." />
+    <Step Title="Waiting" Description="You can hover on the dot." />
 </Steps>
 
 @code
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Error.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Error.razor
index 25cc9f58..fef060de 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Error.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Error.razor
@@ -1,7 +1,7 @@
 <div>
     <Steps Current="1" Status="error">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Icon_.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Icon_.razor
index 2383c73e..582c7eb8 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Icon_.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Icon_.razor
@@ -1,8 +1,8 @@
 <div>
     <Steps>
-        <Step Status="finish" Title="@("Login")" Icon="user" />
-        <Step Status="finish" Title="@("Verification")" Icon="solution"  />
-        <Step Status="process" Title="@("Pay")" Icon="loading" />
-        <Step Status="wait" Title="@("Done")" Icon="smile"/>
+        <Step Status="finish" Title="Login" Icon="user" />
+        <Step Status="finish" Title="Verification" Icon="solution"  />
+        <Step Status="process" Title="Pay" Icon="loading" />
+        <Step Status="wait" Title="Done" Icon="smile"/>
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Nav.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Nav.razor
index 97a85a9d..ea13cc0f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Nav.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Nav.razor
@@ -1,20 +1,20 @@
 <div>
     <Steps Type="navigation" Size="small" Current=@current Class="site-navigation-steps">
-        <Step Title="@("Step 1")" Subtitle="@("00:00:05")" Status="finish" Description="@("This is a description.")" />
-        <Step Title="@("Step 2")" Subtitle="@("00:01:02")" Status="process" Description="@("This is a description.")" />
-        <Step Title="@("Step 3")" Subtitle="@("waiting for longlong time")" Status="wait" Description="@("This is a description.")" />
+        <Step Title="Step 1" Subtitle="00:00:05" Status="finish" Description="This is a description." />
+        <Step Title="Step 2" Subtitle="00:01:02" Status="process" Description="This is a description." />
+        <Step Title="Step 3" Subtitle="waiting for longlong time" Status="wait" Description="This is a description." />
     </Steps>
     <Steps Type="navigation" Current="@current" Class="site-navigation-steps">
-        <Step Status="finish" Title="@("Step 1")" />
-        <Step Status="process" Title="@("Step 2")" />
-        <Step Status="wait" Title="@("Step 3")" />
-        <Step Status="wait" Title="@("Step 4")" />
+        <Step Status="finish" Title="Step 1" />
+        <Step Status="process" Title="Step 2" />
+        <Step Status="wait" Title="Step 3" />
+        <Step Status="wait" Title="Step 4" />
     </Steps>
     <Steps Type="navigation" Size="small" Current="@current" Class="site-navigation-steps">
-        <Step Status="finish" Title="@("finish 1")" />
-        <Step Status="finish" Title="@("finish 2")" />
-        <Step Status="process" Title="@("current process")" />
-        <Step Status="wait" Title="@("wait")" Disabled />
+        <Step Status="finish" Title="finish 1" />
+        <Step Status="finish" Title="finish 2" />
+        <Step Status="process" Title="current process" />
+        <Step Status="wait" Title="wait" Disabled />
     </Steps>
 </div>
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Progress.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Progress.razor
index b6fb2e12..2ed808f8 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Progress.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Progress.razor
@@ -1,7 +1,7 @@
 <div>
     <Steps Percent="60" Current="1">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/ProgressDot.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/ProgressDot.razor
index 1a138d31..588b4a4e 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/ProgressDot.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/ProgressDot.razor
@@ -1,15 +1,15 @@
 <div>
     <Steps ShowProgressDot Current="1">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
     <Divider />
     <Steps ShowProgressDot Current="1" Direction="vertical">
-        <Step Title="@("Finished")" Description="@("This is a description. This is a description.")" />
-        <Step Title="@("Finished")" Description="@("This is a description. This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description. This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description. This is a description." />
+        <Step Title="Finished" Description="This is a description. This is a description." />
+        <Step Title="In Progress" Description="This is a description. This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Simple.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Simple.razor
index b6be050b..6c94682f 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Simple.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Simple.razor
@@ -1,8 +1,8 @@
 <div>
     <Steps Current="1" Class="site-navigation-steps">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Subtitle="@("Left 00:00:08")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Subtitle="Left 00:00:08" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/SmallSize.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/SmallSize.razor
index 19aa5ff7..05ac83b0 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/SmallSize.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/SmallSize.razor
@@ -1,7 +1,7 @@
 <div>
     <Steps Size="small" Current=1>
-        <Step Title="@("Finished")" />
-        <Step Title="@("In Progress")" />
-        <Step Title="@("Waiting")" />
+        <Step Title="Finished" />
+        <Step Title="In Progress" />
+        <Step Title="Waiting" />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Vertical.razor
index 8007d188..91fa31a0 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/Vertical.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/Vertical.razor
@@ -1,7 +1,7 @@
 <div>
     <Steps Direction="vertical" Current="1">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Steps/demo/VerticalSmall.razor b/site/AntBlazor.Docs/Demos/Components/Steps/demo/VerticalSmall.razor
index 2a8fed34..949d697d 100644
--- a/site/AntBlazor.Docs/Demos/Components/Steps/demo/VerticalSmall.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Steps/demo/VerticalSmall.razor
@@ -1,7 +1,7 @@
 <div>
     <Steps Direction="vertical" Size="small" Current="1">
-        <Step Title="@("Finished")" Description="@("This is a description.")" />
-        <Step Title="@("In Progress")" Description="@("This is a description.")" />
-        <Step Title="@("Waiting")" Description="@("This is a description.")" />
+        <Step Title="Finished" Description="This is a description." />
+        <Step Title="In Progress" Description="This is a description." />
+        <Step Title="Waiting" Description="This is a description." />
     </Steps>
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Components/Switch/demo/Disable.razor b/site/AntBlazor.Docs/Demos/Components/Switch/demo/Disable.razor
index ca31f935..a7e97165 100644
--- a/site/AntBlazor.Docs/Demos/Components/Switch/demo/Disable.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Switch/demo/Disable.razor
@@ -2,7 +2,7 @@
     <Switch Checked="switchValue" Disabled="isDisabled"/>
     <br />
     <br />
-    <Button Type="primary" @onclick="(_)=>isDisabled = !isDisabled">Toggle disabled</Button>
+    <Button Type="@ButtonType.Primary" @onclick="(_)=>isDisabled = !isDisabled">Toggle disabled</Button>
 </div>
 
 
@@ -10,11 +10,6 @@
     bool switchValue = false;
 
     bool isDisabled = true;
-
-    RenderFragment checkedChildren =@<Icon Type="check"></Icon>;
-
-    RenderFragment unCheckedChildren = @<Icon Type="close"></Icon>;
-
 }
 
 
diff --git a/site/AntBlazor.Docs/Demos/Components/Switch/demo/Icon1.razor b/site/AntBlazor.Docs/Demos/Components/Switch/demo/Icon1.razor
index b5719564..73a7b4d2 100644
--- a/site/AntBlazor.Docs/Demos/Components/Switch/demo/Icon1.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Switch/demo/Icon1.razor
@@ -1,16 +1,14 @@
 <div>
-    <Switch Checked="true" CheckedChildren='@("开")' UnCheckedChildren='@("关")' />
+    <Switch Checked="true" CheckedChildren="开" UnCheckedChildren="关" />
     <br />
-    <Switch Checked="false" CheckedChildren='@("开")' UnCheckedChildren='@("关")' />
+    <Switch Checked="false" CheckedChildren="开" UnCheckedChildren="关" />
     <br />
-    <Switch Checked="true"
-               CheckedChildren="checkedChildren"
-               UnCheckedChildren="unCheckedChildren" />
+    <Switch Checked="true">
+        <CheckedChildrenTemplate>
+            <Icon Type="check"></Icon>
+        </CheckedChildrenTemplate>
+        <UnCheckedChildrenTemplate>
+            <Icon Type="close"></Icon>
+        </UnCheckedChildrenTemplate>
+    </Switch>
 </div>
-
-
-@code{
-    RenderFragment checkedChildren = @<Icon Type="check"></Icon>;
-
-    RenderFragment unCheckedChildren = @<Icon Type="close"></Icon>;
-}
diff --git a/site/AntBlazor.Docs/Demos/Components/Transfer/demo/Advanced.razor b/site/AntBlazor.Docs/Demos/Components/Transfer/demo/Advanced.razor
index 7bf18d48..85595179 100644
--- a/site/AntBlazor.Docs/Demos/Components/Transfer/demo/Advanced.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Transfer/demo/Advanced.razor
@@ -5,12 +5,16 @@
               SelectedKeys="selectedKeys"
               Titles="titles"
               Operations="operations"
-              Footer="footer"
               OnChange="OnChange"
               OnScroll="OnScroll"
               OnSelectChange="OnSelectChange"
               Render="Render"
-              Style="width:300px;height:300px;"></Transfer>
+              Style="width:300px;height:300px;">
+        <FooterTemplate>
+            <Button Type="@ButtonType.Default" Size="@ButtonSize.Small" Style="float: right; margin: 5px;">reload</Button>
+        </FooterTemplate>
+
+    </Transfer>
 </div>
 
 @code {
@@ -20,7 +24,6 @@
     private string[] titles = { "Source", "Target" };
     private string[] operations = { "to right", "to left" };
     private bool Disabled = false;
-    private RenderFragment footer =@<Button Type="@ButtonType.Default" Size="@ButtonSize.Small" Style="float: right; margin: 5px;">reload</Button>;
 
     protected override void OnInitialized()
     {
@@ -34,7 +37,7 @@
                 Description = $"description of content{i + 1}",
                 ["Chosen"] = random.Next(0, 100) * 2 > 100
             };
-          
+
             if (data["Chosen"] is bool _bool && _bool)
             {
                 targetKeys.Add(data.Key);
diff --git a/tests/$Recorded/AntDesign.Tests.Table.TableTestsRenders_an_empty_table.html b/tests/$Recorded/AntDesign.Tests.Table.TableTestsRenders_an_empty_table.html
index a3f41304..70658e0e 100644
--- a/tests/$Recorded/AntDesign.Tests.Table.TableTestsRenders_an_empty_table.html
+++ b/tests/$Recorded/AntDesign.Tests.Table.TableTestsRenders_an_empty_table.html
@@ -24,7 +24,7 @@
 
                                     <tr class="ant-table-placeholder">
                                         <td colspan="2" class="ant-table-cell">
-                                            <div class="ant-empty ant-empty-ltr" id:ignore blazor:elementreference="0332f519-9275-4565-b66e-a03763b2f261">
+                                            <div class="ant-empty ant-empty-normal ant-empty-ltr" id:ignore blazor:elementreference="0332f519-9275-4565-b66e-a03763b2f261">
                                                 <div class="ant-empty-image">
                                                     <svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
                                                         <g transform="translate(0 1)" fill="none" fillRule="evenodd">
diff --git a/tests/AntDesignTestBase.cs b/tests/AntDesignTestBase.cs
index d9abaf57..a62b886f 100644
--- a/tests/AntDesignTestBase.cs
+++ b/tests/AntDesignTestBase.cs
@@ -20,7 +20,7 @@ namespace AntDesign.Tests
             Context.Services.AddScoped<NavigationManager>(sp => NavigationManager);
             Context.Services.AddAntDesign();
 
-            CultureInfo.DefaultThreadCurrentUICulture = CultureInfo.CurrentCulture;
+            CultureInfo.DefaultThreadCurrentUICulture = CultureInfo.GetCultureInfo("en-US");
         }
 
         public void Dispose()
diff --git a/tests/Core/FormatterTests.cs b/tests/Core/FormatterTests.cs
index aa64a3de..044b6f3e 100644
--- a/tests/Core/FormatterTests.cs
+++ b/tests/Core/FormatterTests.cs
@@ -1,7 +1,7 @@
-using Xunit;
-using AntDesign.Core.Helpers;
-using System;
+using System;
 using System.Collections.Generic;
+using AntDesign.Core.Helpers;
+using Xunit;
 
 namespace AntDesign.Tests.Core
 {
diff --git a/tests/badge/RibbonTests.cs b/tests/badge/RibbonTests.cs
index fdc4b07b..83625f50 100644
--- a/tests/badge/RibbonTests.cs
+++ b/tests/badge/RibbonTests.cs
@@ -1,4 +1,4 @@
-using Bunit;
+using Bunit;
 using Microsoft.AspNetCore.Components;
 using Xunit;
 
@@ -119,7 +119,7 @@ namespace AntDesign.Tests.Badge
                 </div>
             ");
         }
-        
+
         [Fact(DisplayName = "Works with RenderFragment")]
         public void TestRibbonRenderFragment()
         {
@@ -133,7 +133,7 @@ namespace AntDesign.Tests.Badge
             };
             var cut = Context.RenderComponent<BadgeRibbon>(p =>
                 {
-                    p.Add(x => x.Text, fragment);
+                    p.Add(x => x.TextTemplate, fragment);
                     p.AddChildContent("<div />");
                 }
             );