mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
134 lines
54 KiB
HTML
134 lines
54 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 - One Design Language</title>
|
|
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
|
<link rel="stylesheet" type="text/css" href="/index-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>');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="react-content">
|
|
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1142037318"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="/docs/react/introduce" data-reactid="47">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="48"><a href="/docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="50"><a href="/docs/react/install" data-reactid="51">Installation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="/docs/react/practical-projects" data-reactid="53">Practical Projects</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/customize-theme" data-reactid="55">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" data-reactid="57">i18n Solution</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/changelog" data-reactid="59">Change Log</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="60"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="true" aria-owns="1481611171553_2" aria-haspopup="true" data-reactid="61"><h4 data-reactid="62">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="1481611171553_2" data-reactid="63"><li class=" ant-menu-item-group" data-reactid="64"><div class="ant-menu-item-group-title" data-reactid="65">General</div><ul class="ant-menu-item-group-list" data-reactid="66"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/components/button/" data-reactid="68"><span data-reactid="69">Button</span><span class="chinese" data-reactid="70"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/components/icon/" data-reactid="72"><span data-reactid="73">Icon</span><span class="chinese" data-reactid="74"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="75"><div class="ant-menu-item-group-title" data-reactid="76">Layout</div><ul class="ant-menu-item-group-list" data-reactid="77"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="78"><a href="/components/grid/" data-reactid="79"><span data-reactid="80">Grid</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">Navigation</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/affix/" data-reactid="86"><span data-reactid="87">Affix</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/anchor/" data-reactid="90"><span data-reactid="91">Anchor</span><span class="chinese" data-reactid="92"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/back-top/" data-reactid="94"><span data-reactid="95">BackTop</span><span class="chinese" data-reactid="96"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/components/breadcrumb/" data-reactid="98"><span data-reactid="99">Breadcrumb</span><span class="chinese" data-reactid="100"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="101"><a href="/components/dropdown/" data-reactid="102"><span data-reactid="103">Dropdown</span><span class="chinese" data-reactid="104"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="105"><a href="/components/menu/" data-reactid="106"><span data-reactid="107">Menu</span><span class="chinese" data-reactid="108"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="109"><a href="/components/pagination/" data-reactid="110"><span data-reactid="111">Pagination</span><span class="chinese" data-reactid="112"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="113"><a href="/components/steps/" data-reactid="114"><span data-reactid="115">Steps</span><span class="chinese" data-reactid="116"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="117"><a href="/components/tabs/" data-reactid="118"><span data-reactid="119">Tabs</span><span class="chinese" data-reactid="120"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="121"><div class="ant-menu-item-group-title" data-reactid="122">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="123"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/auto-complete/" data-reactid="125"><span data-reactid="126">AutoComplete</span><span class="chinese" data-reactid="127"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="128"><a href="/components/checkbox/" data-reactid="129"><span data-reactid="130">Checkbox</span><span class="chinese" data-reactid="131"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="132"><a href="/components/cascader/" data-reactid="133"><span data-reactid="134">Cascader</span><span class="chinese" data-reactid="135"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="136"><a href="/components/date-picker/" data-reactid="137"><span data-reactid="138">DatePicker</span><span class="chinese" data-reactid="139"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="140"><a href="/components/form/" data-reactid="141"><span data-reactid="142">Form</span><span class="chinese" data-reactid="143"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="144"><a href="/components/input/" data-reactid="145"><span data-reactid="146">Input</span><span class="chinese" data-reactid="147"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="148"><a href="/components/input-number/" data-reactid="149"><span data-reactid="150">InputNumber</span><span class="chinese" data-reactid="151"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="152"><a href="/components/mention/" data-reactid="153"><span data-reactid="154">Mention</span><span class="chinese" data-reactid="155"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="156"><a href="/components/radio/" data-reactid="157"><span data-reactid="158">Radio</span><span class="chinese" data-reactid="159"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="160"><a href="/components/rate/" data-reactid="161"><span data-reactid="162">Rate</span><span class="chinese" data-reactid="163"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="164"><a href="/components/select/" data-reactid="165"><span data-reactid="166">Select</span><span class="chinese" data-reactid="167"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="168"><a href="/components/slider/" data-reactid="169"><span data-reactid="170">Slider</span><span class="chinese" data-reactid="171"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="172"><a href="/components/switch/" data-reactid="173"><span data-reactid="174">Switch</span><span class="chinese" data-reactid="175"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="176"><a href="/components/time-picker/" data-reactid="177"><span data-reactid="178">TimePicker</span><span class="chinese" data-reactid="179"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="180"><a href="/components/transfer/" data-reactid="181"><span data-reactid="182">Transfer</span><span class="chinese" data-reactid="183"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="184"><a href="/components/tree-select/" data-reactid="185"><span data-reactid="186">TreeSelect</span><span class="chinese" data-reactid="187"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="188"><a href="/components/upload/" data-reactid="189"><span data-reactid="190">Upload</span><span class="chinese" data-reactid="191"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="192"><div class="ant-menu-item-group-title" data-reactid="193">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="194"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/badge/" data-reactid="196"><span data-reactid="197">Badge</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="199"><a href="/components/card/" data-reactid="200"><span data-reactid="201">Card</span><span class="chinese" data-reactid="202"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203"><a href="/components/carousel/" data-reactid="204"><span data-reactid="205">Carousel</span><span class="chinese" data-reactid="206"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="207"><a href="/components/collapse/" data-reactid="208"><span data-reactid="209">Collapse</span><span class="chinese" data-reactid="210"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="211"><a href="/components/calendar/" data-reactid="212"><span data-reactid="213">Calendar</span><span class="chinese" data-reactid="214"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="215"><a href="/components/popover/" data-reactid="216"><span data-reactid="217">Popover</span><span class="chinese" data-reactid="218"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="219"><a href="/components/table/" data-reactid="220"><span data-reactid="221">Table</span><span class="chinese" data-reactid="222"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="223"><a href="/components/tag/" data-reactid="224"><span data-reactid="225">Tag</span><span class="chinese" data-reactid="226"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="227"><a href="/components/timeline/" data-reactid="228"><span data-reactid="229">Timeline</span><span class="chinese" data-reactid="230"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="231"><a href="/components/tooltip/" data-reactid="232"><span data-reactid="233">Tooltip</span><span class="chinese" data-reactid="234"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="235"><a href="/components/tree/" data-reactid="236"><span data-reactid="237">Tree</span><span class="chinese" data-reactid="238"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="239"><div class="ant-menu-item-group-title" data-reactid="240">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="241"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/alert/" data-reactid="243"><span data-reactid="244">Alert</span><span class="chinese" data-reactid="245"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="246"><a href="/components/message/" data-reactid="247"><span data-reactid="248">Message</span><span class="chinese" data-reactid="249"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="250"><a href="/components/modal/" data-reactid="251"><span data-reactid="252">Modal</span><span class="chinese" data-reactid="253"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="254"><a href="/components/notification/" data-reactid="255"><span data-reactid="256">Notification</span><span class="chinese" data-reactid="257"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="258"><a href="/components/popconfirm/" data-reactid="259"><span data-reactid="260">Popconfirm</span><span class="chinese" data-reactid="261"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="262"><a href="/components/progress/" data-reactid="263"><span data-reactid="264">Progress</span><span class="chinese" data-reactid="265"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="266"><a href="/components/spin/" data-reactid="267"><span data-reactid="268">Spin</span><span class="chinese" data-reactid="269"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="270"><div class="ant-menu-item-group-title" data-reactid="271">Other</div><ul class="ant-menu-item-group-list" data-reactid="272"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/locale-provider/" data-reactid="274"><span data-reactid="275">LocaleProvider</span><span class="chinese" data-reactid="276"></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="277"><article class="markdown" data-reactid="278"><h1 data-reactid="279"><!-- react-text: 280 -->Getting Started<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/react/getting-started.en-US.md" data-reactid="281"><i class="anticon anticon-edit" data-reactid="282"></i></a></h1><section class="markdown" data-reactid="283"><p data-reactid="284"><!-- react-text: 285 -->Ant Design React is dedicated to providing a <!-- /react-text --><strong data-reactid="286"><!-- react-text: 287 -->good development experience<!-- /react-text --></strong><!-- react-text: 288 --> for programmers.<!-- /react-text --></p></section><section class="toc" data-reactid="289"><ul data-reactid="290"><li data-reactid="291"><a class="bisheng-toc-h2" href="#First-Example" data-reactid="292"><!-- react-text: 293 -->First Example<!-- /react-text --></a></li><li data-reactid="294"><a class="bisheng-toc-h2" href="#Standard-Development-Flow" data-reactid="295"><!-- react-text: 296 -->Standard Development Flow<!-- /react-text --></a></li><li data-reactid="297"><a class="bisheng-toc-h2" href="#Compatibility" data-reactid="298"><!-- react-text: 299 -->Compatibility<!-- /react-text --></a></li><li data-reactid="300"><a class="bisheng-toc-h2" href="#Customized-Work-Flow" data-reactid="301"><!-- react-text: 302 -->Customized Work Flow<!-- /react-text --></a></li><li data-reactid="303"><a class="bisheng-toc-h2" href="#Import-on-Demand" data-reactid="304"><!-- react-text: 305 -->Import on Demand<!-- /react-text --></a></li><li data-reactid="306"><a class="bisheng-toc-h2" href="#Customization" data-reactid="307"><!-- react-text: 308 -->Customization<!-- /react-text --></a></li><li data-reactid="309"><a class="bisheng-toc-h2" href="#Tips" data-reactid="310"><!-- react-text: 311 -->Tips<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="312"><p data-reactid="313"><!-- react-text: 314 -->Before delving into Ant Design React, a good knowledge of <!-- /react-text --><a href="http://facebook.github.io/react/" data-reactid="315"><!-- react-text: 316 -->React<!-- /react-text --></a><!-- react-text: 317 --> and <!-- /react-text --><a href="http://babeljs.io/docs/learn-es2015/" data-reactid="318"><!-- react-text: 319 -->JavaScript ES2015<!-- /react-text --></a><!-- react-text: 320 --> is needed.<!-- /react-text --></p><h2 id="First-Example" data-reactid="321"><span data-reactid="322"><!-- react-text: 323 -->First Example<!-- /react-text --></span><a href="#First-Example" class="anchor" data-reactid="324">#</a></h2><p data-reactid="325"><!-- react-text: 326 -->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 real world.<!-- /react-text --></p><ul data-reactid="327"><li data-reactid="328"><p data-reactid="329"><a href="http://codepen.io/anon/pen/wGOWGW?editors=001" data-reactid="330"><!-- react-text: 331 -->antd CodePen<!-- /react-text --></a></p></li></ul><h2 id="Standard-Development-Flow" data-reactid="332"><span data-reactid="333"><!-- react-text: 334 -->Standard Development Flow<!-- /react-text --></span><a href="#Standard-Development-Flow" class="anchor" data-reactid="335">#</a></h2><p data-reactid="336"><!-- react-text: 337 -->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="338"><!-- react-text: 339 -->Such features, together with packaging the production version are covered in this work flow.<!-- /react-text --></p><h3 id="1.-Installation" data-reactid="340"><span data-reactid="341"><!-- react-text: 342 -->1. Installation<!-- /react-text --></span><a href="#1.-Installation" class="anchor" data-reactid="343">#</a></h3><blockquote data-reactid="344"><p data-reactid="345"><!-- react-text: 346 -->Please make sure that you had installed <!-- /react-text --><a href="https://nodejs.org/en/" data-reactid="347"><!-- react-text: 348 -->Node.js<!-- /react-text --></a><!-- react-text: 349 -->(> v4.x) before using <!-- /react-text --><code data-reactid="350"><!-- react-text: 351 -->antd-init<!-- /react-text --></code><!-- react-text: 352 -->.<!-- /react-text --></p></blockquote><pre class="language-bash" data-reactid="353"><code data-reactid="354">$ <span class="token function">npm</span> <span class="token function">install</span> antd-init -g</code></pre><p data-reactid="355"><!-- react-text: 356 -->Read <!-- /react-text --><a href="https://github.com/ant-design/antd-init/" data-reactid="357"><!-- react-text: 358 -->the documentation of <!-- /react-text --><code data-reactid="359"><!-- react-text: 360 -->antd-init<!-- /react-text --></code></a><!-- react-text: 361 --> and <!-- /react-text --><a href="http://ant-tool.github.io/" data-reactid="362"><!-- react-text: 363 -->the documentation of <!-- /react-text --><code data-reactid="364"><!-- react-text: 365 -->ant-tool<!-- /react-text --></code></a><!-- react-text: 366 --> to explore more features.<!-- /react-text --></p><blockquote data-reactid="367"><p data-reactid="368"><!-- react-text: 369 -->Also, you can use scaffold/demo which is provided by community:<!-- /react-text --></p><ul data-reactid="370"><li data-reactid="371"><p data-reactid="372"><a href="https://github.com/JasonBai007/reactSPA" data-reactid="373"><!-- react-text: 374 -->reactSPA<!-- /react-text --></a></p></li><li data-reactid="375"><p data-reactid="376"><a href="https://github.com/Justin-lu/react-redux-antd" data-reactid="377"><!-- react-text: 378 -->react-redux-antd by Justin-lu<!-- /react-text --></a></p></li><li data-reactid="379"><p data-reactid="380"><a href="https://github.com/okoala/react-redux-antd" data-reactid="381"><!-- react-text: 382 -->react-redux-antd by okoala<!-- /react-text --></a></p></li><li data-reactid="383"><p data-reactid="384"><a href="https://github.com/fireyy/react-antd-admin" data-reactid="385"><!-- react-text: 386 -->react-antd-admin<!-- /react-text --></a></p></li><li data-reactid="387"><p data-reactid="388"><a href="https://github.com/yuzhouisme/react-antd-redux-router-starter" data-reactid="389"><!-- react-text: 390 -->react-antd-redux-router-starter<!-- /react-text --></a></p></li><li data-reactid="391"><p data-reactid="392"><a href="https://github.com/BetaRabbit/react-redux-antd-starter" data-reactid="393"><!-- react-text: 394 -->react-redux-antd-starter<!-- /react-text --></a></p></li><li data-reactid="395"><p data-reactid="396"><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="397"><!-- react-text: 398 -->more<!-- /react-text --></a></p></li></ul></blockquote><h3 id="2.-Create-a-New-Project" data-reactid="399"><span data-reactid="400"><!-- react-text: 401 -->2. Create a New Project<!-- /react-text --></span><a href="#2.-Create-a-New-Project" class="anchor" data-reactid="402">#</a></h3><p data-reactid="403"><!-- react-text: 404 -->A new project can be created using CLI tools.<!-- /react-text --></p><pre class="language-bash" data-reactid="405"><code data-reactid="406">$ <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="407"><code data-reactid="408"><!-- react-text: 409 -->antd-init<!-- /react-text --></code><!-- react-text: 410 --> will run <!-- /react-text --><code data-reactid="411"><!-- react-text: 412 -->npm install<!-- /react-text --></code><!-- react-text: 413 --> after a project is created. If it fails, you can run <!-- /react-text --><code data-reactid="414"><!-- react-text: 415 -->npm install<!-- /react-text --></code><!-- react-text: 416 --> by yourself.<!-- /react-text --></p><h3 id="3.-Use-antd's-Components" data-reactid="417"><span data-reactid="418"><!-- react-text: 419 -->3. Use antd's Components<!-- /react-text --></span><a href="#3.-Use-antd's-Components" class="anchor" data-reactid="420">#</a></h3><p data-reactid="421"><!-- react-text: 422 -->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="423"><!-- react-text: 424 -->antd-init<!-- /react-text --></code><!-- react-text: 425 -->.<!-- /react-text --></p><p data-reactid="426"><!-- react-text: 427 -->Replace the content of <!-- /react-text --><code data-reactid="428"><!-- react-text: 429 -->index.js<!-- /react-text --></code><!-- react-text: 430 --> 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="431"><code data-reactid="432"><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="433"><p data-reactid="434"><!-- react-text: 435 -->All the components in antd are listed in the sidebar.<!-- /react-text --></p></blockquote><h3 id="4.-Development-&-Debugging" data-reactid="436"><span data-reactid="437"><!-- react-text: 438 -->4. Development & Debugging<!-- /react-text --></span><a href="#4.-Development-&-Debugging" class="anchor" data-reactid="439">#</a></h3><p data-reactid="440"><!-- react-text: 441 -->Run your project and visit <!-- /react-text --><a href="http://127.0.0.1:8000" data-reactid="442"><!-- react-text: 443 -->http://127.0.0.1:8000<!-- /react-text --></a></p><pre class="language-bash" data-reactid="444"><code data-reactid="445">$ <span class="token function">npm</span> start</code></pre><h3 id="5.-Building-&-Deployment" data-reactid="446"><span data-reactid="447"><!-- react-text: 448 -->5. Building & Deployment<!-- /react-text --></span><a href="#5.-Building-&-Deployment" class="anchor" data-reactid="449">#</a></h3><pre class="language-bash" data-reactid="450"><code data-reactid="451">$ <span class="token function">npm</span> run build</code></pre><p data-reactid="452"><!-- react-text: 453 -->Entry files will be built and generated in <!-- /react-text --><code data-reactid="454"><!-- react-text: 455 -->dist<!-- /react-text --></code><!-- react-text: 456 --> directory, then we can deploy it to different environments.<!-- /react-text --></p><blockquote data-reactid="457"><p data-reactid="458"><!-- react-text: 459 -->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="460"><span data-reactid="461"><!-- react-text: 462 -->Compatibility<!-- /react-text --></span><a href="#Compatibility" class="anchor" data-reactid="463">#</a></h2><p data-reactid="464"><!-- react-text: 465 -->Ant Design React supports all the modern browsers and IE9+.<!-- /react-text --></p><p data-reactid="466"><!-- react-text: 467 -->You need to provide <!-- /react-text --><a href="https://github.com/es-shims/es5-shim" data-reactid="468"><!-- react-text: 469 -->es5-shim<!-- /react-text --></a><!-- react-text: 470 --> and <!-- /react-text --><a href="https://github.com/paulmillr/es6-shim" data-reactid="471"><!-- react-text: 472 -->es6-shim<!-- /react-text --></a><!-- react-text: 473 --> 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="474"><!-- react-text: 475 -->babel-polyfill<!-- /react-text --></a><!-- react-text: 476 --> and <!-- /react-text --><a href="https://babeljs.io/docs/plugins/transform-runtime/" data-reactid="477"><!-- react-text: 478 -->babel-plugin-transform-runtime<!-- /react-text --></a><!-- react-text: 479 -->.<!-- /react-text --></p><pre class="language-html" data-reactid="480"><code data-reactid="481"><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="482"><span data-reactid="483"><!-- react-text: 484 -->IE8 note<!-- /react-text --></span><a href="#IE8-note" class="anchor" data-reactid="485">#</a></h4><blockquote data-reactid="486"><p data-reactid="487"><!-- react-text: 488 -->We don't support IE8 after <!-- /react-text --><code data-reactid="489"><!-- react-text: 490 -->antd@2.0<!-- /react-text --></code><!-- react-text: 491 -->.<!-- /react-text --></p></blockquote><p data-reactid="492"><!-- react-text: 493 -->You may encounter problems like <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/issues/28" data-reactid="494"><!-- react-text: 495 -->#28<!-- /react-text --></a><!-- react-text: 496 --> and <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/858" data-reactid="497"><!-- react-text: 498 -->#858<!-- /react-text --></a><!-- react-text: 499 -->, since <!-- /react-text --><code data-reactid="500"><!-- react-text: 501 -->babel@6.x<!-- /react-text --></code><!-- react-text: 502 --> 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="503"><!-- react-text: 504 -->webpack config<!-- /react-text --></a><!-- react-text: 505 -->.<!-- /react-text --></p><blockquote data-reactid="506"><p data-reactid="507"><!-- react-text: 508 -->More about how to use React in IE8: <!-- /react-text --><a href="https://github.com/xcatliu/react-ie8" data-reactid="509"><!-- react-text: 510 -->https://github.com/xcatliu/react-ie8<!-- /react-text --></a></p></blockquote><h2 id="Customized-Work-Flow" data-reactid="511"><span data-reactid="512"><!-- react-text: 513 -->Customized Work Flow<!-- /react-text --></span><a href="#Customized-Work-Flow" class="anchor" data-reactid="514">#</a></h2><p data-reactid="515"><!-- react-text: 516 -->If you want to customize your work flow, we recommend to use <!-- /react-text --><a href="http://webpack.github.io/" data-reactid="517"><!-- react-text: 518 -->webpack<!-- /react-text --></a><!-- react-text: 519 --> to build and debug code.<!-- /react-text --></p><p data-reactid="520"><!-- react-text: 521 -->Also, you can use any <!-- /react-text --><a href="https://github.com/enaqx/awesome-react#boilerplates" data-reactid="522"><!-- react-text: 523 -->scaffold<!-- /react-text --></a><!-- react-text: 524 --> 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="525"><!-- react-text: 526 -->webpack config<!-- /react-text --></a><!-- react-text: 527 --> and <!-- /react-text --><a href="http://ant-tool.github.io/webpack-config.html" data-reactid="528"><!-- react-text: 529 -->modify it<!-- /react-text --></a><!-- react-text: 530 -->.<!-- /react-text --></p><p data-reactid="531"><!-- react-text: 532 -->There are some <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/129" data-reactid="533"><!-- react-text: 534 -->scaffolds<!-- /react-text --></a><!-- react-text: 535 --> 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="536"><span data-reactid="537"><!-- react-text: 538 -->Import on Demand<!-- /react-text --></span><a href="#Import-on-Demand" class="anchor" data-reactid="539">#</a></h2><p data-reactid="540"><!-- react-text: 541 -->If we import a component like this <!-- /react-text --><code data-reactid="542"><!-- react-text: 543 -->import { Button } from 'antd';<!-- /react-text --></code><!-- react-text: 544 -->, then all the components of antd will be imported. But, we can import component on demand:<!-- /react-text --></p><pre class="language-jsx" data-reactid="545"><code data-reactid="546"><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></code></pre><p data-reactid="547"><!-- react-text: 548 -->If you use <!-- /react-text --><code data-reactid="549"><!-- react-text: 550 -->babel<!-- /react-text --></code><!-- react-text: 551 -->, we recommend to use <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="552"><!-- react-text: 553 -->babel-plugin-import<!-- /react-text --></a><!-- react-text: 554 -->. This plugin will convert the following code to the above form:<!-- /react-text --></p><pre class="language-jsx" data-reactid="555"><code data-reactid="556"><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="557"><!-- react-text: 558 -->And this plugin can also load styles on demand. See the <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import#usage" data-reactid="559"><!-- react-text: 560 -->usage<!-- /react-text --></a><!-- react-text: 561 --> for further details.<!-- /react-text --></p><h2 id="Customization" data-reactid="562"><span data-reactid="563"><!-- react-text: 564 -->Customization<!-- /react-text --></span><a href="#Customization" class="anchor" data-reactid="565">#</a></h2><ul data-reactid="566"><li data-reactid="567"><p data-reactid="568"><a href="/docs/react/customize-theme" data-reactid="569">Customize Theme</a></p></li><li data-reactid="570"><p data-reactid="571"><a href="https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont" data-reactid="572"><!-- react-text: 573 -->Local Iconfont<!-- /react-text --></a></p></li></ul><h2 id="Tips" data-reactid="574"><span data-reactid="575"><!-- react-text: 576 -->Tips<!-- /react-text --></span><a href="#Tips" class="anchor" data-reactid="577">#</a></h2><ul data-reactid="578"><li data-reactid="579"><p data-reactid="580"><!-- react-text: 581 -->You can use any <!-- /react-text --><code data-reactid="582"><!-- react-text: 583 -->npm<!-- /react-text --></code><!-- react-text: 584 --> modules.<!-- /react-text --></p></li><li data-reactid="585"><p data-reactid="586"><!-- react-text: 587 -->We recommend to write code in <!-- /react-text --><a href="http://babeljs.io/blog/2015/06/07/react-on-es6-plus" data-reactid="588"><!-- react-text: 589 -->ES2015<!-- /react-text --></a><!-- react-text: 590 --> as <!-- /react-text --><code data-reactid="591"><!-- react-text: 592 -->babel<!-- /react-text --></code><!-- react-text: 593 --> has been integrated in our work flow.<!-- /react-text --></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="594"><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="595"><section class="prev-next-nav" data-reactid="596"><a class="prev-page" href="/docs/react/introduce" data-reactid="597">Ant Design of React</a><a class="next-page" href="/docs/react/install" data-reactid="598">Installation</a></section></div></div></div><footer id="footer" data-reactid="599"><ul data-reactid="600"><li data-reactid="601"><h2 data-reactid="602">GitHub</h2><div data-reactid="603"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="604"><span data-reactid="605">Repository</span></a></div><div data-reactid="606"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="607">dva</a><!-- react-text: 608 --> - <!-- /react-text --><span data-reactid="609">Framework</span></div><div data-reactid="610"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="611">dva-cli</a><!-- react-text: 612 --> -<!-- /react-text --><span data-reactid="613">Scaffold</span></div><div data-reactid="614"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="615">ant-tool</a><!-- react-text: 616 --> - <!-- /react-text --><span data-reactid="617">Developer Tools</span></div></li><li data-reactid="618"><h2 data-reactid="619"><span data-reactid="620">Links</span></h2><div data-reactid="621"><a href="http://mobile.ant.design" data-reactid="622">Ant Design Mobile</a><span data-reactid="623"> - </span><span data-reactid="624">Mobile</span></div><div data-reactid="625"><a href="https://g2.alipay.com/" data-reactid="626">G2</a><span data-reactid="627"> - </span><span data-reactid="628">Data Visualization</span></div><div data-reactid="629"><a href="https://antv.alipay.com/" data-reactid="630">AntV</a><span data-reactid="631"> - </span><span data-reactid="632">Data Visualization Specification</span></div><div data-reactid="633"><a href="http://motion.ant.design" data-reactid="634">Ant Motion</a><span data-reactid="635"> - </span><span data-reactid="636">Motion</span></div><div data-reactid="637"><a href="http://library.ant.design/" data-reactid="638">AntD Library</a><span data-reactid="639"> - </span><span data-reactid="640">Axure library of Ant Design</span></div><div data-reactid="641"><a href="http://ux.ant.design" data-reactid="642">Ant UX</a><span data-reactid="643"> - </span><span data-reactid="644">Sitemap Template</span></div></li><li data-reactid="645"><h2 data-reactid="646"><span data-reactid="647">Community</span></h2><div data-reactid="648"><a rel="noopener noreferrer" href="/changelog" data-reactid="649"><span data-reactid="650">Change Log</span></a></div><div data-reactid="651"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="652"><span data-reactid="653">Feedback</span></a></div><div data-reactid="654"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="655"><span data-reactid="656">Chat Room</span></a></div><div data-reactid="657"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="658"><span data-reactid="659">Bug Report</span></a></div></li><li data-reactid="660"><div data-reactid="661"><!-- react-text: 662 -->©2016 <!-- /react-text --><span data-reactid="663">Created by Ant UED</span></div><div data-reactid="664"><!-- react-text: 665 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="666">BiSheng</a></div><div style="margin-top:10px;" data-reactid="667"><span data-reactid="668">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="669"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="670"><div class="ant-select-selection__rendered" data-reactid="671"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="672">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="673"><b data-reactid="674"></b></span></div></div></div></li></ul></footer></div>
|
|
</div>
|
|
<script>
|
|
function isZhCN(pathname) {
|
|
return /-cn\/?$/.test(pathname);
|
|
}
|
|
function getLocalizedPathname(path, zhCN) {
|
|
var pathname = path.startsWith('/') ? path : '/' + path;
|
|
if (!zhCN) { // to enUS
|
|
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
|
} else if (pathname === '/') {
|
|
return '/index-cn';
|
|
} else if (pathname.endsWith('/')) {
|
|
return pathname.replace(/\/$/, '-cn/');
|
|
}
|
|
return pathname + '-cn';
|
|
}
|
|
var queryString = location.search;
|
|
if (queryString) {
|
|
var pathname = location.pathname;
|
|
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
|
if (isZhCNConfig !== isZhCN(pathname)) {
|
|
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
// 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>
|
|
<script src="/common.js"></script>
|
|
<script src="/index.js"></script>
|
|
</body>
|
|
</html>
|