home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-16 00:06:26 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
b7f7cb8708a8d55ebef372a0ed65e596cfd8d94f
ant-design/docs/spec/introduce.html
T
Wei Zhu 941cd3d61b Updates
2017-01-21 00:48:58 +08:00

84 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<script>
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1331175707"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="46"><a href="/docs/spec/introduce" data-reactid="47">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="/docs/spec/feature" data-reactid="49">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="50"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="51"><h4 data-reactid="52">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="53"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/spec/principle" data-reactid="55">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/spec/proximity" data-reactid="57">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/spec/alignment" data-reactid="59">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="/docs/spec/contrast" data-reactid="61">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/spec/repetition" data-reactid="63">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/docs/spec/direct" data-reactid="65">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/spec/stay" data-reactid="67">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/spec/lightweight" data-reactid="69">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="/docs/spec/invitation" data-reactid="71">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="72"><a href="/docs/spec/transition" data-reactid="73">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/docs/spec/reaction" data-reactid="75">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="76"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="77"><h4 data-reactid="78">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="79"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="80"><a href="/docs/spec/font" data-reactid="81">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/docs/spec/typography" data-reactid="83">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="84"><a href="/docs/spec/colors" data-reactid="85">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/docs/spec/layout" data-reactid="87">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/docs/spec/motion" data-reactid="89">Motion</a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="90"><article class="markdown" data-reactid="91"><h1 data-reactid="92"><!-- react-text: 93 -->Ant Design<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/introduce.en-US.md" data-reactid="94"><i class="anticon anticon-edit" data-reactid="95"></i></a></h1><section class="markdown" data-reactid="96"><div style="text-align:center;background:rgb(251, 251, 251);margin:40px 0px;" data-reactid="97"><img style="width:600px;" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" data-reactid="98"/></div><p data-reactid="99"><!-- react-text: 100 -->In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.<!-- /react-text --></p><p data-reactid="101"><!-- react-text: 102 -->Ant Design which is specially created for internal desktop applications, is committed to improving the experience of users and product designers. User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred. Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of background applications and products.<!-- /react-text --></p></section><section class="toc" data-reactid="103"><ul data-reactid="104"><li data-reactid="105"><a class="bisheng-toc-h2" href="#Guidelines-and-Resources" data-reactid="106"><!-- react-text: 107 -->Guidelines and Resources<!-- /react-text --></a></li><li data-reactid="108"><a class="bisheng-toc-h2" href="#Front-end-Implementation" data-reactid="109"><!-- react-text: 110 -->Front-end Implementation<!-- /react-text --></a></li><li data-reactid="111"><a class="bisheng-toc-h2" href="#Who&#x27;s-using-Ant-Design" data-reactid="112"><!-- react-text: 113 -->Who&#x27;s using Ant Design<!-- /react-text --></a></li><li data-reactid="114"><a class="bisheng-toc-h2" href="#How-to-Contribute" data-reactid="115"><!-- react-text: 116 -->How to Contribute<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="117"><h2 id="Guidelines-and-Resources" data-reactid="118"><span data-reactid="119"><!-- react-text: 120 -->Guidelines and Resources<!-- /react-text --></span><a href="#Guidelines-and-Resources" class="anchor" data-reactid="121">#</a></h2><p data-reactid="122"><!-- react-text: 123 -->We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.<!-- /react-text --></p><ul data-reactid="124"><li data-reactid="125"><p data-reactid="126"><a href="/docs/spec/principle" data-reactid="127">Principles</a></p></li><li data-reactid="128"><p data-reactid="129"><a href="/docs/pattern/navigation" data-reactid="130">Patterns</a></p></li><li data-reactid="131"><p data-reactid="132"><a href="/docs/resource/download" data-reactid="133">Resource Download</a></p></li></ul><h2 id="Front-end-Implementation" data-reactid="134"><span data-reactid="135"><!-- react-text: 136 -->Front-end Implementation<!-- /react-text --></span><a href="#Front-end-Implementation" class="anchor" data-reactid="137">#</a></h2><p data-reactid="138"><a href="http://facebook.github.io/react/" data-reactid="139"><!-- react-text: 140 -->React<!-- /react-text --></a><!-- react-text: 141 --> is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome.<!-- /react-text --></p><ul data-reactid="142"><li data-reactid="143"><p data-reactid="144"><a href="/docs/react/introduce" data-reactid="145">Ant Design of React</a><!-- react-text: 146 --> (official implementation)<!-- /react-text --></p></li><li data-reactid="147"><div class="outside-link internal" data-reactid="148"><a href="http://zorro.alibaba.net" target="_blank" data-reactid="149"><!-- react-text: 150 -->Ant Design of Angular 2<!-- /react-text --></a></div></li><li data-reactid="151"><div class="outside-link" data-reactid="152"><a href="https://github.com/iview/iview/" target="_blank" data-reactid="153"><!-- react-text: 154 -->iView (vue)<!-- /react-text --></a></div></li><li data-reactid="155"><div class="outside-link" data-reactid="156"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank" data-reactid="157"><!-- react-text: 158 -->vue-beauty<!-- /react-text --></a></div></li><li data-reactid="159"><div class="outside-link" data-reactid="160"><a href="http://aliqin.github.io/" target="_blank" data-reactid="161"><!-- react-text: 162 -->ATUI (vue)<!-- /react-text --></a></div></li><li data-reactid="163"><div class="outside-link" data-reactid="164"><a href="https://github.com/idcos/antd-ember" target="_blank" data-reactid="165"><!-- react-text: 166 -->antd-ember<!-- /react-text --></a></div></li></ul><h2 id="Who&#x27;s-using-Ant-Design" data-reactid="167"><span data-reactid="168"><!-- react-text: 169 -->Who&#x27;s using Ant Design<!-- /react-text --></span><a href="#Who&#x27;s-using-Ant-Design" class="anchor" data-reactid="170">#</a></h2><ul data-reactid="171"><li data-reactid="172"><p data-reactid="173"><a href="http://www.antgroup.com/index.htm?locale=en_US" data-reactid="174"><!-- react-text: 175 -->Ant Financial<!-- /react-text --></a></p></li><li data-reactid="176"><p data-reactid="177"><a href="http://www.alibaba.com/" data-reactid="178"><!-- react-text: 179 -->Alibaba<!-- /react-text --></a></p></li><li data-reactid="180"><p data-reactid="181"><a href="http://www.koubei.com/" data-reactid="182"><!-- react-text: 183 -->Koubei<!-- /react-text --></a></p></li><li data-reactid="184"><p data-reactid="185"><a href="http://www.meituan.com" data-reactid="186"><!-- react-text: 187 -->Meituan<!-- /react-text --></a></p></li><li data-reactid="188"><p data-reactid="189"><a href="http://www.xiaojukeji.com/" data-reactid="190"><!-- react-text: 191 -->Didi<!-- /react-text --></a></p></li></ul><blockquote data-reactid="192"><p data-reactid="193"><!-- react-text: 194 -->If your company or products use Ant Design, welcome to click <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/477" data-reactid="195"><!-- react-text: 196 -->here<!-- /react-text --></a><!-- react-text: 197 --> to leave a message.<!-- /react-text --></p></blockquote><h2 id="How-to-Contribute" data-reactid="198"><span data-reactid="199"><!-- react-text: 200 -->How to Contribute<!-- /react-text --></span><a href="#How-to-Contribute" class="anchor" data-reactid="201">#</a></h2><p data-reactid="202"><!-- react-text: 203 -->Welcome to contribute to Ant Design on Github. If you have any suggestions for improvement, questions,or concerns, do not hesitate to advice us <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues" data-reactid="204"><!-- react-text: 205 -->here<!-- /react-text --></a><!-- react-text: 206 -->.<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="207"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="208"><section class="prev-next-nav" data-reactid="209"><a class="next-page" href="/docs/spec/feature" data-reactid="210">Features</a></section></div></div></div><footer id="footer" data-reactid="211"><ul data-reactid="212"><li data-reactid="213"><h2 data-reactid="214">GitHub</h2><div data-reactid="215"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="216"><span data-reactid="217">Repository</span></a></div><div data-reactid="218"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="219">dva</a><!-- react-text: 220 --> - <!-- /react-text --><span data-reactid="221">Framework</span></div><div data-reactid="222"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="223">dva-cli</a><!-- react-text: 224 --> -<!-- /react-text --><span data-reactid="225">Scaffold</span></div><div data-reactid="226"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="227">ant-tool</a><!-- react-text: 228 --> - <!-- /react-text --><span data-reactid="229">Developer Tools</span></div></li><li data-reactid="230"><h2 data-reactid="231"><span data-reactid="232">Links</span></h2><div data-reactid="233"><a href="http://mobile.ant.design" data-reactid="234">Ant Design Mobile</a><span data-reactid="235"> - </span><span data-reactid="236">Mobile</span></div><div data-reactid="237"><a href="https://g2.alipay.com/" data-reactid="238">G2</a><span data-reactid="239"> - </span><span data-reactid="240">Data Visualization</span></div><div data-reactid="241"><a href="https://antv.alipay.com/" data-reactid="242">AntV</a><span data-reactid="243"> - </span><span data-reactid="244">Data Visualization Specification</span></div><div data-reactid="245"><a href="http://motion.ant.design" data-reactid="246">Ant Motion</a><span data-reactid="247"> - </span><span data-reactid="248">Motion</span></div><div data-reactid="249"><a href="http://library.ant.design/" data-reactid="250">AntD Library</a><span data-reactid="251"> - </span><span data-reactid="252">Axure library of Ant Design</span></div><div data-reactid="253"><a href="http://ux.ant.design" data-reactid="254">Ant UX</a><span data-reactid="255"> - </span><span data-reactid="256">Sitemap Template</span></div></li><li data-reactid="257"><h2 data-reactid="258"><span data-reactid="259">Community</span></h2><div data-reactid="260"><a rel="noopener noreferrer" href="/changelog" data-reactid="261"><span data-reactid="262">Change Log</span></a></div><div data-reactid="263"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="264"><span data-reactid="265">Feedback</span></a></div><div data-reactid="266"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="267"><span data-reactid="268">Chat Room</span></a></div><div data-reactid="269"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="270"><span data-reactid="271">Bug Report</span></a></div></li><li data-reactid="272"><div data-reactid="273"><!-- react-text: 274 -->©2016 <!-- /react-text --><span data-reactid="275">Created by Ant UED</span></div><div data-reactid="276"><!-- react-text: 277 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="278">BiSheng</a></div><div style="margin-top:10px;" data-reactid="279"><span data-reactid="280">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="281"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="282"><div class="ant-select-selection__rendered" data-reactid="283"><div class="ant-select-selection-selected-value" title="2.6.4" style="display:block;opacity:1;" data-reactid="284">2.6.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="285"><b data-reactid="286"></b></span></div></div></div></li></ul></footer></div>
</div>
<script>
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
var queryString = location.search;
if (queryString) {
var pathname = location.pathname;
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
</script>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink