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

去到頂部