--- order: 0 title: Ant Design of React --- 这里是 Ant Design 的 React 实现,开发和服务于企业级后台产品。 <div class="pic-plus"> <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> <span>+</span> <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg"> </div> <style> .pic-plus > * { display: inline-block !important; vertical-align: middle; } .pic-plus span { font-size: 30px; color: #aaa; margin: 0 20px; } </style> --- ## 特性 - 提炼自企业级中后台产品的交互语言和视觉风格。 - 开箱即用的高质量 React 组件。 - 使用 TypeScript 构建,提供完整的类型定义文件。 - 全链路开发和设计工具体系。 ## 支持环境 * 现代浏览器和 IE9 及以上(需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性))。 * 支持服务端渲染。 * [Electron](http://electron.atom.io/) ## 版本 - 稳定版:[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) 你可以订阅:https://github.com/ant-design/ant-design/releases.atom 来获得稳定版发布的通知。 ## 安装 ### 使用 npm 或 yarn 安装 **我们推荐使用 npm 或 yarn 的方式进行开发**,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。 ```bash $ npm install antd --save ``` ```bash $ yarn add antd ``` 如果你的网络环境不佳,推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 ### 浏览器引入 在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `antd`。 我们在 npm 发布包内的 `antd/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd),[![](https://data.jsdelivr.com/v1/package/npm/antd/badge)](https://www.jsdelivr.com/package/npm/antd) 或 [UNPKG](https://unpkg.com/antd/dist/) 进行下载。 > **强烈不推荐使用已构建文件**,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。 > 注意:3.0 之后引入 antd.js 前你需要自行引入 [moment](http://momentjs.com/)。 ## 示例 ```jsx import { DatePicker } from 'antd'; ReactDOM.render(<DatePicker />, mountNode); ``` 引入样式: ```jsx import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' ``` ### 按需加载 下面两种方式都可以只加载用到的组件。 - 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)(推荐)。 ```js // .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" // `style: true` 会加载 less 文件 }] ] } ``` > 注意:webpack 1 无需设置 `libraryDirectory`。 然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。 ```jsx // babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd'; ``` - 手动引入 ```jsx import DatePicker from 'antd/lib/date-picker'; // 加载 JS import 'antd/lib/date-picker/style/css'; // 加载 CSS // import 'antd/lib/date-picker/style'; // 加载 LESS ``` ## 链接 - [首页](http://ant.design/) - [组件库](/docs/react/introduce) - [Ant Design Pro](http://pro.ant.design/) - [更新日志](/changelog) - [脚手架市场](http://scaffold.ant.design) - [React 底层基础组件](http://react-component.github.io/) - [移动端组件](http://mobile.ant.design) - [动效](https://motion.ant.design) - [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88) - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development) - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) - [常见问题](/docs/react/faq) - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) - [定制主题](/docs/react/customize-theme) ## 谁在使用 - [蚂蚁金服](http://www.antfin.com/) - [阿里巴巴](http://www.alibaba.com/) - [腾讯](http://www.tencent.com) - [百度](http://www.baidu.com) - [口碑](http://www.koubei.com/) - [美团](http://www.meituan.com) - [滴滴](http://www.xiaojukeji.com/) - [饿了么](https://www.ele.me/) > 如果你的公司和产品使用了 Ant Design,欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 ## 如何贡献 在任何形式的参与前,请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献,欢迎 [Pull Request](https://github.com/ant-design/ant-design/pulls),或给我们 [报告 Bug](http://new-issue.ant.design/)。 > 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。 ## 社区互助 如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。 通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 `antd` 标签。 1. [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/antd)(English) 2. [<img alt="Segment Fault" src="https://gw.alipayobjects.com/zos/rmsportal/hfYFfCvHTQTUKntlJbMF.svg" width="100" />](https://segmentfault.com/t/antd)(中文) 3. [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English) 4. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)