码迷,mamicode.com
首页 > 其他好文 > 详细

Blazor 组件库 Blazui 开发第二弹【按钮组件】

时间:2019-12-25 16:02:06      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:标签   文档   tps   按钮组   log   大小   状态   plain   app   

标签: Blazor Blazui文档


传送门

Blazor 组件库 Blazui 开发第一弹【安装入门】https://www.cnblogs.com/wzxinchen/p/12096092.html
Blazor 组件库 Blazui 开发第二弹【按钮组件】https://www.cnblogs.com/wzxinchen/p/12096956.html

常规用法

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton>默认按钮</BButton>
<BButton Type="@ButtonType.Primary">主要按钮</BButton>
<BButton Type="@ButtonType.Success">成功按钮</BButton>
<BButton Type="@ButtonType.Info">信息按钮</BButton>
<BButton Type="@ButtonType.Warning">警告按钮</BButton>
<BButton Type="@ButtonType.Danger">危险按钮</BButton>

技术图片

无背景色

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton IsPlain="true">朴素按钮</BButton>
<BButton Type="@ButtonType.Primary" IsPlain="true">主要按钮</BButton>
<BButton Type="@ButtonType.Success" IsPlain="true">成功按钮</BButton>
<BButton Type="@ButtonType.Info" IsPlain="true">信息按钮</BButton>
<BButton Type="@ButtonType.Warning" IsPlain="true">警告按钮</BButton>
<BButton Type="@ButtonType.Danger" IsPlain="true">危险按钮</BButton>

技术图片

圆角

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton IsRound="true">圆角按钮</BButton>
<BButton Type="@ButtonType.Primary" IsRound="true">主要按钮</BButton>
<BButton Type="@ButtonType.Success" IsRound="true">成功按钮</BButton>
<BButton Type="@ButtonType.Info" IsRound="true">信息按钮</BButton>
<BButton Type="@ButtonType.Warning" IsRound="true">警告按钮</BButton>
<BButton Type="@ButtonType.Danger" IsRound="true">危险按钮</BButton>

技术图片

图标按钮

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton IsCircle="true" Icon="el-icon-search"></BButton>
<BButton Type="@ButtonType.Primary" IsCircle="true" Icon="el-icon-edit"></BButton>
<BButton Type="@ButtonType.Success" IsCircle="true" Icon="el-icon-check"></BButton>
<BButton Type="@ButtonType.Info" IsCircle="true" Icon="el-icon-message"></BButton>
<BButton Type="@ButtonType.Warning" IsCircle="true" Icon="el-icon-star-off"></BButton>
<BButton Type="@ButtonType.Danger" IsCircle="true" Icon="el-icon-delete"></BButton>

技术图片

禁用状态

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton IsDisabled="true">默认按钮</BButton>
<BButton Type="@ButtonType.Primary" IsDisabled="true">主要按钮</BButton>
<BButton Type="@ButtonType.Success" IsDisabled="true">成功按钮</BButton>
<BButton Type="@ButtonType.Info" IsDisabled="true">信息按钮</BButton>
<BButton Type="@ButtonType.Warning" IsDisabled="true">警告按钮</BButton>
<BButton Type="@ButtonType.Danger" IsDisabled="true">危险按钮</BButton>

技术图片

文字按钮

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton Type="@ButtonType.Text">按钮1</BButton>
<BButton Type="@ButtonType.Text" IsDisabled="true">按钮2</BButton>

技术图片

按钮组

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButtonGroup>
    <BButton Type="@ButtonType.Primary">上一页</BButton>
    <BButton Type="@ButtonType.Primary">下一页</BButton>
</BButtonGroup>
<BButtonGroup>
    <BButton Type="@ButtonType.Primary" Icon="el-icon-edit"></BButton>
    <BButton Type="@ButtonType.Primary" Icon="el-icon-share"></BButton>
    <BButton Type="@ButtonType.Primary" Icon="el-icon-delete"></BButton>
</BButtonGroup>

技术图片

加载中

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<BButton IsLoading="true" Type="@ButtonType.Primary">加载中</BButton>

技术图片

按钮大小

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.
<p>
    <BButton>默认按钮</BButton>
    <BButton Type="@ButtonType.Primary" Size="@Blazui.Component.Button.ButtonSize.Medium">中型按钮</BButton>
    <BButton Type="@ButtonType.Success" Size="@Blazui.Component.Button.ButtonSize.Small">小型按钮</BButton>
    <BButton Type="@ButtonType.Info" Size="@Blazui.Component.Button.ButtonSize.Mini">迷你按钮</BButton>
</p>
<p>
    <BButton IsRound="true">默认按钮</BButton>
    <BButton IsRound="true" Type="@ButtonType.Primary" Size="@Blazui.Component.Button.ButtonSize.Medium">中型按钮</BButton>
    <BButton IsRound="true" Type="@ButtonType.Success" Size="@Blazui.Component.Button.ButtonSize.Small">小型按钮</BButton>
    <BButton IsRound="true" Type="@ButtonType.Info" Size="@Blazui.Component.Button.ButtonSize.Mini">迷你按钮</BButton>
</p>

技术图片

更多演示见:http://blazui.com:9000/button

Blazor 组件库 Blazui 开发第二弹【按钮组件】

标签:标签   文档   tps   按钮组   log   大小   状态   plain   app   

原文地址:https://www.cnblogs.com/wzxinchen/p/12096956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!