antd-material

0.1.14 • Public • Published

antd-material 简介

1.一款基于 material-ui v1.0.0 和 ant-design rc-组件的ui基础组件工程

2.这既是一款可用于实际项目的构建,也是一个组件开发自动化的工程,自动化转义markdown语法虽然没有bisheng 那么优秀,但是简单够用

为何有此项目

其他优质组件库例如:antd 有强大易用的组件,但是自定义组件样式是它的弱点,除了样式覆盖以外,覆盖less变量的做法必须是预支持查看的才可以,并且修改过后必须重新编译进去才可以生效。基于蚂蚁源码2次开发又需要完全遵循蚂蚁的规范从Typescript写起,本来只是样式修改,以及个别组件的易用性,却使得此事门槛变得很高,完全自定义风格变得很难很难!

material-ui v1.0 的出现成功解决了蚂蚁组件库的不足,它使用jss的方式来进行样式管理,完全释放了样式自由,无需重新编译修改皮肤对象即可看到效果。但是它没有强大易用的组件库,只是提供了基础的组件功能。

这时候antd-material 诞生了! 旨在解决既有一套漂亮易用的组件库,又不削减其高自定义化的优势,且降低2次开发门槛只用我们熟悉的es以及react代码

jss的优势

1.无需考虑样式加载先后顺序的影响

因为所有样式都引用的皮肤对象上面的属性,所以不存在先后顺序一说

2.可以区块性的定制皮肤

这个用传统less还是很麻烦做到的,样式之间相互影(一般需要用ID来划分区块),公共样式部分再抽离的做法。而jss则只需要引入对应的皮肤对象,然后随意修改覆盖对象里面的值即可

3.皮肤覆盖顺序不同

传统样式都是个别样式引用/覆盖全局样式的方式来进行书写,material-ui则不同,个别样式引用全局样式,全局样式又覆盖个别样式。很绕,但material的styles模块确实是在全局模块定义了overrides属性来覆盖个别样式的。这种做法尤其是引入遵循jss规范的第三方模块的时候最为好用,我们只需查看dom元素对应的class名,就能做到任意覆盖样式,非常方便!

基于以下技术之上

这既是一款可用于实际项目的构建,也是一款基于material-ui的组件2次开发工程包括以下技术栈

  1. create-react-app
  2. material-ui v1.x
  3. react-router v4.x
  4. react-router-redux v5.0.0-alpha
  5. redux
  6. redux-saga
