diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor
index ba5de9b7aec0fb2f0bb3b7687b360a7b303eb254..fb184d3af2d0d576b1fbc51740552ce6d0fa72d2 100644
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor
@@ -154,6 +154,15 @@
+
+ 当按钮为异步请求按钮时，点击按钮后自身状态会改变为禁用状态，同时显示 Loading 小图标，异步请求结束后恢复正常，本例中点击 异步请求按钮后，显示请求加载动画，5 秒后恢复正常
+
+
+
diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs
index 4f53d4c1924ff4be45481247faf86484865ed3ae..aecf952c81e4d06a655b80c0099b0fbcbc10ea59 100644
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs
@@ -58,11 +58,13 @@ namespace BootstrapBlazor.Shared.Pages
return Task.CompletedTask;
}
+ private static Task ClickAsyncButton() => Task.Delay(5000);
+
///
/// 获得事件方法
///
///
- private IEnumerable GetEvents() => new EventItem[]
+ private static IEnumerable GetEvents() => new EventItem[]
{
new EventItem()
{
@@ -82,7 +84,7 @@ namespace BootstrapBlazor.Shared.Pages
/// 获得属性方法
///
///
- private IEnumerable GetAttributes() => new AttributeItem[]
+ private static IEnumerable GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
@@ -99,6 +101,13 @@ namespace BootstrapBlazor.Shared.Pages
ValueList = "",
DefaultValue = ""
},
+ new AttributeItem() {
+ Name = "LoadingIcon",
+ Description = "异步加载时的动画图标",
+ Type = "string",
+ ValueList = "",
+ DefaultValue = "fa fa-fw fa-spin fa-spinner"
+ },
new AttributeItem() {
Name = "Text",
Description = "显示文字",
@@ -141,6 +150,13 @@ namespace BootstrapBlazor.Shared.Pages
ValueList = " — ",
DefaultValue = "false"
},
+ new AttributeItem() {
+ Name = "IsAsync",
+ Description = "是否为异步按钮",
+ Type = "boolean",
+ ValueList = " — ",
+ DefaultValue = "false"
+ },
new AttributeItem() {
Name = "ChildContent",
Description = "内容",
diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs
index c06486b43b8f86ce1afeaabd474d33b6d215e1c6..219492632b30980efbf279f719227491edc675f5 100644
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs
@@ -18,8 +18,6 @@ namespace BootstrapBlazor.Shared.Pages
private string? HtmlString { get; set; }
- private string ShowHideButtonString { get; set; } = "隐藏 Editor";
-
///
/// 获得/设置 版本号字符串
///
diff --git a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs
index 6383e45675451720d6d2e4c24d8b6227ced7dac0..2b310da4d89f6bf63324cf1f36813564def87e8d 100644
--- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs
+++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs
@@ -168,6 +168,7 @@ namespace BootstrapBlazor.Shared.Shared
});
item.AddItem(new DemoMenuItem()
{
+ IsUpdate = true,
Text = "按钮 Button",
Url = "buttons"
});
diff --git a/src/BootstrapBlazor/Components/Button/ButtonBase.cs b/src/BootstrapBlazor/Components/Button/ButtonBase.cs
index 07e48e0cd87432b1f606363802b4b1e2579dee9b..e8a4973135995f8e1f50d421a6df0579c86ce878 100644
--- a/src/BootstrapBlazor/Components/Button/ButtonBase.cs
+++ b/src/BootstrapBlazor/Components/Button/ButtonBase.cs
@@ -3,7 +3,6 @@
// Website: https://www.blazor.zone or https://argozhang.github.io/
using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Collections.Generic;
@@ -77,6 +76,20 @@ namespace BootstrapBlazor.Components
[Parameter]
public string? Icon { get; set; }
+ ///
+ /// 获得/设置 正在加载动画图标 默认为 fa fa-spin fa-spinner
+ ///
+ [Parameter]
+ public string LoadingIcon { get; set; } = "fa fa-fw fa-spin fa-spinner";
+
+ ///
+ /// 获得/设置 是否为异步按钮，默认为 false 如果为 true 表示是异步按钮，点击按钮后禁用自身并且等待异步完成，过程中显示 loading 动画
+ ///
+ [Parameter]
+ public bool IsAsync { get; set; }
+
+ private bool IsLoading { get; set; }
+
///
/// 获得/设置 显示文字
///
@@ -119,18 +132,6 @@ namespace BootstrapBlazor.Components
[Parameter]
public RenderFragment? ChildContent { get; set; }
- ///
- /// 获得 EditContext 实例
- ///
- [CascadingParameter]
- protected EditContext? EditContext { get; set; }
-
- ///
- /// 获得 ValidateFormBase 实例
- ///
- [CascadingParameter]
- public ValidateForm? ValidateForm { get; set; }
-
///
/// OnInitialized 方法
///
@@ -138,20 +139,55 @@ namespace BootstrapBlazor.Components
{
base.OnInitialized();
- if (AdditionalAttributes == null) AdditionalAttributes = new Dictionary();
+ if (AdditionalAttributes == null)
+ {
+ AdditionalAttributes = new Dictionary();
+ }
if (!AdditionalAttributes.TryGetValue("type", out var _))
{
AdditionalAttributes["type"] = "button";
}
+ }
+
+ ///
+ /// OnParametersSetAsync 方法
+ ///
+ ///
+ protected override void OnParametersSet()
+ {
+ base.OnParametersSet();
+
+ if (IsAsync && IsLoading)
+ {
+ Icon = LoadingIcon;
+ }
var onClick = OnClick;
OnClick = EventCallback.Factory.Create(this, async e =>
{
- if (!IsDisabled)
+ var icon = Icon;
+ if (IsAsync)
+ {
+ IsLoading = true;
+ Icon = "";
+ IsDisabled = true;
+ }
+ if (OnClickWithoutRender != null)
+ {
+ await OnClickWithoutRender.Invoke();
+ }
+
+ if (onClick.HasDelegate)
+ {
+ await onClick.InvokeAsync(e);
+ }
+
+ if (IsAsync)
{
- if (OnClickWithoutRender != null) await OnClickWithoutRender.Invoke();
- if (onClick.HasDelegate) await onClick.InvokeAsync(e);
+ IsLoading = false;
+ Icon = icon;
+ IsDisabled = false;
}
});
}
@@ -175,16 +211,24 @@ namespace BootstrapBlazor.Components
if (IsDisabled)
{
if (Tooltip.PopoverType == PopoverType.Tooltip)
+ {
await JSRuntime.InvokeVoidAsync(null, "bb_tooltip", id, "dispose");
+ }
else
+ {
await JSRuntime.InvokeVoidAsync(null, "bb_popover", id, "dispose");
+ }
}
else
{
if (Tooltip.PopoverType == PopoverType.Tooltip)
+ {
await ShowTooltip();
+ }
else
+ {
await ShowPopover();
+ }
}
}
}