mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-10 05:16:08 +10:00
171 lines
60 KiB
HTML
171 lines
60 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-1.css"/>
|
||
<link rel="stylesheet" type="text/css" href="/index-2.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>
|
||
<!-- Hotjar Tracking Code for ant.design -->
|
||
<script>
|
||
(function(h,o,t,j,a,r){
|
||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||
h._hjSettings={hjid:473408,hjsv:5};
|
||
a=o.getElementsByTagName('head')[0];
|
||
r=o.createElement('script');r.async=1;
|
||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||
a.appendChild(r);
|
||
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1170445633"><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.9.3" style="display:block;opacity:1;" data-reactid="28">2.9.3</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" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidlines</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" 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">Patterns</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">Resources</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/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/react/i18n" data-reactid="66">Internationalization</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="67"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="68"><h4 data-reactid="69">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="70"><li class=" ant-menu-item-group" data-reactid="71"><div class="ant-menu-item-group-title" data-reactid="72">General</div><ul class="ant-menu-item-group-list" data-reactid="73"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/components/button/" data-reactid="75"><span data-reactid="76">Button</span><span class="chinese" data-reactid="77"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="78"><a href="/components/icon/" data-reactid="79"><span data-reactid="80">Icon</span><span class="chinese" data-reactid="81"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="82"><div class="ant-menu-item-group-title" data-reactid="83">Layout</div><ul class="ant-menu-item-group-list" data-reactid="84"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="85"><a href="/components/grid/" data-reactid="86"><span data-reactid="87">Grid</span><span class="chinese" data-reactid="88"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/components/layout/" data-reactid="90"><span data-reactid="91">Layout</span><span class="chinese" data-reactid="92"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="93"><div class="ant-menu-item-group-title" data-reactid="94">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="95"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="96"><a href="/components/affix/" data-reactid="97"><span data-reactid="98">Affix</span><span class="chinese" data-reactid="99"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="100"><a href="/components/breadcrumb/" data-reactid="101"><span data-reactid="102">Breadcrumb</span><span class="chinese" data-reactid="103"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/back-top/" data-reactid="105"><span data-reactid="106">BackTop</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/dropdown/" data-reactid="109"><span data-reactid="110">Dropdown</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/menu/" data-reactid="113"><span data-reactid="114">Menu</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/pagination/" data-reactid="117"><span data-reactid="118">Pagination</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/steps/" data-reactid="121"><span data-reactid="122">Steps</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/tabs/" data-reactid="125"><span data-reactid="126">Tabs</span><span class="chinese" data-reactid="127"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="128"><div class="ant-menu-item-group-title" data-reactid="129">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="130"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="131"><a href="/components/auto-complete/" data-reactid="132"><span data-reactid="133">AutoComplete</span><span class="chinese" data-reactid="134"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="135"><a href="/components/cascader/" data-reactid="136"><span data-reactid="137">Cascader</span><span class="chinese" data-reactid="138"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/checkbox/" data-reactid="140"><span data-reactid="141">Checkbox</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/date-picker/" data-reactid="144"><span data-reactid="145">DatePicker</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/form/" data-reactid="148"><span data-reactid="149">Form</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/input-number/" data-reactid="152"><span data-reactid="153">InputNumber</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/input/" data-reactid="156"><span data-reactid="157">Input</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/mention/" data-reactid="160"><span data-reactid="161">Mention</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/rate/" data-reactid="164"><span data-reactid="165">Rate</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/radio/" data-reactid="168"><span data-reactid="169">Radio</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/select/" data-reactid="172"><span data-reactid="173">Select</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/slider/" data-reactid="176"><span data-reactid="177">Slider</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/switch/" data-reactid="180"><span data-reactid="181">Switch</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/tree-select/" data-reactid="184"><span data-reactid="185">TreeSelect</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/time-picker/" data-reactid="188"><span data-reactid="189">TimePicker</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/transfer/" data-reactid="192"><span data-reactid="193">Transfer</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/upload/" data-reactid="196"><span data-reactid="197">Upload</span><span class="chinese" data-reactid="198"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="199"><div class="ant-menu-item-group-title" data-reactid="200">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="201"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="202"><a href="/components/badge/" data-reactid="203"><span data-reactid="204">Badge</span><span class="chinese" data-reactid="205"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="206"><a href="/components/calendar/" data-reactid="207"><span data-reactid="208">Calendar</span><span class="chinese" data-reactid="209"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/card/" data-reactid="211"><span data-reactid="212">Card</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/carousel/" data-reactid="215"><span data-reactid="216">Carousel</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/collapse/" data-reactid="219"><span data-reactid="220">Collapse</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/popover/" data-reactid="223"><span data-reactid="224">Popover</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/tooltip/" data-reactid="227"><span data-reactid="228">Tooltip</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/table/" data-reactid="231"><span data-reactid="232">Table</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tag/" data-reactid="235"><span data-reactid="236">Tag</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/timeline/" data-reactid="239"><span data-reactid="240">Timeline</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tree/" data-reactid="243"><span data-reactid="244">Tree</span><span class="chinese" data-reactid="245"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="246"><div class="ant-menu-item-group-title" data-reactid="247">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="248"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/alert/" data-reactid="250"><span data-reactid="251">Alert</span><span class="chinese" data-reactid="252"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="253"><a href="/components/modal/" data-reactid="254"><span data-reactid="255">Modal</span><span class="chinese" data-reactid="256"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/message/" data-reactid="258"><span data-reactid="259">Message</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/notification/" data-reactid="262"><span data-reactid="263">Notification</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/progress/" data-reactid="266"><span data-reactid="267">Progress</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/popconfirm/" data-reactid="270"><span data-reactid="271">Popconfirm</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/spin/" data-reactid="274"><span data-reactid="275">Spin</span><span class="chinese" data-reactid="276"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="277"><div class="ant-menu-item-group-title" data-reactid="278">Other</div><ul class="ant-menu-item-group-list" data-reactid="279"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/anchor/" data-reactid="281"><span data-reactid="282">Anchor</span><span class="chinese" data-reactid="283"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="284"><a href="/components/locale-provider/" data-reactid="285"><span data-reactid="286">LocaleProvider</span><span class="chinese" data-reactid="287"></span></a></li></ul></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="288"><article class="markdown" data-reactid="289"><h1 data-reactid="290"><!-- react-text: 291 -->Getting Started<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/getting-started.en-US.md" data-reactid="292"><i class="anticon anticon-edit" data-reactid="293"></i></a></h1><section class="markdown" data-reactid="294"><p data-reactid="295"><!-- react-text: 296 -->Ant Design React is dedicated to providing a <!-- /react-text --><strong data-reactid="297"><!-- react-text: 298 -->good development experience<!-- /react-text --></strong><!-- react-text: 299 --> for programmers and make sure that you had installed <!-- /react-text --><a href="https://nodejs.org/" data-reactid="300"><!-- react-text: 301 -->Node.js<!-- /react-text --></a><!-- react-text: 302 -->(> v4.x) correctly.<!-- /react-text --></p></section><section class="toc" data-reactid="303"><ul data-reactid="304"><li data-reactid="305"><a class="bisheng-toc-h2" href="#First-Example" title="First Example" data-reactid="306"><!-- react-text: 307 -->First Example<!-- /react-text --></a></li><li data-reactid="308"><a class="bisheng-toc-h2" href="#Standard-Development-Flow" title="Standard Development Flow" data-reactid="309"><!-- react-text: 310 -->Standard Development Flow<!-- /react-text --></a></li><li data-reactid="311"><a class="bisheng-toc-h2" href="#Compatibility" title="Compatibility" data-reactid="312"><!-- react-text: 313 -->Compatibility<!-- /react-text --></a></li><li data-reactid="314"><a class="bisheng-toc-h2" href="#Customized-Work-Flow" title="Customized Work Flow" data-reactid="315"><!-- react-text: 316 -->Customized Work Flow<!-- /react-text --></a></li><li data-reactid="317"><a class="bisheng-toc-h2" href="#Import-on-Demand" title="Import on Demand" data-reactid="318"><!-- react-text: 319 -->Import on Demand<!-- /react-text --></a></li><li data-reactid="320"><a class="bisheng-toc-h2" href="#Customization" title="Customization" data-reactid="321"><!-- react-text: 322 -->Customization<!-- /react-text --></a></li><li data-reactid="323"><a class="bisheng-toc-h2" href="#Tips" title="Tips" data-reactid="324"><!-- react-text: 325 -->Tips<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="326"><p data-reactid="327"><!-- react-text: 328 -->Before delving into Ant Design React, a good knowledge of <!-- /react-text --><a href="http://facebook.github.io/react/" data-reactid="329"><!-- react-text: 330 -->React<!-- /react-text --></a><!-- react-text: 331 --> and <!-- /react-text --><a href="http://babeljs.io/docs/learn-es2015/" data-reactid="332"><!-- react-text: 333 -->JavaScript ES2015<!-- /react-text --></a><!-- react-text: 334 --> is needed.<!-- /react-text --></p><h2 id="First-Example" data-reactid="335"><span data-reactid="336"><!-- react-text: 337 -->First Example<!-- /react-text --></span><a href="#First-Example" class="anchor" data-reactid="338">#</a></h2><p data-reactid="339"><!-- react-text: 340 -->The following CodePen demo is the simplest usage case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.<!-- /react-text --></p><ul data-reactid="341"><li data-reactid="342"><p data-reactid="343"><a href="http://codepen.io/anon/pen/wGOWGW?editors=001" data-reactid="344"><!-- react-text: 345 -->antd CodePen<!-- /react-text --></a></p></li></ul><h2 id="Standard-Development-Flow" data-reactid="346"><span data-reactid="347"><!-- react-text: 348 -->Standard Development Flow<!-- /react-text --></span><a href="#Standard-Development-Flow" class="anchor" data-reactid="349">#</a></h2><p data-reactid="350"><!-- react-text: 351 -->During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the request to mocked data or some external services. And all of these to be done with a quick feedback provided through hot reloading of changes.<!-- /react-text --></p><p data-reactid="352"><!-- react-text: 353 -->Such features, together with packaging the production version are covered in this work flow.<!-- /react-text --></p><h3 id="1.-Installation" data-reactid="354"><span data-reactid="355"><!-- react-text: 356 -->1. Installation<!-- /react-text --></span><a href="#1.-Installation" class="anchor" data-reactid="357">#</a></h3><p data-reactid="358"><a href="https://github.com/ant-design/antd-init/" data-reactid="359"><!-- react-text: 360 -->antd-init<!-- /react-text --></a><!-- react-text: 361 --> is a demo only scaffold tool. If you want to create real world projects, <!-- /react-text --><a href="https://github.com/dvajs/dva-cli" data-reactid="362"><!-- react-text: 363 -->dva-cli<!-- /react-text --></a><!-- react-text: 364 --> is our recommendation.<!-- /react-text --></p><pre class="language-bash" data-reactid="365"><code data-reactid="366">$ <span class="token function">npm</span> <span class="token function">install</span> antd-init -g</code></pre><p data-reactid="367"><!-- react-text: 368 -->Read <!-- /react-text --><a href="https://github.com/ant-design/antd-init/" data-reactid="369"><!-- react-text: 370 -->the documentation of <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->antd-init<!-- /react-text --></code></a><!-- react-text: 373 --> and <!-- /react-text --><a href="http://ant-tool.github.io/" data-reactid="374"><!-- react-text: 375 -->the documentation of <!-- /react-text --><code data-reactid="376"><!-- react-text: 377 -->ant-tool<!-- /react-text --></code></a><!-- react-text: 378 --> to explore more features.<!-- /react-text --></p><blockquote data-reactid="379"><p data-reactid="380"><!-- react-text: 381 -->Also, you can use scaffold/demo which is provided by community:<!-- /react-text --></p><ul data-reactid="382"><li data-reactid="383"><p data-reactid="384"><a href="https://github.com/zuiidea/antd-admin" data-reactid="385"><!-- react-text: 386 -->antd-admin<!-- /react-text --></a></p></li><li data-reactid="387"><p data-reactid="388"><a href="https://github.com/JasonBai007/reactSPA" data-reactid="389"><!-- react-text: 390 -->reactSPA<!-- /react-text --></a></p></li><li data-reactid="391"><p data-reactid="392"><a href="https://github.com/Justin-lu/react-redux-antd" data-reactid="393"><!-- react-text: 394 -->react-redux-antd by Justin-lu<!-- /react-text --></a></p></li><li data-reactid="395"><p data-reactid="396"><a href="https://github.com/okoala/react-redux-antd" data-reactid="397"><!-- react-text: 398 -->react-redux-antd by okoala<!-- /react-text --></a></p></li><li data-reactid="399"><p data-reactid="400"><a href="https://github.com/fireyy/react-antd-admin" data-reactid="401"><!-- react-text: 402 -->react-antd-admin<!-- /react-text --></a></p></li><li data-reactid="403"><p data-reactid="404"><a href="https://github.com/yuzhouisme/react-antd-redux-router-starter" data-reactid="405"><!-- react-text: 406 -->react-antd-redux-router-starter<!-- /react-text --></a></p></li><li data-reactid="407"><p data-reactid="408"><a href="https://github.com/BetaRabbit/react-redux-antd-starter" data-reactid="409"><!-- react-text: 410 -->react-redux-antd-starter<!-- /react-text --></a></p></li><li data-reactid="411"><p data-reactid="412"><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="413"><!-- react-text: 414 -->more<!-- /react-text --></a></p></li></ul></blockquote><h3 id="2.-Create-a-New-Project" data-reactid="415"><span data-reactid="416"><!-- react-text: 417 -->2. Create a New Project<!-- /react-text --></span><a href="#2.-Create-a-New-Project" class="anchor" data-reactid="418">#</a></h3><p data-reactid="419"><!-- react-text: 420 -->A new project can be created using CLI tools.<!-- /react-text --></p><pre class="language-bash" data-reactid="421"><code data-reactid="422">$ <span class="token function">mkdir</span> antd-demo <span class="token operator">&&</span> <span class="token function">cd</span> antd-demo
|
||
$ antd-init</code></pre><p data-reactid="423"><code data-reactid="424"><!-- react-text: 425 -->antd-init<!-- /react-text --></code><!-- react-text: 426 --> will run <!-- /react-text --><code data-reactid="427"><!-- react-text: 428 -->npm install<!-- /react-text --></code><!-- react-text: 429 --> after a project is created. If it fails, you can run <!-- /react-text --><code data-reactid="430"><!-- react-text: 431 -->npm install<!-- /react-text --></code><!-- react-text: 432 --> by yourself.<!-- /react-text --></p><h3 id="3.-Use-antd's-Components" data-reactid="433"><span data-reactid="434"><!-- react-text: 435 -->3. Use antd's Components<!-- /react-text --></span><a href="#3.-Use-antd's-Components" class="anchor" data-reactid="436">#</a></h3><p data-reactid="437"><!-- react-text: 438 -->By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
|
||
You may study this example later. For now, just follow this guide in order to get some experience working with the result of <!-- /react-text --><code data-reactid="439"><!-- react-text: 440 -->antd-init<!-- /react-text --></code><!-- react-text: 441 -->.<!-- /react-text --></p><p data-reactid="442"><!-- react-text: 443 -->Replace the content of <!-- /react-text --><code data-reactid="444"><!-- react-text: 445 -->index.js<!-- /react-text --></code><!-- react-text: 446 --> with the following code.
|
||
As you can see, there is no difference between antd's components and usual React components.<!-- /react-text --></p><pre class="language-jsx" data-reactid="447"><code data-reactid="448"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> message <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
date<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">handleChange</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'Selected Date: '</span> <span class="token operator">+</span> date<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> date <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> margin<span class="token punctuation">:</span> <span class="token string">'100px auto'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value <span class="token operator">=</span><span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handleChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token punctuation">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Date<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>date<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><blockquote data-reactid="449"><p data-reactid="450"><!-- react-text: 451 -->All the components in antd are listed in the sidebar.<!-- /react-text --></p></blockquote><h3 id="4.-Development-&-Debugging" data-reactid="452"><span data-reactid="453"><!-- react-text: 454 -->4. Development & Debugging<!-- /react-text --></span><a href="#4.-Development-&-Debugging" class="anchor" data-reactid="455">#</a></h3><p data-reactid="456"><!-- react-text: 457 -->Run your project and visit <!-- /react-text --><a href="http://127.0.0.1:8000" data-reactid="458"><!-- react-text: 459 -->http://127.0.0.1:8000<!-- /react-text --></a></p><pre class="language-bash" data-reactid="460"><code data-reactid="461">$ <span class="token function">npm</span> start</code></pre><h3 id="5.-Building-&-Deployment" data-reactid="462"><span data-reactid="463"><!-- react-text: 464 -->5. Building & Deployment<!-- /react-text --></span><a href="#5.-Building-&-Deployment" class="anchor" data-reactid="465">#</a></h3><pre class="language-bash" data-reactid="466"><code data-reactid="467">$ <span class="token function">npm</span> run build</code></pre><p data-reactid="468"><!-- react-text: 469 -->Entry files will be built and generated in <!-- /react-text --><code data-reactid="470"><!-- react-text: 471 -->dist<!-- /react-text --></code><!-- react-text: 472 --> directory, then we can deploy it to different environments.<!-- /react-text --></p><blockquote data-reactid="473"><p data-reactid="474"><!-- react-text: 475 -->This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
|
||
But you can use those tools in your project, depending on your context and needs.<!-- /react-text --></p></blockquote><h2 id="Compatibility" data-reactid="476"><span data-reactid="477"><!-- react-text: 478 -->Compatibility<!-- /react-text --></span><a href="#Compatibility" class="anchor" data-reactid="479">#</a></h2><p data-reactid="480"><!-- react-text: 481 -->Ant Design React supports all the modern browsers and IE9+.<!-- /react-text --></p><p data-reactid="482"><!-- react-text: 483 -->You need to provide <!-- /react-text --><a href="https://github.com/es-shims/es5-shim" data-reactid="484"><!-- react-text: 485 -->es5-shim<!-- /react-text --></a><!-- react-text: 486 --> and <!-- /react-text --><a href="https://github.com/paulmillr/es6-shim" data-reactid="487"><!-- react-text: 488 -->es6-shim<!-- /react-text --></a><!-- react-text: 489 --> and other polyfills for IE browsers. If you are using babel, we strongly recommend to use <!-- /react-text --><a href="https://babeljs.io/docs/usage/polyfill/" data-reactid="490"><!-- react-text: 491 -->babel-polyfill<!-- /react-text --></a><!-- react-text: 492 --> and <!-- /react-text --><a href="https://babeljs.io/docs/plugins/transform-runtime/" data-reactid="493"><!-- react-text: 494 -->babel-plugin-transform-runtime<!-- /react-text --></a><!-- react-text: 495 -->.<!-- /react-text --></p><blockquote data-reactid="496"><p data-reactid="497"><!-- react-text: 498 -->If you run into problem about <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445" data-reactid="499"><!-- react-text: 500 -->startsWith <!-- /react-text --></a><!-- react-text: 501 -->, you should import <!-- /react-text --><a href="https://github.com/paulmillr/es6-shim" data-reactid="502"><!-- react-text: 503 -->es6-shim<!-- /react-text --></a><!-- react-text: 504 --> or <!-- /react-text --><a href="https://babeljs.io/docs/usage/polyfill/" data-reactid="505"><!-- react-text: 506 -->babel-polyfill<!-- /react-text --></a><!-- react-text: 507 --> as workaround.<!-- /react-text --></p></blockquote><pre class="language-html" data-reactid="508"><code data-reactid="509"><span class="token doctype"><!DOCTYPE html></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token comment" spellcheck="true"><!-- import stylesheet --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/index.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token comment" spellcheck="true"><!-- Polyfills --></span>
|
||
<span class="token comment" spellcheck="true"><!--[if lt IE 10]>
|
||
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]--></span>
|
||
<span class="token comment" spellcheck="true"><!--[if lte IE 11]>
|
||
<script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
|
||
<![endif]--></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||
<span class="token comment" spellcheck="true"><!-- import common dependencies --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/common.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token comment" spellcheck="true"><!-- import entry file --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre><h4 id="IE8-note" data-reactid="510"><span data-reactid="511"><!-- react-text: 512 -->IE8 note<!-- /react-text --></span><a href="#IE8-note" class="anchor" data-reactid="513">#</a></h4><blockquote data-reactid="514"><p data-reactid="515"><!-- react-text: 516 -->We don't support IE8 after <!-- /react-text --><code data-reactid="517"><!-- react-text: 518 -->antd@2.0<!-- /react-text --></code><!-- react-text: 519 -->.<!-- /react-text --></p></blockquote><p data-reactid="520"><!-- react-text: 521 -->You may encounter problems like <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/issues/28" data-reactid="522"><!-- react-text: 523 -->#28<!-- /react-text --></a><!-- react-text: 524 --> and <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/858" data-reactid="525"><!-- react-text: 526 -->#858<!-- /react-text --></a><!-- react-text: 527 -->, since <!-- /react-text --><code data-reactid="528"><!-- react-text: 529 -->babel@6.x<!-- /react-text --></code><!-- react-text: 530 --> doesn't support IE8. You can refer to this <!-- /react-text --><a href="https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8" data-reactid="531"><!-- react-text: 532 -->webpack config<!-- /react-text --></a><!-- react-text: 533 -->.<!-- /react-text --></p><blockquote data-reactid="534"><p data-reactid="535"><!-- react-text: 536 -->More about how to use React in IE8: <!-- /react-text --><a href="https://github.com/xcatliu/react-ie8" data-reactid="537"><!-- react-text: 538 -->https://github.com/xcatliu/react-ie8<!-- /react-text --></a></p></blockquote><h2 id="Customized-Work-Flow" data-reactid="539"><span data-reactid="540"><!-- react-text: 541 -->Customized Work Flow<!-- /react-text --></span><a href="#Customized-Work-Flow" class="anchor" data-reactid="542">#</a></h2><p data-reactid="543"><!-- react-text: 544 -->If you want to customize your work flow, we recommend to use <!-- /react-text --><a href="http://webpack.github.io/" data-reactid="545"><!-- react-text: 546 -->webpack<!-- /react-text --></a><!-- react-text: 547 --> to build and debug code.<!-- /react-text --></p><p data-reactid="548"><!-- react-text: 549 -->Also, you can use any <!-- /react-text --><a href="https://github.com/enaqx/awesome-react#boilerplates" data-reactid="550"><!-- react-text: 551 -->scaffold<!-- /react-text --></a><!-- react-text: 552 --> available in React ecosystem. If you encounter problems, you can use our <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" data-reactid="553"><!-- react-text: 554 -->webpack config<!-- /react-text --></a><!-- react-text: 555 --> and <!-- /react-text --><a href="http://ant-tool.github.io/webpack-config.html" data-reactid="556"><!-- react-text: 557 -->modify it<!-- /react-text --></a><!-- react-text: 558 -->.<!-- /react-text --></p><p data-reactid="559"><!-- react-text: 560 -->There are some <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="561"><!-- react-text: 562 -->scaffolds<!-- /react-text --></a><!-- react-text: 563 --> which have already integrated antd, so you can try and start with one of these, and even contribute.<!-- /react-text --></p><h2 id="Import-on-Demand" data-reactid="564"><span data-reactid="565"><!-- react-text: 566 -->Import on Demand<!-- /react-text --></span><a href="#Import-on-Demand" class="anchor" data-reactid="567">#</a></h2><p data-reactid="568"><!-- react-text: 569 -->If you see logs like below screenshot, you might import all components by writing <!-- /react-text --><code data-reactid="570"><!-- react-text: 571 -->import { Button } from 'antd';<!-- /react-text --></code><!-- react-text: 572 -->, this will affect your app's network perfermance.<!-- /react-text --></p><pre class="language-null" data-reactid="573"><code data-reactid="574">You are using a whole package of antd<span class="token punctuation">,</span> please use https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>npmjs<span class="token punctuation">.</span>com<span class="token operator">/</span>package<span class="token operator">/</span>babel<span class="token operator">-</span>plugin<span class="token operator">-</span>import <span class="token keyword">to</span> reduce app bundle size<span class="token punctuation">.</span></code></pre><blockquote data-reactid="575"><p data-reactid="576"><img src="https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png" data-reactid="577"/></p></blockquote><p data-reactid="578"><!-- react-text: 579 -->However, we can import individual components on demand:<!-- /react-text --></p><pre class="language-jsx" data-reactid="580"><code data-reactid="581"><span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'antd/lib/button'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token string">'antd/lib/button/style'</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// or antd/lib/button/style/css for css format file</span></code></pre><p data-reactid="582"><!-- react-text: 583 -->We strongly recommend to use <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="584"><!-- react-text: 585 -->babel-plugin-import<!-- /react-text --></a><!-- react-text: 586 -->, which can convert the following code to the 'antd/lib/xxx' way:<!-- /react-text --></p><pre class="language-jsx" data-reactid="587"><code data-reactid="588"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span></code></pre><p data-reactid="589"><!-- react-text: 590 -->And this plugin can load styles too, read <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import#usage" data-reactid="591"><!-- react-text: 592 -->usage<!-- /react-text --></a><!-- react-text: 593 --> for more details.<!-- /react-text --></p><h2 id="Customization" data-reactid="594"><span data-reactid="595"><!-- react-text: 596 -->Customization<!-- /react-text --></span><a href="#Customization" class="anchor" data-reactid="597">#</a></h2><ul data-reactid="598"><li data-reactid="599"><p data-reactid="600"><a href="/docs/react/customize-theme" data-reactid="601">Customize Theme</a></p></li><li data-reactid="602"><p data-reactid="603"><a href="https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont" data-reactid="604"><!-- react-text: 605 -->Local Iconfont<!-- /react-text --></a></p></li></ul><h2 id="Tips" data-reactid="606"><span data-reactid="607"><!-- react-text: 608 -->Tips<!-- /react-text --></span><a href="#Tips" class="anchor" data-reactid="609">#</a></h2><ul data-reactid="610"><li data-reactid="611"><p data-reactid="612"><!-- react-text: 613 -->You can use any <!-- /react-text --><code data-reactid="614"><!-- react-text: 615 -->npm<!-- /react-text --></code><!-- react-text: 616 --> modules.<!-- /react-text --></p></li><li data-reactid="617"><p data-reactid="618"><!-- react-text: 619 -->We recommend to write code in <!-- /react-text --><a href="http://babeljs.io/blog/2015/06/07/react-on-es6-plus" data-reactid="620"><!-- react-text: 621 -->ES2015<!-- /react-text --></a><!-- react-text: 622 --> as <!-- /react-text --><code data-reactid="623"><!-- react-text: 624 -->babel<!-- /react-text --></code><!-- react-text: 625 --> has been integrated in our work flow.<!-- /react-text --></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="626"><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="627"><section class="prev-next-nav" data-reactid="628"><a class="prev-page" href="/docs/react/introduce" data-reactid="629">Ant Design of React</a><a class="next-page" href="/docs/react/practical-projects" data-reactid="630">Real project with dva</a></section></div></div></div><footer id="footer" data-reactid="631"><ul data-reactid="632"><li data-reactid="633"><h2 data-reactid="634"><i class="anticon anticon-github" data-reactid="635"></i><!-- react-text: 636 --> GitHub<!-- /react-text --></h2><div data-reactid="637"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="638"><span data-reactid="639">Repository</span></a></div><div data-reactid="640"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="641"><span data-reactid="642">Customize Theme</span></a></div><div data-reactid="643"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="644"><span data-reactid="645">Awesome Ant Design</span></a></div></li><li data-reactid="646"><h2 data-reactid="647"><i class="anticon anticon-link" data-reactid="648"></i><!-- react-text: 649 --> <!-- /react-text --><span data-reactid="650">Links</span></h2><div data-reactid="651"><a href="https://design.alipay.com/" data-reactid="652"><span data-reactid="653">Ant Financial Design Platform</span></a></div><div data-reactid="654"><a href="http://mobile.ant.design" data-reactid="655">Ant Design Mobile</a><span data-reactid="656"> - </span><span data-reactid="657">Mobile UI</span></div><div data-reactid="658"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="659">dva</a><!-- react-text: 660 --> - <!-- /react-text --><span data-reactid="661">Framework</span></div><div data-reactid="662"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="663">dva-cli</a><!-- react-text: 664 --> -<!-- /react-text --><span data-reactid="665">Developer Tools</span></div><div data-reactid="666"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="667">Egg</a><span data-reactid="668"> - </span><span data-reactid="669">Enterprise Node Framework</span></div><div data-reactid="670"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="671">AntV</a><span data-reactid="672"> - </span><span data-reactid="673">Data Visualization</span></div><div data-reactid="674"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="675">Ant Motion</a><span data-reactid="676"> - </span><span data-reactid="677">Motion Soluction</span></div><div data-reactid="678"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="679">AntD Library</a><span data-reactid="680"> - </span><span data-reactid="681">Axure library</span></div><div data-reactid="682"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="683">Ant UX</a><span data-reactid="684"> - </span><span data-reactid="685">Sitemap Template</span></div></li><li data-reactid="686"><h2 data-reactid="687"><i class="anticon anticon-customer-service" data-reactid="688"></i><!-- react-text: 689 --> <!-- /react-text --><span data-reactid="690">Community</span></h2><div data-reactid="691"><a href="/changelog" data-reactid="692"><span data-reactid="693">Change Log</span></a></div><div data-reactid="694"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="695"><span data-reactid="696">FAQ</span></a></div><div data-reactid="697"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="698"><span data-reactid="699">Chat Room (中文)</span></a></div><div data-reactid="700"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="701"><span data-reactid="702">Chat Room (English)</span></a></div><div data-reactid="703"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="704"><span data-reactid="705">Bug Report</span></a></div><div data-reactid="706"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="707"><span data-reactid="708">Issues</span></a></div><div data-reactid="709"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="710"><span data-reactid="711">StackOverflow</span></a></div><div data-reactid="712"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="713"><span data-reactid="714">SegmentFault</span></a></div></li><li data-reactid="715"><h2 data-reactid="716"><!-- react-text: 717 -->Copyright © <!-- /react-text --><!-- react-text: 718 -->2017<!-- /react-text --></h2><div data-reactid="719"><span data-reactid="720">Created by AIUX</span></div><div data-reactid="721"><!-- react-text: 722 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="723">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|