Bootstrap Blazor - 一套企业级 UI 组件库

Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。

Demo

<Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button>
<Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button>

不同风格

通过设置 ButtonStyle 来显示不同的按钮风格

Demo

<Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
<Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes"></Button>

Outline 按钮

通过设置 IsOutline="true" 设置按钮边框颜色样式。

Demo

<Button IsOutline="true" Color="Color.Primary">主要按钮</Button>
<Button IsOutline="true" Color="Color.Secondary">次要按钮</Button>
<Button IsOutline="true" Color="Color.Success">成功按钮</Button>
<Button IsOutline="true" Color="Color.Danger">危险按钮</Button>
<Button IsOutline="true" Color="Color.Warning">警告按钮</Button>
<Button IsOutline="true" Color="Color.Info">信息按钮</Button>
<Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button>
<Button IsOutline="true" Color="Color.Light">高亮按钮</Button>
<Button IsOutline="true" Color="Color.Link">链接按钮</Button>

不同尺寸

Button 组件提供除了默认值以外的多种尺寸，通过设置 Size 属性可以在不同场景下选择合适的按钮尺寸。

Demo

<Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button>
<Button Size="Size.Small" Color="Color.Secondary">小按钮</Button>
<Button Size="Size.None" Color="Color.Info">按钮</Button>
<Button Size="Size.Medium" Color="Color.Success">中等按钮</Button>
<Button Size="Size.Large" Color="Color.Danger">大按钮</Button>
<Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button>
<Button IsBlock="true" Color="Color.Primary">Block 按钮</Button>

禁用状态

按钮不可用状态。通过设置 IsDisabled 属性

Demo

通过 OnClick 回调方法中设置自身 IsDisabled 属性，或者调用组件实例方法 SetDisable 均可实现按钮禁用效果

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

性能比较：

使用 IsDisabled 属性设置时本页面传输量为 4.8K
使用 SetDisable 方法设置时本页面传输量为 280B

<Button IsDisabled="true" Color="Color.Primary">主要按钮</Button>
<Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button>
<Button IsDisabled="true" Color="Color.Success">成功按钮</Button>
<Button IsDisabled="true" Color="Color.Danger">危险按钮</Button>
<Button IsDisabled="true" Color="Color.Warning">警告按钮</Button>
<Button IsDisabled="true" Color="Color.Info">信息按钮</Button>
<Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button>
<Button IsDisabled="true" Color="Color.Light">高亮按钮</Button>
<Button IsDisabled="true" Color="Color.Link">链接按钮</Button>

<Button Text="点击被禁用" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
    <Tooltip Title="点击按钮后由于被禁用 Tooltip 被销毁" Placement="Placement.Top" Trigger="hover" />
</Button>
<Button Color="Color.Info" Text="点击后使第一个按钮可用" OnClickWithoutRender="@ClickButton2" class="ml-3"></Button>

@code {
    private Button ButtonDisableDemo { get; set; }

    private bool IsDisable { get; set; }

    private void ClickButton1()
    {
        IsDisable = !IsDisable;
        StateHasChanged();
    }

    private Task ClickButton2()
    {
        IsDisable = false;
        ButtonDisableDemo.SetDisable(false);
        return Task.CompletedTask;
    }
}

按钮组

由多个按钮组成一个组合按钮

Demo

<div class="btn-group" role="group">
    <Button Color="Color.Primary">按钮一</Button>
    <Button Color="Color.Success">按钮二</Button>
</div>

带图标的按钮

通过设置 Icon 属性对按钮图标进行设置，图标为字体字符串如使用 font-awesome 图标时 fa fa-fa

Demo

<Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
<Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>

二次封装按钮

通过设置 WinButton 组件的 Text 属性对按钮显示文字进行设置，点击按钮是右侧显示被点击按钮的文字

Demo

<WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
<WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
<div>@ButtonText</div>

@code {
    private string ButtonText { get; set; } = "";

    private Task ClickButtonShowText(string text)
    {
        ButtonText = text;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Button 按钮

常用的操作按钮。

基础用法

Demo

不同风格

Demo

Outline 按钮

Demo

不同尺寸

Demo

禁用状态

Demo

按钮组

Demo

带图标的按钮

Demo

二次封装按钮

Demo

Attributes 属性

事件 Events

方法 Methods