refactor: add tag and card demo (#173)

* refactor: tag demo

* refactor: card demo

* fix: dynamic tag

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

components/input/Input.cs

@@ -22,8 +22,6 @@ namespace AntDesign
         //protected string ClearIconClass { get; set; }
         protected static readonly EventCallbackFactory CallbackFactory = new EventCallbackFactory();
 
-        protected ElementReference InputEl { get; set; }
-
         [Parameter]
         public string Type { get; set; } = "text";
 
@@ -39,6 +37,9 @@ namespace AntDesign
         [Parameter]
         public string Placeholder { get; set; }
 
+        [Parameter]
+        public bool AutoFocus { get; set; }
+
         [Parameter]
         public string DefaultValue { get; set; }
 
@@ -69,6 +70,9 @@ namespace AntDesign
         [Parameter]
         public EventCallback<ChangeEventArgs> OnInput { get; set; }
 
+        [Parameter]
+        public EventCallback<FocusEventArgs> OnBlur { get; set; }
+
         public Dictionary<string, object> Attributes { get; set; }
 
         protected override void OnInitialized()
@@ -136,6 +140,11 @@ namespace AntDesign
             SetClasses();
         }
 
+        public async Task Focus()
+        {
+            await JsInvokeAsync(JSInteropConstants.focus, Ref);
+        }
+
         protected async Task OnChangeAsync(ChangeEventArgs args)
         {
             CurrentValueAsString = args.Value.ToString();
@@ -154,6 +163,14 @@ namespace AntDesign
             }
         }
 
+        private async Task OnBlurAsync(FocusEventArgs e)
+        {
+            if (OnBlur.HasDelegate)
+            {
+                await OnBlur.InvokeAsync(e);
+            }
+        }
+
         private void ToggleClearBtn()
         {
             Suffix = (builder) =>
@@ -177,6 +194,16 @@ namespace AntDesign
             };
         }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (this.AutoFocus)
+            {
+                await this.Focus();
+            }
+        }
+
         /// <summary>
         /// Invoked when user add/remove content
         /// </summary>
@@ -206,81 +233,84 @@ namespace AntDesign
                 base.BuildRenderTree(builder);
 
                 string container = "input";
