前端【免费下载链接】blur-adminAngularJS Bootstrap Admin Panel Framework项目地址https://gitcode.com/gh_mirrors/bl/blur-admin点击查看免费下载在 blur-adminAngularJS Bootstrap Admin Panel Framework这类后台管理框架中侧边栏Sidebar是承担全局导航的核心组件。本文以仓库文档 docs/contents/articles/051-sidebar/index.md 为主体结合src/app/theme/components/baSidebar/目录下的指令、控制器、服务与模板源码系统讲解baSidebar指令的用法、两种配置方式手动配置与 ui-router 路由配置的完整参数语义、菜单的分层分组与排序原理以及折叠/隐藏等交互行为帮助你为新增页面快速接入侧边栏导航。侧边栏是什么单例式的导航组件Sidebar 用于为应用提供便捷的导航方式。按官方文档的定位它有几个关键约束每个 Angular 应用只支持一个侧边栏也就是说Sidebar 本质上是一个单例对象当前支持一级level 1和二级level 2子菜单它通过baSidebar指令创建最小用法只需一行 HTMLba-sidebar/ba-sidebar从源码看该指令定义在 baSidebar.directive.js 中声明为元素型指令restrict: E模板指向 ba-sidebar.html控制器为BaSidebarCtrl见 BaSidebarCtrl.js。此外该指令还负责监听全局click与resize事件当用户点击侧边栏外部、且当前菜单未折叠、又处于可隐藏视口时会自动收起菜单窗口尺寸变化时会重新计算菜单高度与折叠状态并在$destroy时解绑事件避免内存泄漏。配置侧边栏菜单目前只支持 JavaScript 配置方式具体有两条路线手动配置通过baSidebarServiceProvider.addStaticItem()在 Angular 的 configuration 块中注入静态菜单项路由配置在 ui-router 的 state 定义中携带sidebarMeta元数据由侧边栏自动扫描并生成菜单项。这两种方式可以同时使用菜单项会合并显示也可以只使用其中一种。手动配置addStaticItem 与菜单项属性手动配置需要用到baSidebarServiceProvider它暴露了addStaticItem方法接收一个menuItem对象作为参数。该方法必须在 Angular 的 configuration 块.config()中调用。menuItem对象支持以下属性属性类型含义titleString菜单项显示名称iconString图标CSS class 名显示在标题旁边stateRefString与该菜单项关联的 ui-router state 名称fixedHrefString与该菜单项关联的 URL与stateRef二选一或按场景选用blankString是否在新浏览器标签页中打开上述 URLsubMenuArray of menu items作为下一级子菜单显示的菜单项列表文档给出的最小示例baSidebarServiceProvider.addStaticItem({ title: Menu Level 1, icon: ion-ios-more });再看服务实现 baSidebar.service.jsaddStaticItem会把传入的参数逐个追加进内部数组staticMenuItemsvar staticMenuItems []; this.addStaticItem function() { staticMenuItems.push.apply(staticMenuItems, arguments); };最终在getMenuItems()中手动配置的静态项会拼接在由路由状态生成的菜单项之后return menuItems.concat(staticMenuItems);。仓库内真实的手动配置示例pages.module.js 的routeConfig里给出了非常完整的手动配置实战范例几乎用到了menuItem的全部属性function routeConfig($urlRouterProvider, baSidebarServiceProvider) { $urlRouterProvider.otherwise(/dashboard); baSidebarServiceProvider.addStaticItem({ title: Pages, icon: ion-document, subMenu: [{ title: Sign In, fixedHref: auth.html, blank: true }, { title: Sign Up, fixedHref: reg.html, blank: true }, { title: User Profile, stateRef: profile }, { title: 404 Page, fixedHref: 404.html, blank: true }] }); baSidebarServiceProvider.addStaticItem({ title: Menu Level 1, icon: ion-ios-more, subMenu: [{ title: Menu Level 1.1, disabled: true }, { title: Menu Level 1.2, subMenu: [{ title: Menu Level 1.2.1, disabled: true }] }] }); }这个例子透露了几个在文档基础上更进一步的实战细节fixedHrefblank组合用于把站外页面这里是auth.html、reg.html、404.html以新标签页方式打开从 ba-sidebar.html 模板可见blank会渲染为target_blankstateRef单独使用User Profile直接绑定 ui-router 的profilestate通过ui-state指令完成跳转disabled属性虽然不在文档的参数表中但模板专门为其提供了渲染分支——禁用项渲染为不可点击的纯文本链接常用于占位或演示分级菜单Menu Level 1.2.1即三层嵌套的演示项手动配置同样支持多级嵌套subMenu模板对第三层子菜单也有对应的渲染逻辑。路由配置sidebarMeta 驱动的菜单自动生成路由配置是另一种也是框架主推的方式。默认情况下侧边栏会遍历应用中定义的所有 ui-router state逐一检查其中是否存在sidebarMeta对象只要某个 state 携带该属性就会据此生成一个菜单项。层级分组原理state 会按照层级被分组如果某个 state 存在父级 abstract state并且二者都定义了sidebarMeta那么子 state 就会作为父级菜单项的子项展示。这个父子关系在服务层有非常清晰的实现逻辑baSidebar.service.js 的defineMenuItemStatesfunction defineMenuItemStates() { return $state.get() .filter(function(s) { return s.sidebarMeta; }) .map(function(s) { var meta s.sidebarMeta; return { name: s.name, title: s.title, level: (s.name.match(/\./g) || []).length, order: meta.order, icon: meta.icon, stateRef: s.name, }; }) .sort(function(a, b) { return (a.level - b.level) * 100 a.order - b.order; }); }可以提炼出三个关键机制level由 state 名称中的点号数量推导如charts有 0 个点level 0charts.amCharts有 1 个点level 1父子归属通过 name 前缀匹配在getMenuItems()中先筛选出level 0的菜单项再为每个一级项收集level 1且name以该项name开头的 state 作为subMenumenuItems.forEach(function(item) { var children states.filter(function(child) { return child.level 1 child.name.indexOf(item.name) 0; }); item.subMenu children.length ? children : null; });排序规则是先层级、后 order(level差) * 100 order差意味着不同层级之间永远先按层级排同层级内才按order数值升序排列。菜单项名称来源菜单项的名称取自 state 的title属性注意不是name。文档给出的标准示例$stateProvider .state(dashboard, { url: /dashboard, templateUrl: app/pages/dashboard/dashboard.html, title: Dashboard, sidebarMeta: { icon: ion-android-home, order: 0, }, });sidebarMeta 支持的属性sidebarMeta对象目前支持以下两个属性属性类型含义iconString图标CSS class 名显示在标题旁边orderNumber元素在当前层级中的排序序号注意与手动配置的区别title不写在sidebarMeta里而是直接取 state 自身的title跳转目标也不需要配置——它就是 state 本身stateRef: s.name。仓库中的路由配置实战盘点仓库各功能模块的.module.js文件里散布着大量sidebarMeta用例可以直接对照学习父级抽象 state 子 state 的经典模式charts.module.js.state(charts, { url: /charts, abstract: true, template: div ui-view autoscrolltrue autoscroll-body-top/div, title: Charts, sidebarMeta: { icon: ion-stats-bars, order: 150, }, });其子级分别定义了order: 0amChartsamCharts.module.js、order: 100Chartistchartist.module.js、order: 200Chart.jschartJs.module.js、order: 300Morrismorris.module.js。由于 state 名称都形如charts.xxx它们会自动挂到charts菜单项下并严格按 order 升序显示。Maps 模块maps.module.js同样展示了这种结构父级maps使用ion-ios-location-outline图标、order: 500四个子地图页gmap0、leaflet100、bubble200、line300依次排列。表单模块见 form.module.js 附近的路由定义则演示了同一父级下多个子 state 排序的常见写法form.inputsorder 0、form.layoutsorder 100、form.wizardorder 200。组件模块components.module.js和 Timelinetimeline.module.js分别展示了components父级与components.timeline子级带独立图标的组合。邮件模块mail.module.js甚至允许abstract的中间 statecomponents.mail也声明sidebarMeta成为下一级components.mail.label的分组容器。实战小结新增一个页面到侧边栏的最小步骤在页面的.module.js中定义或找到对应的 ui-router state给 state 补充title属性作为菜单显示名添加sidebarMeta: { icon: 图标类名, order: 数字 }若要挂在某个分组下让 state 名称以该分组 state 名称开头如charts.myChart并确保分组 state 本身也有sidebarMeta刷新页面菜单项即自动出现在对应层级。侧边栏的交互与响应式行为除了菜单项的生成仓库源码还揭示了侧边栏在交互与响应式方面的实现细节理解这些有助于你在集成时预判其行为。菜单折叠与隐藏的视口断点layoutSizes常量定义在 theme.constants.js.constant(layoutSizes, { resWidthCollapseSidebar: 1200, resWidthHideSidebar: 500 })对应 baSidebar.service.js 中的两个判定方法function shouldMenuBeCollapsed() { return window.innerWidth layoutSizes.resWidthCollapseSidebar; } function canSidebarBeHidden() { return window.innerWidth layoutSizes.resWidthHideSidebar; }也就是说窗口宽度≤ 1200px时菜单默认折叠为图标模式≤ 500px时侧边栏可以被完全隐藏。baSidebar指令在窗口resize时自动调用这两个方法同步状态BaSidebarCtrl则在每次$stateChangeSuccess路由切换成功后若当前视口允许隐藏则自动收起菜单。子菜单展开/折叠与悬停指示baSidebarHelpers.directive.js 实现了一组配套辅助指令baSidebarToggleMenu/baSidebarCollapseMenu分别用于整体展开、收起菜单点击时会标记事件已处理$sidebarEventProcessed避免触发指令外层点击外部收起菜单的逻辑baUiSrefToggler点击带子菜单的项时切换展开状态若整个侧边栏处于折叠态会先展开侧边栏再展开子菜单移动端除外移动端侧边栏应完全隐藏baUiSrefTogglingSubmenu实际通过slideDown()/slideUp()动画展开/收起子菜单路由进入某个子菜单对应的 state 时对应父项会自动展开并高亮基于ui-sref-activeselected与$stateChangeStart/$stateChangeSuccess监听。此外BaSidebarCtrl.js 中的hoverItem会计算悬浮项的位置与高度配合模板末尾的sidebar-hover-elem元素实现菜单项上的高亮指示条效果模板 ba-sidebar.html 还支持触摸手势右滑展开、左滑收起ng-swipe-right/ng-swipe-left。相关源码文件索引作用文件侧边栏指令事件绑定、菜单高度计算baSidebar.directive.js侧边栏控制器菜单项、悬停指示、路由切换收起BaSidebarCtrl.js侧边栏服务 ProvideraddStaticItem、菜单聚合与排序、折叠判定baSidebar.service.js侧边栏 HTML 模板两级/三级菜单渲染、fixedHref/blank/disabled处理ba-sidebar.html展开/折叠辅助指令baUiSrefToggler等baSidebarHelpers.directive.js视口断点常量1200 / 500theme.constants.js手动配置示例Pages 菜单、Menu Level 1 演示pages.module.js路由配置示例图表、地图、表单、组件模块charts.module.js、maps.module.js、form.module.js 等总结blur-admin 的侧边栏通过baSidebar指令 baSidebarService服务实现了一套灵活的单例导航体系手动配置适合放置与路由无关的静态链接如站外页面、演示占位项路由配置则让菜单与页面 state 天然绑定新增页面只需声明title与sidebarMeta即可自动出现在导航中。理解level由 state 名称点号推导与order同层排序的配合规则、以及fixedHref/blank/disabled等菜单项属性的语义是自由扩展 blur-admin 导航结构的关键。赞分享前端【免费下载链接】blur-adminAngularJS Bootstrap Admin Panel Framework项目地址https://gitcode.com/gh_mirrors/bl/blur-admin点击查看免费下载相关推荐react-admin ra-navigation 的 IconMenu 图标菜单组件极简侧边栏与多级导航实战指南react admin ra navigation 的 IconMenu 图标菜单组件极简侧边栏与多级导航实战指南 本篇技术指南围绕 react admin前端UI组件Element UI 导航菜单NavMenu完全指南顶栏、侧栏、折叠与 Vue Router 集成实践Element UI 导航菜单NavMenu完全指南顶栏、侧栏、折叠与 Vue Router 集成实践 Element UI 的 NavMenu 导航菜单前端UI组件设计系统BlurAdmin侧边栏配置全攻略手动与路由两种实现方式对比BlurAdmin侧边栏配置全攻略手动与路由两种实现方式对比 你是否还在为管理系统的侧边栏配置感到困惑是否想知道如何快速实现动态导航菜单本文将详细对比Bl前端上一篇终极Git仓库清理指南bfg-repo-cleaner让大型项目管理更高效下一篇CATS智能减面教程保留所有形状键的减面技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
