test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 12:07:44 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Henry.zhang 2020-07-02 23:20:16 +08:00 committed by GitHub
parent 9730d73cf4
commit e5fb98d09f
5 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/button/Button.razor.cs
View File

@ -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)
{

11
site/AntBlazor.Docs/Demos/Button/demo/Ghost.razor
View File

@ -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>

26
site/AntBlazor.Docs/Demos/Button/demo/Icon.razor
View File

@ -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>

26
site/AntBlazor.Docs/Demos/Button/demo/Icon_.razor Normal file
View File

@ -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>

16
site/AntBlazor.Docs/Demos/Button/demo/Multiple.razor
View File

@ -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>