nice-ui

基于 react、antd 封装的场景化 ui 库

Project setup

$ npm install --verbose

$ cd website && npm install --verbose

New & Remove

$ npm run new

$ npm run remove

Development

$ npm run watch

$ npm run website

# 打开 http://127.0.0.1:9999/

Build

$ npm run build

Install

$ npm install anice-ui@https://github.com/rgy19930329/nice-ui.git#master --save

或者

$ npm install anice-ui --verbose

Usage

// 方案一： 修改 webpack 配置：

module: {
  loaders: [
    {
      test: /\.(js|jsx)$/,
      include: [
        ...
        path.resolve(__dirname, 'node_modules/anice-ui/src'),
      ],
    }
  ]
}

// 方案二：配置babel plugins

// 第一步

"plugins": [
  [
    "import", {
      "libraryName": "anice-ui",
      "libraryDirectory": "es",
    }
  ]
]

// 第二步 入口文件中添加：

import "antd/dist/antd.css";

// 第三步 入口文件中添加：

import "babel-polyfill";

// 或者 在 webpack 配置的 entry 字段最前面添加

entry: [
  "babel-polyfill",
  //...
]

Import

import { Label } from "anice-ui";

Components

| Component | Desc | Author | Date | | --------------------------------------------------------- | ----------------------------------------------- | :----: | ------------------- | | Label | 数据展示 - 字段名和值 | rgy | 2019-5-1 | | EnumSelect | 表单组件 - 下拉选择组件 | rgy | 2019-08-08 15:25:34 | | RichText | 表单组件 - 富文本编辑器 | rgy | 2019-08-12 10:08:10 | | HocAsync | 高阶组件 - 代码分割，按需加载 | rgy | 2019-08-13 13:58:31 | | HocLoading | 高阶组件 - 为组件添加数据加载 Loading 效果 | rgy | 2019-08-13 14:05:54 | | CellLimit | 数据展示 - 超出限制宽度部分通过省略号展示 | rgy | 2019-08-13 17:17:11 | | EnumChoice | 表单组件 - 选择组件（包括单选、复选） | rgy | 2019-08-13 22:41:53 | | Section | 布局组件 - 区域包裹工具 | rgy | 2019-08-13 23:28:53 | | RTabs | 布局组件 - 区域现实隐藏切换 | rgy | 2019-08-16 15:33:54 | | EditTable | 表单组件 - 可编辑表格 | rgy | 2019-08-16 15:59:24 | | HocDebounce | 高阶组件 - 防抖 | rgy | 2019-08-19 14:49:21 | | ValidateWrapper | 数据展示 - 校验信息提示容器 | rgy | 2019-08-27 17:42:46 | | FormTable | 表单组件 - 表格表单项组件 | rgy | 2019-08-30 18:00:28 | | withQuery | 高阶组件 - 参数解析 | rgy | 2019-09-02 11:35:13 | | withFormInChild | 高阶组件 - 在 context 中传递 form | rgy | 2019-09-02 17:13:03 | | PureField | 表单组件 - 纯数据展示 | rgy | 2019-09-03 13:39:31 | | SearchWrapper | 布局组件 - 搜索区包裹组件 | rgy | 2019-09-03 15:39:49 | | RotateToggle | 控制组件 - 旋转开关 | rgy | 2019-09-03 18:27:17 | | MarkDown | 数据展示 - 解析 markdown 文本并展示 | rgy | 2019-09-04 13:59:17 | | InlineList | 数据展示 - 行内列表数据展示 | rgy | 2019-09-05 15:41:56 | | RUpload | 表单组件 - 文件上传 | rgy | 2019-09-10 14:53:45 | | RCheckbox | 表单组件 - 映射 Checkbox 的值 | rgy | 2019-09-17 16:43:41 | | ListPage | 场景组件 - 带查询条件的列表页 | rgy | 2019-10-04 09:40:04 | | MultiItems | 表单组件 - 为自定义的选择组件提供输入框展示模式 | rgy | 2019-10-09 09:09:52 | | HzTable | 场景组件 - 表格组件 | RGY | 2019-12-11 13:45:15 |