3.26.1 • Published 4 years ago

addnewer-ui v3.26.1

Weekly downloads
5
License
MIT
Repository
github
Last release
4 years ago

加和改进定制版本 ant-design 组件库。

简体中文 | English

组件拓展说明

文档里,组件目录下自定义相关组件是我们加和自定义的组件,我们始终遵循一个思想:不去修改 antd 已定义的组件,原因如下:

  1. 没有太多精力去维护修改后的 antd 组件,不做充分单元测试可能影响项目中该组件在其他地方的使用;
  2. 我们的 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.jsonscripts 下的 prePublish ,这样跳过预发布的相关检查,直接进行发布,发布的文件在 files 中指明,有:eslibdistpackage.json

包发布

发布前检查当前 npm 源地址是否为我们的私有的,可以安装源切换工具,自行 Google,不过包相关发布和管理有 @lipeizhong 负责,具体操作可与该同学沟通。

最后提一句,antd 怎么用的 addnewer-ui 怎么用,就是将 antd 统统改为 addnewer-ui

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 全链路开发和设计工具体系。

支持环境

  • 现代浏览器和 IE9 及以上。
  • 支持服务端渲染。
  • Electron
IE / EdgeFirefoxChromeSafariOperaElectron
IE9, IE10, IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versionslast 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

参考 在 TypeScript 中使用

国际化

参考 国际化文档

链接

本地开发

你可以使用 Gitpod 进行在线开发:

Open in Gitpod

或者克隆到本地开发:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

打开浏览器访问 http://127.0.0.1:8001 ,更多本地开发文档

参与共建 PRs Welcome

请参考贡献指南.

强烈推荐阅读 《提问的智慧》《如何向开源社区提问题》《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

Let's fund issues in this repository

社区互助

如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 addnewer-ui 标签。

  1. Stack Overflow(英文)
  2. Segment Fault(中文)
  3. Join the chat at https://gitter.im/ant-design/ant-design

赞助者 npm.io npm.io

npm.io

npm.io