侧边栏组件

简介

侧边栏组件，属于 GZMJS 项目的桌面端组件。

版本

当前版本：0.1.1

包名

@gzmjs/sidebar

功能特性

• 提供侧边栏组件相关功能
• 与 GZMJS 生态系统无缝集成
• 支持模块化开发

安装

pnpm add @gzmjs/sidebar

使用方法

核心导出

本包提供以下模块：

sidebtn (012-sidebar/sidebtn)

sidebar (012-sidebar/sidebar)

使用示例

import { } from '@gzmjs/sidebar';

// TODO: 添加使用示例

核心导出

本包提供侧边栏组件，主要导出以下内容：

1. 侧边按钮 (sidebtn)

• SideBtnOptions - 侧边按钮选项接口
• SideBtn - 侧边按钮类

2. 侧边栏 (sidebar)

• SideBarTagName - 侧边栏标签名常量（值为 'GZM-SIDE-BAR'）
• SideBar - 侧边栏类
• SideBarOptions - 侧边栏选项接口

使用示例

import { SideBar, SideBarOptions, SideBtnOptions } from '@gzmjs/sidebar';

// 创建侧边栏配置
const options: SideBarOptions = {
  items: [
    { text: '首页', icon: 'home', bottom: false },
    { text: '设置', icon: 'settings', bottom: true }
  ]
};

// 侧边栏会自动渲染为 <GZM-SIDE-BAR> 元素
const sideBar = document.createElement('GZM-SIDE-BAR');
document.body.appendChild(sideBar);

组件结构

侧边栏包含两个导航区域：

• 上部导航：用于主要菜单项（bottom: false）
• 下部导航：用于底部菜单项（bottom: true）

每个导航区域使用 flexbox 布局，支持垂直排列和换行。

依赖关系

本包依赖以下模块：

• @gzmjs/mvvm (workspace:*)
• @gzmjs/ui-basic (workspace:*)

构建

pnpm run build

许可证

本项目采用 ISC 许可证。