TopBar

页面标题、面包屑,右侧搜索 / 刷新 / 全屏 / 通知与头像下拉(身份 + 偏好设置)。

最后更新

说明

顶栏左侧为标题与并排的面包屑(由 AdminLayout 从菜单树自动推导,通常无需手动传 Breadcrumb);右侧从左到右依次是全局搜索框、宿主自定义功能、刷新、全屏,一条分割线之后是通知下拉与头像下拉。主题、语言、密度、布局、导航不再是独立图标按钮,而是收进头像下拉的「偏好设置」段控——主题色提供预设色卡加自定义取色器,选定后覆盖全局强调色并随明暗主题自动派生 hover/soft;「布局」按 Config.Shells 的候选逐条渲染成段控按钮,点一下即换 ShellLayout 渲染的那个外壳(候选不足两项时这一行整块不渲染,连用户的旧偏好一并作废,宿主钉死外壳即如此);「导航」在单页与多页签之间切换。头像下拉同时展示当前用户身份卡,并可挂出个人中心与退出登录。宿主可通过 Config.AddTopAction 一次声明,在图标按钮区挂出自定义功能(图标命令 / 外链 / 锚定下拉面板),并按角色显隐。刷新按钮通过 OnRefresh 交回宿主做软刷新,未接管时回退整页重载。「开发中心」已不再是顶栏下拉:它是侧栏的一个普通菜单分组,由 Config.AddKnown 预声明、页面以 [Menu(Group = "development")] 挂入,详见开发中心指南。

常见能力:

  • 全局搜索框(右侧,回车触发命令面板)
  • 面包屑与标题并排
  • 刷新按钮(软刷新 / 整页重载兜底)
  • 全屏切换按钮
  • 通知下拉与未读角标
  • 头像下拉:身份卡 + 主题/语言/密度/主题色/布局/导航偏好 + 个人中心/退出登录
  • Config.AddTopAction 自定义功能(含下拉面板 / 角色显隐)

用法

<TopBar Title="订单管理" Breadcrumb="@crumbs" Searchable="true"
        ShowRefresh="true" OnRefresh="@TriggerRefresh"
        Notifications="@notifies"
        Languages="@languages" />

API 参数

参数 类型 默认值 说明
Breadcrumb List<BreadcrumbItem> null 面包屑导航路径(当前页在菜单树中的层级),与标题并排显示;为空时仅显示标题。
ChildContent RenderFragment null
CurrentLanguage string null 当前语言。
DevMenus List<MenuItem> null 「开发中心」入口(由 AdminLayout 依 DevCenter 装配并按角色过滤);为空则头像下拉不显示该分组。
Fullscreen bool false 全屏中。
Languages List<LanguageOption> [] 语言列表。
Notifications List<NotifyItem> [] 通知列表。
NotifyClick EventCallback<NotifyItem> — 事件
NotifyFooter string null 通知面板底部文字,为空则不显示。
OnFullscreenChanged EventCallback — 事件
OnLanguageChanged EventCallback<string> — 事件
OnLogout EventCallback — 事件 退出登录:宿主接管时由头像下拉的「退出登录」触发。
OnProfile EventCallback — 事件 个人中心:宿主接管时由头像下拉的「个人中心」触发。
OnRefresh EventCallback — 事件 点击刷新按钮:宿主(如 AdminLayout)接管以软刷新当前页;未接则回退整页重载。
OnViewAll EventCallback — 事件
Searchable bool false 是否显示全局搜索框(位于右侧工具栏)。
SearchChanged EventCallback<string> — 事件
SearchPlaceholder string "搜索菜单、页面…" 搜索框占位文字。
ShowRefresh bool true 是否显示右上角刷新按钮。
Title string null 页面标题。
TopContent RenderFragment null 顶栏附加内容(放在右侧图标按钮之前)。
User UserInfo null 当前登录用户,用于右上角身份显示与顶栏自定义功能按角色显隐。
UserName string "Admin" 用户名回退:未传 User 时(如文档示例)用于头像与名称显示。
UserRole string "管理员" 角色回退:未传 User 时用于副标题显示。
Visible bool true 取得或设置组件是否可见,默认为false。
VisibleChanged EventCallback<bool> — 事件 取得或设置组件可见性变化时的回调事件。
Class string null 取得或设置组件的CSS类名,用于自定义样式。
Disabled bool false 取得或设置组件是否禁用,默认为false。
Style string null 取得或设置组件的内联样式,用于自定义样式。

所有组件均继承 BaseComponent,除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群