.
├── config                    # 配置 包括gulpfile 、webpack以及垫片的配置
├── mock                      # 模拟接口
├── public                    # 静态资源(全局)
├── scripts                   # 脚本 包括项目启动 Mock服务启动 打包编译等
├── src                       # Application source code
│   ├── assets                # 项目用到的图片资源
│   ├── classes               # 定义全局公用的jss 样式对象
│   ├── components            # 组件库
│   ├─── General
│   │   ├───Button            # ➜ 阿磊 ✓ complete!
│   │   ├───Icon              # ➜ 阿磊 ✓ complete!
│   ├─── Layout
│   │   ├───Grid              # ➜ 阿磊 ✓ complete!
│   │   ├───Layout            # ➜ 胡昌哲 ✓
│   ├─── Navigation
│   │   ├───Affix             # ➜ 郭丽丽 ✓ complete!
│   │   ├───Breadcrumb        # ➜ 杨单丹 ✓ complete!
│   │   ├───Dropdown          # ➜ 阿磊 ✓ complete!
│   │   ├───Menu              # ➜ 何家佳 ✓ complete!
│   │   ├───Pagination        # ➜ 何家佳 ✓ complete!
│   │   ├───Steps             # ➜ 林铭偲 ✓ complete!
│   ├─── Data Entry
│   │   ├───AutoComplete      # ➜ 郭丽丽 ✓ complete!
│   │   ├───Cascader          # ➜ 林铭偲 ✓ complete!
│   │   ├───Checkbox          # ➜ 何家佳 ✓ complete!
│   │   ├───DatePicker        # ➜ 阿磊 ✓ complete!
│   │   ├───Form              # ➜ 阿磊 ✓ complete
│   │   ├───Input             # ➜ 阿磊 ✓  complete!
│   │   ├───InputNumber       # ➜ 杨单丹 ✓ complete!
│   │   ├───Mention           # ➜ 郭丽丽 ✓ complete!
│   │   ├───Rate              # ➜ 曾辉艳 ✓ complete!
│   │   ├───Radio             # ➜ 曾辉艳 ✓ complete!
│   │   ├───Select            # ➜ 曾辉艳 ✓ complete!
│   │   ├───Slider            # ➜ 杨单丹 ✓ complete!
│   │   ├───Switch            # ➜ 曾辉艳 ✓ complete!
│   │   ├───TreeSelect        # ➜ 阿磊
│   │   ├───TimePicker        # ➜ 阿磊 ✓
│   │   ├───Transfer          # ➜ 杨林林 ✓ complete!
│   │   ├───Upload            # ➜ 林铭偲 ✓ complete!
│   ├─── Data Display
│   │   ├───Avatar            # ➜ 郭丽丽 ✓ complete!
│   │   ├───Badge             # ➜ 郭丽丽 ✓ complete!
│   │   ├───Calendar          # ➜ 阿磊
│   │   ├───Card              # ➜ 胡昌哲 ✓ complete!
│   │   ├───Carousel          # ➜ 曾辉艳 ✓ complete!
│   │   ├───Collapse          # ➜ 曾辉艳 ✓ complete!
│   │   ├───List              # ➜ 林铭偲 ✓ complete!
│   │   ├───Popover           # ➜ 林铭偲 ✓ complete!
│   │   ├───Tooltip           # ➜ 曾辉艳 ✓ complete!
│   │   ├───Table             # ➜ 曾辉艳 ✓ dev
│   │   ├───Tabs              # ➜ 杨单丹 ✓ complete!
│   │   ├───Tag               # ➜ 杨单丹 ✓ complete!
│   │   ├───Timeline          # ➜ 杨林林 ✓ complete!
│   │   ├───Tree              # ➜ 阿磊
│   ├─── Feedback
│   │   ├───Alert             # ➜ 林铭偲 ✓ complete!
│   │   ├───Modal             # ➜ 林铭偲 ✓ complete!
│   │   ├───Message           # ➜ 阿磊 ✓ complete!
│   │   ├───Notification      # ➜ 郭丽丽 ✓  complete!
│   │   ├───Progress          # ➜ 胡昌哲 ✓ complete!
│   │   ├───Popconfirm        # ➜ 曾辉艳 ✓ complete
│   │   ├───Spin              # ➜ 阿磊 ✓ complete
│   ├──── Other
│   │   ├───Anchor            # ➜ 林铭偲 ✓ complete!
│   │   ├───BackTop           # ➜ 林铭偲 ✓ complete!
│   │   ├───Divider           # ➜ 曾辉艳 ✓ complete!
│   │   ├───LocaleProvider    # ➜ 阿磊
│   ├── examples              # 对应组件库的demo
│   ├── lib                   # 第三方工具类/库
│   ├── routers               # Global Reusable Container Components
│   ├── store                 # Redux-specific pieces
│   │   ├── createStore.js    # Create and instrument redux store
│   │   └── reducers.js       # Reducer registry and injection
│   │   └── sagas.js          # sagas   registry and injection
│   ├── util                  # 自己定义工具类/库
│   ├── base.less             # 项目全局的基础公共样式
└── package                   # 包信息

审核方式

git clone git@github.com:Ewell-FE/material-design.git
# 开始 review
git checkout -b <new_branch>
# change
##
git add .
git commit -m "[review] review message"
git push origin <new_branch>

点击 https://github.com/Ewell-FE/material-design/compare 创建 Pull Request。

Readme

Keywords

none

Package Sidebar

Install

npm i antd-material

Weekly Downloads

0

Version

0.1.14

License

MIT

Unpacked Size

1.49 MB

Total Files

277

Last publish

Collaborators

  • alei
  • sasha_lin
  • zenghuiyan