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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战