fix(module: button): styles and demos (#300)

* fix: bugs in button, it dimension will be chaned when click on it

* fix: button style and demos

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

components/button/Button.razor.cs

@@ -19,7 +19,18 @@ namespace AntDesign
         public bool Search { get; set; } = false;
 
         [Parameter]
-        public bool Loading { get; set; } = false;
+        public bool Loading
+        {
+            get => _loading;
+            set
+            {
+                if (_loading != value)
+                {
+                    _loading = value;
+                    UpdateIconDisplay(_loading);
+                }
+            }
+        }
 
         [Parameter]
         public string Type { get; set; } = ButtonType.Default;
@@ -31,6 +42,7 @@ namespace AntDesign
         public string Shape { get; set; } = null;
 
         private string _formSize;
+
         [CascadingParameter(Name = "FormSize")]
         public string FormSize
         {
@@ -68,29 +80,23 @@ namespace AntDesign
 
         public IList<Icon> Icons { get; set; } = new List<Icon>();
 
-        //public AntNavLink Link { get; set; }
-
         protected string IconStyle { get; set; }
 
-        private readonly bool _isInDropdown = false;
+        private bool _loading = false;
 
         protected void SetClassMap()
         {
             string prefixName = "ant-btn";
-            Hashtable sizeMap = new Hashtable()
-            {
-                ["large"] = "lg",
-                ["small"] = "sm"
-            };
 
             ClassMapper.Clear()
                 .Add("ant-btn")
                 .If($"{prefixName}-{this.Type}", () => !string.IsNullOrEmpty(Type))
                 .If($"{prefixName}-dangerous", () => Danger)
                 .If($"{prefixName}-{Shape}", () => !string.IsNullOrEmpty(Shape))
-                .If($"{prefixName}-{sizeMap[this.Size]}", () => sizeMap.ContainsKey(Size))
+                .If($"{prefixName}-lg", () => Size == "large")
+                .If($"{prefixName}-sm", () => Size == "small")
                 .If($"{prefixName}-loading", () => Loading)
-                .If($"{prefixName}-icon-only", () => Icons.Count == 0 && !this.Search && !this._isInDropdown && this.ChildContent == null)
+                .If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && !this.Search && this.ChildContent == null)
                 .If($"{prefixName}-background-ghost", () => Ghost)
                 .If($"{prefixName}-block", () => this.Block)
                 .If($"ant-input-search-button", () => this.Search)
@@ -100,29 +106,16 @@ namespace AntDesign
         protected override void OnInitialized()
         {
             base.OnInitialized();
-            //if (Link != null && string.IsNullOrEmpty(this.Type))
-            //{
-            //    this.Type = ButtonType.Link;
-            //}
             SetClassMap();
+            UpdateIconDisplay(_loading);
         }
 
-        protected override void OnParametersSet()
+        private void UpdateIconDisplay(bool loading)
         {
-            base.OnParametersSet();
-            SetClassMap();
-            UpdateIconDisplay(this.Loading);
-            if (Type == "link")
-            {
-            }
+            IconStyle = $"display:{(loading ? "none" : "inline-block")}";
         }
 
-        private void UpdateIconDisplay(bool vlaue)
-        {
-            IconStyle = $"display:{(vlaue ? "none" : "inline-block")}";
-        }
-
-        protected async Task HandleOnClick(MouseEventArgs args)
+        private async Task HandleOnClick(MouseEventArgs args)
         {
             if (OnClick.HasDelegate)
             {

site/AntBlazor.Docs/Demos/Button/demo/Ghost.razor

@@ -1,4 +1,4 @@
-<div class="site-Button-Ghost-wrapper">
+<div class="site-button-ghost-wrapper">
     <Button Type="primary" Ghost>
         Primary
     </Button>
@@ -9,4 +9,11 @@
     <Button Type="link" Ghost>
         link
     </Button>
-</div>
+</div>
+
+<style>
+    .site-button-ghost-wrapper {
+        background: rgb(190, 200, 200);
+        padding: 26px 16px 16px;
+    }
+</style>

site/AntBlazor.Docs/Demos/Button/demo/Icon.razor

@@ -1,26 +0,0 @@
-<div>
-    @*<Tooltip title="search">
-        <Button Type="primary" shape="circle" icon={<SearchOutlined />} />
-    </Tooltip>*@
-    <Button Type="primary" Shape="circle">
-        A
-    </Button>
-    <Button Type="primary" Icon="search">
-    Search
-    </Button>
-    @*<Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} />
-    </Tooltip>*@
-    <Button Icon="search">Search</Button>
-    <br />
-    @*<Tooltip title="search">
-        <Button shape="circle" icon={<SearchOutlined />} />
-    </Tooltip>*@
-    <Button Icon="search">Search</Button>
-    @*<Tooltip title="search">
-        <Button Type="dashed" shape="circle" icon={<SearchOutlined />} />
-    </Tooltip>*@
-    <Button Type="dashed" Icon="search">
-    Search
-    </Button>
-</div>

site/AntBlazor.Docs/Demos/Button/demo/Icon_.razor

@@ -0,0 +1,26 @@
+<div>
+    <Tooltip Title=@("search")>
+        <Button Type="primary" Shape="circle" Icon="search" />
+    </Tooltip>
+    <Button Type="primary" Shape="circle">
+        A
+    </Button>
+    <Button Type="primary" Icon="search">
+    Search
+    </Button>
+    <Tooltip Title=@("search")>
+        <Button Shape="circle" Icon="search" />
+    </Tooltip>
+    <Button Icon="search">Search</Button>
+    <br />
+    <Tooltip Title=@("search")>
+        <Button Shape="circle" Icon="search" />
+    </Tooltip>
+    <Button Icon="search">Search</Button>
+    <Tooltip Title=@("search")>
+        <Button Type="dashed" Shape="circle" Icon="search" />
+    </Tooltip>
+    <Button Type="dashed" Icon="search">
+    Search
+    </Button>
+</div>

site/AntBlazor.Docs/Demos/Button/demo/Multiple.razor

@@ -1 +1,15 @@
-Not implement yet :(
+@{
+    RenderFragment menu = @<Menu>
+        <MenuItem Key="1">1st item</MenuItem>
+        <MenuItem Key="2">2nd item</MenuItem>
+        <MenuItem Key="3">3rd item</MenuItem>
+    </Menu>;
+}
+
+<Button Type="primary">primary</Button>
+<Button>secondary</Button>
+<Dropdown Overlay=@menu>
+    <Button>
+        Actions <Icon Type="down" />
+    </Button>
+</Dropdown>