Blazor UI：工具栏

工具栏系统用于在用户界面上定义工具栏。模块（或您的应用程序）可以向工具栏添加项目，随后主题会在布局中渲染该工具栏。

目前仅存在一个名为“主工具栏”的标准工具栏（定义为常量：StandardToolbars.Main）。基础主题 会将主工具栏渲染成如下图所示：

在上图的屏幕截图中，主工具栏添加了两个项目：语言切换组件和用户菜单。您可以在此处添加自己的项目。

此外，Lepton X Lite主题 和 Lepton X 主题 为桌面端和移动端视图分别提供了两种不同的工具栏，这些工具栏均被定义为常量。

LeptonX Lite主题

• LeptonXLiteToolbars.Main
• LeptonXLiteToolbars.MainMobile

LeptonXLiteToolbars.Main	LeptonXLiteToolbars.MainMobile

LeptonX主题

• LeptonXToolbars.Main
• LeptonXToolbars.MainMobile

LeptonXToolbars.Main	LeptonXToolbars.MainMobile

示例：添加通知图标

本示例将在语言切换项目的左侧添加一个通知（铃铛）图标。工具栏中的项目应为Razor组件。因此，首先在您的项目中创建一个新的razor组件（组件的位置无关紧要）：

Notification.razor的内容如下所示：

@inherits Volo.Abp.AspNetCore.Components.AbpComponentBase
<div style="color: white; margin: 8px;">
    <i class="far fa-bell" @onclick="ShowNotifications"></i>
</div>
@code {
    private async Task ShowNotifications()
    {
        await Message.Info("TODO: 显示通知");
    }
}

此示例仅显示一条消息。实际应用中，您可能需要调用HTTP API来获取通知并在UI上显示。

接下来，我们可以创建一个实现IToolbarContributor接口的类：

using Volo.Abp.AspNetCore.Components.Web.Theming.Toolbars;

// ...

public class MyToolbarContributor : IToolbarContributor
{
    public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
    {
        if (context.Toolbar.Name == StandardToolbars.Main)
        {
            context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(Notification)));
        }

        return Task.CompletedTask;
    }
}

该类将NotificationViewComponent添加为Main工具栏的第一个项目。

最后，您需要在模块的ConfigureServices中将此贡献者添加到AbpToolbarOptions中：

using Volo.Abp.AspNetCore.Components.Web.Theming.Toolbars;

Configure<AbpToolbarOptions>(options =>
{
    options.Contributors.Add(new MyToolbarContributor());
});

至此已完成所有步骤，运行应用程序时您将在工具栏上看到通知图标：

IToolbarManager

IToolbarManager用于渲染工具栏。它通过工具栏名称返回工具栏项目。这通常由主题在布局中渲染工具栏时使用。