@hzab/sider

@hzab/sider

侧边栏组件

• node@14.21

组件

示例

import Demo from "@hzab/sider";

<Demo
  menus={[
    { key: "/", label: "首页", title: "首页" },
    {
      key: "/user-server",
      label: "用户服务",
      icon: "UserOutlined",
      children: [
        {
          key: "/user-server/user-list",
          label: "用户管理",
        },
        {
          key: "/user-server/role-list",
          label: "角色管理",
        },
        {
          key: "/user-server/org-list",
          label: "组织管理",
        },
      ],
    },
    {
      key: "/sys-server",
      label: "系统服务",
      icon: "UserOutlined",
      children: [
        {
          key: "/sys-server/config-list",
          label: "配置管理",
        },
        {
          key: "/sys-server/color-list",
          label: "颜色管理",
        },
        {
          key: "/sys-server/size-list",
          label: "尺寸管理",
        },
      ],
    },
  ]}
/>;

API

InfoPanel Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------------- | ------- | ---- | ------ | ----------------------------------------------- | --- | | menus | Array | 是 | - | 侧边栏数据 | | | collapsible | boolean | 否 | - | 是否可以收起 | | | collapsedWidth | number | 否 | - | 收缩宽度，设置为 0 会出现特殊 trigger（定位块） | |

MenuItem

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------ | ---- | ------ | ----------------------------- | --- | | key | string | 是 | - | 跳转地址 | | | label | string | 是 | - | 文案 | | | icon | string | 是 | - | icon，可以是 antd icon 字符串 | | | children | Array | 是 | - | 子集 | |

组件开发流程

• 在 config/webpack.config.js 中按需修改 library 配置的文件名
• 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
• 在 src/typings.d.ts 中按需修改 declare module 配置的包名，解决 ts 报错问题
• npm run dev

文件目录

• example 本地开发测试代码
• src 组件源码
• lib 组件打包编译后的代码

命令

• 本地运行：npm run dev
• 打包编译：npm run build

发布

• 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！

• 编译组件：npm run build

• 命令：npm publish --access public

• 发布目录：

  • lib
  • src

配置

配置文件

• 本地配置文件：config/config.js

webpack 配置文件

• config/webpack.config.js