20-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{953:function(n,a,e){"use strict";e.r(a),e.d(a,"default",(function(){return E}));var s=e(840),t=e.n(s),o=e(841),c=e.n(o),p=e(521),r=e.n(p),i=e(842),l=e.n(i),u=e(843),m=e.n(u),d=e(844),h=e.n(d),f=e(845),k=e.n(f),g=e(846),y=e.n(g),v=e(0),b=e.n(v),w=e(210);function z(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var e,s=h()(n);if(a){var t=h()(this).constructor;e=Reflect.construct(s,arguments,t)}else e=s.apply(this,arguments);return m()(this,e)}}function j(n){return b.a.createElement(n.tag,y()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function x(n){return b.a.createElement(j,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function S(n){return b.a.createElement(j,{tag:"style",html:n.style})}v.Component;var E=function(n){l()(e,n);var a=z(e);function e(){return t()(this,e),a.apply(this,arguments)}return c()(e,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(w.a)(document.documentElement,0,function n(a,e){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(e+=a.offsetTop),n(a.parentNode,e);return e}(a,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(S,{style:""}),b.a.createElement(x,{html:'<h2 class="anchor-heading"><a href="#upgrade-to-3-x-from-2-x">¶</a><a href="javascript:void(0)" id="upgrade-to-3-x-from-2-x" class="anchor-point"></a>Upgrade to 3.x from 2.x</h2>\n<h3 class="anchor-heading"><a href="#javascript-components">¶</a><a href="javascript:void(0)" id="javascript-components" class="anchor-point"></a>Javascript Components</h3>\n<p>Starting from Zent 3.x, we no longer publish separate npm packages for each component.</p>\n<p>So there\'re some usages we no longer support.</p>\n<pre><code class="language-js"><span class="token comment">// These are no longer supported(Button as an example)</span>\n<span class="token keyword module">import</span> <span class="token maybe-class-name">Button</span> <span class="token keyword module">from</span> <span class="token string">\'zent-button\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token maybe-class-name">Button</span> <span class="token keyword module">from</span> <span class="token string">\'zent/button\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Instead, you can use this</span>\n<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span></code></pre>\n<p>That is to say, only <code>import { Button } from \'zent\';</code> is supported starting from now on.</p>\n<h3 class="anchor-heading"><a href="#umd">¶</a><a href="javascript:void(0)" id="umd" class="anchor-point"></a>UMD</h3>\n<p>The UMD bundle location has changed.</p>\n<pre><code class="language-js"><span class="token comment">// 2.x</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/dist/main.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Instead, you write</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/lib/zent-umd.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Or if you prefer the minified version</span>\n<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'zent/lib/zent-umd.min.js\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h3 class="anchor-heading"><a href="#styles">¶</a><a href="javascript:void(0)" id="styles" class="anchor-point"></a>Styles</h3>\n<p>CSS location has changed.</p>\n<pre><code class="language-js"><span class="token comment">// 2.x</span>\n<span class="token keyword module">import</span> <span class="token string">\'zent/lib/index.css\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Instead, you write</span>\n<span class="token keyword module">import</span> <span class="token string">\'zent/css/index.css\'</span><span class="token punctuation">;</span></code></pre>\n<h3 class="anchor-heading"><a href="#babel-plugin-zent">¶</a><a href="javascript:void(0)" id="babel-plugin-zent" class="anchor-point"></a>babel-plugin-zent</h3>\n<p>Since we no longer maintain separate packages for each component, here is an alternative solution to achieve the same goal.</p>\n<p><code>babel-plugin-zent</code> can rewrite all Zent <code>imports</code> on the fly, you only pay what you use in your project.</p>\n<p>Read the <a href="../guides/babel-plugin-zent">documentation</a>.</p>'}))}}]),e}(v.Component)}}]);