logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • Ant Design of React
  • 快速上手
  • 项目实战
  • 在 create-react-app 中使用
  • 在 TypeScript 中使用
  • 样式兼容
  • 定制主题
  • 使用自定义日期库
  • 从 v4 到 v5
  • 社区精选组件
  • 国际化
  • FAQ
  • 贡献指南
  • 更新日志
✨ 特性
兼容环境
版本
安装
使用 npm 或 yarn 安装
浏览器引入
示例
按需加载
TypeScript
链接
谁在使用
如何贡献
社区互助

Ant Design of React

快速上手

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。

+

✨ 特性

  • 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
  • 📦 开箱即用的高质量 React 组件。
  • 🛡 使用 TypeScript 开发,提供完整的类型定义文件。
  • ⚙️ 全链路开发和设计工具体系。
  • 🌍 数十个国际化语言支持。
  • 🎨 深入每个细节的主题定制能力。

兼容环境

  • 现代浏览器
  • 支持服务端渲染。
  • Electron
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versionslast 2 versions

对于 IE 系列浏览器,需要提供相应的 Polyfill 支持,建议使用 @babel/preset-env 来解决浏览器兼容问题。如果你在使用 umi,可以直接使用 targets 配置。

[email protected] 之后不再支持 IE8。 [email protected] 之后不再支持 React 15 和 IE9/10。 [email protected] 之后不再支持 IE。

版本

  • 稳定版:npm package

你可以订阅:https://github.com/ant-design/ant-design/releases.atom 来获得版本发布的通知。

安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

$ npm install antd --save
$ yarn add antd

如果你的网络环境不佳,推荐使用 cnpm。

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。

我们在 npm 发布包内的 dist 目录下提供了 antd.js、antd.min.js 和 reset.css。你也可以通过 CDNJS, 或 UNPKG 进行下载。

强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。

注意:antd.js 和 antd.min.js 依赖 react、react-dom、dayjs,请确保提前引入这些文件。

示例

import React from 'react';
import { DatePicker } from 'antd';
const App = () => {
return <DatePicker />;
};
export default App;

按需加载

antd 默认支持基于 ES modules 的 tree shaking。

TypeScript

antd 使用 TypeScript 进行书写并提供了完整的定义文件。(不要引用 @types/antd)。

链接

  • 首页
  • 组件库
  • 国内镜像
  • Ant Design Pro
  • Ant Design Pro Components
  • Ant Design Charts
  • 更新日志
  • React 底层基础组件
  • 移动端组件库
  • 小程序组件库
  • Ant Design 图标
  • Ant Design 色彩
  • 首页模板集
  • 动效
  • 脚手架市场
  • 设计规范速查手册
  • 开发者说明
  • 版本发布规则
  • 常见问题
  • CodeSandbox 模板 for bug reports
  • Awesome Ant Design
  • 定制主题
  • 成为社区协作成员

谁在使用

  • 蚂蚁集团
  • 阿里巴巴
  • 腾讯
  • 百度
  • 口碑
  • 美团
  • 滴滴
  • 饿了么

如果你的公司和产品使用了 Ant Design,欢迎到 这里 留言。

如何贡献

在任何形式的参与前,请先阅读 贡献者文档。如果你希望参与贡献,欢迎 Pull Request,或给我们 报告 Bug。

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

社区互助

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

通过 GitHub Discussions 提问时,建议使用 Q&A 标签。

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

  1. GitHub Discussions
  2. Stack Overflow(English)
  3. Segment Fault(中文)