Blazor UI：页面标题头

您可以使用 PageHeader 组件来设置页面的标题、面包屑导航项和工具栏项。在使用 PageHeader 组件之前，需要为 Volo.Abp.AspNetCore.Components.Web.Theming.Layout 命名空间添加 using 声明。

将 PageHeader 组件添加到页面后，您可以通过参数控制相关值。

页面标题

您可以使用 Title 参数来控制页面标题头。

<PageHeader Title="图书列表">
</PageHeader>

面包屑导航

基础主题目前未实现面包屑导航功能。

LeptonX Lite 主题支持面包屑导航。

可以使用 BreadcrumbItems 属性添加面包屑导航。

示例：将语言管理添加到面包屑导航项中。

创建一个 Volo.Abp.BlazoriseUI.BreadcrumbItem 对象的集合，并将该集合设置给 BreadcrumbItems 参数。

public partial class Index
{
    protected List<BreadcrumbItem> BreadcrumbItems { get; } = new();

    protected override void OnInitialized()
    {
        BreadcrumbItems.Add(new BreadcrumbItem("语言管理"));
    }
}

回到 razor 页面。

<PageHeader BreadcrumbItems="@BreadcrumbItems" /> 

主题随后会渲染面包屑导航。示例渲染结果如下：

• 默认会渲染主页图标。将 BreadcrumbShowHome 设置为 false 可隐藏它。
• 面包屑导航项将根据当前导航激活。将 BreadcrumbShowCurrent 设置为 false 可禁用此功能。

您可以根据需要添加任意数量的项。BreadcrumbItem 构造函数接受三个参数：

• text：面包屑导航项显示的文本。
• url（可选）：用户点击面包屑导航项时要跳转的 URL。
• icon（可选）：与文本一起显示的图标类（例如 Font-Awesome 的 fas fa-user-tie）。

页面工具栏

可以使用 Toolbar 属性设置页面工具栏。

示例：向页面工具栏添加一个“新建项”工具栏项。

创建一个 PageToolbar 对象，并使用 AddButton 扩展方法定义工具栏项。

public partial class Index
{
    protected PageToolbar Toolbar { get; } = new();
    
    protected override void OnInitialized()
    {
        Toolbar.AddButton("新建项", () =>
        {
            //在此处编写点击操作
            return Task.CompletedTask;
        }, icon:IconName.Add);
    }
}

回到 razor 页面并设置 Toolbar 参数。

<PageHeader Toolbar="@Toolbar"  /> 

示例渲染结果如下：

选项

可以通过使用 PageHeaderOptions 来启用或禁用 PageHeader 各部分的渲染。

    Configure<PageHeaderOptions>(options => 
    {
        options.RenderPageTitle = false;
        options.RenderBreadcrumbs = false;
        options.RenderToolbar = false;
    });

所有值默认均为 true。如果未配置 PageHeaderOptions，每个部分都将被渲染。