ant-design/docs/spec/introduce.en-US.md

115 lines
4.5 KiB
Markdown
Raw Normal View History

2016-07-31 10:17:07 +08:00
---
2017-12-22 17:49:38 +08:00
category: Ant Design
2016-07-31 10:17:07 +08:00
order: 0
2017-12-22 17:49:38 +08:00
title: Introduction
2016-07-31 10:17:07 +08:00
---
2017-12-27 17:57:59 +08:00
<div style="text-align:center;margin:40px 0;">
2019-12-26 15:27:52 +08:00
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ">
2016-07-31 10:17:07 +08:00
</div>
2019-12-26 15:27:52 +08:00
Ant's enterprise-level products are an enormous and complex system with a large number and complex functions. Designers and developers often need to respond fast due to frequent changes and concurrency. Meanwhile, there are many similar pages and components in these products. Some stable and highly reusable content can obtain through abstraction.
2016-07-31 10:17:07 +08:00
With the trend of commercialization, more and more enterprise-level products begin to pursue a better user experience. With such an ultimate goal, we (Ant Financial User Experience Department) have gradually polished a design system(Ant Design) for enterprise-level products through a huge quantity of project practices and summaries. Based on the four design values of 「 natural 」, 「certain」, 「meaningful」, and 「growing」, through modular solutions, reduce redundant production costs and allow designers to focus on better user experience.
2016-07-31 10:17:07 +08:00
---
## Guidelines and Resources
2016-10-07 21:10:05 +08:00
2019-12-26 15:27:52 +08:00
We provide comprehensive design guidelines, best practices, design resources, and design tools to help designers produce high-quality product prototypes.
2016-07-31 10:17:07 +08:00
- [Design values](/docs/spec/values)
- [Design patterns](/docs/spec/overview)
2019-12-26 15:27:52 +08:00
- [Visualization](/docs/spec/visual)
- [Illustration](/docs/spec/illustration)
- [Design resources](/docs/spec/download)
- [Sketch toolbox](http://kitchen.alipay.com/)
- [Articles](/docs/spec/article)
2016-07-31 10:17:07 +08:00
## Front-end Implementation
[React](http://facebook.github.io/react/) is used to encapsulate a library of components which embody our design language. We welcome the community to implement [our design system](https://ant.design/docs/spec/introduce) in other front-end frameworks of their choice.
2016-07-31 10:17:07 +08:00
2018-08-21 18:33:52 +08:00
```__react
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import {
ExportOutlined,
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
} from '@ant-design/icons';
2018-08-21 18:33:52 +08:00
const LinkIcon = () => (
<ExportOutlined className="outside-link-icon" />
2018-08-21 18:33:52 +08:00
);
const LinksList = () => (
<ul>
<li>
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
(official implementation)
</li>
<li>
<a href="http://ng.ant.design" target="_blank">
NG-ZORRO - Ant Design of Angular<LinkIcon />
</a>
</li>
<li>
<a href="http://ng.mobile.ant.design" target="_blank">
NG-ZORRO-MOBILE - Ant Design Mobile of Angular<LinkIcon />
</a>
</li>
2019-02-17 00:17:53 +08:00
<li>
<a href="http://vue.ant.design" target="_blank">Ant Design of Vue<LinkIcon /></a>
</li>
<li>
<a href="https://ecomfe.github.io/santd" target="_blank">
San UI Toolkit for Ant Design<LinkIcon />
</a>
</li>
2018-08-21 18:33:52 +08:00
<li>
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
vue-beauty (vue)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/priornix/antizer" target="_blank">
antizer (ClojureScript)<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/idcos/antd-ember" target="_blank">
antd-ember<LinkIcon />
</a>
</li>
<li>
<a href="https://github.com/zzuu666/antue" target="_blank">
antue (vue)<LinkIcon />
</a>
</li>
</ul>
);
ReactDOM.render(<LinksList />, mountNode);
```
2016-07-31 10:17:07 +08:00
## Who's using Ant Design
2016-11-23 21:09:42 +08:00
- [Ant Financial](http://www.antgroup.com/index.htm?locale=en_US)
- [Alibaba](http://www.alibaba.com/)
- [Tencent](http://www.tencent.com)
- [Baidu](http://www.baidu.com)
2016-11-23 21:09:42 +08:00
- [Koubei](http://www.koubei.com/)
- [Meituan](http://www.meituan.com)
- [Didi](http://www.xiaojukeji.com/)
- [Eleme](https://www.ele.me/)
2018-11-04 17:03:16 +08:00
- [Other Users](https://github.com/ant-design/ant-design/issues/477)
2016-11-23 21:09:42 +08:00
> If your company or products use Ant Design, and you'd like to be added to this growing list, click [here](https://github.com/ant-design/ant-design/issues/477) to leave us a message.
2016-11-23 21:09:42 +08:00
2018-11-04 17:03:16 +08:00
## Words From Community
- Hacknews: [Show HN: Antd A set of high-quality React components](https://news.ycombinator.com/item?id=13053137)
- Alligator: [Crafting Beautiful UIs in React Using Ant Design](https://alligator.io/react/beautiful-uis-ant-design/)
- Hackernoon: [Interesting JavaScript Libraries born in China](https://hackernoon.com/interesting-javascript-libraries-born-in-china-d50d1bb81355)
2016-07-31 10:17:07 +08:00
## How to Contribute
Contributions to Ant Design on Github are welcomed! Whether you have questions, concerns, or suggestions for improving Ant Design - please don't hesitate to reach out to us [here](https://github.com/ant-design/ant-design/issues).