mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
109 lines
21 KiB
HTML
109 lines
21 KiB
HTML
<!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>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
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';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<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>');
|
||
}
|
||
// 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="-321413998"><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-5 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-19 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"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/cases" data-reactid="54">Cases</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature" data-reactid="56">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="61"><a href="/docs/spec/principle" data-reactid="62">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity" data-reactid="64">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment" data-reactid="66">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast" data-reactid="68">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition" data-reactid="70">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct" data-reactid="72">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight" data-reactid="74">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay" data-reactid="76">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation" data-reactid="78">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition" data-reactid="80">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction" data-reactid="82">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/font" data-reactid="88">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography" data-reactid="90">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors" data-reactid="92">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout" data-reactid="94">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion" data-reactid="96">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="97"><article class="markdown" data-reactid="98"><h1 data-reactid="99"><!-- react-text: 100 -->Introduction<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/principle.en-US.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="markdown" data-reactid="103"><p data-reactid="104"><!-- react-text: 105 -->“It is more difficult to find good design than bad ones. ” Because good design are so natural, it can help users to easily meet the targets, so that the users are not aware of the existence of good design.<!-- /react-text --></p><p data-reactid="106"><!-- react-text: 107 -->After referring to the summary and reasoning of design principles from The Non-Designer’s Design Book” and “Designing Web Interfaces”, and combining with our practice and understanding of the team, we developed the following ten principles, which provide specific criteria and enlightenment of the solutions to problem for designers.<!-- /react-text --></p><blockquote data-reactid="108"><p data-reactid="109"><!-- react-text: 110 -->Note: the design principle is the abstraction and summary of representational design. However, users’ perception of the entire product is from global aspect to local aspect. So it is not desirable to ignore the full picture and only use partial principles. For the design principles, designers should learn them rationally, and then abandon them bravely.<!-- /react-text --></p></blockquote></section><section class="markdown" data-reactid="111"><div class="resource-cards" data-reactid="112"><a target="_blank" href="http://www.peachpit.com/store/non-designers-design-book-9780133966152" class="resource-card" data-reactid="113"><img src="http://www.peachpit.com/ShowCover.aspx?isbn=9780133966152&type=f" data-reactid="114"/><span class="resource-card-content" data-reactid="115"><span class="resource-card-title" data-reactid="116"><!-- react-text: 117 -->Non-Designer's Design Book<!-- /react-text --></span><span class="resource-card-description" data-reactid="118"><!-- react-text: 119 -->Author: Robin Williams<!-- /react-text --></span><span class="resource-card-description" data-reactid="120"><!-- react-text: 121 -->Publisher: Peachpit Press<!-- /react-text --></span></span></a><a target="_blank" href="http://shop.oreilly.com/product/9780596516253.do" class="resource-card" data-reactid="122"><img src="http://akamaicovers.oreilly.com/images/9780596516253/cat.gif" data-reactid="123"/><span class="resource-card-content" data-reactid="124"><span class="resource-card-title" data-reactid="125"><!-- react-text: 126 -->Designing Web Interfaces<!-- /react-text --></span><span class="resource-card-description" data-reactid="127"><!-- react-text: 128 -->Author: Bill Scott, Theresa Neil<!-- /react-text --></span><span class="resource-card-description" data-reactid="129"><!-- react-text: 130 -->Publisher: O'Reilly Media<!-- /react-text --></span></span></a></div><h4 id="Ant-Design-Principles" data-reactid="131"><span data-reactid="132"><!-- react-text: 133 -->Ant Design Principles<!-- /react-text --></span><a href="#Ant-Design-Principles" class="anchor" data-reactid="134">#</a></h4><ul data-reactid="135"><li data-reactid="136"><p data-reactid="137"><a href="/docs/spec/proximity" data-reactid="138">Proximity</a></p></li><li data-reactid="139"><p data-reactid="140"><a href="/docs/spec/alignment" data-reactid="141">Alignment</a></p></li><li data-reactid="142"><p data-reactid="143"><a href="/docs/spec/contrast" data-reactid="144">Contrast</a></p></li><li data-reactid="145"><p data-reactid="146"><a href="/docs/spec/repetition" data-reactid="147">Repetition</a></p></li><li data-reactid="148"><p data-reactid="149"><a href="/docs/spec/direct" data-reactid="150">Make it Direct</a></p></li><li data-reactid="151"><p data-reactid="152"><a href="/docs/spec/lightweight" data-reactid="153">Keep it Lightweight</a></p></li><li data-reactid="154"><p data-reactid="155"><a href="/docs/spec/stay" data-reactid="156">Stay on the Page</a></p></li><li data-reactid="157"><p data-reactid="158"><a href="/docs/spec/invitation" data-reactid="159">Provide Invitation</a></p></li><li data-reactid="160"><p data-reactid="161"><a href="/docs/spec/transition" data-reactid="162">Use Transition</a></p></li><li data-reactid="163"><p data-reactid="164"><a href="/docs/spec/reaction" data-reactid="165">React Immediately</a></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="166"><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="167"><section class="prev-next-nav" data-reactid="168"><a class="prev-page" href="/docs/spec/feature" data-reactid="169">Features</a><a class="next-page" href="/docs/spec/proximity" data-reactid="170">Proximity</a></section></div></div></div><footer id="footer" data-reactid="171"><ul data-reactid="172"><li data-reactid="173"><h2 data-reactid="174"><i class="anticon anticon-github" data-reactid="175"></i><!-- react-text: 176 --> GitHub<!-- /react-text --></h2><div data-reactid="177"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="178"><span data-reactid="179">Repository</span></a></div><div data-reactid="180"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="181"><span data-reactid="182">Customize Theme</span></a></div><div data-reactid="183"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="184"><span data-reactid="185">Awesome Ant Design</span></a></div></li><li data-reactid="186"><h2 data-reactid="187"><i class="anticon anticon-link" data-reactid="188"></i><!-- react-text: 189 --> <!-- /react-text --><span data-reactid="190">Links</span></h2><div data-reactid="191"><a href="http://mobile.ant.design" data-reactid="192">Ant Design Mobile</a><span data-reactid="193"> - </span><span data-reactid="194">Mobile UI</span></div><div data-reactid="195"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="196">dva</a><!-- react-text: 197 --> - <!-- /react-text --><span data-reactid="198">Framework</span></div><div data-reactid="199"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="200">dva-cli</a><!-- react-text: 201 --> -<!-- /react-text --><span data-reactid="202">Developer Tools</span></div><div data-reactid="203"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="204">Egg</a><span data-reactid="205"> - </span><span data-reactid="206">Enterprise Node Framework</span></div><div data-reactid="207"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="208">AntV</a><span data-reactid="209"> - </span><span data-reactid="210">Data Visualization</span></div><div data-reactid="211"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="212">Ant Motion</a><span data-reactid="213"> - </span><span data-reactid="214">Motion Soluction</span></div><div data-reactid="215"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="216">AntD Library</a><span data-reactid="217"> - </span><span data-reactid="218">Axure library</span></div><div data-reactid="219"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="220">Ant UX</a><span data-reactid="221"> - </span><span data-reactid="222">Sitemap Template</span></div></li><li data-reactid="223"><h2 data-reactid="224"><i class="anticon anticon-customer-service" data-reactid="225"></i><!-- react-text: 226 --> <!-- /react-text --><span data-reactid="227">Community</span></h2><div data-reactid="228"><a href="/changelog" data-reactid="229"><span data-reactid="230">Change Log</span></a></div><div data-reactid="231"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="232"><span data-reactid="233">FAQ</span></a></div><div data-reactid="234"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="235"><span data-reactid="236">Chat Room</span></a></div><div data-reactid="237"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="238"><span data-reactid="239">Bug Report</span></a></div><div data-reactid="240"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="241"><span data-reactid="242">StackOverflow</span></a></div><div data-reactid="243"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="244"><span data-reactid="245">SegmentFault</span></a></div></li><li data-reactid="246"><h2 data-reactid="247"><!-- react-text: 248 -->Copyright © <!-- /react-text --><!-- react-text: 249 -->2017<!-- /react-text --></h2><div data-reactid="250"><span data-reactid="251">Created by Ant UED</span></div><div data-reactid="252"><!-- react-text: 253 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="254">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|