135-a28f22da2d828c0b81f9.js

webpackJsonp([135],{1516:function(n,a,e){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function s(n){return v.default.createElement(n.tag,(0,k.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function o(n){return v.default.createElement(s,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function c(n){return v.default.createElement(s,{tag:"style",html:n.style})}function l(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),l(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var i=e(1),p=t(i),r=e(4),u=t(r),d=e(2),h=t(d),f=e(3),m=t(f),g=e(7),k=t(g),z=e(0),v=t(z),y=e(232),_=t(y),b=(function(n){function a(){var n,e,t,s;(0,p.default)(this,a);for(var o=arguments.length,c=Array(o),l=0;l<o;l++)c[l]=arguments[l];return e=t=(0,h.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},s=e,(0,h.default)(t,s)}(0,m.default)(a,n),(0,u.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,e=a.title,t=a.src,o=a.children;return v.default.createElement("div",{className:"zandoc-react-demo"},v.default.createElement("div",{className:"zandoc-react-demo__preview"},o),v.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},v.default.createElement("div",{className:"zandoc-react-demo__title"},v.default.createElement("p",null,e||"")),v.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&v.default.createElement("pre",{className:"zandoc-react-demo__code"},v.default.createElement(s,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}])}(z.Component),function(n){function a(){return(0,p.default)(this,a),(0,h.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,m.default)(a,n),(0,u.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,_.default)(document.documentElement,0,l(a,-9))}}},{key:"render",value:function(){return v.default.createElement("div",{className:"zandoc-react-container",key:null},v.default.createElement(c,{style:'img[alt="zent-components"] {\n  width: 492px;\n  height: 438px;\n}'}),v.default.createElement(o,{html:'<h1 class="anchor-heading"><a href="#zent">¶</a><a href="javascript:void(0)" id="zent" class="anchor-point"></a>Zent</h1>\n<p>Zent ( \\ˈzent\\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。</p>\n<p>目前我们有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中使用，我们会在此基础上，持续开发一些新组件。</p>\n<p>我们的目标是让 React 项目开发更快、更简单。</p>\n<h3 class="anchor-heading"><a href="#zu-jian-zhan-shi">¶</a><a href="javascript:void(0)" id="zu-jian-zhan-shi" class="anchor-point"></a>组件展示</h3>\n<p><img src="https://b.yzcdn.cn/public_files/2018/04/17/00778671b9657602387902b6de9d1693.png" alt="zent-components"></p>\n<h3 class="anchor-heading"><a href="#te-xing">¶</a><a href="javascript:void(0)" id="te-xing" class="anchor-point"></a>特性</h3>\n<ul>\n<li>高质量的 React 基础组件以及丰富的业务组件</li>\n<li>内置 TypeScript 类型定义文件</li>\n<li>支持定制主题</li>\n<li>代码/样式按需加载</li>\n<li>yarn + webpack + babel + postcss + prettier + stylefmt</li>\n<li>一套有赞设计师绘制的图标库</li>\n<li>单测覆盖率在 90% 以上</li>\n</ul>\n<h3 class="anchor-heading"><a href="#zhi-chi-huan-jing">¶</a><a href="javascript:void(0)" id="zhi-chi-huan-jing" class="anchor-point"></a>支持环境</h3>\n<ul>\n<li>React >= 15.6</li>\n<li>现代浏览器以及 IE 11 及以上</li>\n<li>支持服务端渲染(SSR)</li>\n</ul>\n<h3 class="anchor-heading"><a href="#an-zhuang">¶</a><a href="javascript:void(0)" id="an-zhuang" class="anchor-point"></a>安装</h3>\n<pre><code class="language-bash">yarn add zent</code></pre>\n<h3 class="anchor-heading"><a href="#shi-yong-zu-jian">¶</a><a href="javascript:void(0)" id="shi-yong-zu-jian" class="anchor-point"></a>使用组件</h3>\n<pre><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 引入样式</span>\n<span class="token keyword">import</span> <span class="token string">\'zent/css/index.css\'</span><span class="token punctuation">;</span>\n\nReactDOM<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">&#x3C;</span>Button</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>\n<h3 class="anchor-heading"><a href="#an-xu-jia-zai">¶</a><a href="javascript:void(0)" id="an-xu-jia-zai" class="anchor-point"></a>按需加载</h3>\n<p><a href="babel-plugin-zent">babel-plugin-zent</a> 这个 babel 插件可以帮助减小打包文件的大小，原理是自动做了类似下面的代码变换。</p>\n<pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 变换为</span>\n\n<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">\'zent/lib/button\'</span><span class="token punctuation">;</span></code></pre>\n<p>适用于基于 Zent 开发的组件库，以及对 Zent 使用量较少的项目。详细使用帮助请看<a href="babel-plugin-zent">插件的文档</a>。</p>'}))}}]),a}(z.Component));a.default=b}});