按钮 (Button)

使用按钮触发操作,支持不同样式。

概述

  • 支持默认、主要、成功、信息、警告、危险样式

代码演示

1.文本按钮示例

namespace WebSite.Docus.Inputs.Buttons;

class Button1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("默认", Callback(OnClick), StyleType.Default);
        builder.Button("主要", Callback(OnClick), StyleType.Primary);
        builder.Button("成功", Callback(OnClick), StyleType.Success);
        builder.Button("信息", Callback(OnClick), StyleType.Info);
        builder.Button("警告", Callback(OnClick), StyleType.Warning);
        builder.Button("危险", Callback(OnClick), StyleType.Danger);
    }

    private void OnClick() => UI.Toast("点击测试!");
}

2.图标按钮示例

namespace WebSite.Docus.Inputs.Buttons;

class Button2 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("默认", "fa fa-arrow-left", Callback(OnClick), StyleType.Default);
        builder.Button("主要", "fa fa-plus-circle", Callback(OnClick), StyleType.Primary);
        builder.Button("成功", "fa fa-check-circle", Callback(OnClick), StyleType.Success);
        builder.Button("信息", "fa fa-info-circle", Callback(OnClick), StyleType.Info);
        builder.Button("警告", "fa fa-exclamation-circle", Callback(OnClick), StyleType.Warning);
        builder.Button("危险", "fa fa-times-circle-o", Callback(OnClick), StyleType.Danger);
    }

    private void OnClick() => UI.Toast("点击测试!");
}

3.禁用按钮示例

namespace WebSite.Docus.Inputs.Buttons;

class Button3 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button("默认", Callback(OnClick), StyleType.Default, false);
        builder.Button("主要", Callback(OnClick), StyleType.Primary, false);
        builder.Button("成功", Callback(OnClick), StyleType.Success, false);
        builder.Button("信息", "fa fa-info-circle", Callback(OnClick), StyleType.Info, false);
        builder.Button("警告", "fa fa-exclamation-circle", Callback(OnClick), StyleType.Warning, false);
        builder.Button("危险", "fa fa-times-circle-o", Callback(OnClick), StyleType.Danger, false);
    }

    private void OnClick() => UI.Toast("点击测试!");
}

4.更改名称示例

namespace WebSite.Docus.Inputs.Buttons;

class Button4 : BaseComponent
{
    private string btnName = "打开";

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Button(btnName, Callback(OnClick), StyleType.Primary);
    }

    private void OnClick()
    {
        btnName = btnName == "打开" ? "关闭" : "打开";
        StateChanged();
    }
}