+                int i = 0;
 
                 if (AddOnBefore != null || AddOnAfter != null)
                 {
                     container = "groupWrapper";
-                    builder.OpenElement(0, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(1, "class", GroupWrapperClass);
+                    builder.AddAttribute(i++, "class", GroupWrapperClass);
-                    builder.AddAttribute(2, "style", Style);
+                    builder.AddAttribute(i++, "style", Style);
-                    builder.OpenElement(3, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(4, "class", $"{PrefixCls}-wrapper {PrefixCls}-group");
+                    builder.AddAttribute(i++, "class", $"{PrefixCls}-wrapper {PrefixCls}-group");
                 }
 
                 if (AddOnBefore != null)
                 {
                     // addOnBefore
-                    builder.OpenElement(5, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(6, "class", $"{PrefixCls}-group-addon");
+                    builder.AddAttribute(i++, "class", $"{PrefixCls}-group-addon");
-                    builder.AddContent(7, AddOnBefore);
+                    builder.AddContent(i++, AddOnBefore);
                     builder.CloseElement();
                 }
 
                 if (Prefix != null || Suffix != null)
                 {
-                    builder.OpenElement(8, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(9, "class", AffixWrapperClass);
+                    builder.AddAttribute(i++, "class", AffixWrapperClass);
                     if (container == "input")
                     {
                         container = "affixWrapper";
-                        builder.AddAttribute(10, "style", Style);
+                        builder.AddAttribute(i++, "style", Style);
                     }
                 }
 
                 if (Prefix != null)
                 {
                     // prefix
-                    builder.OpenElement(11, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(12, "class", $"{PrefixCls}-prefix");
+                    builder.AddAttribute(i++, "class", $"{PrefixCls}-prefix");
-                    builder.AddContent(13, Prefix);
+                    builder.AddContent(i++, Prefix);
                     builder.CloseElement();
                 }
 
                 // input
-                builder.OpenElement(14, "input");
+                builder.OpenElement(i++, "input");
-                builder.AddAttribute(15, "class", ClassMapper.Class);
+                builder.AddAttribute(i++, "class", ClassMapper.Class);
                 if (container == "input")
                 {
-                    builder.AddAttribute(16, "style", Style);
+                    builder.AddAttribute(i++, "style", Style);
                 }
 
                 if (Attributes != null)
                 {
                     foreach (KeyValuePair<string, object> pair in Attributes)
                     {
-                        builder.AddAttribute(17, pair.Key, pair.Value);
+                        builder.AddAttribute(i++, pair.Key, pair.Value);
                     }
                 }
 
-                builder.AddAttribute(18, "Id", Id);
+                builder.AddAttribute(i++, "Id", Id);
                 if (Type != "number")
                 {
-                    builder.AddAttribute(19, "type", Type);
+                    builder.AddAttribute(i++, "type", Type);
                 }
 
-                builder.AddAttribute(20, "placeholder", Placeholder);
+                builder.AddAttribute(i++, "placeholder", Placeholder);
-                builder.AddAttribute(21, "value", Value);
+                builder.AddAttribute(i++, "value", Value);
-                builder.AddAttribute(22, "onchange", CallbackFactory.Create(this, OnChangeAsync));
+                builder.AddAttribute(i++, "onchange", CallbackFactory.Create(this, OnChangeAsync));
-                builder.AddAttribute(23, "onkeypress", CallbackFactory.Create(this, OnPressEnterAsync));
+                builder.AddAttribute(i++, "onkeypress", CallbackFactory.Create(this, OnPressEnterAsync));
-                builder.AddAttribute(24, "oninput", CallbackFactory.Create(this, OnInputAsync));
+                builder.AddAttribute(i++, "oninput", CallbackFactory.Create(this, OnInputAsync));
+                builder.AddAttribute(i++, "onblur", CallbackFactory.Create(this, OnBlurAsync));
+                builder.AddElementReferenceCapture(i++, r => Ref = r);
                 builder.CloseElement();
 
                 if (Suffix != null)
                 {
                     // suffix
-                    builder.OpenElement(25, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(26, "class", $"{PrefixCls}-suffix");
+                    builder.AddAttribute(i++, "class", $"{PrefixCls}-suffix");
-                    builder.AddContent(27, Suffix);
+                    builder.AddContent(i++, Suffix);
                     builder.CloseElement();
                 }
 
@@ -292,9 +322,9 @@ namespace AntDesign
                 if (AddOnAfter != null)
                 {
                     // addOnAfter
-                    builder.OpenElement(28, "span");
+                    builder.OpenElement(i++, "span");
-                    builder.AddAttribute(29, "class", $"{PrefixCls}-group-addon");
+                    builder.AddAttribute(i++, "class", $"{PrefixCls}-group-addon");
-                    builder.AddContent(30, AddOnAfter);
+                    builder.AddContent(i++, AddOnAfter);
                     builder.CloseElement();
                 }
 

components/input/TextArea.razor

@@ -3,7 +3,7 @@
 <!--TODO: minheight, maxheight, onResize-->
 
 <textarea class="@ClassMapper.Class" style="@Style" @attributes="Attributes" id="@Id" placeholder="@Placeholder" @bind="Value"
-          @ref="InputEl"
+          @ref="Ref"
           @oninput="OnInputAsync"
           @onkeypress="OnPressEnterAsync" />
 

components/input/TextArea.razor.cs

@@ -122,7 +122,7 @@ namespace AntDesign
 
         private async Task CalculateRowHeightAsync()
         {
-            Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, InputEl);
+            Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, Ref);
             element.ToString();
             _hiddenWidth = $"width: {element.offsetWidth}px;";
 

components/tag/AntTag.razor

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

components/tag/AntTag.razor.cs

@@ -31,6 +31,9 @@ namespace AntDesign
         [Parameter]
         public bool Checked { get; set; }
 
+        [Parameter]
+        public string Icon { get; set; }
+
         [Parameter]
         public bool NoAnimation { get; set; }
 
@@ -43,6 +46,9 @@ namespace AntDesign
         [Parameter]
         public EventCallback<bool> CheckedChange { get; set; }
 
+        [Parameter]
+        public EventCallback OnClick { get; set; }
+
         private bool _presetColor;
         private bool _closed;
 
@@ -65,7 +71,9 @@ namespace AntDesign
                 return false;
             }
 
-            return Regex.IsMatch(color, "^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$");
+            bool result = Regex.IsMatch(color, "^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$");
+            if (!result) result = Regex.IsMatch(color, "^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$");
+            return result;
         }
 
         private void UpdateClassMap()
@@ -74,7 +82,8 @@ namespace AntDesign
             string prefix = "ant-tag";
             this.ClassMapper.Clear().Add(prefix)
                 .If($"{prefix}-has-color", () => !string.IsNullOrEmpty(Color) && !_presetColor)
-                .If($"{prefix}-${Color}", () => _presetColor)
+                .If($"{prefix}-hidden", () => Visible == false)
+                .If($"{prefix}-{Color}", () => _presetColor)
                 .If($"{prefix}-checkable", () => Mode == "checkable")
                 .If($"{prefix}-checkable-checked", () => Checked)
                 ;
@@ -95,5 +104,15 @@ namespace AntDesign
             await this.OnClose.InvokeAsync(e);
             this._closed = true;
         }
+
+        private async Task ClickTag(MouseEventArgs e)
+        {
+            await this.UpdateCheckedStatus();
+
+            if (OnClick.HasDelegate)
+            {
+                await OnClick.InvokeAsync(this);
+            }
+        }
     }
 }

