Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Button 按钮

常用的操作按钮。

基础用法

基础的按钮用法。

Demo

不同风格

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

Demo

Outline 按钮

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

Demo

不同尺寸

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

Demo

禁用状态

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

Demo

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

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

性能比较:

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

按钮组

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

Demo

带图标的按钮

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

Demo

二次封装按钮

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

Demo

异步请求按钮

通过设置 IsAsync 属性按钮是否为 异步请求按钮,默认为 false

Demo

当按钮为异步请求按钮时,点击按钮后自身状态会改变为禁用状态,同时显示 Loading 小图标,异步请求结束后恢复正常,本例中点击 异步请求按钮后,显示请求加载动画,5 秒后恢复正常

Attributes

Loading...

事件 Events

Loading...

Methods

Loading...
@page "/buttons"

<h3>Button 按钮</h3>

<h4>常用的操作按钮。</h4>

<Block Title="基础用法" Introduction="基础的按钮用法。">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="不同风格" Introduction="通过设置 <code>ButtonStyle</code> 来显示不同的按钮风格">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
                </Button>
            </div>
        </div>
    </div>
</Block>

<Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。'>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>
</Block>

<Block Title="不同尺寸" Introduction='Button 组件提供除了默认值以外的多种尺寸,通过设置 <code>Size</code> 属性可以在不同场景下选择合适的按钮尺寸。'>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
            <div class="form-group col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
        </div>
    </div>
</Block>

<Block Title="禁用状态" Introduction="按钮不可用状态。通过设置 <code>IsDisabled</code> 属性">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
        </div>
    </div>

    <p class="mt-3">通过 <code>OnClick</code> 回调方法中设置自身 <code>IsDisabled</code> 属性,或者调用组件实例方法 <code>SetDisable</code> 均可实现按钮禁用效果</p>
    <p>由于使用 <code>IsDisabled</code> 属性时,需要显式手动调用 <code>StateHasChanged</code> 方法,会导致按钮所在组件整体刷新,建议使用实例方法 <code>SetDisable</code> 仅对按钮进行刷新</p>

    <p><b>性能比较:</b></p>
    <ul class="ul-demo">
        <li>使用 <code>IsDisabled</code> 属性设置时本页面传输量为 <code>4.8K</code></li>
        <li>使用 <code>SetDisable</code> 方法设置时本页面传输量为 <code>280B</code></li>
    </ul>
    <div class="form-inline">
        <div class="form-row">
            <div class="form-group col-12">
                <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>
            </div>
        </div>
    </div>
</Block>

<Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-auto">
                <div class="btn-group" role="group">
                    <Button Color="Color.Primary">按钮一</Button>
                    <Button Color="Color.Success">按钮二</Button>
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="带图标的按钮" Introduction="通过设置 <code>Icon</code> 属性对按钮图标进行设置,图标为字体字符串如使用 <code>font-awesome</code> 图标时 <code>fa fa-fa</code>">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-auto">
                <Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
            </div>
            <div class="form-group col-auto">
                <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>
            </div>
        </div>
    </div>
</Block>

<Block Title="二次封装按钮" Introduction="通过设置 <code>WinButton</code> 组件的 <code>Text</code> 属性对按钮显示文字进行设置,点击按钮是右侧显示被点击按钮的文字">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-auto">
                <WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
            </div>
            <div class="form-group col-auto">
                <WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
            </div>
            <div class="form-group col-auto">
                @ButtonText
            </div>
        </div>
    </div>
</Block>

<Block Title="异步请求按钮" Introduction="通过设置 <code>IsAsync</code> 属性按钮是否为 <b>异步请求按钮</b>,默认为 <code>false</code>">
    <p>当按钮为异步请求按钮时,点击按钮后自身状态会改变为禁用状态,同时显示 <code>Loading</code> 小图标,异步请求结束后恢复正常,本例中点击 <b>异步请求</b>按钮后,显示请求加载动画,5 秒后恢复正常</p>
    <div class="row">
        <div class="col">
            <Button Text="异步请求" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components.Web;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Buttons
    {
        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

        [NotNull]
        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;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="e"></param>
        private void ButtonClick(MouseEventArgs e)
        {
            Trace?.Log($"Button Clicked");
        }

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

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

        private static Task ClickAsyncButton() => Task.Delay(5000);

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnClick",
                Description="点击按钮时触发此事件",
                Type ="EventCallback<MouseEventArgs>"
            },
            new EventItem()
            {
                Name = "OnClickWithoutRender",
                Description="点击按钮时触发此事件并且不刷新当前组件,用于提高性能时使用",
                Type ="Func<Task>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = "图标",
                Type = "string",
                ValueList = "",
                DefaultValue = ""
            },
            new AttributeItem() {
                Name = "LoadingIcon",
                Description = "异步加载时的动画图标",
                Type = "string",
                ValueList = "",
                DefaultValue = "fa fa-fw fa-spin fa-spinner"
            },
            new AttributeItem() {
                Name = "Text",
                Description = "显示文字",
                Type = "string",
                ValueList = "",
                DefaultValue = ""
            },
            new AttributeItem() {
                Name = "Size",
                Description = "尺寸",
                Type = "Size",
                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsBlock",
                Description = "填充按钮",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsOutline",
                Description = "是否边框",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAsync",
                Description = "是否为异步按钮",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ButtonStyle",
                Description = "按钮风格",
                Type = "ButtonStyle",
                ValueList = "None / Circle / Round",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "ButtonType",
                Description = "按钮类型",
                Type = "ButtonType",
                ValueList = "Button / Submit / Reset",
                DefaultValue = "Button"
            }
        };

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            new MethodItem()
            {
                Name = "SetDisable",
                Description = "设置按钮是否可用",
                Parameters = "disable",
                ReturnValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload