addnewer-ui v3.26.1
加和改进定制版本 ant-design 组件库。
简体中文 | English
组件拓展说明
文档里,组件目录下自定义相关组件是我们加和自定义的组件,我们始终遵循一个思想:不去修改 antd 已定义的组件,原因如下:
- 没有太多精力去维护修改后的 antd 组件,不做充分单元测试可能影响项目中该组件在其他地方的使用;
- 我们的 antd 加强版要能够与官方 antd 保持大版本同步,以达到 antd 中某些严重问题的修复能够同步到我们的本地 antd 中。
实现方式
实现方式很简单,clone
antd 的官方开发项目,在 components 中拓展我们的自定义业务组件,然后再 index.js 入口导出即可
语法
使用 Typescript,语法遵循 antd 官方已配置语法检查。
样式变量
沿用 antd 样式变量,并且支持按需加载特性,借助 babel-import-plugin 实现,具体实现方式可参照各组件实现方式。即在组件下创建 style
目录,样式放于其中。
组件预览实现
组件预览使用 bisheng
实现,能够将符合规范的 Markdown 文件解析为说明文档
Git 提交前规范检查
使用了 husky 的 Git 钩子进行检查,实现了 preCommit 的校验,所以一定要按照指定规范书写,否则 git commit 不会通过
打 npm 包之前的准备
npm run build
命令打包,但是 antd 做了 prePublish 的守卫,我们注释掉 package.json
中 scripts
下的 prePublish
,这样跳过预发布的相关检查,直接进行发布,发布的文件在 files
中指明,有:es
、lib
、dist
、package.json
。
包发布
发布前检查当前 npm 源地址是否为我们的私有的,可以安装源切换工具,自行 Google,不过包相关发布和管理有 @lipeizhong 负责,具体操作可与该同学沟通。
最后提一句,antd 怎么用的 addnewer-ui 怎么用,就是将 antd 统统改为 addnewer-ui
特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 React 组件。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 全链路开发和设计工具体系。
支持环境
- 现代浏览器和 IE9 及以上。
- 支持服务端渲染。
- Electron
IE / Edge | Firefox | Chrome | Safari | Opera | Electron |
---|---|---|---|---|---|
IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
安装
npm install addnewer-ui --save
yarn add addnewer-ui
示例
import { DatePicker } from 'addnewer-ui';
ReactDOM.render(<DatePicker />, mountNode);
引入样式:
import 'addnewer-ui/dist/addnewer-ui.css'; // or 'addnewer-ui/dist/addnewer-ui.less'
你也可以 按需加载组件。
TypeScript
国际化
参考 国际化文档。
链接
- 首页
- 组件库
- Ant Design Pro
- 更新日志
- React 底层基础组件
- 移动端组件
- Ant Design 图标
- Ant Design 色彩
- Ant Design Pro 布局组件
- Ant Design Pro 区块集
- Dark Theme
- 首页模板集
- 动效
- 脚手架市场
- 设计规范速查手册
- 开发者说明
- 版本发布规则
- 常见问题
- CodeSandbox 模板 for bug reports
- Awesome Ant Design
- 定制主题
本地开发
你可以使用 Gitpod 进行在线开发:
或者克隆到本地开发:
$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start
打开浏览器访问 http://127.0.0.1:8001 ,更多本地开发文档。
参与共建
请参考贡献指南.
强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。
社区互助
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 addnewer-ui
标签。
- Stack Overflow(英文)
- Segment Fault(中文)