site/AntBlazor.Docs/AntDesign.Docs.csproj

@@ -33,6 +33,10 @@
     <Compile Include="..\Shared\DemoMenuItem.cs" Link="Services\DemoMenuItem.cs" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="Demos\Tag\" />
+  </ItemGroup>
+
   <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SolutionDir)node_modules') ">
     <!-- Ensure Node.js is installed -->
     <Exec Command="node --version" ContinueOnError="true">

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

@@ -16,7 +16,7 @@
         <Badge Dot="@show">
             <a href="#" class="head-example" />
         </Badge>
-        <AntSwitch OnChange="onChange" Checked="@show" />
+        <Switch OnChange="onChange" Checked="@show" />
     </div>
 </div>
 

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

@@ -0,0 +1,16 @@
+---
+order: 0
+title:
+  zh-CN: 典型卡片  
+  en-US: basic Card
+---
+
+## zh-CN
+
+包含标题、内容、操作区域。
+可通过设置size为`default`或者`small`，控制尺寸
+
+## en-US
+
+A basic card containing a title, content and an extra corner content.
+Supports two sizes: `default` and `small`.

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

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

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

@@ -0,0 +1,15 @@
+---
+order: 4
+title:
+  zh-CN: 栅格卡片 
+  en-US: Card in column
+---
+
+## zh-CN
+
+在系统概览页面常常和栅格进行配合。
+
+## en-US
+
+Cards usually cooperate with grid column layout in overview page.
+

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

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

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

@@ -0,0 +1,15 @@
+---
+order: 2
+title:
+  zh-CN: 更灵活的内容展示 
+  en-US: Customized content
+---
+
+## zh-CN
+
+可以利用 Card.Meta 支持更灵活的内容。
+
+## en-US
+
+You can use Card.Meta to support more flexible content.
+

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

@@ -0,0 +1,20 @@
+<div>
+    <AntCard Hoverable Style="width: 240px" Cover="coverTemplate">
+        <AntCardMeta>
+            <Title>
+                Europe Street beat
+            </Title>
+            <Description> www.instagram.com</Description>
+        </AntCardMeta>
+    </AntCard>
+</div>
+
+
+@code
+{
+
+    private RenderFragment coverTemplate =@<img alt="example"  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />;
+
+}
+
+

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

@@ -0,0 +1,15 @@
+---
+order: 3
+title:
+  zh-CN: 网格型内嵌卡片  
+  en-US: Grid card 
+---
+
+## zh-CN
+
+一种常见的卡片内容区隔模式。
+
+## en-US
+
+Grid style card content.
+

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

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

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

@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+  zh-CN: 内部卡片 
+  en-US: Inner card
+---
+
+## zh-CN
+
+可以放在普通卡片内部，展示多层级结构的信息。
+
+## en-US
+
+It can be placed inside the ordinary card to display the information of the multilevel structure.
+

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

