1026-13d783dddf38a6a5e153.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[1026],{81026:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>u});var e=s(73450),t=s(27378),o=s(57318),i=s(24246);function c(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);a&&(e=e.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,e)}return s}function l(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?c(Object(s),!0).forEach((function(a){(0,e.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):c(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}function p(n){return(0,i.jsx)(n.tag,l(l({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function r(n){return(0,i.jsx)(p,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function h(n){return(0,i.jsx)(p,{tag:"style",html:n.style})}function d(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),d(n.parentNode,a);return a}class u extends t.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,o.l)(document.documentElement,0,d(a,-9))}}render(){return t.createElement("div",{className:"zandoc-react-container"},t.createElement(h,{style:'img[alt="zent-components"] {\n  width: 492px;\n  height: 438px;\n}'}),t.createElement(r,{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>一套有赞设计师绘制的图标库</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 >= 17</li>\n<li>支持服务端渲染(SSR)</li>\n</ul>\n<h3 class="anchor-heading"><a href="#liu-lan-qi">¶</a><a href="javascript:void(0)" id="liu-lan-qi" class="anchor-point"></a>浏览器</h3>\n<h4 class="anchor-heading"><a href="#zhi-chi-de-liu-lan-qi">¶</a><a href="javascript:void(0)" id="zhi-chi-de-liu-lan-qi" class="anchor-point"></a>支持的浏览器</h4>\n<ul>\n<li>Firefox >= 78(ESR)</li>\n<li>Chrome >= 49</li>\n<li>Safari >= 10</li>\n<li>Edge</li>\n<li>不支持 IE</li>\n</ul>\n<h4 class="anchor-heading"><a href="#xu-yao-de-polyfill">¶</a><a href="javascript:void(0)" id="xu-yao-de-polyfill" class="anchor-point"></a>需要的polyfill</h4>\n<p>对于受支持的浏览器需要的 polyfill</p>\n<ul>\n<li><code>es6.object.assign</code></li>\n<li><code>es6.object.is</code></li>\n<li><code>es6.string.ends-with</code></li>\n<li><code>es6.string.starts-with</code></li>\n<li><code>es6.string.includes</code></li>\n<li><code>es7.string.trim-left</code></li>\n<li><code>es7.string.trim-right</code></li>\n<li><code>es6.array.from</code></li>\n<li><code>es6.array.of</code></li>\n<li><code>es6.array.fill</code></li>\n<li><code>es6.array.find</code></li>\n<li><code>es6.array.find-index</code></li>\n<li><code>es7.array.includes</code></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"><span class="token function">yarn</span> <span class="token function">add</span> 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 module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">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 module">import</span> <span class="token string">\'zent/css/index.css\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></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 module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">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 module">import</span> <span class="token imports"><span class="token maybe-class-name">Button</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/button\'</span><span class="token punctuation">;</span></code></pre>\n<p>适用于基于 Zent 开发的组件库，以及对 Zent 使用量较少的项目。详细使用帮助请看<a href="babel-plugin-zent">插件的文档</a>。</p>\n<p>除此之外，Zent 也支持 ESM 的 tree-shaking 方式配合打包工具来实现按需加载。</p>\n<h3 class="anchor-heading"><a href="#zhu-ti">¶</a><a href="javascript:void(0)" id="zhu-ti" class="anchor-point"></a>主题</h3>\n<p>请参考<a href="theme">定制主题</a></p>'}))}}}}]);