@ug666/react 文档演示

Sidebar 侧边栏

Sidebar 适合后台系统主导航、知识库侧栏与多模块工作台布局。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Sidebar } from '@ug666/react'

变体预览

标准展开态与可折叠侧边栏。

状态展示

可通过折叠状态在不同屏幕宽度下切换导航密度。

尺寸展示

内置标准宽度与折叠宽度两种展示模式。

展开：w-60折叠：w-16

代码示例

适合在后台布局组件中长期复用。

import { Home, Settings, Users } from 'lucide-react'
import { Button, Sidebar } from '@ug666/react'

const items = [
  { label: '首页', href: '/dashboard', icon: Home, active: true },
  { label: '成员', href: '/dashboard/users', icon: Users },
  { label: '设置', href: '/dashboard/settings', icon: Settings },
]

export function DashboardSidebar() {
  return (
    <Sidebar
      items={items}
      footer={<Button variant="ghost">退出登录</Button>}
    />
  )
}

Props 说明

属性	类型	默认值	说明
items	SidebarItem[]	[]	导航项列表，包含 label、href、icon 与 active。
collapsed	boolean	false	折叠后只显示图标。
footer	ReactNode	—	底部额外操作区域。