@@ -0,0 +1,26 @@
+<div>
+    <AntCard Title=@("Card title")>  
+        <Body>
+
+
+            <AntCard 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">
+                <Extra> <a slot="extra" href="#">More</a> </Extra>
+                <Body>
+               
+                    Inner Card content
+                </Body>             
+            </AntCard>
+
+        </Body>
+    </AntCard>
+</div>
+
+
+  

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

@@ -0,0 +1,15 @@
+---
+order: 6
+title:
+  zh-CN: 预加载的卡片 
+  en-US: Loading card
+---
+
+## zh-CN
+
+数据读入前会有文本块样式。
+
+## en-US
+
+Shows a loading indirector while the contents of the card is being featched.
+

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

@@ -0,0 +1,22 @@
+<div>
+    <AntCard Loading="loading" Title=@("Card title")>
+        <p>Card content</p>
+        <p>Card content</p>
+        <p>Card content</p>
+    </AntCard>
+    <Button Style="margin-top: 16px"  OnClick="handleClick">
+        Toggle loading
+    </Button>
+</div>
+
+@code
+{
+    bool loading { get; set; } = true;
+    void handleClick()
+    {
+        loading = !loading;
+    }
+}
+
+
+  

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

@@ -0,0 +1,15 @@
+---
+order: 1
+title:
+  zh-CN: 无边框 
+  en-US: No borde
+---
+
+## zh-CN
+
+在灰色背景上使用无边框的卡片。
+
+## en-US
+
+A borderless card on a gray background.
+

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

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

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

@@ -0,0 +1,15 @@
+---
+order: 8
+title:
+  zh-CN: 简洁卡片  
+  en-US: Simple card
+---
+
+## zh-CN
+
+只包含内容区域。
+
+## en-US
+
+A simple card only containing a content area.
+

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

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

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

@@ -0,0 +1,15 @@
+---
+order: 7
+title:
+  zh-CN: 支持更多内容配置 
+  en-US: Support more content configuration
+---
+
+## zh-CN
+
+一种支持封面、头像、标题和描述信息的卡片。
+
+## en-US
+
+A Card that supports `cover`, `avatar`, `title` and `description`.
+

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

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

site/AntBlazor.Docs/Demos/Card/demo/Tabs.md

@@ -0,0 +1,15 @@
+---
+order: 9
+title:
+  zh-CN: 带页签的卡片 
+  en-US: With tabs 
+---
+
+## zh-CN
+
+可承载更多内容。
+
+## en-US
+
+More content can be hosted.
+

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

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

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

@@ -0,0 +1,48 @@
+---
+category: Components
+type: Data Display
+title: Card
+---
+
+Simple rectangular container.
+
+## When To Use
+
+- A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
+
+
+## API
+
+
+Card
+
+| Property             | Description                                         | Type          | Default    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Actions |The action list, shows at the bottom of the Card.   | Array(RenderFragment) |-        |
+| Body |Body area on card | RenderFragment |-        |
+| Extra |Content to render in the top-right corner of the card | RenderFragment |-        |
+| Bordered |Toggles rendering of the border around the card | boolean |-        |
+| BodyStyle |Inline style to apply to the card content | Css Properties |-        |
+| Cover |Card cover | RenderFragment |-        |
+| Loading |Shows a loading indicator while the contents of the card are being fetched | boolean |-        |
+| Size |	Size of card | RenderFragment |-        |
+| Title |	Card title | String or RenderFragement |-        |
+| Type |ard style type, can be set to inner or not set | string |-        |
+
+Card.Grid
+
+| Property             | Description                                         | Type          | Default    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| ChildContent | Child container | RenderFragment |-        |
+| Hoverable | Lift up when hovering card grid | boolean |-        |
+| Style | style object of container | CSS Properties |-        |
+
+Card.Meta
+
+| Property             | Description                                         | Type          | Default    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Avatar | 	avatar or icon | RenderFragment |-        |
+| ChildContent | Child  container | RenderFragment |-        |
+| Description | description content | boolean |-        |
+| Style | style object of container| CSS Properties |-        |
+| Title |	title content | String or RenderFragement |-        |

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

