Sidebar 侧边栏

侧边栏菜单组件，用于导航菜单。

基础用法

<div id="demo-sidebar"></div>

<script>
  const sidebar = new SaSidebar('#demo-sidebar', {
    items: [
      {
        id: 'home',
        label: '首页',
        icon: 'home',
        url: '/'
      },
      {
        id: 'users',
        label: '用户管理',
        icon: 'user',
        url: '/users'
      },
      {
        id: 'settings',
        label: '设置',
        icon: 'setting',
        url: '/settings'
      }
    ],
    onSelect: (item) => {
      console.log('选中:', item);
    }
  });
</script>

加载 SanoUI 组件中...

支持子菜单

<div id="demo-sidebar-submenu"></div>

<script>
  const sidebar = new SaSidebar('#demo-sidebar-submenu', {
    items: [
      {
        id: 'home',
        label: '首页',
        icon: 'home',
        url: '/'
      },
      {
        id: 'system',
        label: '系统管理',
        icon: 'setting',
        children: [
          {
            id: 'users',
            label: '用户管理',
            url: '/system/users'
          },
          {
            id: 'roles',
            label: '角色管理',
            url: '/system/roles'
          }
        ]
      }
    ]
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaSidebarOptions	{}

配置选项

参数	说明	类型	可选值	默认值
items	菜单项数组	Array<SidebarItem>	-	[]
defaultActive	默认激活项	string	-	-
collapsed	是否折叠	boolean	-	false
onSelect	选择回调	function(item: SidebarItem)	-	-

SidebarItem 配置

参数	说明	类型	默认值
id	菜单项唯一标识	string	-
label	菜单项文本	string	-
icon	菜单项图标	string	-
url	链接地址	string	-
children	子菜单项数组	Array<SidebarItem>	-

方法

方法名	说明	参数	返回值
setActive	设置激活项	id: string	void
toggleCollapse	切换折叠状态	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const sidebar = new SaSidebar('#my-sidebar', {
  items: [
    {
      id: 'home',
      label: '首页',
      icon: 'home',
      url: '/'
    },
    {
      id: 'users',
      label: '用户管理',
      icon: 'user',
      url: '/users'
    }
  ],
  defaultActive: 'home',
  onSelect: (item) => {
    console.log('选中菜单项:', item);
    if (item.url) {
      window.location.href = item.url;
    }
  }
});

// 设置激活项
sidebar.setActive('users');

// 切换折叠状态
sidebar.toggleCollapse();

实际使用场景

场景 1：后台管理系统侧边栏

在后台管理系统中使用侧边栏作为主导航。

<div id="admin-sidebar" style="width: 200px; border-right: 1px solid #eee;"></div>

<script>
  const sidebar = new SaSidebar('#admin-sidebar', {
    items: [
      {
        id: 'dashboard',
        label: '仪表盘',
        icon: 'dashboard',
        url: '/dashboard'
      },
      {
        id: 'user',
        label: '用户管理',
        icon: 'user',
        children: [
          {
            id: 'user-list',
            label: '用户列表',
            url: '/users/list'
          },
          {
            id: 'user-role',
            label: '角色管理',
            url: '/users/roles'
          }
        ]
      },
      {
        id: 'content',
        label: '内容管理',
        icon: 'document',
        children: [
          {
            id: 'article',
            label: '文章管理',
            url: '/content/articles'
          },
          {
            id: 'category',
            label: '分类管理',
            url: '/content/categories'
          }
        ]
      },
      {
        id: 'settings',
        label: '系统设置',
        icon: 'setting',
        url: '/settings'
      }
    ],
    defaultActive: 'dashboard',
    onSelect: (item) => {
      console.log('选择菜单:', item);
      if (item.url) {
        // window.location.href = item.url;
      }
    }
  });
</script>

加载 SanoUI 组件中...