mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
333 lines
104 KiB
HTML
333 lines
104 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
|
||
<meta name="description" content="A set of high-quality React components">
|
||
<meta name="description" content="One of best React UI library for enterprise background">
|
||
<title>Ant Design - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) { // to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="2124425962"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</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">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" 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="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="71"><!-- react-text: 72 -->i18n Solution<!-- /react-text --><!-- react-text: 73 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="74"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="75"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="76"><h4 data-reactid="77">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="78"><li class=" ant-menu-item-group" data-reactid="79"><div class="ant-menu-item-group-title" data-reactid="80">General</div><ul class="ant-menu-item-group-list" data-reactid="81"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/components/button/" data-reactid="83"><span data-reactid="84">Button</span><span class="chinese" data-reactid="85"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/components/icon/" data-reactid="87"><span data-reactid="88">Icon</span><span class="chinese" data-reactid="89"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="90"><div class="ant-menu-item-group-title" data-reactid="91">Layout</div><ul class="ant-menu-item-group-list" data-reactid="92"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/components/grid/" data-reactid="94"><span data-reactid="95">Grid</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/layout/" data-reactid="98"><span data-reactid="99">Layout</span><span class="chinese" data-reactid="100"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="101"><div class="ant-menu-item-group-title" data-reactid="102">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="103"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/affix/" data-reactid="105"><span data-reactid="106">Affix</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/breadcrumb/" data-reactid="109"><span data-reactid="110">Breadcrumb</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/back-top/" data-reactid="113"><span data-reactid="114">BackTop</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/dropdown/" data-reactid="117"><span data-reactid="118">Dropdown</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/menu/" data-reactid="121"><span data-reactid="122">Menu</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/pagination/" data-reactid="125"><span data-reactid="126">Pagination</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/steps/" data-reactid="129"><span data-reactid="130">Steps</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/tabs/" data-reactid="133"><span data-reactid="134">Tabs</span><span class="chinese" data-reactid="135"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="136"><div class="ant-menu-item-group-title" data-reactid="137">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="138"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/auto-complete/" data-reactid="140"><span data-reactid="141">AutoComplete</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/cascader/" data-reactid="144"><span data-reactid="145">Cascader</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/checkbox/" data-reactid="148"><span data-reactid="149">Checkbox</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/date-picker/" data-reactid="152"><span data-reactid="153">DatePicker</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/form/" data-reactid="156"><span data-reactid="157">Form</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/input/" data-reactid="160"><span data-reactid="161">Input</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/input-number/" data-reactid="164"><span data-reactid="165">InputNumber</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/mention/" data-reactid="168"><span data-reactid="169">Mention</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/rate/" data-reactid="172"><span data-reactid="173">Rate</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/radio/" data-reactid="176"><span data-reactid="177">Radio</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/select/" data-reactid="180"><span data-reactid="181">Select</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/slider/" data-reactid="184"><span data-reactid="185">Slider</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/switch/" data-reactid="188"><span data-reactid="189">Switch</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/tree-select/" data-reactid="192"><span data-reactid="193">TreeSelect</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/time-picker/" data-reactid="196"><span data-reactid="197">TimePicker</span><span class="chinese" data-reactid="198"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="199"><a href="/components/transfer/" data-reactid="200"><span data-reactid="201">Transfer</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/upload/" data-reactid="204"><span data-reactid="205">Upload</span><span class="chinese" data-reactid="206"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="207"><div class="ant-menu-item-group-title" data-reactid="208">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="209"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/badge/" data-reactid="211"><span data-reactid="212">Badge</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/calendar/" data-reactid="215"><span data-reactid="216">Calendar</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/card/" data-reactid="219"><span data-reactid="220">Card</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/carousel/" data-reactid="223"><span data-reactid="224">Carousel</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/collapse/" data-reactid="227"><span data-reactid="228">Collapse</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/popover/" data-reactid="231"><span data-reactid="232">Popover</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/tooltip/" data-reactid="235"><span data-reactid="236">Tooltip</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/table/" data-reactid="239"><span data-reactid="240">Table</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/tag/" data-reactid="243"><span data-reactid="244">Tag</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/timeline/" data-reactid="247"><span data-reactid="248">Timeline</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/tree/" data-reactid="251"><span data-reactid="252">Tree</span><span class="chinese" data-reactid="253"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="254"><div class="ant-menu-item-group-title" data-reactid="255">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="256"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/alert/" data-reactid="258"><span data-reactid="259">Alert</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/modal/" data-reactid="262"><span data-reactid="263">Modal</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/message/" data-reactid="266"><span data-reactid="267">Message</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/notification/" data-reactid="270"><span data-reactid="271">Notification</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/progress/" data-reactid="274"><span data-reactid="275">Progress</span><span class="chinese" data-reactid="276"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="277"><a href="/components/popconfirm/" data-reactid="278"><span data-reactid="279">Popconfirm</span><span class="chinese" data-reactid="280"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="281"><a href="/components/spin/" data-reactid="282"><span data-reactid="283">Spin</span><span class="chinese" data-reactid="284"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="285"><div class="ant-menu-item-group-title" data-reactid="286">Other</div><ul class="ant-menu-item-group-list" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="288"><a href="/components/anchor/" data-reactid="289"><span data-reactid="290">Anchor</span><span class="chinese" data-reactid="291"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292"><a href="/components/locale-provider/" data-reactid="293"><span data-reactid="294">LocaleProvider</span><span class="chinese" data-reactid="295"></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="296"><article data-reactid="297"><div class="toc-affix" data-reactid="298"><div class="" data-reactid="299"><ul class="toc demos-anchor" data-reactid="300"><li title="Basic" data-reactid="301"><a href="#components-transfer-demo-basic" data-reactid="302">Basic</a></li><li title="Search" data-reactid="303"><a href="#components-transfer-demo-search" data-reactid="304">Search</a></li><li title="Advanced" data-reactid="305"><a href="#components-transfer-demo-advanced" data-reactid="306">Advanced</a></li><li title="Custom datasource" data-reactid="307"><a href="#components-transfer-demo-custom-item" data-reactid="308">Custom datasource</a></li></ul></div></div><section class="markdown" data-reactid="309"><h1 data-reactid="310"><!-- react-text: 311 -->Transfer<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/transfer/index.en-US.md" data-reactid="312"><i class="anticon anticon-edit" data-reactid="313"></i></a></h1><section class="markdown" data-reactid="314"><p data-reactid="315"><!-- react-text: 316 -->Double column transfer choice box.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="317"><span data-reactid="318"><!-- react-text: 319 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="320">#</a></h2><p data-reactid="321"><!-- react-text: 322 -->Transfer the elements between two columns in an intuitive and efficient way.<!-- /react-text --></p><p data-reactid="323"><!-- react-text: 324 -->One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in.<!-- /react-text --></p></section><h2 data-reactid="325"><span data-reactid="326">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="327"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="328"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="329"><section class="code-box" id="components-transfer-demo-basic" data-reactid="330"><section class="code-box-demo" data-reactid="331"><div class="ant-transfer" data-reactid="332"><div class="ant-transfer-list" data-reactid="333"><div class="ant-transfer-list-header" data-reactid="334"><label class="ant-checkbox-wrapper" data-reactid="335"><span class="ant-checkbox" data-reactid="336"><input type="checkbox" class="ant-checkbox-input" data-reactid="337"/><span class="ant-checkbox-inner" data-reactid="338"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="339"><span data-reactid="340"><!-- react-text: 341 -->14<!-- /react-text --><!-- react-text: 342 --> <!-- /react-text --><!-- react-text: 343 -->items<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="344">Source</span></span></div><div class="ant-transfer-list-body" data-reactid="345"><ul class="ant-transfer-list-content" data-reactid="346"><div class="LazyLoad" style="height:32px;" data-reactid="347"></div><div class="LazyLoad" style="height:32px;" data-reactid="348"></div><div class="LazyLoad" style="height:32px;" data-reactid="349"></div><div class="LazyLoad" style="height:32px;" data-reactid="350"></div><div class="LazyLoad" style="height:32px;" data-reactid="351"></div><div class="LazyLoad" style="height:32px;" data-reactid="352"></div><div class="LazyLoad" style="height:32px;" data-reactid="353"></div><div class="LazyLoad" style="height:32px;" data-reactid="354"></div><div class="LazyLoad" style="height:32px;" data-reactid="355"></div><div class="LazyLoad" style="height:32px;" data-reactid="356"></div><div class="LazyLoad" style="height:32px;" data-reactid="357"></div><div class="LazyLoad" style="height:32px;" data-reactid="358"></div><div class="LazyLoad" style="height:32px;" data-reactid="359"></div><div class="LazyLoad" style="height:32px;" data-reactid="360"></div></ul><div class="ant-transfer-list-body-not-found" data-reactid="361">Not Found</div></div></div><div class="ant-transfer-operation" data-reactid="362"><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="363"><span data-reactid="364"><i class="anticon anticon-left" data-reactid="365"></i><!-- react-text: 366 --><!-- /react-text --></span></button><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="367"><span data-reactid="368"><!-- react-text: 369 --><!-- /react-text --><i class="anticon anticon-right" data-reactid="370"></i></span></button></div><div class="ant-transfer-list" data-reactid="371"><div class="ant-transfer-list-header" data-reactid="372"><label class="ant-checkbox-wrapper" data-reactid="373"><span class="ant-checkbox" data-reactid="374"><input type="checkbox" class="ant-checkbox-input" data-reactid="375"/><span class="ant-checkbox-inner" data-reactid="376"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="377"><span data-reactid="378"><!-- react-text: 379 -->6<!-- /react-text --><!-- react-text: 380 --> <!-- /react-text --><!-- react-text: 381 -->items<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="382">Target</span></span></div><div class="ant-transfer-list-body" data-reactid="383"><ul class="ant-transfer-list-content" data-reactid="384"><div class="LazyLoad" style="height:32px;" data-reactid="385"></div><div class="LazyLoad" style="height:32px;" data-reactid="386"></div><div class="LazyLoad" style="height:32px;" data-reactid="387"></div><div class="LazyLoad" style="height:32px;" data-reactid="388"></div><div class="LazyLoad" style="height:32px;" data-reactid="389"></div><div class="LazyLoad" style="height:32px;" data-reactid="390"></div></ul><div class="ant-transfer-list-body-not-found" data-reactid="391">Not Found</div></div></div></div></section><section class="code-box-meta markdown" data-reactid="392"><div class="code-box-title" data-reactid="393"><a href="#components-transfer-demo-basic" data-reactid="394">Basic</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/transfer/demo/basic.md" data-reactid="395"><i class="anticon anticon-edit" data-reactid="396"></i></a></div><div data-reactid="397"><p data-reactid="398"><!-- react-text: 399 -->The most basic usage of <!-- /react-text --><code data-reactid="400"><!-- react-text: 401 -->Transfer<!-- /react-text --></code><!-- react-text: 402 --> involves providing the source data and target keys arrays, plus the rendering and some callback functions.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="403"></i></section><section class="highlight-wrapper" data-reactid="404"><div class="highlight" data-reactid="405"><i class="anticon anticon-copy code-box-code-copy" data-reactid="406"></i><pre class="language-jsx" data-reactid="407"><code data-reactid="408"><span class="token keyword">import</span> <span class="token punctuation">{</span> Transfer <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">const</span> mockData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
mockData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
key<span class="token punctuation">:</span> i<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>
|
||
title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`description of content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
disabled<span class="token punctuation">:</span> i <span class="token operator">%</span> <span class="token number">3</span> <span class="token operator"><</span> <span class="token number">1</span><span class="token punctuation">,</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">const</span> targetKeys <span class="token operator">=</span> mockData
|
||
<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">+</span>item<span class="token punctuation">.</span>key <span class="token operator">%</span> <span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>key<span class="token punctuation">)</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>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
targetKeys<span class="token punctuation">,</span>
|
||
selectedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>nextTargetKeys<span class="token punctuation">,</span> direction<span class="token punctuation">,</span> moveKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> targetKeys<span class="token punctuation">:</span> nextTargetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'targetKeys: '</span><span class="token punctuation">,</span> targetKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'direction: '</span><span class="token punctuation">,</span> direction<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'moveKeys: '</span><span class="token punctuation">,</span> moveKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
handleSelectChange <span class="token operator">=</span> <span class="token punctuation">(</span>sourceSelectedKeys<span class="token punctuation">,</span> targetSelectedKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> selectedKeys<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>sourceSelectedKeys<span class="token punctuation">,</span> <span class="token operator">...</span>targetSelectedKeys<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'sourceSelectedKeys: '</span><span class="token punctuation">,</span> sourceSelectedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'targetSelectedKeys: '</span><span class="token punctuation">,</span> targetSelectedKeys<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
handleScroll <span class="token operator">=</span> <span class="token punctuation">(</span>direction<span class="token punctuation">,</span> e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'direction:'</span><span class="token punctuation">,</span> direction<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'target:'</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<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">const</span> state <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<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>Transfer</span>
|
||
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>mockData<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">titles</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'Source'</span><span class="token punctuation">,</span> <span class="token string">'Target'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">targetKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>targetKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">selectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>state<span class="token punctuation">.</span>selectedKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onSelectChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleSelectChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onScroll</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleScroll<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></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> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-transfer-demo-search" data-reactid="409"><section class="code-box-demo" data-reactid="410"><div class="ant-transfer" data-reactid="411"><div class="ant-transfer-list" data-reactid="412"><div class="ant-transfer-list-header" data-reactid="413"><label class="ant-checkbox-wrapper" data-reactid="414"><span class="ant-checkbox" data-reactid="415"><input type="checkbox" class="ant-checkbox-input" data-reactid="416"/><span class="ant-checkbox-inner" data-reactid="417"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="418"><span data-reactid="419"><!-- react-text: 420 -->0<!-- /react-text --><!-- react-text: 421 --> <!-- /react-text --><!-- react-text: 422 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="423"></span></span></div><div class="ant-transfer-list-body ant-transfer-list-body-with-search" data-reactid="424"><div class="ant-transfer-list-body-search-wrapper" data-reactid="425"><div data-reactid="426"><input type="text" placeholder="Search here" class="ant-input ant-transfer-list-search" value="" data-reactid="427"/><span class="ant-transfer-list-search-action" data-reactid="428"><i class="anticon anticon-search" data-reactid="429"></i></span></div></div><ul class="ant-transfer-list-content" data-reactid="430"></ul><div class="ant-transfer-list-body-not-found" data-reactid="431">Not Found</div></div></div><div class="ant-transfer-operation" data-reactid="432"><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="433"><span data-reactid="434"><i class="anticon anticon-left" data-reactid="435"></i><!-- react-text: 436 --><!-- /react-text --></span></button><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="437"><span data-reactid="438"><!-- react-text: 439 --><!-- /react-text --><i class="anticon anticon-right" data-reactid="440"></i></span></button></div><div class="ant-transfer-list" data-reactid="441"><div class="ant-transfer-list-header" data-reactid="442"><label class="ant-checkbox-wrapper" data-reactid="443"><span class="ant-checkbox" data-reactid="444"><input type="checkbox" class="ant-checkbox-input" data-reactid="445"/><span class="ant-checkbox-inner" data-reactid="446"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="447"><span data-reactid="448"><!-- react-text: 449 -->0<!-- /react-text --><!-- react-text: 450 --> <!-- /react-text --><!-- react-text: 451 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="452"></span></span></div><div class="ant-transfer-list-body ant-transfer-list-body-with-search" data-reactid="453"><div class="ant-transfer-list-body-search-wrapper" data-reactid="454"><div data-reactid="455"><input type="text" placeholder="Search here" class="ant-input ant-transfer-list-search" value="" data-reactid="456"/><span class="ant-transfer-list-search-action" data-reactid="457"><i class="anticon anticon-search" data-reactid="458"></i></span></div></div><ul class="ant-transfer-list-content" data-reactid="459"></ul><div class="ant-transfer-list-body-not-found" data-reactid="460">Not Found</div></div></div></div></section><section class="code-box-meta markdown" data-reactid="461"><div class="code-box-title" data-reactid="462"><a href="#components-transfer-demo-search" data-reactid="463">Search</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/transfer/demo/search.md" data-reactid="464"><i class="anticon anticon-edit" data-reactid="465"></i></a></div><div data-reactid="466"><p data-reactid="467"><!-- react-text: 468 -->Transfer with a search box.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="469"></i></section><section class="highlight-wrapper" data-reactid="470"><div class="highlight" data-reactid="471"><i class="anticon anticon-copy code-box-code-copy" data-reactid="472"></i><pre class="language-jsx" data-reactid="473"><code data-reactid="474"><span class="token keyword">import</span> <span class="token punctuation">{</span> Transfer <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>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
mockData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
targetKeys<span class="token punctuation">:</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">componentDidMount</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">getMock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
getMock <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> targetKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> mockData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
key<span class="token punctuation">:</span> i<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>
|
||
title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`description of content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
chosen<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>chosen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
targetKeys<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
mockData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<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> mockData<span class="token punctuation">,</span> targetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
filterOption <span class="token operator">=</span> <span class="token punctuation">(</span>inputValue<span class="token punctuation">,</span> option<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> option<span class="token punctuation">.</span>description<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>inputValue<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> targetKeys <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>Transfer</span>
|
||
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><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>mockData<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">showSearch</span>
|
||
<span class="token attr-name">filterOption</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>filterOption<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">targetKeys</span><span class="token script language-javascript"><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>targetKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>title<span class="token punctuation">}</span></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> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-transfer-demo-advanced" data-reactid="475"><section class="code-box-demo" data-reactid="476"><div class="ant-transfer" data-reactid="477"><div class="ant-transfer-list ant-transfer-list-with-footer" style="width:250px;height:300px;" data-reactid="478"><div class="ant-transfer-list-header" data-reactid="479"><label class="ant-checkbox-wrapper" data-reactid="480"><span class="ant-checkbox" data-reactid="481"><input type="checkbox" class="ant-checkbox-input" data-reactid="482"/><span class="ant-checkbox-inner" data-reactid="483"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="484"><span data-reactid="485"><!-- react-text: 486 -->0<!-- /react-text --><!-- react-text: 487 --> <!-- /react-text --><!-- react-text: 488 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="489"></span></span></div><div class="ant-transfer-list-body ant-transfer-list-body-with-search" data-reactid="490"><div class="ant-transfer-list-body-search-wrapper" data-reactid="491"><div data-reactid="492"><input type="text" placeholder="Search here" class="ant-input ant-transfer-list-search" value="" data-reactid="493"/><span class="ant-transfer-list-search-action" data-reactid="494"><i class="anticon anticon-search" data-reactid="495"></i></span></div></div><ul class="ant-transfer-list-content" data-reactid="496"></ul><div class="ant-transfer-list-body-not-found" data-reactid="497">Not Found</div></div><div class="ant-transfer-list-footer" data-reactid="498"><button style="float:right;margin:5px;" type="button" class="ant-btn ant-btn-sm" data-reactid="499"><span data-reactid="500">reload</span></button></div></div><div class="ant-transfer-operation" data-reactid="501"><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="502"><span data-reactid="503"><i class="anticon anticon-left" data-reactid="504"></i><!-- react-text: 505 -->to left<!-- /react-text --></span></button><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="506"><span data-reactid="507"><!-- react-text: 508 -->to right<!-- /react-text --><i class="anticon anticon-right" data-reactid="509"></i></span></button></div><div class="ant-transfer-list ant-transfer-list-with-footer" style="width:250px;height:300px;" data-reactid="510"><div class="ant-transfer-list-header" data-reactid="511"><label class="ant-checkbox-wrapper" data-reactid="512"><span class="ant-checkbox" data-reactid="513"><input type="checkbox" class="ant-checkbox-input" data-reactid="514"/><span class="ant-checkbox-inner" data-reactid="515"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="516"><span data-reactid="517"><!-- react-text: 518 -->0<!-- /react-text --><!-- react-text: 519 --> <!-- /react-text --><!-- react-text: 520 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="521"></span></span></div><div class="ant-transfer-list-body ant-transfer-list-body-with-search" data-reactid="522"><div class="ant-transfer-list-body-search-wrapper" data-reactid="523"><div data-reactid="524"><input type="text" placeholder="Search here" class="ant-input ant-transfer-list-search" value="" data-reactid="525"/><span class="ant-transfer-list-search-action" data-reactid="526"><i class="anticon anticon-search" data-reactid="527"></i></span></div></div><ul class="ant-transfer-list-content" data-reactid="528"></ul><div class="ant-transfer-list-body-not-found" data-reactid="529">Not Found</div></div><div class="ant-transfer-list-footer" data-reactid="530"><button style="float:right;margin:5px;" type="button" class="ant-btn ant-btn-sm" data-reactid="531"><span data-reactid="532">reload</span></button></div></div></div></section><section class="code-box-meta markdown" data-reactid="533"><div class="code-box-title" data-reactid="534"><a href="#components-transfer-demo-advanced" data-reactid="535">Advanced</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/transfer/demo/advanced.md" data-reactid="536"><i class="anticon anticon-edit" data-reactid="537"></i></a></div><div data-reactid="538"><p data-reactid="539"><!-- react-text: 540 -->Advanced Usage of Transfer.<!-- /react-text --></p><p data-reactid="541"><!-- react-text: 542 -->You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="543"></i></section><section class="highlight-wrapper" data-reactid="544"><div class="highlight" data-reactid="545"><i class="anticon anticon-copy code-box-code-copy" data-reactid="546"></i><pre class="language-jsx" data-reactid="547"><code data-reactid="548"><span class="token keyword">import</span> <span class="token punctuation">{</span> Transfer<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>
|
||
|
||
<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>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
mockData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
targetKeys<span class="token punctuation">:</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">componentDidMount</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">getMock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
getMock <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> targetKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> mockData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
key<span class="token punctuation">:</span> i<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>
|
||
title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`description of content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
chosen<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>chosen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
targetKeys<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
mockData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<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> mockData<span class="token punctuation">,</span> targetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>targetKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> targetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
renderFooter <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>Button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></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> float<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span> margin<span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>getMock<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
reload
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</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 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>Transfer</span>
|
||
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><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>mockData<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">showSearch</span>
|
||
<span class="token attr-name">listStyle</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">250</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">operations</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'to right'</span><span class="token punctuation">,</span> <span class="token string">'to left'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">targetKeys</span><span class="token script language-javascript"><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>targetKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>description<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">footer</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderFooter<span class="token punctuation">}</span></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> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-transfer-demo-custom-item" data-reactid="549"><section class="code-box-demo" data-reactid="550"><div class="ant-transfer" data-reactid="551"><div class="ant-transfer-list" style="width:300px;height:300px;" data-reactid="552"><div class="ant-transfer-list-header" data-reactid="553"><label class="ant-checkbox-wrapper" data-reactid="554"><span class="ant-checkbox" data-reactid="555"><input type="checkbox" class="ant-checkbox-input" data-reactid="556"/><span class="ant-checkbox-inner" data-reactid="557"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="558"><span data-reactid="559"><!-- react-text: 560 -->0<!-- /react-text --><!-- react-text: 561 --> <!-- /react-text --><!-- react-text: 562 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="563"></span></span></div><div class="ant-transfer-list-body" data-reactid="564"><ul class="ant-transfer-list-content" data-reactid="565"></ul><div class="ant-transfer-list-body-not-found" data-reactid="566">Not Found</div></div></div><div class="ant-transfer-operation" data-reactid="567"><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="568"><span data-reactid="569"><i class="anticon anticon-left" data-reactid="570"></i><!-- react-text: 571 --><!-- /react-text --></span></button><button disabled="" type="button" class="ant-btn ant-btn-primary ant-btn-sm" data-reactid="572"><span data-reactid="573"><!-- react-text: 574 --><!-- /react-text --><i class="anticon anticon-right" data-reactid="575"></i></span></button></div><div class="ant-transfer-list" style="width:300px;height:300px;" data-reactid="576"><div class="ant-transfer-list-header" data-reactid="577"><label class="ant-checkbox-wrapper" data-reactid="578"><span class="ant-checkbox" data-reactid="579"><input type="checkbox" class="ant-checkbox-input" data-reactid="580"/><span class="ant-checkbox-inner" data-reactid="581"></span></span></label><span class="ant-transfer-list-header-selected" data-reactid="582"><span data-reactid="583"><!-- react-text: 584 -->0<!-- /react-text --><!-- react-text: 585 --> <!-- /react-text --><!-- react-text: 586 -->item<!-- /react-text --></span><span class="ant-transfer-list-header-title" data-reactid="587"></span></span></div><div class="ant-transfer-list-body" data-reactid="588"><ul class="ant-transfer-list-content" data-reactid="589"></ul><div class="ant-transfer-list-body-not-found" data-reactid="590">Not Found</div></div></div></div></section><section class="code-box-meta markdown" data-reactid="591"><div class="code-box-title" data-reactid="592"><a href="#components-transfer-demo-custom-item" data-reactid="593">Custom datasource</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/transfer/demo/custom-item.md" data-reactid="594"><i class="anticon anticon-edit" data-reactid="595"></i></a></div><div data-reactid="596"><p data-reactid="597"><!-- react-text: 598 -->Custom each Transfer Item, and in this way you can render a complex datasource.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="599"></i></section><section class="highlight-wrapper" data-reactid="600"><div class="highlight" data-reactid="601"><i class="anticon anticon-copy code-box-code-copy" data-reactid="602"></i><pre class="language-jsx" data-reactid="603"><code data-reactid="604"><span class="token keyword">import</span> <span class="token punctuation">{</span> Transfer <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>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
mockData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
targetKeys<span class="token punctuation">:</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">componentDidMount</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">getMock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
getMock <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> targetKeys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> mockData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
key<span class="token punctuation">:</span> i<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>
|
||
title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`description of content</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>
|
||
chosen<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>chosen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
targetKeys<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
mockData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<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> mockData<span class="token punctuation">,</span> targetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
handleChange <span class="token operator">=</span> <span class="token punctuation">(</span>targetKeys<span class="token punctuation">,</span> direction<span class="token punctuation">,</span> moveKeys<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>targetKeys<span class="token punctuation">,</span> direction<span class="token punctuation">,</span> moveKeys<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> targetKeys <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
renderItem <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> customLabel <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>custom-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">-</span> <span class="token punctuation">{</span>item<span class="token punctuation">.</span>description<span class="token punctuation">}</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
label<span class="token punctuation">:</span> customLabel<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// for displayed item</span>
|
||
value<span class="token punctuation">:</span> item<span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// for title and filter matching</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>Transfer</span>
|
||
<span class="token attr-name">dataSource</span><span class="token script language-javascript"><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>mockData<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">listStyle</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">300</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">targetKeys</span><span class="token script language-javascript"><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>targetKeys<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">render</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderItem<span class="token punctuation">}</span></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> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="605"><h2 id="API" data-reactid="606"><span data-reactid="607"><!-- react-text: 608 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="609">#</a></h2><table data-reactid="610"><thead data-reactid="611"><tr data-reactid="612"><th data-reactid="613"><!-- react-text: 614 -->Property<!-- /react-text --></th><th data-reactid="615"><!-- react-text: 616 -->Description<!-- /react-text --></th><th data-reactid="617"><!-- react-text: 618 -->Type<!-- /react-text --></th><th data-reactid="619"><!-- react-text: 620 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="621"><tr data-reactid="622"><td data-reactid="623"><!-- react-text: 624 -->dataSource<!-- /react-text --></td><td data-reactid="625"><!-- react-text: 626 -->Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in <!-- /react-text --><code data-reactid="627"><!-- react-text: 628 -->targetKeys<!-- /react-text --></code><!-- react-text: 629 --> prop.<!-- /react-text --></td><td data-reactid="630"><a href="https://git.io/vMM64" data-reactid="631"><!-- react-text: 632 -->TransferItem<!-- /react-text --></a><!-- react-text: 633 -->[]<!-- /react-text --></td><td data-reactid="634"><!-- react-text: 635 -->[]<!-- /react-text --></td></tr><tr data-reactid="636"><td data-reactid="637"><!-- react-text: 638 -->render<!-- /react-text --></td><td data-reactid="639"><!-- react-text: 640 -->The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record.<!-- /react-text --></td><td data-reactid="641"><!-- react-text: 642 -->Function(record)<!-- /react-text --></td><td data-reactid="643"></td></tr><tr data-reactid="644"><td data-reactid="645"><!-- react-text: 646 -->targetKeys<!-- /react-text --></td><td data-reactid="647"><!-- react-text: 648 -->A set of keys of elements that are listed on the right column.<!-- /react-text --></td><td data-reactid="649"><!-- react-text: 650 -->string[]<!-- /react-text --></td><td data-reactid="651"><!-- react-text: 652 -->[]<!-- /react-text --></td></tr><tr data-reactid="653"><td data-reactid="654"><!-- react-text: 655 -->selectedKeys<!-- /react-text --></td><td data-reactid="656"><!-- react-text: 657 -->A set of keys of selected items.<!-- /react-text --></td><td data-reactid="658"><!-- react-text: 659 -->string[]<!-- /react-text --></td><td data-reactid="660"><!-- react-text: 661 -->[]<!-- /react-text --></td></tr><tr data-reactid="662"><td data-reactid="663"><!-- react-text: 664 -->onChange<!-- /react-text --></td><td data-reactid="665"><!-- react-text: 666 -->A callback function that is executed when the transfer between columns is complete.<!-- /react-text --></td><td data-reactid="667"><!-- react-text: 668 -->(targetKeys, direction, moveKeys): void<!-- /react-text --></td><td data-reactid="669"></td></tr><tr data-reactid="670"><td data-reactid="671"><!-- react-text: 672 -->onSelectChange<!-- /react-text --></td><td data-reactid="673"><!-- react-text: 674 -->A callback function which is executed when selected items are changed.<!-- /react-text --></td><td data-reactid="675"><!-- react-text: 676 -->(sourceSelectedKeys, targetSelectedKeys): void<!-- /react-text --></td><td data-reactid="677"></td></tr><tr data-reactid="678"><td data-reactid="679"><!-- react-text: 680 -->onScroll<!-- /react-text --></td><td data-reactid="681"><!-- react-text: 682 -->A callback function which is executed when scroll options list<!-- /react-text --></td><td data-reactid="683"><!-- react-text: 684 -->(direction, event): void<!-- /react-text --></td><td data-reactid="685"></td></tr><tr data-reactid="686"><td data-reactid="687"><!-- react-text: 688 -->listStyle<!-- /react-text --></td><td data-reactid="689"><!-- react-text: 690 -->A custom CSS style used for rendering the transfer columns.<!-- /react-text --></td><td data-reactid="691"><!-- react-text: 692 -->object<!-- /react-text --></td><td data-reactid="693"></td></tr><tr data-reactid="694"><td data-reactid="695"><!-- react-text: 696 -->className<!-- /react-text --></td><td data-reactid="697"><!-- react-text: 698 -->A custom CSS class.<!-- /react-text --></td><td data-reactid="699"><!-- react-text: 700 -->string<!-- /react-text --></td><td data-reactid="701"><!-- react-text: 702 -->['', '']<!-- /react-text --></td></tr><tr data-reactid="703"><td data-reactid="704"><!-- react-text: 705 -->titles<!-- /react-text --></td><td data-reactid="706"><!-- react-text: 707 -->A set of titles that are sorted from left to right.<!-- /react-text --></td><td data-reactid="708"><!-- react-text: 709 -->string[]<!-- /react-text --></td><td data-reactid="710"><!-- react-text: 711 -->-<!-- /react-text --></td></tr><tr data-reactid="712"><td data-reactid="713"><!-- react-text: 714 -->operations<!-- /react-text --></td><td data-reactid="715"><!-- react-text: 716 -->A set of operations that are sorted from top to bottom.<!-- /react-text --></td><td data-reactid="717"><!-- react-text: 718 -->string[]<!-- /react-text --></td><td data-reactid="719"><!-- react-text: 720 -->[]<!-- /react-text --></td></tr><tr data-reactid="721"><td data-reactid="722"><!-- react-text: 723 -->showSearch<!-- /react-text --></td><td data-reactid="724"><!-- react-text: 725 -->If included, a search box is shown on each column.<!-- /react-text --></td><td data-reactid="726"><!-- react-text: 727 -->boolean<!-- /react-text --></td><td data-reactid="728"><!-- react-text: 729 -->false<!-- /react-text --></td></tr><tr data-reactid="730"><td data-reactid="731"><!-- react-text: 732 -->filterOption<!-- /react-text --></td><td data-reactid="733"><!-- react-text: 734 -->A function to determine whether an item should show in search result list<!-- /react-text --></td><td data-reactid="735"><!-- react-text: 736 -->(inputValue, option): boolean<!-- /react-text --></td><td data-reactid="737"></td></tr><tr data-reactid="738"><td data-reactid="739"><!-- react-text: 740 -->searchPlaceholder<!-- /react-text --></td><td data-reactid="741"><!-- react-text: 742 -->The hint text of the search box.<!-- /react-text --></td><td data-reactid="743"><!-- react-text: 744 -->string<!-- /react-text --></td><td data-reactid="745"><!-- react-text: 746 -->'Search here'<!-- /react-text --></td></tr><tr data-reactid="747"><td data-reactid="748"><!-- react-text: 749 -->notFoundContent<!-- /react-text --></td><td data-reactid="750"><!-- react-text: 751 -->Text to display when a column is empty.<!-- /react-text --></td><td data-reactid="752"><!-- react-text: 753 -->string<!-- /react-text --><!-- react-text: 754 -->|<!-- /react-text --><!-- react-text: 755 -->ReactNode<!-- /react-text --></td><td data-reactid="756"><!-- react-text: 757 -->'The list is empty'<!-- /react-text --></td></tr><tr data-reactid="758"><td data-reactid="759"><!-- react-text: 760 -->footer<!-- /react-text --></td><td data-reactid="761"><!-- react-text: 762 -->A function used for rendering the footer.<!-- /react-text --></td><td data-reactid="763"><!-- react-text: 764 -->(props): ReactNode<!-- /react-text --></td><td data-reactid="765"></td></tr><tr data-reactid="766"><td data-reactid="767"><!-- react-text: 768 -->lazy<!-- /react-text --></td><td data-reactid="769"><!-- react-text: 770 -->property of <!-- /react-text --><a href="https://github.com/loktar00/react-lazy-load" data-reactid="771"><!-- react-text: 772 -->react-lazy-load<!-- /react-text --></a><!-- react-text: 773 --> for lazy rendering items<!-- /react-text --></td><td data-reactid="774"><!-- react-text: 775 -->object<!-- /react-text --></td><td data-reactid="776"><code data-reactid="777"><!-- react-text: 778 -->{ height: 32, offset: 32 }<!-- /react-text --></code></td></tr><tr data-reactid="779"><td data-reactid="780"><!-- react-text: 781 -->onSearchChange<!-- /react-text --></td><td data-reactid="782"><!-- react-text: 783 -->A callback function which is executed when search field are changed<!-- /react-text --></td><td data-reactid="784"><!-- react-text: 785 -->(direction: 'left'<!-- /react-text --></td><td data-reactid="786"><!-- react-text: 787 -->'right', event: Event): void<!-- /react-text --></td><td data-reactid="788"><!-- react-text: 789 -->-<!-- /react-text --></td></tr></tbody></table><h2 id="Warning" data-reactid="790"><span data-reactid="791"><!-- react-text: 792 -->Warning<!-- /react-text --></span><a href="#Warning" class="anchor" data-reactid="793">#</a></h2><p data-reactid="794"><!-- react-text: 795 -->According the <!-- /react-text --><a href="http://facebook.github.io/react/docs/lists-and-keys.html#keys" data-reactid="796"><!-- react-text: 797 -->standard<!-- /react-text --></a><!-- react-text: 798 --> of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in <!-- /react-text --><code data-reactid="799"><!-- react-text: 800 -->dataSource<!-- /react-text --></code><!-- react-text: 801 --> array. By default, <!-- /react-text --><code data-reactid="802"><!-- react-text: 803 -->key<!-- /react-text --></code><!-- react-text: 804 --> property is used as an unique identifier.<!-- /react-text --></p><p data-reactid="805"><!-- react-text: 806 -->If there's no <!-- /react-text --><code data-reactid="807"><!-- react-text: 808 -->key<!-- /react-text --></code><!-- react-text: 809 --> in your data, you should use <!-- /react-text --><code data-reactid="810"><!-- react-text: 811 -->rowKey<!-- /react-text --></code><!-- react-text: 812 --> to specify the key that will be used for uniquely identify each element.<!-- /react-text --></p><pre class="language-jsx" data-reactid="813"><code data-reactid="814"><span class="token comment" spellcheck="true">// eg. your primary key is `uid`</span>
|
||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Transfer</span> <span class="token attr-name">rowKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>record <span class="token operator">=</span><span class="token operator">></span> record<span class="token punctuation">.</span>uid<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span></code></pre></section></article></div></div><div class="ant-row" data-reactid="815"><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="816"><section class="prev-next-nav" data-reactid="817"><a class="prev-page" href="/components/time-picker/" data-reactid="818"><span data-reactid="819">TimePicker</span><span class="chinese" data-reactid="820"></span></a><a class="next-page" href="/components/upload/" data-reactid="821"><span data-reactid="822">Upload</span><span class="chinese" data-reactid="823"></span></a></section></div></div></div><footer id="footer" data-reactid="824"><ul data-reactid="825"><li data-reactid="826"><h2 data-reactid="827"><i class="anticon anticon-github" data-reactid="828"></i><!-- react-text: 829 --> GitHub<!-- /react-text --></h2><div data-reactid="830"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="831"><span data-reactid="832">Repository</span></a></div><div data-reactid="833"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="834"><span data-reactid="835">Customize Theme</span></a></div><div data-reactid="836"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="837"><span data-reactid="838">Awesome Ant Design</span></a></div></li><li data-reactid="839"><h2 data-reactid="840"><i class="anticon anticon-link" data-reactid="841"></i><!-- react-text: 842 --> <!-- /react-text --><span data-reactid="843">Links</span></h2><div data-reactid="844"><a href="http://mobile.ant.design" data-reactid="845">Ant Design Mobile</a><span data-reactid="846"> - </span><span data-reactid="847">Mobile UI</span></div><div data-reactid="848"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="849">dva</a><!-- react-text: 850 --> - <!-- /react-text --><span data-reactid="851">Framework</span></div><div data-reactid="852"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="853">dva-cli</a><!-- react-text: 854 --> -<!-- /react-text --><span data-reactid="855">Developer Tools</span></div><div data-reactid="856"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="857">Egg</a><span data-reactid="858"> - </span><span data-reactid="859">Enterprise Node Framework</span></div><div data-reactid="860"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="861">AntV</a><span data-reactid="862"> - </span><span data-reactid="863">Data Visualization</span></div><div data-reactid="864"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="865">Ant Motion</a><span data-reactid="866"> - </span><span data-reactid="867">Motion Soluction</span></div><div data-reactid="868"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="869">AntD Library</a><span data-reactid="870"> - </span><span data-reactid="871">Axure library</span></div><div data-reactid="872"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="873">Ant UX</a><span data-reactid="874"> - </span><span data-reactid="875">Sitemap Template</span></div></li><li data-reactid="876"><h2 data-reactid="877"><i class="anticon anticon-customer-service" data-reactid="878"></i><!-- react-text: 879 --> <!-- /react-text --><span data-reactid="880">Community</span></h2><div data-reactid="881"><a href="/changelog" data-reactid="882"><span data-reactid="883">Change Log</span></a></div><div data-reactid="884"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="885"><span data-reactid="886">FAQ</span></a></div><div data-reactid="887"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="888"><span data-reactid="889">Chat Room</span></a></div><div data-reactid="890"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="891"><span data-reactid="892">Bug Report</span></a></div><div data-reactid="893"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="894"><span data-reactid="895">StackOverflow</span></a></div><div data-reactid="896"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="897"><span data-reactid="898">SegmentFault</span></a></div></li><li data-reactid="899"><h2 data-reactid="900"><!-- react-text: 901 -->Copyright © <!-- /react-text --><!-- react-text: 902 -->2017<!-- /react-text --></h2><div data-reactid="903"><span data-reactid="904">Created by Ant UED</span></div><div data-reactid="905"><!-- react-text: 906 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="907">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|