说明
顶栏左侧为标题与并排的面包屑(由 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 群