feat: add more demos (#197)

...for affix,back-top,breadcrumb,card,divider,typogragpy and timeline

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

components/AntBlazor.xml

@@ -195,7 +195,7 @@
         </member>
         <member name="P:AntDesign.AntCarousel.DotPosition">
             <summary>
-            The position of the dots, which can be one of Top, Bottom, Left or Right, <see cref="T:AntDesign.AntCarouselDotPosition"/>
+            The position of the dots, which can be one of Top, Bottom, Left or Right, <see cref="T:AntDesign.CarouselDotPosition"/>
             </summary>
         </member>
         <member name="P:AntDesign.AntCarousel.Autoplay">
@@ -205,7 +205,7 @@
         </member>
         <member name="P:AntDesign.AntCarousel.Effect">
             <summary>
-            Transition effect, <see cref="T:AntDesign.AntCarouselEffect"/>
+            Transition effect, <see cref="T:AntDesign.CarouselEffect"/>
             </summary>
         </member>
         <member name="P:AntDesign.AntDomComponentBase.Ref">
@@ -311,12 +311,12 @@
             "ltr"|"rtl"
             </summary>
         </member>
-        <member name="P:AntDesign.AntRow.Align">
+        <member name="P:AntDesign.Row.Align">
             <summary>
             'top' | 'middle' | 'bottom'
             </summary>
         </member>
-        <member name="P:AntDesign.AntRow.Justify">
+        <member name="P:AntDesign.Row.Justify">
             <summary>
             'start' | 'end' | 'center' | 'space-around' | 'space-between'
             </summary>

components/affix/Affix.razor.cs

@@ -9,7 +9,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace AntDesign
 {
-    public partial class AntAffix : AntDomComponentBase
+    public partial class Affix : AntDomComponentBase
     {
         private const string PrefixCls = "ant-affix";
         private const string RootScollSelector = "window";

components/alert/Alert.razor

@@ -7,7 +7,7 @@
         @if (ShowIcon)
         {
             <span role="img" aria-label="@IconType" class="@($"anticon anticon-{IconType} ant-alert-icon")">
-                <AntIcon type="@IconType" fill="currentColor"/>
+                <Icon type="@IconType" fill="currentColor"/>
             </span>
         }
         @if (!string.IsNullOrEmpty(Message))

components/avatar/Avatar.razor

@@ -4,7 +4,7 @@
 <span class="@ClassMapper.Class" style="@Style" id="@Id" @ref="Ref">
     @if (!string.IsNullOrEmpty(Icon) && _hasIcon)
     {
-        <AntIcon type="@Icon" />
+        <Icon type="@Icon" />
     }
     @if (!string.IsNullOrEmpty(Src) && _hasSrc)
     {

components/back-top/BackTop.razor

@@ -4,5 +4,6 @@
 <div class="@BackTopClassMapper.Class" @onclick="_=>OnClick()">
     <div class="@BackTopContentClassMapper.Class">
         <div class="@BackTopIconClassMapper.Class"></div>
+ 
     </div>
 </div>

components/back-top/BackTop.razor.cs

@@ -1,10 +1,11 @@
-using Microsoft.AspNetCore.Components;
+using AntDesign.JsInterop;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntBackTop : AntDomComponentBase
+    public partial class BackTop : AntDomComponentBase
     {
         [Parameter]
         public string Title { get; set; }
@@ -17,7 +18,7 @@ namespace AntDesign
 
         protected async Task OnClick()
         {
-            await JsInvokeAsync(JSInteropConstants.backTop, "BodyContainer");
+            await JsInvokeAsync<DomRect>(JSInteropConstants.backTop, "BodyContainer");
         }
 
         protected override void OnInitialized()

components/breadcrumb/BreadcrumbItem.razor

@@ -9,7 +9,7 @@
             <span class="ant-breadcrumb-link">
                 @ChildContent
             </span>
-            <AntIcon Type="down"></AntIcon>
+            <Icon Type="down"></Icon>
         </span>
     }
     else

components/button/Button.razor

@@ -5,11 +5,11 @@
     <button class="@ClassMapper.Class" style="@Style" id="@Id" type="@HtmlType" @onclick="HandleOnClick" disabled="@Disabled">
         @if (Loading)
         {
-            <AntIcon Type="loading"></AntIcon>
+            <Icon Type="loading"></Icon>
         }
         @if (!string.IsNullOrEmpty(Icon))
         {
-            <AntIcon Type="@Icon" Style="@IconStyle"></AntIcon>
+            <Icon Type="@Icon" Style="@IconStyle"></Icon>
         }
 
         @ChildContent

components/button/Button.razor.cs

@@ -66,7 +66,7 @@ namespace AntDesign
 
         [Inject] private NavigationManager NavigationManger { get; set; }
 
-        public IList<AntIcon> Icons { get; set; } = new List<AntIcon>();
+        public IList<Icon> Icons { get; set; } = new List<Icon>();
 
         //public AntNavLink Link { get; set; }
 

components/card/Card.razor

@@ -50,7 +50,7 @@
             }
             else
             {
-                <AntCardLoading></AntCardLoading>
+                <CardLoading></CardLoading>
             }
         </div>
 

components/card/Card.razor.cs

@@ -4,7 +4,7 @@ using OneOf;
 
 namespace AntDesign
 {
-    public partial class AntCard : AntDomComponentBase
+    public partial class Card : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -45,7 +45,7 @@ namespace AntDesign
         [Parameter]
         public RenderFragment AntCardTab { get; set; }
 
-        internal IList<AntCardGrid> Grids { get; set; } = new List<AntCardGrid>();
+        internal IList<CardGrid> Grids { get; set; } = new List<CardGrid>();
 
         protected void SetClassMap()
         {

components/divider/Divider.razor

@@ -24,6 +24,8 @@
 
     [Parameter] public string Text { get; set; }
 
+    [Parameter] public Boolean Plain { get; set; } = false;
+
     /// <summary>
     ///  'horizontal' | 'vertical'
     /// </summary>
@@ -41,7 +43,9 @@
         ClassMapper.Clear()
             .Add("ant-divider")
             .Add($"ant-divider-{this.Type}")
+            .If("ant-divider-with-text", () => Text != null || ChildContent != null)
             .If($"ant-divider-with-text-{this.Orientation}", () => Text != null || ChildContent != null)
+            .If($"ant-divider-plain", () => Plain == true || Text != null || ChildContent != null)
             .If("ant-divider-dashed", () => Dashed)
             ;
     }

components/drawer/Drawer.razor

@@ -29,7 +29,7 @@
                         @if (Closable)
                         {
                             <button @onclick="_=>CloseClick()" aria-label="Close" class="ant-drawer-close">
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             </button>
                         }
                     </div>

components/icon/Icon.razor.cs

@@ -9,7 +9,7 @@ using OneOf;
 
 namespace AntDesign
 {
-    public partial class AntIcon : AntDomComponentBase
+    public partial class Icon : AntDomComponentBase
     {
         [Parameter]
         public bool Spin { get; set; }
@@ -24,7 +24,7 @@ namespace AntDesign
         /// 'fill' | 'outline' | 'twotone';
         /// </summary>
         [Parameter]
-        public string Theme { get; set; } = AntIconThemeType.Outline;
+        public string Theme { get; set; } = IconThemeType.Outline;
 
         [Parameter]
         public string TwotoneColor { get; set; }
@@ -79,7 +79,7 @@ namespace AntDesign
 
             _baseUrl = NavigationManager.ToAbsoluteUri(NavigationManager.BaseUri);
 
-            if (this is AntIcon icon)
+            if (this is Icon icon)
             {
                 Button?.Icons.Add(icon);
             }

components/icon/IconThemeType.cs

@@ -5,10 +5,10 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntIconThemeType
+    public static class IconThemeType
     {
         public const string Fill = "fill";
         public const string Outline = "outline";
         public const string Twotone = "twotone";
     }
-}
+}

components/input-number/InputNumber.razor

@@ -3,8 +3,8 @@
 
 <div class="@ClassMapper.Class" style="@Style" id="@Id">
     <div class="ant-input-number-handler-wrap">
-        <AntIcon class="@GetIconClass("up")" Type="up" OnClick="Increase" />
-        <AntIcon class="@GetIconClass("down")" Type="down" OnClick="Decrease" />
+        <Icon class="@GetIconClass("up")" Type="up" OnClick="Increase" />
+        <Icon class="@GetIconClass("down")" Type="down" OnClick="Decrease" />
     </div>
     <div class="ant-input-number-input-wrap">
         <Input class="ant-input-number-input" @bind-Value="@CurrentValueAsString" Type="number" OnInput="(e)=>OnInput(e)" />

components/input/Input.cs

@@ -172,7 +172,7 @@ namespace AntDesign
         {
             Suffix = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(31);
+                builder.OpenComponent<Icon>(31);
                 builder.AddAttribute(32, "Type", "close-circle");
                 if (string.IsNullOrEmpty(Value))
                 {

components/input/InputPassword.razor.cs

@@ -36,7 +36,7 @@ namespace AntDesign
                     int i = 0;
                     builder.OpenElement(i++, "span");
                     builder.AddAttribute(i++, "class", $"{PrefixCls}-suffix");
-                    builder.OpenComponent<AntIcon>(i++);
+                    builder.OpenComponent<Icon>(i++);
                     builder.AddAttribute(i++, "class", $"{PrefixCls}-password-icon");
                     builder.AddAttribute(i++, "type", _eyeIcon);
                     builder.AddAttribute(i++, "onclick", CallbackFactory.Create(this, ToggleVisibility));

components/input/Search.razor.cs

@@ -26,7 +26,7 @@ namespace AntDesign
             {
                 Suffix = new RenderFragment((builder) =>
                 {
-                    builder.OpenComponent<AntIcon>(35);
+                    builder.OpenComponent<Icon>(35);
                     builder.AddAttribute(36, "class", $"{PrefixCls}-search-icon");
                     builder.AddAttribute(37, "type", "search");
                     builder.AddAttribute(38, "onclick", CallbackFactory.Create<MouseEventArgs>(this, HandleSearch));

components/layout/Sider.razor

@@ -6,7 +6,7 @@
     {
         <span class="ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left"
               @onclick="ToggleCollapsed">
-            <AntIcon Type="bars" />
+            <Icon Type="bars" />
         </span>
     }
     <CascadingValue Value="this">

components/layout/Sider.razor.cs

@@ -64,7 +64,7 @@ namespace AntDesign
 
         private RenderFragment defaultTrigger => builder =>
         {
-            builder.OpenComponent<AntIcon>(1);
+            builder.OpenComponent<Icon>(1);
             builder.AddAttribute(2, "Type", isCollapsed ? "right" : "left");
             builder.AddAttribute(3, "Theme", "outline");
             builder.CloseComponent();
@@ -123,4 +123,4 @@ namespace AntDesign
             StateHasChanged();
         }
     }
-}
+}

components/list/AntList.razor

@@ -41,14 +41,14 @@
     @<Template>
         @if (content.Grid != null)
         {
-            <AntRow Gutter="content.Grid.Gutter">
+            <Row Gutter="content.Grid.Gutter">
                 @foreach (var item in content.DataSource)
                 {
                     <AntListItem>
                         @content.Item(item)
                     </AntListItem>
                 }
-            </AntRow>
+            </Row>
         }
         else
         {

components/list/AntListItem.razor

@@ -9,11 +9,11 @@
 }
 else
 {
-    <AntCol Flex="1" Style="@ColStyle">
-        <div class="@ClassMapper.Class" style="@Style" Id="@Id">
-            @itemChildren(this)
-        </div>
-    </AntCol>
+<AntDesign.Col Flex="1" Style="@ColStyle">
+    <div class="@ClassMapper.Class" style="@Style" Id="@Id">
+        @itemChildren(this)
+    </div>
+</AntDesign.Col>
 
 }
 @code{

components/message/MessageItem.razor

@@ -9,28 +9,28 @@
                 {
                     case MessageType.Success:
                         {
-                            <AntIcon Type="check-circle" Theme="fill" Class="anticon anticon-check-circle" ></AntIcon>
+                            <Icon Type="check-circle" Theme="fill" Class="anticon anticon-check-circle" ></Icon>
 
                             break;
                         }
                     case MessageType.Warning:
                         {
-                            <AntIcon Type="exclamation-circle" Theme="fill" Class="anticon anticon-exclamation-circle"></AntIcon>
+                            <Icon Type="exclamation-circle" Theme="fill" Class="anticon anticon-exclamation-circle"></Icon>
                             break;
                         }
                     case MessageType.Error:
                         {
-                            <AntIcon Type="close-circle" Theme="fill"  Class="anticon anticon-close-circle"></AntIcon>
+                            <Icon Type="close-circle" Theme="fill"  Class="anticon anticon-close-circle"></Icon>
                             break;
                         }
                     case MessageType.Info:
                         {
-                            <AntIcon Type="info-circle" Theme="fill" Class="anticon anticon-info-circle"></AntIcon>
+                            <Icon Type="info-circle" Theme="fill" Class="anticon anticon-info-circle"></Icon>
                             break;
                         }
                     default:
                         {
-                            <AntIcon Type="loading" Theme="outline" Class="anticon anticon-loading"></AntIcon>
+                            <Icon Type="loading" Theme="outline" Class="anticon anticon-loading"></Icon>
                             break;
                         }
                 }

components/modal/Modal.razor.cs

@@ -32,7 +32,7 @@ namespace AntDesign
 
         private static readonly RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "Close");
             builder.AddAttribute(2, "Theme", "Outline");
             builder.CloseComponent();

components/modal/ModalService.cs

@@ -25,7 +25,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "info-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -44,7 +44,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "check-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -63,7 +63,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "close-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -82,7 +82,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "exclamation-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();

components/modal/config/DialogOptions.cs

@@ -23,7 +23,7 @@ namespace AntDesign
 
         private static readonly RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "Close");
             builder.AddAttribute(2, "Theme", "Outline");
             builder.CloseComponent();

components/notification/Notification.razor.cs

@@ -86,7 +86,7 @@ namespace AntDesign
 
         private RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "close");
             builder.CloseComponent();
         };

components/notification/NotificationItem.razor

@@ -21,7 +21,7 @@
                     case NotificationType.Success:
                         {
                             <span role="img" aria-label="check-circle" class="anticon anticon-check-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-success">
-                                <AntIcon Type="check-circle" Theme="outline"></AntIcon>
+                                <Icon Type="check-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -29,7 +29,7 @@
                     case NotificationType.Warning:
                         {
                             <span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-warning">
-                                <AntIcon Type="exclamation-circle" Theme="outline"></AntIcon>
+                                <Icon Type="exclamation-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -37,7 +37,7 @@
                     case NotificationType.Error:
                         {
                             <span role="img" aria-label="close-circle" class="anticon anticon-close-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-error">
-                                <AntIcon Type="close-circle" Theme="outline"></AntIcon>
+                                <Icon Type="close-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -45,7 +45,7 @@
                     case NotificationType.Info:
                         {
                             <span role="img" aria-label="info-circle" class="anticon anticon-info-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-info">
-                                <AntIcon Type="info-circle" Theme="outline"></AntIcon>
+                                <Icon Type="info-circle" Theme="outline"></Icon>
                             </span>
 
                             break;

components/pagination/PaginationItem.razor

@@ -32,20 +32,20 @@
                     @switch (type)
                     {
                         case "prev":
-                            <AntIcon Type="left"></AntIcon>
+                            <Icon Type="left"></Icon>
                             break;
                         case "next":
-                            <AntIcon Type="right"></AntIcon>
+                            <Icon Type="right"></Icon>
                             break;
                         default:
                             <div class="ant-pagination-item-container">
                                 @if (type == "prev_5")
                                 {
-                                    <AntIcon Type="double-left" Class="ant-pagination-item-link-icon"></AntIcon>
+                                    <Icon Type="double-left" Class="ant-pagination-item-link-icon"></Icon>
                                 }
                                 else if (type == "next_5")
                                 {
-                                    <AntIcon Type="double-right" Class="ant-pagination-item-link-icon"></AntIcon>
+                                    <Icon Type="double-right" Class="ant-pagination-item-link-icon"></Icon>
                                 }
                                 <span class="ant-pagination-item-ellipsis">•••</span>
                             </div>

components/progress/Progress.razor

@@ -36,13 +36,13 @@
                 @if (Status == ProgressStatus.Success)
                 {
                     <span class="ant-progress-text">
-                        <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                        <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                     </span>
                 }
                 else if (Status == ProgressStatus.Exception)
                 {
                     <span class="ant-progress-text">
-                        <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                        <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                     </span>
                 }
                 else
@@ -77,13 +77,13 @@
             @if (Status == ProgressStatus.Success && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else if (Status == ProgressStatus.Exception && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else
@@ -106,13 +106,13 @@
             @if (Status == ProgressStatus.Success && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else if (Status == ProgressStatus.Exception && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else
@@ -127,13 +127,13 @@
         if (Status == ProgressStatus.Success)
         {
             <span class="ant-progress-text">
-                <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
             </span>
         }
         else if (Status == ProgressStatus.Exception)
         {
             <span class="ant-progress-text">
-                <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
             </span>
         }
         else

components/rate/RateItem.razor

@@ -12,7 +12,7 @@
                 }
                 else
                 {
-                    <AntIcon Type="star" Theme="fill"></AntIcon>
+                    <Icon Type="star" Theme="fill"></Icon>
                 }
             </div>
             <div class="ant-rate-star-second" @onclick="@(async e => await item.OnClick(false))" @onmouseover="@(async e => await item.OnHover(false))">
@@ -22,7 +22,7 @@
                 }
                 else
                 {
-                    <AntIcon Type="star" Theme="fill"></AntIcon>
+                    <Icon Type="star" Theme="fill"></Icon>
                 }
             </div>
         </div>

components/result/Result.razor.cs

@@ -41,7 +41,7 @@ namespace AntDesign
         {
             var iconType = DetermineIconType();
 
-            builder.OpenComponent<AntIcon>(1);
+            builder.OpenComponent<Icon>(1);
             builder.AddAttribute(2, "Type", iconType.type);
             builder.AddAttribute(2, "Theme", iconType.theme);
             builder.CloseComponent();

components/steps/Step.razor

@@ -16,11 +16,11 @@
                         {
                             if (Status == "finish")
                             {
-                                <AntIcon type="check"></AntIcon>
+                                <Icon type="check"></Icon>
                             }
                             else if (Status == "error")
                             {
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             }
                             else if (Status == "process" || Status == "wait")
                             {
@@ -31,11 +31,11 @@
                         {
                             if (Status == "error")
                             {
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             }
                             else
                             {
-                                <AntIcon type="@Icon"></AntIcon>
+                                <Icon type="@Icon"></Icon>
                             }
 
                         }

components/steps/Step.razor.cs

@@ -4,7 +4,7 @@ using System.Collections.Generic;
 
 namespace AntDesign
 {
-    public partial class AntStep : AntDomComponentBase
+    public partial class Step : AntDomComponentBase
     {
         private string _status = "wait";
         private bool _isCustomStatus;
@@ -36,7 +36,7 @@ namespace AntDesign
         internal string Direction { get; set; } = "horizontal";
 
         [CascadingParameter]
-        public AntSteps Parent { get; set; }
+        public Steps Parent { get; set; }
 
         [Parameter]
         public string Icon { get; set; }

components/steps/Steps.razor.cs

@@ -5,13 +5,13 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntSteps : AntDomComponentBase
+    public partial class Steps : AntDomComponentBase
     {
         private bool _showProgressDot;
         private RenderFragment _progressDot;
         public EventHandler Handler { get; }
 
-        internal List<AntStep> _children = new List<AntStep>();
+        internal List<Step> _children = new List<Step>();
         [Parameter] public int Current { get; set; }
 
         [Parameter]
@@ -69,7 +69,7 @@ namespace AntDesign
                 _children[i].Index = i + this.StartIndex;
                 _children[i].GroupCurrentIndex = this.Current;
                 _children[i].Last = _children.Count == i + 1;
-                AntStep.MarkForCheck();
+                Step.MarkForCheck();
             }
         }
 

components/tabs/TabPane.razor.cs

@@ -2,20 +2,20 @@
 
 namespace AntDesign
 {
-    public partial class AntTabPane : AntDomComponentBase
+    public partial class TabPane : AntDomComponentBase
     {
         private const string PrefixCls = "ant-tabs-tab";
-        private AntTabs _parent;
+        private Tabs _parent;
 
         internal ClassMapper _classMapper = new ClassMapper();
 
         internal bool IsActive { get; set; }
 
-        public AntTabPane()
+        public TabPane()
         {
         }
 
-        public AntTabPane(string key, RenderFragment tab, RenderFragment childContent)
+        public TabPane(string key, RenderFragment tab, RenderFragment childContent)
         {
             this.Key = key;
             this.Tab = tab;
@@ -23,7 +23,7 @@ namespace AntDesign
         }
 
         [CascadingParameter]
-        internal AntTabs Parent
+        internal Tabs Parent
         {
             get
             {
@@ -52,7 +52,7 @@ namespace AntDesign
         public string Key { get; set; }
 
         /// <summary>
-        /// Show text in <see cref="AntTabPane"/>'s head
+        /// Show text in <see cref="TabPane"/>'s head
         /// </summary>
         [Parameter]
         public RenderFragment Tab { get; set; }

components/tabs/TabPosition.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabPosition
+    public static class TabPosition
     {
         public const string Top = "top";
         public const string Right = "right";

components/tabs/TabSize.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabSize
+    public static class TabSize
     {
         public const string Large = "large";
         public const string Default = "default";

components/tabs/TabType.cs

@@ -6,10 +6,10 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabType
+    public static class TabType
     {
         public const string Line = "line";
         public const string Card = "card";
         public const string EditableCard = "editable-card";
     }
-}
+}

components/tabs/Tabs.razor

@@ -13,19 +13,19 @@
         </div>
     }
 
-    @if (TabPosition != AntTabPosition.Bottom)
+    @if (TabPosition != AntDesign.TabPosition.Bottom)
     {
         <!--Tab bar-->
         <div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
             <div class="@_navClassMapper.Class">
                 <span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
                     <span class="ant-tabs-tab-prev-icon">
-                        <AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
+                        <Icon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"left":"up")" />
                     </span>
                 </span>
                 <span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
                     <span class="ant-tabs-tab-next-icon">
-                        <AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
+                        <Icon class="ant-tabs-tab-next-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"right":"down")" />
                     </span>
                 </span>
                 <div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
@@ -43,11 +43,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -65,11 +65,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -102,19 +102,19 @@
 
         }
     </div>
-    @if (TabPosition == AntTabPosition.Bottom)
+    @if (TabPosition == AntDesign.TabPosition.Bottom)
     {
         <!--Tab bar-->
         <div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
             <div class="@_navClassMapper.Class">
                 <span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
                     <span class="ant-tabs-tab-prev-icon">
-                        <AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
+                        <Icon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"left":"up")" />
                     </span>
                 </span>
                 <span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
                     <span class="ant-tabs-tab-next-icon">
-                        <AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
+                        <Icon class="ant-tabs-tab-next-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"right":"down")" />
                     </span>
                 </span>
                 <div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
@@ -132,11 +132,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -154,11 +154,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else

components/tabs/Tabs.razor.cs

@@ -8,16 +8,16 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntTabs : AntDomComponentBase
+    public partial class Tabs : AntDomComponentBase
     {
         private const string PrefixCls = "ant-tabs";
-        private bool IsHorizontal { get => TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom; }
+        private bool IsHorizontal { get => TabPosition == AntDesign.TabPosition.Top || TabPosition == AntDesign.TabPosition.Bottom; }
         private ClassMapper _barClassMapper = new ClassMapper();
         private ClassMapper _prevClassMapper = new ClassMapper();
         private ClassMapper _nextClassMapper = new ClassMapper();
         private ClassMapper _navClassMapper = new ClassMapper();
-        private AntTabPane _activePane;
-        private AntTabPane _renderedActivePane;
+        private TabPane _activePane;
+        private TabPane _renderedActivePane;
         private ElementReference _activeTabBar;
         private ElementReference _scrollTabBar;
         private ElementReference _tabBars;
@@ -30,7 +30,7 @@ namespace AntDesign
         private int _navTotal;
         private int _navSection;
         private bool _needRefresh;
-        internal List<AntTabPane> _panes = new List<AntTabPane>();
+        internal List<TabPane> _panes = new List<TabPane>();
 
         #region Parameters
 
@@ -40,7 +40,7 @@ namespace AntDesign
         private string _activeKey;
 
         /// <summary>
-        /// Current <see cref="AntTabPane"/>'s <see cref="AntTabPane.Key"/>
+        /// Current <see cref="TabPane"/>'s <see cref="TabPane.Key"/>
         /// </summary>
         [Parameter]
         public string ActiveKey
@@ -60,7 +60,7 @@ namespace AntDesign
         }
 
         /// <summary>
-        /// Whether to change tabs with animation. Only works while <see cref="TabPosition"/> = <see cref="AntTabPosition.Top"/> or <see cref="AntTabPosition.Bottom"/>
+        /// Whether to change tabs with animation. Only works while <see cref="TabPosition"/> = <see cref="TabPosition.Top"/> or <see cref="TabPosition.Bottom"/>
         /// </summary>
         [Parameter]
         public bool Animated { get; set; } = true;
@@ -72,13 +72,13 @@ namespace AntDesign
         public object RenderTabBar { get; set; }
 
         /// <summary>
-        /// Initial active <see cref="AntTabPane"/>'s <see cref="AntTabPane.Key"/>, if <see cref="ActiveKey"/> is not set
+        /// Initial active <see cref="TabPane"/>'s <see cref="TabPane.Key"/>, if <see cref="ActiveKey"/> is not set
         /// </summary>
         [Parameter]
         public string DefaultActiveKey { get; set; }
 
         /// <summary>
-        /// Hide plus icon or not. Only works while <see cref="Type"/> = <see cref="AntTabType.EditableCard"/>
+        /// Hide plus icon or not. Only works while <see cref="Type"/> = <see cref="TabType.EditableCard"/>
         /// </summary>
         [Parameter]
         public bool HideAdd { get; set; } = false;
@@ -87,7 +87,7 @@ namespace AntDesign
         /// Preset tab bar size
         /// </summary>
         [Parameter]
-        public string Size { get; set; } = AntTabSize.Default;
+        public string Size { get; set; } = TabSize.Default;
 
         /// <summary>
         /// Extra content in tab bar
@@ -111,13 +111,13 @@ namespace AntDesign
         /// Position of tabs
         /// </summary>
         [Parameter]
-        public string TabPosition { get; set; } = AntTabPosition.Top;
+        public string TabPosition { get; set; } = AntDesign.TabPosition.Top;
 
         /// <summary>
         /// Basic style of tabs
         /// </summary>
         [Parameter]
-        public string Type { get; set; } = AntTabType.Line;
+        public string Type { get; set; } = TabType.Line;
 
         /// <summary>
         /// Callback executed when active tab is changed
@@ -126,7 +126,7 @@ namespace AntDesign
         public EventCallback<object> OnChange { get; set; }
 
         /// <summary>
-        /// Callback executed when tab is added or removed. Only works while <see cref="Type"/> = <see cref="AntTabType.EditableCard"/>
+        /// Callback executed when tab is added or removed. Only works while <see cref="Type"/> = <see cref="TabType.EditableCard"/>
         /// </summary>
         [Parameter]
         public EventCallback<object> OnEdit { get; set; }
@@ -156,7 +156,7 @@ namespace AntDesign
         public bool Keyboard { get; set; } = true;
 
         [Parameter]
-        public Func<AntTabPane> CreateTabPane { get; set; }
+        public Func<TabPane> CreateTabPane { get; set; }
 
         [Parameter]
         public bool Draggable { get; set; }
@@ -168,7 +168,7 @@ namespace AntDesign
             _needRefresh = true;
             _renderedActivePane = null;
             string type = parameters.GetValueOrDefault<string>(nameof(Type));
-            if (type == AntTabType.Card)
+            if (type == TabType.Card)
             {
                 // according to ant design documents,
                 // Animated default to false when type="card"
@@ -188,11 +188,11 @@ namespace AntDesign
         {
             base.OnParametersSet();
 
-            if (Type == AntTabType.EditableCard && !HideAdd)
+            if (Type == TabType.EditableCard && !HideAdd)
             {
                 TabBarExtraContent = (b) =>
                 {
-                    b.OpenComponent<AntIcon>(0);
+                    b.OpenComponent<Icon>(0);
                     b.AddAttribute(1, "Type", "plus");
                     b.AddAttribute(2, "class", $"{PrefixCls}-new-tab");
                     b.AddAttribute(3, "onclick", EventCallback.Factory.Create(this, AddTabPane));
@@ -204,18 +204,18 @@ namespace AntDesign
                 .Add(PrefixCls)
                 .Add($"{PrefixCls}-{TabPosition}")
                 .Add($"{PrefixCls}-{Type}")
-                .If($"{PrefixCls}-large", () => Size == AntTabSize.Large)
-                .If($"{PrefixCls}-small", () => Size == AntTabSize.Small)
-                .If($"{PrefixCls}-{AntTabType.Card}", () => Type == AntTabType.EditableCard)
+                .If($"{PrefixCls}-large", () => Size == TabSize.Large)
+                .If($"{PrefixCls}-small", () => Size == TabSize.Small)
+                .If($"{PrefixCls}-{TabType.Card}", () => Type == TabType.EditableCard)
                 .If($"{PrefixCls}-no-animation", () => !Animated);
 
             _barClassMapper.Clear()
                 .Add($"{PrefixCls}-bar")
                 .Add($"{PrefixCls}-{TabPosition}-bar")
                 .Add($"{PrefixCls}-{Type}-bar")
-                .If($"{PrefixCls}-{AntTabType.Card}-bar", () => Type == AntTabType.EditableCard)
-                .If($"{PrefixCls}-large-bar", () => Size == AntTabSize.Large)
-                .If($"{PrefixCls}-small-bar", () => Size == AntTabSize.Small);
+                .If($"{PrefixCls}-{TabType.Card}-bar", () => Type == TabType.EditableCard)
+                .If($"{PrefixCls}-large-bar", () => Size == TabSize.Large)
+                .If($"{PrefixCls}-small-bar", () => Size == TabSize.Small);
 
             _prevClassMapper.Clear()
                 .Add($"{PrefixCls}-tab-prev")
@@ -242,7 +242,7 @@ namespace AntDesign
         /// <param name="tabPane">The AntTabPane to be added</param>
         /// <exception cref="ArgumentNullException">Key is null</exception>
         /// <exception cref="ArgumentException">An AntTabPane with the same key already exists</exception>
-        internal void AddTabPane(AntTabPane tabPane)
+        internal void AddTabPane(TabPane tabPane)
         {
             if (string.IsNullOrEmpty(tabPane.Key))
             {
@@ -265,15 +265,15 @@ namespace AntDesign
         {
             if (CreateTabPane != null)
             {
-                AntTabPane pane = CreateTabPane();
+                TabPane pane = CreateTabPane();
                 Dictionary<string, object> properties = new Dictionary<string, object>
                 {
-                    [nameof(AntTabPane.Parent)] = this,
-                    [nameof(AntTabPane.ForceRender)] = pane.ForceRender,
-                    [nameof(AntTabPane.Key)] = pane.Key,
-                    [nameof(AntTabPane.Tab)] = pane.Tab,
-                    [nameof(AntTabPane.ChildContent)] = pane.ChildContent,
-                    [nameof(AntTabPane.Disabled)] = pane.Disabled
+                    [nameof(TabPane.Parent)] = this,
+                    [nameof(TabPane.ForceRender)] = pane.ForceRender,
+                    [nameof(TabPane.Key)] = pane.Key,
+                    [nameof(TabPane.Tab)] = pane.Tab,
+                    [nameof(TabPane.ChildContent)] = pane.ChildContent,
+                    [nameof(TabPane.Disabled)] = pane.Disabled
                 };
                 pane.SetParametersAsync(ParameterView.FromDictionary(properties));
                 pane.Parent = this;
@@ -281,7 +281,7 @@ namespace AntDesign
             }
         }
 
-        public void RemoveTabPane(AntTabPane pane)
+        public void RemoveTabPane(TabPane pane)
         {
             _needRefresh = true;
             _panes.Remove(pane);
@@ -291,7 +291,7 @@ namespace AntDesign
             }
         }
 
-        private void ActivatePane(AntTabPane tabPane)
+        private void ActivatePane(TabPane tabPane)
         {
             if (!tabPane.Disabled && _panes.Contains(tabPane))
             {
@@ -475,9 +475,9 @@ namespace AntDesign
 
         #region DRAG & DROP
 
-        private AntTabPane _draggingPane;
+        private TabPane _draggingPane;
 
-        private void HandleDragStart(DragEventArgs args, AntTabPane pane)
+        private void HandleDragStart(DragEventArgs args, TabPane pane)
         {
             if (Draggable)
             {
@@ -487,7 +487,7 @@ namespace AntDesign
             }
         }
 
-        private void HandleDrop(AntTabPane pane)
+        private void HandleDrop(TabPane pane)
         {
             if (Draggable && _draggingPane != null)
             {

components/tag/Tag.razor

@@ -7,12 +7,12 @@
     <div class="@ClassMapper.Class" style="@Style" id="@Id" @ref="Ref" @onclick="ClickTag">
         @if (!string.IsNullOrEmpty(Icon))
         {
-            <AntIcon Type="@Icon"></AntIcon>
+            <Icon Type="@Icon"></Icon>
         }
         @ChildContent
         @if (Mode == "closeable" || Closable)
         {
-            <AntIcon Type="close" TabIndex="-1" @onclick="CloseTag" />
+            <Icon Type="close" TabIndex="-1" @onclick="CloseTag" />
         }
 
     </div>

components/tag/Tag.razor.cs

@@ -8,7 +8,7 @@ using Microsoft.AspNetCore.Components.Web;
 
 namespace AntDesign
 {
-    public partial class AntTag : AntDomComponentBase
+    public partial class Tag : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }

components/timeline/Timeline.razor

@@ -25,6 +25,6 @@
 
 @code{
 
-  private RenderFragment _loadingDot = @<AntIcon type="loading"></AntIcon>;
+  private RenderFragment _loadingDot = @<Icon type="loading"></Icon>;
 
 }

components/timeline/Timeline.razor.cs

@@ -5,7 +5,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace AntDesign
 {
-    public partial class AntTimeline : AntDomComponentBase
+    public partial class Timeline : AntDomComponentBase
     {
         /// <summary>
         /// 'left' | 'alternate' | 'right'
@@ -21,12 +21,12 @@ namespace AntDesign
 
         protected virtual RenderFragment LoadingDot { get; }
 
-        private AntTimelineItem PendingItem
+        private TimelineItem PendingItem
         {
             get
             {
                 if (this.Pending == null) return null;
-                var item = new AntTimelineItem(
+                var item = new TimelineItem(
                     childContent: !_isPendingBoolean ? Pending : null,
                     dot: PendingDot ?? LoadingDot,
                     @class: "ant-timeline-item-pending"
@@ -43,13 +43,13 @@ namespace AntDesign
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        private IList<AntTimelineItem> _items = new List<AntTimelineItem>();
+        private IList<TimelineItem> _items = new List<TimelineItem>();
 
-        protected IList<AntTimelineItem> DisplayItems
+        protected IList<TimelineItem> DisplayItems
         {
             get
             {
-                var pitems = PendingItem != null ? new[] { PendingItem } : Array.Empty<AntTimelineItem>();
+                var pitems = PendingItem != null ? new[] { PendingItem } : Array.Empty<TimelineItem>();
                 if (Reverse)
                 {
                     return pitems.Concat(UpdateChildren(_items.Reverse())).ToList();
@@ -86,13 +86,13 @@ namespace AntDesign
                 .If($"{prefix}-reverse", () => Reverse);
         }
 
-        internal void AddItem(AntTimelineItem item)
+        internal void AddItem(TimelineItem item)
         {
             this._items.Add(item);
             StateHasChanged();
         }
 
-        protected IEnumerable<AntTimelineItem> UpdateChildren(IEnumerable<AntTimelineItem> items)
+        protected IEnumerable<TimelineItem> UpdateChildren(IEnumerable<TimelineItem> items)
         {
             if (!items.Any())
                 yield break;

components/timeline/TimelineItem.cs

@@ -3,7 +3,7 @@ using System.Linq;
 
 namespace AntDesign
 {
-    public partial class AntTimelineItem : AntDomComponentBase
+    public partial class TimelineItem : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -14,7 +14,7 @@ namespace AntDesign
         [Parameter]
         public string Color { get; set; } = "blue";
 
-        [CascadingParameter] public AntTimeline ParentTimeline { get; set; }
+        [CascadingParameter] public Timeline ParentTimeline { get; set; }
 
         internal ClassMapper _headClassMapper = new ClassMapper();
 
@@ -29,12 +29,12 @@ namespace AntDesign
 
         private readonly string[] _defaultColors = new[] { "blue", "red", "green", "gray" };
 
-        public AntTimelineItem()
+        public TimelineItem()
         {
 
         }
 
-        internal AntTimelineItem(RenderFragment childContent, RenderFragment dot, string @class)
+        internal TimelineItem(RenderFragment childContent, RenderFragment dot, string @class)
         {
             this.ChildContent = childContent;
             this.Dot = dot;

components/typography/Paragraph.cs

@@ -4,7 +4,7 @@ using System;
 
 namespace AntDesign
 {
-    public class AntParagraph : AntTypographyBase
+    public class Paragraph : TypographyBase
     {
         [Parameter]
         public bool Code { get; set; } = false;
@@ -54,9 +54,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(9, "a");
                     builder.AddAttribute(10, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(10);
+                    builder.OpenComponent<Icon>(10);
                     builder.AddAttribute(11, "type", "copy");
-                    builder.AddAttribute(12, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(12, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }

components/typography/Text.cs

@@ -6,7 +6,7 @@ using System.Text;
 
 namespace AntDesign
 {
-    public class AntText : AntTypographyBase
+    public class Text : TypographyBase
     {
         [Parameter]
         public bool Code { get; set; }
@@ -56,9 +56,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(7, "a");
                     builder.AddAttribute(8, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(9);
+                    builder.OpenComponent<Icon>(9);
                     builder.AddAttribute(10, "type", "copy");
-                    builder.AddAttribute(11, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(11, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }

components/typography/Title.cs

@@ -6,7 +6,7 @@ using System.Text;
 
 namespace AntDesign
 {
-    public class AntTitle : AntTypographyBase
+    public class Title : TypographyBase
     {
         [Parameter]
         public int Level { get; set; } = 1;
@@ -53,9 +53,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(6, "a");
                     builder.AddAttribute(7, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(8);
+                    builder.OpenComponent<Icon>(8);
                     builder.AddAttribute(9, "type", "copy");
-                    builder.AddAttribute(10, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(10, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }

components/typography/TypographyBase.cs

@@ -4,7 +4,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public abstract class AntTypographyBase : AntDomComponentBase
+    public abstract class TypographyBase : AntDomComponentBase
     {
         [Inject]
         public HtmlRenderService Service { get; set; }

site/AntBlazor.Docs/Demos/Affix/demo/Basic.md

@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The simplest usage.

site/AntBlazor.Docs/Demos/Affix/demo/Basic.razor

@@ -0,0 +1,31 @@
+
+<div>
+	<Affix OffsetTop="@_offsetTop">
+		<Button Type="@ButtonType.Primary" OnClick="AddTop">
+			Affix top
+		</Button>
+	</Affix>
+	<br />
+	<Affix OffsetBottom="@_offsetBottom">
+		<Button Type="@ButtonType.Primary" OnClick="AddBottom">
+			Affix bottom
+		</Button>
+	</Affix>
+</div>
+
+
+@code
+{
+        private uint _offsetTop = 10;
+        private uint _offsetBottom = 10;
+
+        private void AddTop()
+        {
+            _offsetTop += 10;
+        }
+
+        private void AddBottom()
+        {
+            _offsetBottom += 10;
+        }
+}

site/AntBlazor.Docs/Demos/Affix/demo/CallBack.md

@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 固定状态改变的回调
+  en-US: Callback
+---
+
+## zh-CN
+可以获得是否固定的状态。
+
+
+## en-US
+Callback with affixed state.

site/AntBlazor.Docs/Demos/Affix/demo/Callback.razor

@@ -0,0 +1,15 @@
+<div>
+<Affix OffsetTop="120" OnChange="OnAffixChange">
+	<Button>
+		120px to affix top
+	</Button>
+</Affix>
+</div>
+
+@code{
+        private void OnAffixChange(bool affixed)
+        {
+            Console.WriteLine(affixed);
+        }
+		
+}

site/AntBlazor.Docs/Demos/Affix/demo/Scroll.md

@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 滚动容器
+  en-US: Container to scroll
+---
+
+## zh-CN
+用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
+
+
+## en-US
+Set a `Target for` `Affix`, which listen to scroll event of target element (default is `window`).

site/AntBlazor.Docs/Demos/Affix/demo/Scroll.razor

@@ -0,0 +1,26 @@
+
+<style>
+	.scrollable-container{
+		height: 100px;
+		overflow-y: scroll;
+	}
+	.background {
+		padding-top: 60px;
+		height: 300px;
+		background-image: url("https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg")
+	}
+</style>
+<div class="scrollable-container" @ref="_container">
+	<div class="background">
+		<Affix Target="@_container">
+			<Button Type="@ButtonType.Primary">
+				Fixed at the top of container
+			</Button>
+		</Affix>
+	</div>
+</div>
+
+@code{
+
+        private ElementReference _container;
+	}

site/AntBlazor.Docs/Demos/Affix/doc/index.en-US.md

@@ -0,0 +1,26 @@
+---
+category: Components
+type: Navigation
+title: Affix
+---
+
+Wrap Affix around another component to make it stick the viewport.
+
+## When To Use
+
+- On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
+- Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
+
+
+## API
+
+
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| OffsetBottom | Offset from the bottom of the viewport (in pixels) | int         | -         |
+| OffsetTop   | Offset from the top of the viewport (in pixels)| int         |- |
+| Target | Specifies the scrollable area DOM node | RenderFragment         |-       |
+| OnChange |Callback for when Affix state is changed| Function()  | -  |
+
+Note: Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:

site/AntBlazor.Docs/Demos/Affix/doc/index.zh-CN.md

@@ -0,0 +1,31 @@
+---
+category: Components
+type: 导航
+title: Affix
+subtitle: 固钉
+---
+
+将页面元素钉在可视范围。
+
+## 何时使用
+
+- 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+- 页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+
+## API
+
+时间轴
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| OffsetBottom | 距离窗口底部达到指定偏移量后触发 | int         | -         |
+| OffsetTop   | 距离窗口顶部达到指定偏移量后触发| int         |-    |
+| Target | 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | RenderFragment         |-       |
+| OnChange | 固定状态改变时触发的回调函数| Function()  | -  |
+
+注意：`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
+
+
+## FAQ
+`Affix` 使用 `target` 绑定容器时，元素会跑到容器外。

site/AntBlazor.Docs/Demos/BackTop/demo/Basic.md

@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The most basic usage.

site/AntBlazor.Docs/Demos/BackTop/demo/Basic.razor

@@ -0,0 +1,7 @@
+<div>
+    <div>
+        Scroll down to see the bottom <strong> gray</strong> button
+    </div>
+    <BackTop Title="Scroll down to see the bottom-right gray button." ></BackTop>
+
+</div>

site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 自定义样式
+  en-US: Custom style
+---
+
+## zh-CN
+可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
+
+
+## en-US
+
+You can customize the style of the button, just note the size limit: no more than `40px * 40px`.

site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.razor

@@ -0,0 +1,33 @@
+<div>
+    <style>
+        .myStyle {
+            height: 40px;
+            width: 40px;
+            line-height: 40;
+            border-radius: 4px;
+            background-color: #1088e9;
+            color: #fff;
+            text-align: center;
+            font-size: 14px;
+        }
+    </style>
+
+    <div style="height:300px; padding: 8px;  overflow:scroll;">
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <BackTop Title="Scroll down to see the bottom-right gray button." />
+
+    </div>
+</div>

site/AntBlazor.Docs/Demos/BackTop/doc/index.en-US.md

@@ -0,0 +1,23 @@
+---
+category: Components
+type: Navigation
+title: BackTop
+---
+
+`BackTop` makes it easy to go back to the top of the page.
+
+## When To Use
+
+- When the page content is very long.
+- When you need to go back to the top very frequently in order to view the contents.
+
+
+## API
+
+BackTop
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Target | 	specifies the scrollable area dom node | RenderFragment         | -         |
+| VisibilityHeight   | the `BackTop` button will not show until the scroll height reaches this value| int         |-    |
+| OnClick | a callback function, which can be executed when you click the button | function         |-       |

site/AntBlazor.Docs/Demos/BackTop/doc/index.zh-CN.md

@@ -0,0 +1,24 @@
+---
+category: Components
+type: 导航
+title: BackTop
+subtitle: 回到顶部
+---
+
+返回页面顶部的操作按钮。
+
+## 何时使用
+
+- 当页面内容区域比较长时；
+- 当用户需要频繁返回顶部查看相关内容时。
+
+
+## API
+
+BackTop
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | RenderFragment         | -         |
+| VisibilityHeight   | 滚动高度达到此参数值才出现 `BackTop`| int         |-    |
+| OnClick | 点击按钮的回调函数 | function         |-       |

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

@@ -6,7 +6,7 @@
         <a href="#" class="head-example" />
     </Badge>
     @{
-        RenderFragment count = @<AntIcon Type="clock-circle" Fill="#f5222d"/>;
+        RenderFragment count = @<Icon Type="clock-circle" Fill="#f5222d"/>;
     }
     <Badge Count="@(count)">
         <a href="#" class="head-example" />

site/AntBlazor.Docs/Demos/Badge/demo/Change.razor

@@ -5,10 +5,10 @@
         </Badge>
         <ButtonGroup>
             <Button @onclick="_=>decline()">
-                <AntIcon Type="minus"></AntIcon>
+                <Icon Type="minus"></Icon>
             </Button>
             <Button @onclick="_=>increase()">
-                <AntIcon Type="plus"></AntIcon>
+                <Icon Type="plus"></Icon>
             </Button>
         </ButtonGroup>
     </div>

site/AntBlazor.Docs/Demos/Badge/demo/Dot.razor

@@ -1,9 +1,9 @@
 <div>
     <Badge Dot>
-        <AntIcon Type="notification"/>
+        <Icon Type="notification"/>
     </Badge>
     <Badge Count="0" Dot>
-        <AntIcon Type="notification" />
+        <Icon Type="notification" />
     </Badge>
     <Badge Dot>
         <a href="#">Link something</a>

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.md

@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic Usage
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The simplest usage.

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.razor

@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb>
+        <BreadcrumbItem>
+                Home
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            <a>Application List</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            An Application
+        </BreadcrumbItem>
+</Breadcrumb>
+</div>

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.md

@@ -0,0 +1,13 @@
+---
+order: 4
+title:
+  zh-CN: 带下拉菜单的面包屑
+  en-US: Bread crumbs with drop down menu
+---
+
+## zh-CN
+面包屑支持下拉菜单。
+
+
+## en-US
+Breadcrumbs support drop down menu.

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.razor

@@ -0,0 +1,26 @@
+<div>
+	<Breadcrumb Separator="/">
+    <BreadcrumbItem>
+        Ant Design Blazor
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a>Component</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem >
+        <Menu Mode=MenuMode.Horizontal>
+            <MenuItem Key="mail">
+                <Icon Type="mail" Theme="outline"></Icon>
+                Navigation One
+            </MenuItem>
+            <MenuItem Key="app" Disabled>
+                <Icon Type="appstore" Theme="outline"></Icon>
+                Navigation Two
+            </MenuItem>
+        </Menu>
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>
+
+@code{
+    object abc { get; set; } = new object();
+ }

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.md

@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 其它路由
+  en-US: Other Router Integration
+---
+
+## zh-CN
+和 react-router@4+，或其他路由进行结合使用。
+
+
+## en-US
+Used together with react-router@4+ or other router.

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.razor

@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb RouteLabel="">
+    <BreadcrumbItem>
+        Home
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a>Application List</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        An Application
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.md

@@ -0,0 +1,13 @@
+---
+order: 3
+title:
+  zh-CN: 分隔符
+  en-US: Configuring the Separator
+---
+
+## zh-CN
+使用 separator=">" 可以自定义分隔符。
+
+
+## en-US
+The separator can be customized by setting the separator property: separator=">"

site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.razor

@@ -0,0 +1,13 @@
+<div>
+    <Breadcrumb Separator=">" Style="color:red">  
+        <BreadcrumbItem>
+            Home
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            <a>Application List</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            An Application
+        </BreadcrumbItem>
+    </Breadcrumb>
+</div>

site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.md

@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 带有图标的
+  en-US: With an Icon
+---
+
+## zh-CN
+图标放在文字前面。
+
+
+## en-US
+The icon should be placed in front of the text.

site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.razor

@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb>
+    <BreadcrumbItem>
+        <Icon Type="home"></Icon>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a><Icon Type="user"></Icon><span>Application List</span></a>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        Application
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>

site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.en-US.md

@@ -0,0 +1,37 @@
+---
+category: Components
+type: Navigation
+title: Breadcrumb
+---
+
+A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
+
+## When To Use
+
+- When the system has more than two layers in a hierarchy.
+- When you need to inform the user of where they are.
+- When the user may need to navigate back to a higher level.
+
+
+## API
+
+
+Breadcrumb
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| ItemRender | Custom item renderer | int   | -         |
+| Params   | Routing parameters| int   |-      |
+| Routes | The routing stack information of router | string         |-       |
+| Separator |Custom separator| string  | -  |
+
+
+BreadcrumbItem
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Href | Target of hyperlink | int         | -         |
+| Overlay   | The dropdown menu| int         |-         |
+| OnClick | Set the handler to handle click event | function(e)         |-       |
+| DropdownProps |The dropdown props| string  | -  |
+

site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.zh-CN.md

@@ -0,0 +1,38 @@
+---
+category: Components
+type: 导航
+title: Breadcrumb
+subtitle: 面包屑
+---
+
+显示当前页面在系统层级结构中的位置，并能向上返回。
+
+## 何时使用
+
+- 当系统拥有超过两级以上的层级结构时；
+- 当需要告知用户『你在哪里』时；
+- 当需要向上导航的功能时。
+
+
+## API
+
+Breakcrumb
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| ItemRender | 自定义链接函数，和 react-router 配置使用 | int   | -         |
+| Params   | 	路由的参数| int   |-      |
+| Routes | 	router 的路由栈信息 | string         |-       |
+| Separator |分隔符自定义| string  | -  |
+
+
+BreadcrumbItem
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Href | 链接的目的地 | int         | -         |
+| Overlay   | 下拉菜单的内容 | int         |-         |
+| OnClick | 单击事件 | function(e)  |-       |
+| DropdownProps |弹出下拉菜单的自定义配置 | string  | -  |
+
+

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

@@ -1,5 +1,5 @@
 <div>
-    <AntCard Bordered Title=@("Default size card")>
+    <Card Bordered Title=@("Default size card")>
         <Extra>
             <a>More</a>
         </Extra>
@@ -8,9 +8,9 @@
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 
-    <AntCard Bordered Size="small" Title=@("Small size card")>
+    <Card Bordered Size="small" Title=@("Small size card")>
         <Extra>
             <a>More</a>
         </Extra>
@@ -19,16 +19,16 @@
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 
 
 </div>
 @code
 {
-    private RenderFragment actionSetting =@<Template>  <AntIcon Type="setting" /></Template>;
+    private RenderFragment actionSetting =@<Template>  <Icon Type="setting" /></Template>;
 
-    private RenderFragment actionEdit =@<Template><AntIcon Type="edit" /></Template>;
+    private RenderFragment actionEdit =@<Template><Icon Type="edit" /></Template>;
 
-    private RenderFragment actionEllipsis =@<Template> <AntIcon Type="ellipsis" /></Template>;
+    private RenderFragment actionEllipsis =@<Template> <Icon Type="ellipsis" /></Template>;
 
 }

site/AntBlazor.Docs/Demos/Card/demo/Column.razor

@@ -1,25 +1,25 @@
 <div style="background-color: #ececec; padding: 20px;">
     <Row Gutter="16">
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
     </Row>
 

site/AntBlazor.Docs/Demos/Card/demo/Customized.razor

@@ -1,12 +1,12 @@
 <div>
-    <AntCard Hoverable Style="width: 240px" Cover="coverTemplate">
-        <AntCardMeta>
+    <Card Hoverable Style="width: 240px" Cover="coverTemplate">
+        <CardMeta>
             <Title>
                 Europe Street beat
             </Title>
             <Description> www.instagram.com</Description>
-        </AntCardMeta>
-    </AntCard>
+        </CardMeta>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Card/demo/Grid.razor

@@ -1,31 +1,31 @@
 <div>
-    <AntCard Title=@("Card Title")>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+    <Card Title=@("Card Title")>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="false">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="false">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center"Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center"Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
+        </CardGrid>
 
-    </AntCard>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Card/demo/Inner.razor

@@ -1,25 +1,25 @@
 <div>
-    <AntCard Title=@("Card title")>  
+    <Card Title=@("Card title")>  
         <Body>
 
 
-            <AntCard Title=@("Inner card title")>
+            <Card Title=@("Inner card title")>
                 <Extra>   <a slot="extra" href="#">More</a>  </Extra>
                 <Body>                   
                     Inner Card content
                 </Body>
               
-            </AntCard>
-            <AntCard Title=@("Inner card title") Style="margin-top: 16px">
+            </Card>
+            <Card Title=@("Inner card title") Style="margin-top: 16px">
                 <Extra> <a slot="extra" href="#">More</a> </Extra>
                 <Body>
                
                     Inner Card content
                 </Body>             
-            </AntCard>
+            </Card>
 
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Card/demo/Loading.razor

@@ -1,9 +1,9 @@
 <div>
-    <AntCard Loading="loading" Title=@("Card title")>
+    <Card Loading="loading" Title=@("Card title")>
         <p>Card content</p>
         <p>Card content</p>
         <p>Card content</p>
-    </AntCard>
+    </Card>
     <Button Style="margin-top: 16px"  OnClick="handleClick">
         Toggle loading
     </Button>

site/AntBlazor.Docs/Demos/Card/demo/Noborder.razor

@@ -1,11 +1,11 @@
 <div style="background:#ECECEC; padding:30px">
-    <AntCard  Title=@("Card title") Style="width: 300px"> 
+    <Card  Title=@("Card title") Style="width: 300px"> 
         <Body>
             <p>Card content</p>
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Card/demo/Simple.razor

@@ -1,9 +1,9 @@
 <div>
-    <AntCard Bordered="true" Style="width: 300px">
+    <Card Bordered="true" Style="width: 300px">
         <p>Card content</p>
         <p>Card content</p>
         <p>Card content</p>
-    </AntCard>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Card/demo/Support.razor

@@ -1,19 +1,19 @@
 <div>
-    <AntCard Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
-        <AntCardMeta Avatar="avatarTemplate">
+    <Card Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
+        <CardMeta Avatar="avatarTemplate">
             <Title>Meta Card</Title>
             <Description>This is the description</Description>
-        </AntCardMeta>
-    </AntCard>
+        </CardMeta>
+    </Card>
 </div>
 
 @code
 {
-    private RenderFragment actionSetting =@<Template><AntIcon Type="setting" /></Template>;
+    private RenderFragment actionSetting =@<Template><Icon Type="setting" /></Template>;
 
-    private RenderFragment actionEdit =@<Template><AntIcon Type="edit" /></Template>;
+    private RenderFragment actionEdit =@<Template><Icon Type="edit" /></Template>;
 
-    private RenderFragment actionEllipsis =@<Template><AntIcon Type="ellipsis" /></Template>;
+    private RenderFragment actionEllipsis =@<Template><Icon Type="ellipsis" /></Template>;
 
     private RenderFragment avatarTemplate = @<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
 

site/AntBlazor.Docs/Demos/Card/demo/Tabs1.razor

@@ -1,47 +1,47 @@
 <div>
-    <AntCard Style="width:100%" Title=@("Card title")>
+    <Card Style="width:100%" Title=@("Card title")>
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
-            <AntTabs DefaultActiveKey="1">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </Body>
-    </AntCard>
+    </Card>
 
-    <AntCard Style="width:100%" >
+    <Card Style="width:100%" >
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
-            <AntTabs DefaultActiveKey="1">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1">
+                <TabPane Key="1">
                     <Tab>Article</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>App</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Project</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 

site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.md

@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 水平分割线
+  en-US: Horizontal
+---
+
+## zh-CN
+默认为水平分割线，可在中间加入文字。
+
+
+## en-US
+Divider is `horizontal` by default. You can add text within Divider.

site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.razor

@@ -0,0 +1,19 @@
+<div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider />
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Dashed />
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+</div>
+
+
+