-
Notifications
You must be signed in to change notification settings - Fork 0
/
17-9c128e7e1f8e9241073d.js
1 lines (1 loc) · 14 KB
/
17-9c128e7e1f8e9241073d.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{875:function(n,s,a){"use strict";a.r(s),a.d(s,"default",(function(){return C}));var t=a(840),p=a.n(t),e=a(841),o=a.n(e),c=a(521),l=a.n(c),u=a(842),r=a.n(u),i=a(843),k=a.n(i),m=a(844),h=a.n(m),b=a(845),d=a.n(b),f=a(846),v=a.n(f),y=a(0),g=a.n(y),z=a(210);function x(n){var s=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 a,t=h()(n);if(s){var p=h()(this).constructor;a=Reflect.construct(t,arguments,p)}else a=t.apply(this,arguments);return k()(this,a)}}function S(n){return g.a.createElement(n.tag,v()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function $(n){return g.a.createElement(S,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function w(n){return g.a.createElement(S,{tag:"style",html:n.style})}y.Component;var C=function(n){r()(a,n);var s=x(a);function a(){return p()(this,a),s.apply(this,arguments)}return o()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&Object(z.a)(document.documentElement,0,function n(s,a){for(;s;)return s.offsetTop&&"static"!==getComputedStyle(s).position&&(a+=s.offsetTop),n(s.parentNode,a);return a}(s,-9))}}},{key:"render",value:function(){return g.a.createElement("div",{className:"zandoc-react-container",key:null},g.a.createElement(w,{style:'img[alt="zent-theme"] {\n width: 514px;\n height: 319px;\n }'}),g.a.createElement($,{html:'<h2 class="anchor-heading"><a href="#ding-zhi-zhu-ti">¶</a><a href="javascript:void(0)" id="ding-zhi-zhu-ti" class="anchor-point"></a>定制主题</h2>\n<p>Zent 支持主题定制,目前仅支持组件库颜色的定制。</p>\n<p><img src="https://img.yzcdn.cn/zanui/react/zent-theme.png" alt="zent-theme"></p>\n<h3 class="anchor-heading"><a href="#shi-yong-css-variables">¶</a><a href="javascript:void(0)" id="shi-yong-css-variables" class="anchor-point"></a>使用 CSS Variables</h3>\n<p>Zent 使用CSS Variables定制主题色,对于不支持 CSS Variables 的浏览器,会降级到默认主题色,可以通过重新构建 SCSS 定制主题色。</p>\n<p>注意:主题色需要提供两套,一套是 Hex 形式,另一套是类似 RGB 形式的,如下所示:</p>\n<pre><code class="language-css"><span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>\n <span class="token comment">/* 只适用于没有透明度的场景 */</span>\n <span class="token variable">--theme-primary-1</span><span class="token punctuation">:</span> <span class="token hexcode color">#252b6e</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-2</span><span class="token punctuation">:</span> <span class="token hexcode color">#3c46b1</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-3</span><span class="token punctuation">:</span> <span class="token hexcode color">#434fc9</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-4</span><span class="token punctuation">:</span> <span class="token hexcode color">#515ff0</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-5</span><span class="token punctuation">:</span> <span class="token hexcode color">#6c78f2</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-6</span><span class="token punctuation">:</span> <span class="token hexcode color">#7e88f3</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-7</span><span class="token punctuation">:</span> <span class="token hexcode color">#b0b6f8</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-primary-8</span><span class="token punctuation">:</span> <span class="token hexcode color">#f2f3fe</span><span class="token punctuation">;</span>\n\n <span class="token comment">/* 和上面的变量值是一样的,但适用于 rgba 的场景 */</span>\n <span class="token variable">--theme-rgb-primary-1</span><span class="token punctuation">:</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-2</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">177</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-3</span><span class="token punctuation">:</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token number">79</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-4</span><span class="token punctuation">:</span> <span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">95</span><span class="token punctuation">,</span> <span class="token number">240</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-5</span><span class="token punctuation">:</span> <span class="token number">108</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">242</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-6</span><span class="token punctuation">:</span> <span class="token number">126</span><span class="token punctuation">,</span> <span class="token number">136</span><span class="token punctuation">,</span> <span class="token number">243</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-7</span><span class="token punctuation">:</span> <span class="token number">176</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">248</span><span class="token punctuation">;</span>\n <span class="token variable">--theme-rgb-primary-8</span><span class="token punctuation">:</span> <span class="token number">242</span><span class="token punctuation">,</span> <span class="token number">243</span><span class="token punctuation">,</span> <span class="token number">254</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<p>CSS 变量主题色生成可以参考这段代码:</p>\n<pre><code class="language-scss"><span class="token comment">// TODO: define your theme overrides here, and that\'s all!</span>\n<span class="token property"><span class="token variable">$theme-overrides</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>\n <span class="token property">--theme-primary-1</span><span class="token punctuation">:</span> <span class="token hexcode color">#252b6e</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-2</span><span class="token punctuation">:</span> <span class="token hexcode color">#3c46b1</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-3</span><span class="token punctuation">:</span> <span class="token hexcode color">#434fc9</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-4</span><span class="token punctuation">:</span> <span class="token hexcode color">#515ff0</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-5</span><span class="token punctuation">:</span> <span class="token hexcode color">#6c78f2</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-6</span><span class="token punctuation">:</span> <span class="token hexcode color">#7e88f3</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-7</span><span class="token punctuation">:</span> <span class="token hexcode color">#b0b6f8</span><span class="token punctuation">,</span>\n <span class="token property">--theme-primary-8</span><span class="token punctuation">:</span> <span class="token hexcode color">#f2f3fe</span><span class="token punctuation">,</span>\n<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">@mixin</span> <span class="token function">theme-css-vars</span><span class="token punctuation">(</span><span class="token variable">$vars</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span>, <span class="token variable">$color</span> in <span class="token variable">$vars</span> </span><span class="token punctuation">{</span>\n <span class="token property"><span class="token variable">#{$name}</span></span><span class="token punctuation">:</span> <span class="token variable">$color</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">@mixin</span> <span class="token function">theme-rgb-css-vars</span><span class="token punctuation">(</span><span class="token variable">$vars</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">@each</span> <span class="token selector"><span class="token variable">$name</span>, <span class="token variable">$color</span> in <span class="token variable">$vars</span> </span><span class="token punctuation">{</span>\n #<span class="token punctuation">{</span><span class="token function">str-insert</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token string">"-rgb"</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">@function</span> <span class="token function">to-rgb</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">@return</span> <span class="token color">red</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token color">green</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token color">blue</span><span class="token punctuation">(</span><span class="token variable">$color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token selector">:root </span><span class="token punctuation">{</span>\n <span class="token keyword">@include</span> <span class="token function">theme-css-vars</span><span class="token punctuation">(</span><span class="token variable">$theme-overrides</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// Same but used in rgba contexts</span>\n <span class="token keyword">@include</span> <span class="token function">theme-rgb-css-vars</span><span class="token punctuation">(</span><span class="token variable">$theme-overrides</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<h3 class="anchor-heading"><a href="#chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se">¶</a><a href="javascript:void(0)" id="chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se" class="anchor-point"></a>重新构建 SCSS 定制主题色</h3>\n<p>Zent 的样式使用 <a href="https://sass-lang.com">scss</a> 开发,我们提供了一个预定义的扩展文件来支持主题定制,通过在 Zent 仓库中修改配置,生成一份定制的 css 样式。</p>\n<p>这种方式对业务项目是非侵入式的,样式的定制和业务项目完全独立;但也有一个问题,就是每次更新 Zent 组件库都要重新生成一份定制主题。</p>\n<h4 class="anchor-heading"><a href="#ding-zhi-fang-fa">¶</a><a href="javascript:void(0)" id="ding-zhi-fang-fa" class="anchor-point"></a>定制方法</h4>\n<ol>\n<li>克隆 Zent <a href="https://github.com/youzan/zent">源码</a>并安装依赖</li>\n<li>在 <code>packages/zent/assets/theme</code> 目录下找到一个名为 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_override.scss"><code>_override.scss</code></a> 的文件,这个文件是预留用来覆盖默认主题变量的,所有主题变量可以在同目录的 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_default.scss"><code>_default.scss</code></a> 文件内找到</li>\n<li>在 <code>packages/zent</code> 目录下面执行 <code>yarn theme</code></li>\n<li>定制的主题样式文件会生成在 <code>packages/zent/css</code> 目录下</li>\n</ol>'}))}}]),a}(y.Component)}}]);