mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-16 08:16:26 +10:00
81 lines
42 KiB
HTML
81 lines
42 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="Ant Design - An enterprise-class UI design language and React-based implementation">
|
||
<title>Ant Design - One Design Language</title>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
|
||
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1363455143"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="docs/react/introduce" data-reactid="47">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="50"><a href="docs/react/install" data-reactid="51">Installation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="docs/react/practical-projects" data-reactid="53">Practical Projects</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="changelog" data-reactid="55">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="56"><a href="docs/react/upgrade-notes" data-reactid="57">Upgrade Notes</a></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="58"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1479464064761_4" aria-haspopup="true" data-reactid="59"><h4 data-reactid="60">Components</h4></div><!-- react-empty: 61 --></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="62"><article class="markdown" data-reactid="63"><h1 data-reactid="64"><!-- react-text: 65 -->Upgrade Notes<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/react/upgrade-notes.md" data-reactid="66"><i class="anticon anticon-edit" data-reactid="67"></i></a></h1><section class="markdown" data-reactid="68"><p data-reactid="69"><!-- react-text: 70 -->此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 <!-- /react-text --><a href="/changelog" data-reactid="71">更新日志</a><!-- react-text: 72 -->。<!-- /react-text --></p><h2 id="1.x-=>-2.x" data-reactid="73"><span data-reactid="74"><!-- react-text: 75 -->1.x => 2.x<!-- /react-text --></span><a href="#1.x-=>-2.x" class="anchor" data-reactid="76">#</a></h2><p data-reactid="77"><code data-reactid="78"><!-- react-text: 79 -->1.0.0<!-- /react-text --></code><!-- react-text: 80 --> 之后将不再单独提供升级指南，请参考对应版本 <!-- /react-text --><a href="/changelog#2.0.0" data-reactid="81">更新日志</a><!-- react-text: 82 --> 中的 <!-- /react-text --><code data-reactid="83"><!-- react-text: 84 -->不兼容改动<!-- /react-text --></code><!-- react-text: 85 --> 部分进行升级。<!-- /react-text --></p><h2 id="0.12-=>-1.x" data-reactid="86"><span data-reactid="87"><!-- react-text: 88 -->0.12 => 1.x<!-- /react-text --></span><a href="#0.12-=>-1.x" class="anchor" data-reactid="89">#</a></h2><p data-reactid="90"><code data-reactid="91"><!-- react-text: 92 -->1.0.0<!-- /react-text --></code><!-- react-text: 93 --> 之后将不再单独提供升级指南，请参考对应版本 <!-- /react-text --><a href="/changelog#1.0.0" data-reactid="94">更新日志</a><!-- react-text: 95 --> 中的 <!-- /react-text --><code data-reactid="96"><!-- react-text: 97 -->不兼容改动<!-- /react-text --></code><!-- react-text: 98 --> 部分进行升级。<!-- /react-text --></p><h2 id="0.11-=>-0.12" data-reactid="99"><span data-reactid="100"><!-- react-text: 101 -->0.11 => 0.12<!-- /react-text --></span><a href="#0.11-=>-0.12" class="anchor" data-reactid="102">#</a></h2></section><section class="toc" data-reactid="103"><ul data-reactid="104"><li data-reactid="105"><a href="#0.10-=>-0.11" data-reactid="106"><!-- react-text: 107 -->0.10 => 0.11<!-- /react-text --></a></li><li data-reactid="108"><a href="#0.9-=>-0.10" data-reactid="109"><!-- react-text: 110 -->0.9 => 0.10<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="111"><h3 id="使用-Form-提供的校验功能代替-Validation" data-reactid="112"><span data-reactid="113"><!-- react-text: 114 -->使用 Form 提供的校验功能代替 Validation<!-- /react-text --></span><a href="#使用-Form-提供的校验功能代替-Validation" class="anchor" data-reactid="115">#</a></h3><p data-reactid="116"><!-- react-text: 117 -->Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子（<!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-basic" data-reactid="118"><!-- react-text: 119 -->#1<!-- /react-text --></a><!-- react-text: 120 --> <!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-other" data-reactid="121"><!-- react-text: 122 -->#2<!-- /react-text --></a><!-- react-text: 123 --> <!-- /react-text --><a href="http://ant.design/components/form/#demo-validate-customized" data-reactid="124"><!-- react-text: 125 -->#3<!-- /react-text --></a><!-- react-text: 126 -->）。<!-- /react-text --></p><h3 id="Progress-format-属性的值改为函数" data-reactid="127"><span data-reactid="128"><!-- react-text: 129 -->Progress <!-- /react-text --><code data-reactid="130"><!-- react-text: 131 -->format<!-- /react-text --></code><!-- react-text: 132 --> 属性的值改为函数<!-- /react-text --></span><a href="#Progress-format-属性的值改为函数" class="anchor" data-reactid="133">#</a></h3><p data-reactid="134"><!-- react-text: 135 -->把使用了 <!-- /react-text --><code data-reactid="136"><!-- react-text: 137 -->format<!-- /react-text --></code><!-- react-text: 138 --> 属性的代码，如：<!-- /react-text --></p><pre class="language-jsx" data-reactid="139"><code data-reactid="140"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Progress.Circle</span> <span class="token attr-name" >percent</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token number" >100</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >format={<Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>check<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >}</span> <span class="token operator" >/</span><span class="token operator" >></span></code></pre><p data-reactid="141"><!-- react-text: 142 -->改为：<!-- /react-text --></p><pre class="language-jsx" data-reactid="143"><code data-reactid="144"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Progress.Circle</span> <span class="token attr-name" >percent</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token number" >100</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >format</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 punctuation" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>check<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >}</span></span> <span class="token punctuation" >/></span></span></code></pre><h3 id="Tree" data-reactid="145"><span data-reactid="146"><!-- react-text: 147 -->Tree<!-- /react-text --></span><a href="#Tree" class="anchor" data-reactid="148">#</a></h3><ul data-reactid="149"><li data-reactid="150"><p data-reactid="151"><code data-reactid="152"><!-- react-text: 153 -->onSelect<!-- /react-text --></code><!-- react-text: 154 --> 回调函数，由原来的<!-- /react-text --><code data-reactid="155"><!-- react-text: 156 -->一个<!-- /react-text --></code><!-- react-text: 157 -->参数，变为<!-- /react-text --><code data-reactid="158"><!-- react-text: 159 -->两个<!-- /react-text --></code><!-- react-text: 160 -->，第一个为<!-- /react-text --><code data-reactid="161"><!-- react-text: 162 -->selectedKeys<!-- /react-text --></code><!-- react-text: 163 -->，第二个参数为原来第一个参数里的其余信息。另外<!-- /react-text --><code data-reactid="164"><!-- react-text: 165 -->selectedKeys<!-- /react-text --></code><!-- react-text: 166 -->里包含了当前选中的节点key，而原来的不包含。<!-- /react-text --></p></li><li data-reactid="167"><p data-reactid="168"><code data-reactid="169"><!-- react-text: 170 -->onCheck<!-- /react-text --></code><!-- react-text: 171 --> 回调函数，由原来的<!-- /react-text --><code data-reactid="172"><!-- react-text: 173 -->一个<!-- /react-text --></code><!-- react-text: 174 -->参数，变为<!-- /react-text --><code data-reactid="175"><!-- react-text: 176 -->两个<!-- /react-text --></code><!-- react-text: 177 -->，第一个为<!-- /react-text --><code data-reactid="178"><!-- react-text: 179 -->checkedKeys<!-- /react-text --></code><!-- react-text: 180 -->，第二个参数为原来第一个参数里的其余信息。另外<!-- /react-text --><code data-reactid="181"><!-- react-text: 182 -->checkedKeys<!-- /react-text --></code><!-- react-text: 183 -->里包含了当前选中的节点key，而原来的不包含（这样免去业务里自己组装key的工作）。<!-- /react-text --></p></li><li data-reactid="184"><p data-reactid="185"><!-- react-text: 186 -->异步API中<!-- /react-text --><code data-reactid="187"><!-- react-text: 188 -->onDataLoaded<!-- /react-text --></code><!-- react-text: 189 -->重命名为<!-- /react-text --><code data-reactid="190"><!-- react-text: 191 -->loadData<!-- /react-text --></code><!-- react-text: 192 -->，其他不用改。<!-- /react-text --></p></li></ul><h2 id="0.10-=>-0.11" data-reactid="193"><span data-reactid="194"><!-- react-text: 195 -->0.10 => 0.11<!-- /react-text --></span><a href="#0.10-=>-0.11" class="anchor" data-reactid="196">#</a></h2><hr data-reactid="197"/><p data-reactid="198"><code data-reactid="199"><!-- react-text: 200 -->0.11.x<!-- /react-text --></code><!-- react-text: 201 --> 版本有大量更新，其中部分为不兼容更新。以下列表为其中不兼容的更新及对应升级方案。如果您在升级过程中遇到下面没有提到的情况，可以到 Github 上面咨询。<!-- /react-text --></p><ul data-reactid="202"><li data-reactid="203"><p data-reactid="204"><code data-reactid="205"><!-- react-text: 206 -->0.11.x<!-- /react-text --></code><!-- react-text: 207 --> 文档：<!-- /react-text --><a href="http://ant.design" data-reactid="208"><!-- react-text: 209 -->http://ant.design<!-- /react-text --></a></p></li><li data-reactid="210"><p data-reactid="211"><code data-reactid="212"><!-- react-text: 213 -->0.10.x<!-- /react-text --></code><!-- react-text: 214 --> 文档：<!-- /react-text --><a href="http://010x.ant.design" data-reactid="215"><!-- react-text: 216 -->http://010x.ant.design<!-- /react-text --></a></p></li></ul><h3 id="默认加载样式" data-reactid="217"><span data-reactid="218"><!-- react-text: 219 -->默认加载样式<!-- /react-text --></span><a href="#默认加载样式" class="anchor" data-reactid="220">#</a></h3><p data-reactid="221"><!-- react-text: 222 -->样式现在不再会在 <!-- /react-text --><code data-reactid="223"><!-- react-text: 224 -->antd<!-- /react-text --></code><!-- react-text: 225 --> 中默认加载，如果升级后没有样式，开发者需要手动自行引入样式。<!-- /react-text --></p><pre class="language-js" data-reactid="226"><code data-reactid="227"><span class="token keyword" >import</span> <span class="token string" >'antd/lib/index.css'</span><span class="token punctuation" >;</span>
|
||
<span class="token comment" spellcheck="true">// 或者</span>
|
||
<span class="token keyword" >import</span> <span class="token string" >'antd/style/index.less'</span><span class="token punctuation" >;</span></code></pre><h3 id="表格远程模式" data-reactid="228"><span data-reactid="229"><!-- react-text: 230 -->表格远程模式<!-- /react-text --></span><a href="#表格远程模式" class="anchor" data-reactid="231">#</a></h3><p data-reactid="232"><code data-reactid="233"><!-- react-text: 234 -->Table<!-- /react-text --></code><!-- react-text: 235 --> 的 <!-- /react-text --><code data-reactid="236"><!-- react-text: 237 -->dataSource<!-- /react-text --></code><!-- react-text: 238 --> 远程模式被移除，用户需要自行实现数据获取方式，ajax 获取数据的演示可以参见 <!-- /react-text --><a href="http://ant.design/components/table/#demo-ajax" data-reactid="239"><!-- react-text: 240 -->演示<!-- /react-text --></a><!-- react-text: 241 -->。<!-- /react-text --></p><h3 id="Timepicker、Datepicker-重命名" data-reactid="242"><span data-reactid="243"><!-- react-text: 244 -->Timepicker、Datepicker 重命名<!-- /react-text --></span><a href="#Timepicker、Datepicker-重命名" class="anchor" data-reactid="245">#</a></h3><p data-reactid="246"><code data-reactid="247"><!-- react-text: 248 -->Timepicker<!-- /react-text --></code><!-- react-text: 249 --> 被重命名为 <!-- /react-text --><code data-reactid="250"><!-- react-text: 251 -->TimePicker<!-- /react-text --></code><!-- react-text: 252 -->，<!-- /react-text --><code data-reactid="253"><!-- react-text: 254 -->Datepicker<!-- /react-text --></code><!-- react-text: 255 --> 被重命名为 <!-- /react-text --><code data-reactid="256"><!-- react-text: 257 -->DatePicker<!-- /react-text --></code><!-- react-text: 258 -->，需要做以下改动：<!-- /react-text --></p><pre class="language-jsx" data-reactid="259"><code data-reactid="260"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Timepicker</span> <span class="token punctuation" >/></span></span> <span class="token operator" >==</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>TimePicker</span> <span class="token punctuation" >/></span></span></code></pre><pre class="language-jsx" data-reactid="261"><code data-reactid="262"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Datepicker</span> <span class="token punctuation" >/></span></span> <span class="token operator" >==</span><span class="token operator" >></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>DatePicker</span> <span class="token punctuation" >/></span></span></code></pre><p data-reactid="263"><!-- react-text: 264 -->相应的，两个组件的文档地址也改为 <!-- /react-text --><a href="/components/date-picker" data-reactid="265">/components/date-picker</a><!-- react-text: 266 --> 和 <!-- /react-text --><a href="/components/time-picker" data-reactid="267">/components/time-picker</a><!-- react-text: 268 -->。<!-- /react-text --></p><h3 id="受控的-DatePicker" data-reactid="269"><span data-reactid="270"><!-- react-text: 271 -->受控的 DatePicker<!-- /react-text --></span><a href="#受控的-DatePicker" class="anchor" data-reactid="272">#</a></h3><p data-reactid="273"><!-- react-text: 274 -->由于 <!-- /react-text --><code data-reactid="275"><!-- react-text: 276 -->DatePicker<!-- /react-text --></code><!-- react-text: 277 --> 已改为 <!-- /react-text --><a href="https://facebook.github.io/react/docs/forms.html#controlled-components" data-reactid="278"><!-- react-text: 279 -->受控组件<!-- /react-text --></a><!-- react-text: 280 -->，所以 <!-- /react-text --><code data-reactid="281"><!-- react-text: 282 -->DatePicker<!-- /react-text --></code><!-- react-text: 283 --> 显示的值必然与其 <!-- /react-text --><code data-reactid="284"><!-- react-text: 285 -->value<!-- /react-text --></code><!-- react-text: 286 --> 一致。<!-- /react-text --></p><p data-reactid="287"><!-- react-text: 288 -->如果无法理解受控组件，只须在发现在选中日期后 <!-- /react-text --><code data-reactid="289"><!-- react-text: 290 -->Datepicker<!-- /react-text --></code><!-- react-text: 291 --> 显示的值不变的情况后，把其 <!-- /react-text --><code data-reactid="292"><!-- react-text: 293 -->value<!-- /react-text --></code><!-- react-text: 294 --> 属性改为 <!-- /react-text --><code data-reactid="295"><!-- react-text: 296 -->defaultValue<!-- /react-text --></code><!-- react-text: 297 --> 即可。<!-- /react-text --></p><h3 id="TimePicker-locale-结构改变" data-reactid="298"><span data-reactid="299"><!-- react-text: 300 -->TimePicker locale 结构改变<!-- /react-text --></span><a href="#TimePicker-locale-结构改变" class="anchor" data-reactid="301">#</a></h3><p data-reactid="302"><!-- react-text: 303 -->属性 <!-- /react-text --><code data-reactid="304"><!-- react-text: 305 -->locale<!-- /react-text --></code><!-- react-text: 306 --> 结构发生了 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/commit/fd1312803fd49586ded9af39d923457540c515cc#diff-fe4bfc98d91fc3dab8f391e3258622d4L1" data-reactid="307"><!-- react-text: 308 -->变化<!-- /react-text --></a><!-- react-text: 309 -->，需要将原有的属性改为现有的<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384" data-reactid="310"><!-- react-text: 311 -->结构<!-- /react-text --></a><!-- react-text: 312 -->。<!-- /react-text --></p><h3 id="其他" data-reactid="313"><span data-reactid="314"><!-- react-text: 315 -->其他<!-- /react-text --></span><a href="#其他" class="anchor" data-reactid="316">#</a></h3><ul data-reactid="317"><li data-reactid="318"><p data-reactid="319"><!-- react-text: 320 -->Alert 组件默认不展示样式，可以用 <!-- /react-text --><code data-reactid="321"><!-- react-text: 322 -->showIcon<!-- /react-text --></code><!-- react-text: 323 --> 属性添加图标。<!-- /react-text --></p></li><li data-reactid="324"><p data-reactid="325"><!-- react-text: 326 -->在 <!-- /react-text --><code data-reactid="327"><!-- react-text: 328 -->0.10.x<!-- /react-text --></code><!-- react-text: 329 --> 中 Datepicker 已废弃的 <!-- /react-text --><code data-reactid="330"><!-- react-text: 331 -->onSelect<!-- /react-text --></code><!-- react-text: 332 --> 属性被删除，请使用 <!-- /react-text --><code data-reactid="333"><!-- react-text: 334 -->onChange<!-- /react-text --></code><!-- react-text: 335 --> 属性。。<!-- /react-text --></p></li><li data-reactid="336"><p data-reactid="337"><!-- react-text: 338 -->TimePicker 的 <!-- /react-text --><code data-reactid="339"><!-- react-text: 340 -->hourOptions<!-- /react-text --></code><!-- react-text: 341 --> <!-- /react-text --><code data-reactid="342"><!-- react-text: 343 -->minuteOptions<!-- /react-text --></code><!-- react-text: 344 --> <!-- /react-text --><code data-reactid="345"><!-- react-text: 346 -->secondOptions<!-- /react-text --></code><!-- react-text: 347 --> 属性已移除，可使用 <!-- /react-text --><code data-reactid="348"><!-- react-text: 349 -->disabledHours<!-- /react-text --></code><!-- react-text: 350 --> <!-- /react-text --><code data-reactid="351"><!-- react-text: 352 -->disabledMinutes<!-- /react-text --></code><!-- react-text: 353 --> <!-- /react-text --><code data-reactid="354"><!-- react-text: 355 -->disabledSeconds<!-- /react-text --></code><!-- react-text: 356 --> 配和 <!-- /react-text --><code data-reactid="357"><!-- react-text: 358 -->hideDisabled<!-- /react-text --></code><!-- react-text: 359 --> 属性来完成原有功能。<!-- /react-text --><a href="http://ant.design/components/time-picker/#picker-demo-disable-options" data-reactid="360"><!-- react-text: 361 -->演示<!-- /react-text --></a></p></li></ul><h2 id="0.9-=>-0.10" data-reactid="362"><span data-reactid="363"><!-- react-text: 364 -->0.9 => 0.10<!-- /react-text --></span><a href="#0.9-=>-0.10" class="anchor" data-reactid="365">#</a></h2><hr data-reactid="366"/><p data-reactid="367"><code data-reactid="368"><!-- react-text: 369 -->0.10.x<!-- /react-text --></code><!-- react-text: 370 --> 版本有大量改动，是一个不完全向下兼容的版本。以下文档尽力列出了 <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->0.9.x<!-- /react-text --></code><!-- react-text: 373 --> 到 <!-- /react-text --><code data-reactid="374"><!-- react-text: 375 -->0.10.x<!-- /react-text --></code><!-- react-text: 376 --> 的不兼容变动，以帮助开发者升级。<!-- /react-text --></p><ul data-reactid="377"><li data-reactid="378"><p data-reactid="379"><code data-reactid="380"><!-- react-text: 381 -->0.10.x<!-- /react-text --></code><!-- react-text: 382 --> 文档：<!-- /react-text --><a href="http://010x.ant.design" data-reactid="383"><!-- react-text: 384 -->http://010x.ant.design<!-- /react-text --></a></p></li><li data-reactid="385"><p data-reactid="386"><code data-reactid="387"><!-- react-text: 388 -->0.9.x<!-- /react-text --></code><!-- react-text: 389 --> 文档：<!-- /react-text --><a href="http://09x.ant.design" data-reactid="390"><!-- react-text: 391 -->http://09x.ant.design<!-- /react-text --></a></p></li></ul><h3 id="升级-React" data-reactid="392"><span data-reactid="393"><!-- react-text: 394 -->升级 React<!-- /react-text --></span><a href="#升级-React" class="anchor" data-reactid="395">#</a></h3><p data-reactid="396"><!-- react-text: 397 -->新版本推荐使用 react@0.14.x 及以上版本，并增加了对低版本 react 的警告。建议进行同步升级，参考官方的<!-- /react-text --><a href="http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html" data-reactid="398"><!-- react-text: 399 -->升级文档<!-- /react-text --></a><!-- react-text: 400 -->。<!-- /react-text --></p><h3 id="组件化改造" data-reactid="401"><span data-reactid="402"><!-- react-text: 403 -->组件化改造<!-- /react-text --></span><a href="#组件化改造" class="anchor" data-reactid="404">#</a></h3><p data-reactid="405"><!-- react-text: 406 -->此版本对 <!-- /react-text --><a href="/components/button/" data-reactid="407">Button</a><!-- react-text: 408 -->、<!-- /react-text --><a href="/components/icon/" data-reactid="409">Iconfont</a><!-- react-text: 410 -->、<!-- /react-text --><a href="/components/layout/" data-reactid="411">Layout</a><!-- react-text: 412 -->、<!-- /react-text --><a href="/components/form/" data-reactid="413">Form</a><!-- react-text: 414 -->、<!-- /react-text --><a href="/components/form/#demo-input" data-reactid="415">Input</a><!-- react-text: 416 --> 模块进行了 React 组件化的改造，请基于新的使用方式修改，原有的书写方式理论上无影响。<!-- /react-text --></p><p data-reactid="417"><!-- react-text: 418 -->例如：<!-- /react-text --></p><pre class="language-html" data-reactid="419"><code data-reactid="420"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-btn ant-btn-primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>按 钮<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
||
==>
|
||
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>primary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>按钮<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span></code></pre><pre class="language-html" data-reactid="421"><code data-reactid="422"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>i</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>anticon anticon-appstore<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
||
==>
|
||
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>appstore<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span></code></pre><h3 id="size-属性统一" data-reactid="423"><span data-reactid="424"><!-- react-text: 425 -->size 属性统一<!-- /react-text --></span><a href="#size-属性统一" class="anchor" data-reactid="426">#</a></h3><p data-reactid="427"><!-- react-text: 428 -->原有组件的 <!-- /react-text --><code data-reactid="429"><!-- react-text: 430 -->size<!-- /react-text --></code><!-- react-text: 431 --> 属性统一为大中小：<!-- /react-text --><code data-reactid="432"><!-- react-text: 433 -->large<!-- /react-text --></code><!-- react-text: 434 --> <!-- /react-text --><code data-reactid="435"><!-- react-text: 436 -->default<!-- /react-text --></code><!-- react-text: 437 --> <!-- /react-text --><code data-reactid="438"><!-- react-text: 439 -->small<!-- /react-text --></code><!-- react-text: 440 -->，包括 <!-- /react-text --><code data-reactid="441"><!-- react-text: 442 -->Button<!-- /react-text --></code><!-- react-text: 443 --> <!-- /react-text --><code data-reactid="444"><!-- react-text: 445 -->Table<!-- /react-text --></code><!-- react-text: 446 --> <!-- /react-text --><code data-reactid="447"><!-- react-text: 448 -->Tabs<!-- /react-text --></code><!-- react-text: 449 --> <!-- /react-text --><code data-reactid="450"><!-- react-text: 451 -->Steps<!-- /react-text --></code><!-- react-text: 452 --> <!-- /react-text --><code data-reactid="453"><!-- react-text: 454 -->Select<!-- /react-text --></code><!-- react-text: 455 --> <!-- /react-text --><code data-reactid="456"><!-- react-text: 457 -->Pagination<!-- /react-text --></code><!-- react-text: 458 --> <!-- /react-text --><code data-reactid="459"><!-- react-text: 460 -->InputNumber<!-- /react-text --></code><!-- react-text: 461 --> <!-- /react-text --><code data-reactid="462"><!-- react-text: 463 -->Datepicker<!-- /react-text --></code><!-- react-text: 464 -->。<!-- /react-text --></p><p data-reactid="465"><!-- react-text: 466 -->例如：<!-- /react-text --></p><pre class="language-html" data-reactid="467"><code data-reactid="468"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Tabs</span> <span class="token attr-name" >size</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>mini<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span> ... <span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Tabs</span><span class="token punctuation" >></span></span>
|
||
==>
|
||
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Tabs</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 punctuation" >></span></span> ... <span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Tabs</span><span class="token punctuation" >></span></span></code></pre><p data-reactid="469"><!-- react-text: 470 -->详情可参考：<!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/415" data-reactid="471"><!-- react-text: 472 -->https://github.com/ant-design/ant-design/issues/415<!-- /react-text --></a></p><h3 id="其他" data-reactid="473"><span data-reactid="474"><!-- react-text: 475 -->其他<!-- /react-text --></span><a href="#其他" class="anchor" data-reactid="476">#</a></h3><ul data-reactid="477"><li data-reactid="478"><p data-reactid="479"><a href="http://09x.ant.design/components/enter-animation" data-reactid="480"><!-- react-text: 481 -->enter-animation<!-- /react-text --></a><!-- react-text: 482 --> 组件下线， 请使用 <!-- /react-text --><a href="/components/queue-anim" data-reactid="483">queue-anim</a><!-- react-text: 484 --> 来代替。<!-- /react-text --></p></li><li data-reactid="485"><p data-reactid="486"><!-- react-text: 487 -->Carousel 升级依赖，参考新的<!-- /react-text --><a href="/components/carousel/" data-reactid="488">新的 API 和使用方式</a><!-- react-text: 489 -->进行修改。<!-- /react-text --></p></li><li data-reactid="490"><p data-reactid="491"><code data-reactid="492"><!-- react-text: 493 -->antd.Notification()<!-- /react-text --></code><!-- react-text: 494 --> 修改为小写的 <!-- /react-text --><code data-reactid="495"><!-- react-text: 496 -->antd.notification()<!-- /react-text --></code><!-- react-text: 497 -->。<!-- /react-text --></p></li><li data-reactid="498"><p data-reactid="499"><!-- react-text: 500 -->Datepicker 的 <!-- /react-text --><code data-reactid="501"><!-- react-text: 502 -->onSelect<!-- /react-text --></code><!-- react-text: 503 --> 属性修改为 <!-- /react-text --><code data-reactid="504"><!-- react-text: 505 -->onChange<!-- /react-text --></code><!-- react-text: 506 --> 属性。<!-- /react-text --></p></li><li data-reactid="507"><p data-reactid="508"><!-- react-text: 509 -->Datepicker 的 <!-- /react-text --><code data-reactid="510"><!-- react-text: 511 -->calendarStyle<!-- /react-text --></code><!-- react-text: 512 --> 属性修改为 <!-- /react-text --><code data-reactid="513"><!-- react-text: 514 -->popupStyle<!-- /react-text --></code><!-- react-text: 515 --> 属性。<!-- /react-text --></p></li><li data-reactid="516"><p data-reactid="517"><!-- react-text: 518 -->Dropdown 的 <!-- /react-text --><code data-reactid="519"><!-- react-text: 520 -->onSelect<!-- /react-text --></code><!-- react-text: 521 --> 属性应修正为 <!-- /react-text --><code data-reactid="522"><!-- react-text: 523 -->onClick<!-- /react-text --></code><!-- react-text: 524 --> 属性，因为原有的 onSelect 只在变化时触发。<!-- /react-text --></p></li><li data-reactid="525"><p data-reactid="526"><!-- react-text: 527 -->Slider 的 <!-- /react-text --><code data-reactid="528"><!-- react-text: 529 -->withDots<!-- /react-text --></code><!-- react-text: 530 --> <!-- /react-text --><code data-reactid="531"><!-- react-text: 532 -->isIncluded<!-- /react-text --></code><!-- react-text: 533 --> 属性修改为 <!-- /react-text --><code data-reactid="534"><!-- react-text: 535 -->dots<!-- /react-text --></code><!-- react-text: 536 --> <!-- /react-text --><code data-reactid="537"><!-- react-text: 538 -->included<!-- /react-text --></code><!-- react-text: 539 -->。<!-- /react-text --></p></li><li data-reactid="540"><p data-reactid="541"><!-- react-text: 542 -->iconfont 的基线更新，可能导致原有图标的位置偏移。<!-- /react-text --></p></li></ul><p data-reactid="543"><!-- react-text: 544 -->新版本变化较大，以上升级指南可能有遗漏，全部改动可以参考 <!-- /react-text --><a href="/changelog" data-reactid="545">更新日志</a><!-- react-text: 546 -->。在升级过程中遇到问题，欢迎 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/new" data-reactid="547"><!-- react-text: 548 -->报告<!-- /react-text --></a><!-- react-text: 549 --> 给我们。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="550"><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="551"><section class="prev-next-nav" data-reactid="552"><a class="prev-page" href="changelog" data-reactid="553">Change Log</a><a class="next-page" href="components/button/" data-reactid="554"><span data-reactid="555">Button</span><span class="chinese" data-reactid="556"></span></a></section></div></div></div><footer id="footer" data-reactid="557"><ul data-reactid="558"><li data-reactid="559"><h2 data-reactid="560">GitHub</h2><div data-reactid="561"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="562"><span data-reactid="563">Repository</span></a></div><div data-reactid="564"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="565">dva</a><!-- react-text: 566 --> - <!-- /react-text --><span data-reactid="567">Framework</span></div><div data-reactid="568"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="569">dva-cli</a><!-- react-text: 570 --> -<!-- /react-text --><span data-reactid="571">Scaffold</span></div><div data-reactid="572"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="573">ant-tool</a><!-- react-text: 574 --> - <!-- /react-text --><span data-reactid="575">Developer Tools</span></div></li><li data-reactid="576"><h2 data-reactid="577"><span data-reactid="578">Links</span></h2><div data-reactid="579"><a href="http://mobile.ant.design" data-reactid="580">Ant Design Mobile</a><span data-reactid="581"> - </span><span data-reactid="582">Mobile</span></div><div data-reactid="583"><a href="https://g2.alipay.com/" data-reactid="584">G2</a><span data-reactid="585"> - </span><span data-reactid="586">Data Visualization</span></div><div data-reactid="587"><a href="https://antv.alipay.com/" data-reactid="588">AntV</a><span data-reactid="589"> - </span><span data-reactid="590">Data Visualization Specification</span></div><div data-reactid="591"><a href="http://motion.ant.design" data-reactid="592">Ant Motion</a><span data-reactid="593"> - </span><span data-reactid="594">Motion</span></div><div data-reactid="595"><a href="http://library.ant.design/" data-reactid="596">AntD Library</a><span data-reactid="597"> - </span><span data-reactid="598">Axure library of Ant Design</span></div><div data-reactid="599"><a href="http://ux.ant.design" data-reactid="600">Ant UX</a><span data-reactid="601"> - </span><span data-reactid="602">Sitemap Template</span></div></li><li data-reactid="603"><h2 data-reactid="604"><span data-reactid="605">Community</span></h2><div data-reactid="606"><a target="_blank" rel="noopener noreferrer" href="/changelog" data-reactid="607"><span data-reactid="608">Change Log</span></a></div><div data-reactid="609"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="610"><span data-reactid="611">Feedback</span></a></div><div data-reactid="612"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="613"><span data-reactid="614">Chat Room</span></a></div><div data-reactid="615"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="616"><span data-reactid="617">Bug Report</span></a></div></li><li data-reactid="618"><div data-reactid="619"><!-- react-text: 620 -->©2016 <!-- /react-text --><span data-reactid="621">Created by Ant UED</span></div><div data-reactid="622"><!-- react-text: 623 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="624">BiSheng</a></div><div style="margin-top:10px;" data-reactid="625"><span data-reactid="626">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="627"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="628"><div class="ant-select-selection__rendered" data-reactid="629"><div class="ant-select-selection-selected-value" title="1.11.2" style="display:block;opacity:1;" data-reactid="630">1.11.2</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="631"><b data-reactid="632"></b></span></div></div></div></li></ul></footer></div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
var content = document.getElementById('loading-text');
|
||
if (content) {
|
||
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
|
||
var className;
|
||
if (i > 0 && i < content.innerText.length - 1) {
|
||
className = 'yoyo-x-' + (i % 6);
|
||
}
|
||
if (letter.trim() === '') {
|
||
className += ' blank';
|
||
}
|
||
return '<span class="' + className + '">' + letter + '</span>';
|
||
}).join('');
|
||
}
|
||
})();
|
||
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|