Blur Admin 侧边栏组件深度解析与使用指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01164/article/details/148393911

Blur Admin 侧边栏组件深度解析与使用指南

blur-admin akveo/blur-admin: 是一个基于 Angular 和 Bootstrap 4 的前端 UI 框架。适合对 Angular、Bootstrap 和想要快速构建管理界面的开发者。项目地址: https://gitcode.com/gh_mirrors/bl/blur-admin

侧边栏组件概述

Blur Admin 框架中的侧边栏(Sidebar)是一个核心导航组件，它为应用提供了直观的菜单导航功能。作为 Angular 应用中的单例对象，每个应用只能存在一个侧边栏实例。该组件支持两级菜单结构，能够满足大多数后台管理系统的导航需求。

基本使用方法

在模板中使用 baSidebar 指令即可快速创建侧边栏：

<ba-sidebar></ba-sidebar>

Blur Admin 提供了两种配置侧边栏的方式：手动配置和基于 ui-router 的自动配置。开发者可以根据项目需求选择适合的方式，也可以混合使用这两种方法。

手动配置详解

手动配置需要在 Angular 的配置块中使用 baSidebarServiceProvider 服务。该服务提供了 addStaticItem 方法，接收一个菜单项对象作为参数。

菜单项对象属性说明

| 属性名 | 类型 | 说明 | |-------------|------------------|----------------------------------------------------------------------| | title | String | 菜单项显示的文字内容 | | icon | String | 菜单项图标对应的 CSS 类名 | | stateRef | String | 关联的 ui-router 状态名称 | | fixedHref | String | 菜单项关联的固定 URL 地址 | | blank | Boolean | 是否在新标签页中打开链接 | | subMenu | Array | 子菜单项数组，用于创建二级菜单 |

手动配置示例

baSidebarServiceProvider.addStaticItem({
  title: '一级菜单',
  icon: 'ion-ios-more',
  subMenu: [{
    title: '二级菜单',
    stateRef: 'submenu.state'
  }]
});

基于路由的自动配置

Blur Admin 侧边栏能够自动扫描应用中所有的 ui-router 状态，查找包含 sidebarMeta 属性的状态，并自动生成对应的菜单项。

路由配置要点

层级关系：路由状态会按照其层级关系自动组织菜单结构。如果一个抽象父路由和它的子路由都包含 sidebarMeta 属性，子路由会自动成为父路由菜单项的子菜单。
菜单项文本：默认使用状态的 title 属性作为菜单项显示文本。

路由配置示例

$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: 'app/pages/dashboard/dashboard.html',
    title: '控制面板',
    sidebarMeta: {
      icon: 'ion-android-home',
      order: 0
    }
  });