工具条 (Toolbar)

一组按钮组件。

概述

该组件用于显示一组按钮，可用于列表操作
可在外部设置按钮可见和可用

代码演示

1.公用代码

//定义按钮组
internal static readonly List<ButtonInfo> Tools = new()
{
    new ButtonInfo("Load", "加载", "fa fa-refresh", StyleType.Default),
    new ButtonInfo("View", "只读", "fa fa-file-text-o", StyleType.Warning),
    new ButtonInfo("Edit", "编辑", "fa fa-file-o", StyleType.Success),
    new ButtonInfo("Check", "验证", "fa fa-check", StyleType.Info),
    new ButtonInfo("Save", "保存", "fa fa-save", StyleType.Primary),
    new ButtonInfo("Clear", "清空", "fa fa-trash-o", StyleType.Danger),
    new ButtonInfo("Clear", "禁用", "fa fa-trash-o", StyleType.Primary) { Enabled = false }
};

2.默认示例

namespace WebSite.Docus.Nav.Toolbars;

class Toolbar1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Toolbar>()
               .Set(c => c.Tools, KToolbar.Tools)
               .Set(c => c.OnAction, OnAction)
               .Build();
    }

    public void Load() => UI.Toast("点击了加载按钮！");
    public void Edit() => UI.Toast("点击了编辑按钮！");
    public void Save() => UI.Toast("点击了保存按钮！");
    public void Clear() => UI.Toast("点击了清空按钮！");

    private void OnAction(ButtonInfo info)
    {
        var method = GetType().GetMethod(info.Id);
        if (method == null)
            UI.Toast($"{info.Name}方法不存在！", StyleType.Danger);
        else
            method.Invoke(this, null);
        StateChanged();
    }
}

3.下拉按钮示例

namespace WebSite.Docus.Nav.Toolbars;

class Toolbar2 : BaseComponent
{
    private readonly List<ButtonInfo> tools = new();

    public Toolbar2()
    {
        tools.Add(new ButtonInfo("Edit", "编辑", "fa fa-file-o", StyleType.Success));
        tools.Add(new ButtonInfo("Clear", "清空", "fa fa-trash-o", StyleType.Danger));
        var more = new ButtonInfo("More", "更多", "");
        more.Children.Add(new ButtonInfo("More1", "操作一", "fa fa-close"));
        more.Children.Add(new ButtonInfo("More2", "操作二", "fa fa-user") { Enabled = false });
        more.Children.Add(new ButtonInfo("More3", "操作三", "fa fa-cog"));
        tools.Add(more);
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Toolbar>()
               .Set(c => c.Tools, tools)
               .Set(c => c.OnAction, OnAction)
               .Build();
    }

    private void OnAction(ButtonInfo info)
    {
        var method = GetType().GetMethod(info.Id);
        if (method == null)
            UI.Toast($"{info.Name}方法不存在！", StyleType.Danger);
        else
            method.Invoke(this, null);
        StateChanged();
    }
}

4.按钮可见示例

编辑按钮可见

namespace WebSite.Docus.Nav.Toolbars;

class Toolbar3 : BaseComponent
{
    private Toolbar? toolbar;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Toolbar>()
               .Set(c => c.Tools, KToolbar.Tools)
               .Build(value => toolbar = value);

        builder.Field<CheckBox>("ToolVisible").Value("True").ValueChanged(OnToolVisibleChanged).Set(f => f.Text, "编辑按钮可见").Build();
    }

    private void OnToolVisibleChanged(string value)
    {
        var check = Utils.ConvertTo<bool>(value);
        toolbar?.SetItemVisible(check, "Edit");
    }
}

5.按钮可用示例

验证、保存按钮可用

namespace WebSite.Docus.Nav.Toolbars;

class Toolbar4 : BaseComponent
{
    private Toolbar? toolbar;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Toolbar>()
               .Set(c => c.Tools, KToolbar.Tools)
               .Build(value => toolbar = value);

        builder.Field<CheckBox>("ToolEnabled").Value("True").ValueChanged(OnToolEnabledChanged).Set(f => f.Text, "验证、保存按钮可用").Build();
    }

    private void OnToolEnabledChanged(string value)
    {
        var check = Utils.ConvertTo<bool>(value);
        toolbar?.SetItemEnabled(check, "Check", "Save");
    }
}

6.更改名称示例

namespace WebSite.Docus.Nav.Toolbars;

class Toolbar5 : BaseComponent
{
    private readonly List<ButtonInfo> tools = new()
    {
        new ButtonInfo("Open", "打开", "", StyleType.Primary)
    };
    private Toolbar? toolbar;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Toolbar>()
               .Set(c => c.Tools, tools)
               .Set(c => c.OnAction, OnAction)
               .Build(value => toolbar = value);
    }

    private void OnAction(ButtonInfo info)
    {
        if (info.Id == "Open")
        {
            toolbar?.SetItemName("Open", info.Name == "打开" ? "关闭" : "打开");
        }
    }
}