feat: add tag

src/AntBlazor.Docs/Pages/Tag.razor

@@ -0,0 +1,35 @@
+@page "/tag"
+
+
+<h3>Basic Tag</h3>
+<AntTag>Tag 1</AntTag>
+<AntTag>
+    <a href="https://github.com/NG-ZORRO/ng-zorro-antd">Link</a>
+</AntTag>
+<AntTag mode="closeable" onClose="()=>onClose()">Tag 2</AntTag>
+<AntTag mode="closeable" onClose="preventDefault">Prevent Default</AntTag>
+
+
+<br />
+<br />
+<h3>Checkable Tag</h3>
+<AntTag mode="checkable" checked checkedChange="_checked=>checkChange(_checked)">Tag1</AntTag>
+<AntTag mode="checkable" checked checkedChange="_checked=>checkChange(_checked)">Tag2</AntTag>
+<AntTag mode="checkable" checked checkedChange="_checked=>checkChange(_checked)">Tag3</AntTag>
+
+@code {
+    public void onClose()
+    {
+
+    }
+
+    public void preventDefault(MouseEventArgs e)
+    {
+
+    }
+
+    private void checkChange(bool e)
+    {
+
+    }
+}

src/AntBlazor.Docs/Shared/MainLayout.razor

@@ -47,6 +47,11 @@
                         Avatar
                     </AntNavLink>
                 </AntMenuItem>
+                <AntMenuItem nzMatchRouter>
+                    <AntNavLink href="tag">
+                        Tag
+                    </AntNavLink>
+                </AntMenuItem>
             </AntSubMenu>
         </AntMenu>
     </AntLayoutSider>

src/AntBlazor/AntBlazor.xml

@@ -138,5 +138,10 @@
         <member name="M:AntBlazor.AntInputComponentBase`1.SetParametersAsync(Microsoft.AspNetCore.Components.ParameterView)">
             <inheritdoc />
         </member>
+        <member name="P:AntBlazor.AntTag.mode">
+            <summary>
+             'default' | 'closeable' | 'checkable'
+            </summary>
+        </member>
     </members>
 </doc>

src/AntBlazor/Components/AntCheckbox/AntCheckbox.razor

@@ -0,0 +1,25 @@
+@namespace AntBlazor
+@inherits AntCheckboxBase
+
+
+<div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+    <span class="ant-checkbox"
+          [class.ant-checkbox-checked]="nzChecked && !nzIndeterminate"
+          [class.ant-checkbox-disabled]="nzDisabled"
+          [class.ant-checkbox-indeterminate]="nzIndeterminate">
+        <input #inputElement
+               [checked]="nzChecked"
+               [ngModel]="nzChecked"
+               [disabled]="nzDisabled"
+               (ngModelChange)="innerCheckedChange($event)"
+               (click)="$event.stopPropagation()"
+               type="checkbox"
+               class="ant-checkbox-input" />
+        <span class="ant-checkbox-inner"></span>
+    </span>
+    <span #contentElement (cdkObserveContent)="checkContent()"><ng-content></ng-content></span>
+</div>
+
+@code {
+
+}

src/AntBlazor/Components/AntCheckbox/AntCheckboxBase.cs

