Blazor 组件库 BootstrapBlazor 中Button组件介绍

组件介绍

按钮组件，应该是最基础的组件之一了。感觉没什么可介绍的，但是BootstrapBlazor的按钮，还是有很多不错的特性。

首先是最基础的，boostrap5的按钮样式：

代码如下：

<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>

组件的其他属性

Color

：组件的颜色，可选值有

None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link

。

Icon

：组件的图标，可以直接写

FontAwasome4.7

的图标类，如

Icon="fa fa-home"

。

LoadingIcon

：异步加载时的图标，默认值为

fa fa-fw fa-spin fa-spinner

，此图标配合

IsAsync

属性使用。

Text

：按钮显示的文字。

Size

：按钮的尺寸，可选值为

None / ExtraSmall / Small / Medium / Large / ExtraLarge

。

Class

：组件的css class类。

IsBlock

：是否填充，如果为

true

，则按钮尝试填充所有的可用空间。

IsDisabled

：是否禁用按钮。

IsOutline

：是否使用边框的模式，如果使用，则按钮仅有边框填充颜色。

IsAsync

：是否为异步按钮，如果为异步按钮，点击按钮后按钮会自动禁用，并显示

LoadingIcon

的按钮动画。当按钮点击事件执行结束后自动恢复可用状态。

一个例子：

<Button Text="异步请求" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
private static Task ClickAsyncButton() => Task.Delay(5000);

ChildContent

：内容

RenderFragment

。

ButtonStyle

：按钮的风格，可选值有

None / Circle / Round

，默认为

None

。

ButtonType

：按钮的类型，可选值有

Button / Submit / Reset

，默认为

Button

。

组件的事件

OnClick

：点击事件，类型为

EventCallback<MouseEventArgs>

。

OnClickWithoutRender

：不刷新组件的点击事件，在点击事件不涉及页面更新时使用，可以提高性能。

组件的方法

SetDisable

：设置按钮是否可用。由于使用 IsDisabled 属性时，需要显式手动调用 StateHasChanged 方法，会导致按钮所在组件整体刷新，建议使用实例方法 SetDisable 仅对按钮进行刷新

性能比较：

• 使用 IsDisabled 属性设置时本页面传输量为 4.8K

• 使用 SetDisable 方法设置时本页面传输量为 280B