侧边栏 Sidebar

一个灵活且可自定义的侧边栏组件，支持折叠状态、移动端响应式布局以及多种样式选项。

---

📦 引入方式

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@npmqg/react-ui-sidebar';

---

使用示例

示例

Application

• Home
• Inbox
• Calendar
• Search
• Settings

源码

  import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
  import {
      Sidebar,
      SidebarContent,
      SidebarGroup,
      SidebarGroupContent,
      SidebarGroupLabel,
      SidebarMenu,
      SidebarMenuButton,
      SidebarMenuItem,
  } from "@/components/ui/Sidebar";

  // Menu items.
  const items = [
      {
          title: "Home",
          url: "#",
          icon: Home,
      },
      {
          title: "Inbox",
          url: "#",
          icon: Inbox,
      },
      {
          title: "Calendar",
          url: "#",
          icon: Calendar,
      },
      {
          title: "Search",
          url: "#",
          icon: Search,
      },
      {
          title: "Settings",
          url: "#",
          icon: Settings,
      },
  ];

  export function AppSidebar() {
    return (
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton asChild>
                      <a href={item.url}>
                        <item.icon />
                        <span>{item.title}</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    );
  }

---

结构

一个 Sidebar 组件由以下部分组成:

• SidebarProvider - 处理可折叠状态
• Sidebar - 侧边栏容器
• SidebarHeader 和 SidebarFooter - 固定(Sticky)在侧边栏的顶部和底部
• SidebarContent - 可滚动内容
• SidebarGroup - SidebarContent 中的一个部分
• SidebarTrigger - 触发 Sidebar 的按钮

详情可查看 shadcn/ui 官方文档 https://www.shadcn.com.cn/docs/components/sidebar