@@ -0,0 +1,50 @@
+---
+category: Components
+type: 数据展示
+title: Card 
+subtitle: 卡片
+---
+
+通用卡片容器.
+
+## 何时使用
+
+- 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+
+
+## API
+
+Card
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Actions |卡片操作组，位置在卡片底部   | Array(RenderFragment) |-        |
+| Body |卡片主要区域   | RenderFragment |-        |
+| Extra |卡片右上角的操作区域 | RenderFragment |-        |
+| Bordered |是否有边框 | boolean |-        |
+| BodyStyle |内容区域自定义样式 | Css Properties |-        |
+| Cover |卡片封面 | RenderFragment |-        |
+| Loading |当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean |-        |
+| size |card 的尺寸 | RenderFragment |-        |
+| Title |卡片标题 | String or RenderFragement |-        |
+| Type |卡片类型，可设置为 inner 或 不设置 | string |-        |
+
+Card.Grid
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| ChildContent |子容器 | RenderFragment |-        |
+| Hoverable |	鼠标移过时可浮起 | boolean |-        |
+| Style | 定义网格容器类名的样式 | CSS Properties |-        |
+
+Card.Meta
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Avatar |  头像和图标 | RenderFragment |-        |
+| ChildContent | 子容器 | RenderFragment |-        |
+| Description | 描述内容 | boolean |-        |
+| Style | 定义容器类名的样式 | CSS Properties |-        |
+| Title |	标题内容 | String or RenderFragement |-        |
+
+

site/AntBlazor.Docs/Demos/Input/demo/Addon.razor

@@ -1,17 +1,17 @@
 <div>
-    <Input DefaultValue="mysite">
+    <AntDesign.Input DefaultValue="mysite">
         <AddOnBefore>https://</AddOnBefore>
         <AddOnAfter>.com</AddOnAfter>
-    </Input>
+    </AntDesign.Input>    
     <br />
     <br />
-    <Input DefaultValue="mysite">
+    <AntDesign.Input DefaultValue="mysite">
         <AddOnAfter><AntIcon type="setting"></AntIcon></AddOnAfter>
-    </Input>
+    </AntDesign.Input>
     <br />
     <br />
-    <Input DefaultValue="mysite">
+    <AntDesign.Input DefaultValue="mysite">
         <AddOnBefore>https://</AddOnBefore>
-    </Input>
+    </AntDesign.Input>
 
 </div>

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

@@ -1,5 +1,5 @@
 <div>
-    <Input Placeholder="Basic usage" @bind-Value="@txtValue"/>
+    <Input Placeholder="Basic usage" @bind-Value="@txtValue"  />
     <br />
     <br />
     <AntText>@txtValue</AntText>

site/AntBlazor.Docs/Demos/Input/demo/Clear.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 带移除图标
+  en-US: With clear icon
+
+---
+
+## zh-CN
+带移除图标的输入框，点击图标删除所有内容。
+
+
+## en-US
+Input box with the remove icon, click the icon to delete everything.

site/AntBlazor.Docs/Demos/Input/demo/Clear.razor

@@ -0,0 +1,13 @@
+<div>    
+    <Input Placeholder="input with clear icon" AllowClear="true" OnChange="onChange" />
+    <br />
+    <br />
+    <TextArea Placeholder="textarea with clear icon"  AllowClear="true" OnChange="onChange" />
+</div>
+@code{
+
+    private void onChange()
+    {
+       
+    }
+}

site/AntBlazor.Docs/Demos/Input/demo/Password.md

@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh-CN: 密码框
+  en-US: Password box
+---
+
+## zh-CN
+密码框。
+
+
+
+## en-US
+Input type of password.

site/AntBlazor.Docs/Demos/Input/demo/Password.razor

@@ -0,0 +1,11 @@
+<div>
+<InputPassword @bind-Value="@txtValue" Placeholder="large Password" Size="@InputSize.Large" OnPressEnter="(e)=>Submit(e)" />
+</div>
+@code{
+    private string txtValue { get; set; }
+
+    private void Submit(KeyboardEventArgs args)
+    {
+        Console.WriteLine($"password: {txtValue}");
+    }
+}

site/AntBlazor.Docs/Demos/Input/demo/Search_.razor