@@ -0,0 +1,94 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+
+namespace AntBlazor
+{
+    public class AntCheckboxBase : AntInputComponentBase<bool>
+    {
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        [Parameter]
+        public EventCallback<bool> checkedChange { get; set; }
+
+        [Parameter]
+        public string value { get; set; }
+
+        [Parameter]
+        public bool autoFocus { get; set; }
+
+        [Parameter]
+        public bool disabled { get; set; }
+
+        [Parameter]
+        public bool indeterminate { get; set; }
+
+        [Parameter]
+        public bool @checked { get; set; }
+
+        protected Action<bool> onChange;
+
+        protected Func<object> onTouched;
+
+        protected ElementReference inputElement;
+
+        protected ElementReference contentElement;
+
+        protected Dictionary<string, object> inputAttributes { get; set; }
+
+        protected async Task innerCheckedChange(bool @checked)
+        {
+            if (!this.disabled)
+            {
+                this.@checked = @checked;
+                this.onChange(this.@checked);
+                await this.checkedChange.InvokeAsync(this.@checked);
+                //if (this.checkboxWrapperComponent)
+                //{
+                //    this.nzCheckboxWrapperComponent.onChange();
+                //}
+            }
+        }
+
+        protected void updateAutoFocus()
+        {
+            if (this.autoFocus)
+            {
+                inputAttributes.Add("autofocus", "autofocus");
+            }
+            else
+            {
+                inputAttributes.Remove("autofocus");
+            }
+        }
+
+        protected void writeValue(bool value)
+        {
+            this.@checked = value;
+        }
+
+        protected void registerOnChange(Action<bool> fn)
+        {
+            if (fn != null)
+            {
+                this.onChange = fn;
+            }
+        }
+
+        protected void registerOnTouched(Func<object> fn)
+        {
+            if (fn != null)
+            {
+                this.onTouched = fn;
+            }
+        }
+
+        protected void setDisabledState(bool isDisabled)
+        {
+            this.disabled = isDisabled;
+        }
+    }
+}

src/AntBlazor/Components/AntTag/AntTag.razor

@@ -0,0 +1,103 @@
+@namespace AntBlazor
+@using System.Text.RegularExpressions
+@inherits AntDomComponentBase
+
+@if (!closed)
+{
+    <div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+        @ChildContent
+        @if (mode == "closeable")
+        {
+            <AntIcon type="close" tabindex="-1" @onclick="closeTag" />
+        }
+    </div>
+}
+
+@code {
+
+[Parameter] public RenderFragment ChildContent { get; set; }
+
+/// <summary>
+///  'default' | 'closeable' | 'checkable'
+/// </summary>
+[Parameter]
+public string mode { get; set; } = "default";
+
+[Parameter]
+public string color { get; set; }
+
+[Parameter]
+public bool closable { get; set; }
+
+[Parameter]
+public bool visible { get; set; } = true;
+
+[Parameter]
+public bool @checked { get; set; }
+
+[Parameter]
+public bool noAnimation { get; set; }
+
+[Parameter]
+public EventCallback afterClose { get; set; }
+
+[Parameter]
+public EventCallback<MouseEventArgs> onClose { get; set; }
+
+[Parameter]
+public EventCallback<bool> checkedChange { get; set; }
+
+bool presetColor = false;
+bool closed = false;
+
+
+protected override Task OnInitializedAsync()
+{
+        this.updateClassMap();
+        return base.OnInitializedAsync();
+}
+
+protected override void OnParametersSet()
+{
+        this.updateClassMap();
+        base.OnParametersSet();
+}
+
+private bool isPresetColor(string color)
+{
+        if (string.IsNullOrEmpty(color))
+        {
+            return false;
+        }
+
+        return Regex.IsMatch(color, "^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$");
+}
+
+private void updateClassMap()
+{
+        this.presetColor = this.isPresetColor(this.color);
+        string prefix = "ant-tag";
+        this.ClassMapper.Clear().Add(prefix)
+            .If($"{prefix}-has-color", () => !string.IsNullOrEmpty(color) && !presetColor)
+            .If($"{prefix}-${color}", () => presetColor)
+            .If($"{prefix}-checkable", () => mode == "checkable")
+            .If($"{prefix}-checkable-checked", () => @checked)
+            ;
+}
+
+private async Task updateCheckedStatus()
+{
+        if (mode == "checkable")
+        {
+            this.@checked = !this.@checked;
+            await this.checkedChange.InvokeAsync(this.@checked);
+            this.updateClassMap();
+        }
+}
+
+private async Task closeTag(MouseEventArgs e)
+{
+        await this.onClose.InvokeAsync(e);
+        this.closed = true;
+}
+}