项目名称

前端公共组件库

一句话了解我

基于antd3.x根据公司UIUE规范进行二次封装的前端公共组件库，用于统一公司产品风格，提高研发人员开发效率

Features

1. 包含符合UIUE设计规范的公共组件，设计规范和使用规范参考YXD-用户体验设计平台

2. 支持antd全部组件，引用和使用方法参考antd官方文档

3. 支持按需加载

分支说明

master: 主分支 develop: 开发分支 基于develop分支开发，然后提交MR到仓库中

组件开发文档

使用方法

安装

npm i @chaoswise/ui -S

常规组件使用

// antd组件和自定义组件全部使用按需引入形式
import { Button } from '@chaoswise/ui';

const Demo = () => {
  return (
    <Button type='primary'>Submit</Button>
  )
}

export default Demo;

Formily组件使用

// 目前已经集成以下组件和api
import { Form, FormItem, MegaLayout, FieldList, FormButtonGroup, FormPath, Reset, Submit, subscribeFields } from '@chaoswise/ui/formily';
// 如需使用formily相关其它api 从formily引入
import { formily } from '@chaoswise/ui/formily';
const { useEffect } = formily;

脱离公共框架使用需要配置按需引用配置

修改babel-loader下的babel-plugin-import插件配置(脱离公共框架独立使用)

// 引入配置
const babelConfig = require("@chaoswise/ui/config/babel");
const formilyBabel = require("@chaoswise/ui/config/babel/formily");

// 方案1
plugins: [
    [
      "import",
      [
        babelConfig, // @chaoswise/ui 按需引入babel配置
        {
          libraryName: "antd",
          style: true
        },
        formilyBabel, // @chaoswise/ui/formily 按需引入babel配置
      ]
    ]
 ]
 
 
// 方案2
plugins: [
    [
        "import",
         babelConfig, // @chaoswise/ui 按需引入babel配置
         "chaoswise"
    ],
    [
        "import",
        {
          libraryName: "antd",
          style: true
        },
        "antd"
    ],
    [
      "import",
      formilyBabel, // @chaoswise/ui/formily 按需引入babel配置
      "formily"
    ],
 ]

注意：

以下组件基于antd进行了二次封装，请查看相关组件文档

组件名称 | 备注 ---|--- Pagination | 统一UE风格，api不变 Modal | 支持可拖拽 Upload | 基于antd的Upload封装，增加进度条显示，api有变化，具体见文档 ConfigProvider | 在原有基础上增加国际化切换方案 Empty | 统一UE风格，api不变

如需引用antd原生组件

import Upload from '@chaoswise/ui/lib/Antd/Upload';

其它相关文档

1. 组件预览以及文档地址
2. 更新日志