@@ -6,6 +6,9 @@
     <br />
     <br />
     <Search Placeholder="input search text" Size="@InputSize.Large" EnterButton="@("Search")" @bind-Value="@txtValue" />
+
+
+
 </div>
 
     @code{

site/AntBlazor.Docs/Demos/Input/demo/Size.razor

@@ -18,15 +18,9 @@
             <AntIcon Type="user" />
         </Prefix>
     </Input>
-    <br />
+
-    <br />
-    <InputPassword @bind-Value="@txtValue" Placeholder="large Password" Size="@InputSize.Large" OnPressEnter="(e)=>Submit(e)" />
 </div>
 @code{
     private string txtValue { get; set; }
-
+  
-    private void Submit(KeyboardEventArgs args)
-    {
-        Console.WriteLine($"password: {txtValue}");
-    }
 }

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

@@ -1,7 +1,7 @@
 <div>
-    <AntSwitch OnChange=changeMode /> Change Mode
+    <Switch OnChange=changeMode /> Change Mode
     <div class="ant-divider ant-divider-vertical" role="separator"></div>
-    <AntSwitch OnChange=changeTheme/> Change Style
+    <Switch OnChange=changeTheme/> Change Style
     <br />
     <br />
     <Menu Style=" width: 256px ;"

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

@@ -1,5 +1,5 @@
 <div>
-    <AntSwitch Checked="theme == MenuTheme.Dark" OnChange=changeTheme CheckedChildren=@("Dark") UnCheckedChildren=@("Light") />
+    <Switch Checked="theme == MenuTheme.Dark" OnChange=changeTheme CheckedChildren=@("Dark") UnCheckedChildren=@("Light") />
     <br />
     <br />
     <Menu Theme=theme

site/AntBlazor.Docs/Demos/Space/demo/Customize.razor

@@ -1,5 +1,5 @@
 
-<AntSlider Value=size OnChange="v=>setSize(v.AsT0)" />
+<Slider Value=size OnChange="v=>setSize(v.AsT0)" />
 <br />
 <br />
 <Space Size="@($"{size}")">

site/AntBlazor.Docs/Demos/Spin/demo/DelayAndDebounce.razor

@@ -8,7 +8,7 @@
     </Spin>
     <div style="margin-top: 16px">
         Loading state：
-        <AntSwitch Checked=loading OnChange=toggle />
+        <Switch Checked=loading OnChange=toggle />
     </div>
 </div>
 

site/AntBlazor.Docs/Demos/Spin/demo/Nested.razor

@@ -8,7 +8,7 @@
     </Spin>
     <div style="margin-top: 16px">
         Loading state：
-        <AntSwitch Checked=loading OnChange=toggle />
+        <Switch Checked=loading OnChange=toggle />
     </div>
 </div>
 

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

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本用法 
+  en-US: basic Usage
+---
+
+## zh-CN
+
+基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 close 两个事件。
+
+## en-US
+
+Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `close` events.

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

@@ -0,0 +1,20 @@
+<div>
+    <AntTag >Tag 1</AntTag>
+    <AntTag>
+        <a href="https://github.com/ant-design-blazor/ant-design-blazor">Link</a>
+    </AntTag>
+    <AntTag Mode="closeable" OnClose="()=>onClose()">Tag 2</AntTag>
+    <AntTag Mode="closeable" OnClose="preventDefault">Prevent Default</AntTag>
+</div>
+
+@code{
+    void onClose()
+    {
+
+    }
+
+    void preventDefault()
+    {
+
+    }
+}

site/AntBlazor.Docs/Demos/Tag/demo/Checkable.md

@@ -0,0 +1,17 @@
+---
+order: 1
+title:
+  zh-CN: 可选择
+  en-US: Checkable 
+---
+
+## zh-CN
+
+可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。
+
+
+## en-US
+
+CheckableTag works like Checkbox, click it to toggle checked state.
+
+    it is an absolute controlled component and has no uncontrolled mode.

site/AntBlazor.Docs/Demos/Tag/demo/Checkable.razor

@@ -0,0 +1,16 @@
+<div>
+    <AntTag  Mode="checkable"  Checked="check1">Tag1</AntTag>
+    <AntTag Mode="checkable" Checked="check1">Tag2</AntTag>
+    <AntTag Mode="checkable" Checked="check1" CheckedChange="_checked=>checkChange(_checked)">Tag3</AntTag>
+    
+</div>
+
+@code{
+    bool check1 { get; set; } = false;
+
+    private void checkChange(bool e)
+    {
+        check1 = !check1;
+    }
+}
+    

site/AntBlazor.Docs/Demos/Tag/demo/Colorful.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 多彩标签 
+  en-US: Colorful Tag 
+---
+
+## zh-CN
+
+我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
+
+## en-US
+
+We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.

site/AntBlazor.Docs/Demos/Tag/demo/Colorful.razor

@@ -0,0 +1,43 @@
+<div>
+
+
+    <div>
+        Presets:
+    </div>
+    <br />
+    <div>
+        <AntTag Color="magenta">magenta</AntTag>
+        <AntTag Color="pink">pink</AntTag>
+        <AntTag Color="red">red</AntTag>
+        <AntTag Color="volcano">volcano</AntTag>
+        <AntTag Color="orange">orange</AntTag>
+        <AntTag Color="green">green</AntTag>
+        <AntTag Color="cyan">cyan</AntTag>
+        <AntTag Color="blue">blue</AntTag>
+        <AntTag Color="lime">lime</AntTag>
+        <AntTag Color="geekblue">geekblue</AntTag>
+        <AntTag Color="purple">purple</AntTag>
+    </div>
+    <br />
+    <div>
+        Inverse:
+    </div>
+    <br />
+    <div>
+        <AntTag Icon="taobao" Color="blue-inverse">blue-inverse</AntTag>
+        <AntTag Color="orange-inverse">orange-inverse</AntTag>
+        <AntTag Icon="skype" Color="red-inverse">red-inverse</AntTag>
+        <AntTag Icon="weibo" Color="purple-inverse">purple-inverse</AntTag>
+    </div>
+    <br />
+    <div>
+        Customs:
+    </div>
+    <br />
+    <div>
+        To Do
+    </div>
+
+
+
+</div>

site/AntBlazor.Docs/Demos/Tag/demo/Controlled.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 控制关闭状态 
+  en-US: Controlled 
+---
+
+## zh-CN
+
+通过 `visible` 属性控制关闭状态。
+
+## en-US
+
+By using the visible prop, you can control the close state of Tag.

site/AntBlazor.Docs/Demos/Tag/demo/Controlled.razor

@@ -0,0 +1,16 @@
+<div>
+
+    <AntTag Mode="closeable" Visible="bVisible">Movies</AntTag>
+    <br />
+    <br />
+    <Button Size="small" OnClick="onClick">Toggle</Button>
+
+</div>
+
+@code{
+    bool bVisible { get; set; } = true;
+    void onClick()
+    {
+        bVisible = !bVisible;
+    }
+}

site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 动态添加和删除 
+  en-US: Add & Remove Dynamically
+---
+
+## zh-CN
+
+用数组生成一组标签，可以动态添加和删除。
+
+## en-US
+
+Generating a set of Tags by array, you can add and remove dynamically.

site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.razor

@@ -0,0 +1,78 @@
+<div>
+    <div>
+        @foreach (var item in lstTags)
+        {
+            <AntTag Mode="closeable" OnClose="()=>onClose(item)">@item</AntTag>
+        }
+        @if (inputVisible)
+        {
+            <Input @ref="_inputRef" Style="width: 78px" Size="small" @bind-Value="_inputValue" OnBlur="handleInputConfirm" OnPressEnter="handleInputConfirm" />
+        }
+        else
+        {
+            <AntTag Mode="checkable" Class="editable-tag" OnClick="OnChecked">
+                <AntIcon Type="plus" />New Tag
+            </AntTag>
+        }
+    </div>
+</div>
+<style>
+    .editable-tag {
+        background: rgb(255, 255, 255);
+        border-style: dashed;
+    }
+</style>
+
+@code{
+
+
+    private bool inputVisible { get; set; } = false;
+
+    string _inputValue;
+
+    Input _inputRef;
+
+    List<string> lstTags { get; set; } = new List<string>();
+
+    protected override void OnInitialized()
+    {
+        lstTags.Add("Apple");
+        lstTags.Add("Mongo");
+        lstTags.Add("Peach");
+
+    }
+
+    void ValueChange(ChangeEventArgs value)
+    {
+        lstTags.Add(value.Value.ToString());
+    }
+
+    async Task OnChecked()
+    {
+        inputVisible = !inputVisible;
+        if (_inputRef != null)
+            await _inputRef.Focus();
+    }
+
+    void onClose(string item)
+    {
+        lstTags.Remove(item);
+    }
+
+    void handleInputConfirm()
+    {
+        if (string.IsNullOrEmpty(_inputValue)) return;
+
+        string res = lstTags.Find(s => s == _inputValue);
+
+        if (string.IsNullOrEmpty(res))
+        {
+            lstTags.Add(_inputValue);
+        }
+
+        this._inputValue = "";
+        this.inputVisible = false;
+    }
+
+
+}

site/AntBlazor.Docs/Demos/Tag/demo/Hot.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 热门标签
+  en-US: Hot Tags 
+---
+
+## zh-CN
+
+选择你感兴趣的话题。
+
+## en-US
+
+Select your favourite topics.

site/AntBlazor.Docs/Demos/Tag/demo/Hot.razor

@@ -0,0 +1,12 @@
+<div>
+    <span style="margin-right:8px">Categories:</span>
+    <AntTag Mode="checkable" Checked="lstCheck[0]">Movies</AntTag>
+    <AntTag Mode="checkable" Checked="lstCheck[1]">Books</AntTag>
+    <AntTag Mode="checkable" Checked="lstCheck[2]">Music</AntTag>
+    <AntTag Mode="checkable" Checked="lstCheck[3]">Sports</AntTag>
+</div>
+
+@code{
+    bool[] lstCheck = new bool[] { false, true, false, true };
+}
+  

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

@@ -0,0 +1,25 @@
+---
+category: Components
+type: Data Display
+title: Tag
+---
+
+Tag for categorizing or markup.
+
+## When To Use
+
+- It can be used to tag by dimension or property.
+- When categorizing.
+
+## API
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Mode |mode select `default`, `closable`, `checkable`     | string         |
+| Closable | Whether the Tag can be closed| boolean         |-       |
+| Checked | 	Checked status of Tag| boolean         |-       |
+| CheckedChange | Callback executed when Tag is checked/unchecked| function(e)         |-       |
+| Color | Color of the Tag | string   | -         |
+| OnClose | Callback executed when tag is closed     | function(e)        | -         |
+| Visible | Whether the Tag is closed or not | boolean         | true         |
+| Icon | Set the icon of tag  | string        | -         |

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

@@ -0,0 +1,29 @@
+---
+category: Components
+type: 数据展示
+title: Tag
+subtitle: 标签
+---
+
+进行标记和分类的小标签。
+
+## 何时使用
+
+- 用于标记事物的属性和维度。
+- 进行分类。
+
+
+## API
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Mode |方式选择 `default`, `closable`, `checkable`     | string         |
+| Closable | 值标签是否可以关闭| boolean         |-       |
+| Checked | 标签是否关闭所对应的值| boolean         |-       |
+| CheckedChange | 点击标签时触发的回调| function(e)         |-       |
+| Color | 预设标签色 | string   | -         |
+| OnClose | 关闭时的回调     | function(e)         | -         |
+| Visible | 是否显示标签 | boolean         |
+| Icon | 设置图标  | string        | -         |
+
+

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

@@ -8,7 +8,7 @@
               OnScroll="OnScroll"
               OnSelectChange="OnSelectChange"></Transfer>
 
-    <AntSwitch Style="margin-top: 16px;" OnChange="OnSwitchChange"></AntSwitch>
+    <Switch Style="margin-top: 16px;" OnChange="OnSwitchChange"></Switch>
 </div>
 
 @code {

site/AntBlazor.Docs/wwwroot/menu.json

@@ -172,7 +172,7 @@
           {
             "title": "Card",
             "type": "menuItem",
-            "url": "card"
+            "url": "components/card"
           },
           {
             "title": "Empty",
@@ -192,7 +192,7 @@
           {
             "title": "Tag",
             "type": "menuItem",
-            "url": "tag"
+            "url": "components/tag"
           },
           {
             "title": "Tabs",