Ant Design

一套企业级的 UI 设计语言和 React 实现。(An enterprise-class UI design language and React-based implementation.)

Github星跟踪图

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。蚂蚁金服体验技术部经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 基于 npm + webpack + dva 的企业级开发框架。
支持环境
  • 现代浏览器和 IE9 及以上。
  • 支持服务端渲染。
  • Electron

概览

名称与所有者ant-design/ant-design
主编程语言TypeScript
编程语言HTML (语言数: 5)
平台
许可证MIT License
发布数701
最新版本名称5.17.0 (发布于 )
第一版名称0.7.0 (发布于 )
创建于2015-04-24 15:37:24
推送于2024-05-12 15:10:50
最后一次提交2024-05-12 20:16:58
星数90.4k
关注者数230
派生数46.3k
提交数27.8k
已启用问题?
问题数29253
打开的问题数1024
拉请求数13572
打开的拉请求数85
关闭的拉请求数3477
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

An enterprise-class UI design language and React UI library.

CircleCI branch CI Status Codecov NPM downloads

Dependencies DevDependencies Total alerts FOSSA Status Issues need help

Gitter Join the chat at https://gitter.im/ant-design/ant-design

English, Português, 简体中文

✨ Features

  • ? Enterprise-class UI designed for web applications.
  • ? A set of high-quality React components out of the box.
  • ? Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • ? Internationalization support for dozens of languages.
  • ? Powerful theme customization in every detail.

? Environment Support

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron, IE / Edge, Firefox, Chrome, Safari, Opera, Electron, ---, ---, ---, ---, ---, ---, IE11, Edge, last 2 versions, last 2 versions, last 2 versions, last 2 versions, last 2 versions, ## ? Install
npm install antd
yarn add antd

? Usage

import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

And import style manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Or use babel-plugin-import.

TypeScript

See Use in TypeScript.

? Internationalization

See i18n.

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Open in Gitpod

Or clone locally:

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

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

? Contributing PRs Welcome

Read our contributing guide and let's build a better antd together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request principle to create a Pull Request by collaborator template.

Let's fund issues in this repository

❤️ Sponsors and Backers

去到顶部