home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-17 08:45:59 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
b5ff63dbe8dd20339ccdf83d8a3dab33e91cefaa
ant-design/docs/spec/lightweight.html
T
乐仪 e514bde067 Updates
2017-03-11 12:51:12 +08:00

110 lines
27 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="267097730"><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" role="menuitem" aria-selected="false" 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-selected ant-menu-item" role="menuitem" aria-selected="true" 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 -->Keep it Lightweight<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/lightweight.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 -->Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user’s interaction. Putting tools in context makes for lightweight interaction.<!-- /react-text --></p><blockquote data-reactid="106"><p data-reactid="107"><img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" data-reactid="108"/><!-- react-text: 109 -->
<!-- /react-text --><strong data-reactid="110"><!-- react-text: 111 --> Fitts&#x27;s Law <!-- /react-text --></strong><!-- react-text: 112 -->: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.<!-- /react-text --></p></blockquote></section><section class="toc" data-reactid="113"><ul data-reactid="114"><li data-reactid="115"><a class="bisheng-toc-h2" href="#Always-Visible-Tools" data-reactid="116"><!-- react-text: 117 -->Always-Visible Tools<!-- /react-text --></a></li><li data-reactid="118"><a class="bisheng-toc-h2" href="#Hover-Reveal-Tools" data-reactid="119"><!-- react-text: 120 -->Hover-Reveal Tools<!-- /react-text --></a></li><li data-reactid="121"><a class="bisheng-toc-h2" href="#Toggle-Reveal-Tools" data-reactid="122"><!-- react-text: 123 -->Toggle-Reveal Tools<!-- /react-text --></a></li><li data-reactid="124"><a class="bisheng-toc-h2" href="#Interaction-in-Context" data-reactid="125"><!-- react-text: 126 -->Interaction in Context<!-- /react-text --></a></li><li data-reactid="127"><a class="bisheng-toc-h2" href="#Visible-Area-≠-Clickable-Area" data-reactid="128"><!-- react-text: 129 -->Visible Area ≠ Clickable Area<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="130"><h2 id="Always-Visible-Tools" data-reactid="131"><span data-reactid="132"><!-- react-text: 133 -->Always-Visible Tools<!-- /react-text --></span><a href="#Always-Visible-Tools" class="anchor" data-reactid="134">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="135"><div class="preview-image-box" data-reactid="136"><div class="preview-image-wrapper false false" data-reactid="137"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png" alt="example of Always-Visible Tools, from Zhihu" data-reactid="138"/></div><div class="preview-image-title" data-reactid="139">example of Always-Visible Tools, from Zhihu</div><div class="preview-image-description" data-reactid="140">Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill colour of the button changes to a dark colour, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked.</div><!-- react-empty: 141 --></div></div><p data-reactid="142"><!-- react-text: 143 -->If an action is critical, expose it directly in the interface and keep it always visible.<!-- /react-text --></p><p data-reactid="144"><br data-reactid="145"/></p><hr data-reactid="146"/><h2 id="Hover-Reveal-Tools" data-reactid="147"><span data-reactid="148"><!-- react-text: 149 -->Hover-Reveal Tools<!-- /react-text --></span><a href="#Hover-Reveal-Tools" class="anchor" data-reactid="150">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="151"><div class="preview-image-box" data-reactid="152"><div class="preview-image-wrapper false false" data-reactid="153"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/AUiWMlbxCvpBFyA.png" alt="example of Hover-Reveal Tools" data-reactid="154"/></div><div class="preview-image-title" data-reactid="155">example of Hover-Reveal Tools</div><div class="preview-image-description" data-reactid="156">On mouse hover, the tools are revealed.</div><!-- react-empty: 157 --></div></div><p data-reactid="158"><!-- react-text: 159 -->Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.<!-- /react-text --></p><p data-reactid="160"><br data-reactid="161"/></p><hr data-reactid="162"/><h2 id="Toggle-Reveal-Tools" data-reactid="163"><span data-reactid="164"><!-- react-text: 165 -->Toggle-Reveal Tools<!-- /react-text --></span><a href="#Toggle-Reveal-Tools" class="anchor" data-reactid="166">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="167"><div class="preview-image-box" data-reactid="168"><div class="preview-image-wrapper false false" data-reactid="169"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png" alt="example of Toggle-Reveal Tools" data-reactid="170"/></div><div class="preview-image-title" data-reactid="171">example of Toggle-Reveal Tools</div><div class="preview-image-description" data-reactid="172">The table reveals an input box from the text only when the edit mode is turned on for the area.</div><!-- react-empty: 173 --></div></div><p data-reactid="174"><!-- react-text: 175 -->Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.<!-- /react-text --></p><p data-reactid="176"><br data-reactid="177"/></p><hr data-reactid="178"/><h2 id="Interaction-in-Context" data-reactid="179"><span data-reactid="180"><!-- react-text: 181 -->Interaction in Context<!-- /react-text --></span><a href="#Interaction-in-Context" class="anchor" data-reactid="182">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="183"><div class="preview-image-box" data-reactid="184"><div class="preview-image-wrapper false false" data-reactid="185"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/STvIHSgnVAHOVHl.png" alt="good example" data-reactid="186"/></div><div class="preview-image-title" data-reactid="187">good example</div><div class="preview-image-description" data-reactid="188">On mouse hover, the Tooltips are revealed to prompt the user to copy the text.</div><!-- react-empty: 189 --></div></div><div class="preview-image-boxes clearfix" data-reactid="190"><div class="preview-image-box" data-reactid="191"><div class="preview-image-wrapper false false" data-reactid="192"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/aRihOoBCQHGATBA.png" alt="good example" data-reactid="193"/></div><div class="preview-image-title" data-reactid="194">good example</div><div class="preview-image-description" data-reactid="195">When highlighted or double-clicked, the text is automatically copied to the clipboard. The system helps automate the user flow and brings a surprise.</div><!-- react-empty: 196 --></div></div><div class="preview-image-boxes clearfix" data-reactid="197"><div class="preview-image-box" data-reactid="198"><div class="preview-image-wrapper false false" data-reactid="199"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/MfbnQfAJhQfIODY.png" alt="bad example" data-reactid="200"/></div><div class="preview-image-title" data-reactid="201">bad example</div><div class="preview-image-description" data-reactid="202">The copy icon appears near the copyable text.</div><!-- react-empty: 203 --></div></div><p data-reactid="204"><!-- react-text: 205 -->If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise.<!-- /react-text --></p><p data-reactid="206"><!-- react-text: 207 -->Some relative knowledge of <!-- /react-text --><a href="/docs/spec/invitation" data-reactid="208">Providing an Invitation</a><!-- react-text: 209 --> can also be applied.<!-- /react-text --></p><p data-reactid="210"><br data-reactid="211"/></p><hr data-reactid="212"/><h2 id="Visible-Area-≠-Clickable-Area" data-reactid="213"><span data-reactid="214"><!-- react-text: 215 -->Visible Area ≠ Clickable Area<!-- /react-text --></span><a href="#Visible-Area-≠-Clickable-Area" class="anchor" data-reactid="216">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="217"><div class="preview-image-box" data-reactid="218"><div class="preview-image-wrapper false false" data-reactid="219"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/bCrBxGPJiDvkyOH.png" alt="example of hypertext hot spot" data-reactid="220"/></div><div class="preview-image-title" data-reactid="221">example of hypertext hot spot</div><div class="preview-image-description" data-reactid="222">When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page.</div><!-- react-empty: 223 --></div></div><p data-reactid="224"><!-- react-text: 225 -->The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.<!-- /react-text --></p><p data-reactid="226"><br data-reactid="227"/></p><div class="preview-image-boxes clearfix" data-reactid="228"><div class="preview-image-box" data-reactid="229"><div class="preview-image-wrapper false false" data-reactid="230"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/dSehXwUuXDFDhJO.png" alt="example of button hot spot" data-reactid="231"/></div><div class="preview-image-title" data-reactid="232">example of button hot spot</div><div class="preview-image-description" data-reactid="233">Move the mouse near the button and activate the hover state.</div><!-- react-empty: 234 --></div></div><p data-reactid="235"><!-- react-text: 236 -->Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.<!-- /react-text --></p><blockquote data-reactid="237"><p data-reactid="238"><!-- react-text: 239 -->Note that it is especially suited for Mobile.<!-- /react-text --></p></blockquote></section></article></div></div><div class="ant-row" data-reactid="240"><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="241"><section class="prev-next-nav" data-reactid="242"><a class="prev-page" href="/docs/spec/direct" data-reactid="243">Make it Direct</a><a class="next-page" href="/docs/spec/stay" data-reactid="244">Stay on the Page</a></section></div></div></div><footer id="footer" data-reactid="245"><ul data-reactid="246"><li data-reactid="247"><h2 data-reactid="248"><i class="anticon anticon-github" data-reactid="249"></i><!-- react-text: 250 --> GitHub<!-- /react-text --></h2><div data-reactid="251"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="252"><span data-reactid="253">Repository</span></a></div><div data-reactid="254"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="255"><span data-reactid="256">Customize Theme</span></a></div><div data-reactid="257"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="258"><span data-reactid="259">Awesome Ant Design</span></a></div></li><li data-reactid="260"><h2 data-reactid="261"><i class="anticon anticon-link" data-reactid="262"></i><!-- react-text: 263 --> <!-- /react-text --><span data-reactid="264">Links</span></h2><div data-reactid="265"><a href="http://mobile.ant.design" data-reactid="266">Ant Design Mobile</a><span data-reactid="267"> - </span><span data-reactid="268">Mobile UI</span></div><div data-reactid="269"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="270">dva</a><!-- react-text: 271 --> - <!-- /react-text --><span data-reactid="272">Framework</span></div><div data-reactid="273"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="274">dva-cli</a><!-- react-text: 275 --> -<!-- /react-text --><span data-reactid="276">Developer Tools</span></div><div data-reactid="277"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="278">Egg</a><span data-reactid="279"> - </span><span data-reactid="280">Enterprise Node Framework</span></div><div data-reactid="281"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="282">AntV</a><span data-reactid="283"> - </span><span data-reactid="284">Data Visualization</span></div><div data-reactid="285"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="286">Ant Motion</a><span data-reactid="287"> - </span><span data-reactid="288">Motion Soluction</span></div><div data-reactid="289"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="290">AntD Library</a><span data-reactid="291"> - </span><span data-reactid="292">Axure library</span></div><div data-reactid="293"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="294">Ant UX</a><span data-reactid="295"> - </span><span data-reactid="296">Sitemap Template</span></div></li><li data-reactid="297"><h2 data-reactid="298"><i class="anticon anticon-customer-service" data-reactid="299"></i><!-- react-text: 300 --> <!-- /react-text --><span data-reactid="301">Community</span></h2><div data-reactid="302"><a href="/changelog" data-reactid="303"><span data-reactid="304">Change Log</span></a></div><div data-reactid="305"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="306"><span data-reactid="307">FAQ</span></a></div><div data-reactid="308"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="309"><span data-reactid="310">Chat Room</span></a></div><div data-reactid="311"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="312"><span data-reactid="313">Bug Report</span></a></div><div data-reactid="314"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="315"><span data-reactid="316">StackOverflow</span></a></div><div data-reactid="317"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="318"><span data-reactid="319">SegmentFault</span></a></div></li><li data-reactid="320"><h2 data-reactid="321"><!-- react-text: 322 -->Copyright © <!-- /react-text --><!-- react-text: 323 -->2017<!-- /react-text --></h2><div data-reactid="324"><span data-reactid="325">Created by Ant UED</span></div><div data-reactid="326"><!-- react-text: 327 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="328">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink