RailLayout

图标窄边栏放主模块,多子页面的模块右侧展开二级导航列,单页模块收起占满宽度。

最后更新

说明

面向模块多、层级浅的工作空间:顶栏横贯全宽(完全复用 TopBar,搜索/刷新/通知/偏好下拉一个不少),下方三段是 74px 图标窄边栏 + 186px 二级导航列 + 内容区。窄边栏只渲染菜单树的顶层节点——分组跳它的第一个子页面(模块首页),顶层链接直接跳;二级列只在当前模块有多个可见子页面时才展开,单页模块整块收起、内容区占满余量。两个宽度是 CSS 变量 --rail-width / --rail-sub-width,宿主在实例上覆写样式即可,不必改框架。与 AdminLayout 共用同一个外壳基类 AppShell,故登录门禁、[Menu] 扫描装配、标题与面包屑推导、软刷新、多页签、维护横幅、水印、命令面板与返回顶部逐项一致;差别只在侧栏形态与折叠态默认值(这里没有可折叠的宽侧栏)。≤860px 时常驻二级列换成从左侧滑出的抽屉,开关按钮出现在顶栏品牌位右侧,换路由自动收起。

常见能力:

  • 图标窄边栏 + 二级导航列三段式导航
  • 单页模块自动收起二级列
  • 顶栏横贯全宽、完整复用 TopBar
  • 与 AdminLayout 同源的外壳能力(AppShell)
  • 宽度经 CSS 变量覆写
  • ≤860px 二级列转抽屉
  • 顶栏「布局」即时换壳(Config.Shells 候选 rail)

用法

@* App.razor:与 AdminLayout 同款接法,页面可用 @layout RailLayout 逐页覆盖 *@
<Router AppAssembly="@typeof(Program).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(RailLayout)" />
  </Found>
</Router>

API 参数

参数 类型 默认值 说明
Body RenderFragment null
HomeTitle string "首页" 首页页签标题。
HomeUrl string "/" 首页地址:多页签模式下钉在首位、不可关闭的那一签,也是品牌位点击的去向。 须与宿主的首页路由一致,否则首页会被当成普通页签另开一个。
Languages List<LanguageOption> [] 语言选项。留空时由顶栏从语言管理服务自取“用户启用的语言”;显式传入则覆盖。
Logo string "K" Logo 文字。
LogoIcon string null Logo 图标,设置后覆盖 Logo。
LogoUrl string "_content/Known/img/logo.svg" Logo 图片地址,优先级最高(覆盖 LogoIcon 与 Logo)。默认取框架品牌图标;置空则回退文字/图标。
Menus List<MenuItem> [] 导航菜单。留空时由登录门禁装配([Menu] 扫描 + 模块登记表),显式传入则以其为准。
Notifications List<NotifyItem> [] 顶栏通知。
NotifyFooter string "查看全部通知" 通知面板底部文字,为空则不显示。
OnLogout EventCallback — 事件
PageTitle string null 顶栏页面标题。留空时自动取当前页在菜单中的名称(模板布局为默认布局,页面无法逐页传参,故从菜单树推导,避免标题空白)。
ProfileUrl string "/profile" 「个人中心」入口地址(顶栏头像下拉里的条目跳转)。默认指向 Known.Admin 的自助页;宿主无该页可置空以隐藏条目,或改成自己的路由。
ScrollId string "known-rail-content" 内容滚动容器的 DOM id。
Searchable bool true 是否显示全局搜索。
SiteTitle string null 站点标题。留空(默认)时由「系统设置 · 系统名称」驱动;宿主显式传入则以其为准。
UserName string "Admin" 用户名。
UserRole string "超级管理员" 用户角色。

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

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