1 line
60 KiB
JavaScript
1 line
60 KiB
JavaScript
|
webpackJsonp([117],{"4DnY":function(e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var t=o.info={title:"Theme Customization"},d=o.body="<p><code>Mand Mobile</code> provides a set of UI themes based on <code>DiDi financial business design specifications</code> by default. It also supports theme customization. You can freely adjust the colors, fonts, and element sizes to meet the visual requirements in different business scenarios.</p>\n<p>\n <img src=\"http://static.galileo.xiaojukeji.com/static/tms/other/mand-theme.jpg\" width=\"800\">\n</p>\n\n<iframe src=\"https://codesandbox.io/embed/mand-mobile-custom-theme-ofbut?fontsize=12&module=%2Fsrc%2Fassets%2Ftheme.custom.styl\" title=\"Mand Mobile Custom Theme\" allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"></iframe>\n\n\n<h3 id=\"Style Variables\">Style Variables<a href=\"javascript:jumpAnchor('Style Variables')\" class=\"mfe-blog-toc-item mfe-blog-toc-item-h3\">#</a></h3><p><code>Mand Mobile</code> style is based on <a href=\"http://stylus-lang.com/\" target=\"_blank\">Stylus</a> and can adjust theme styles through global and component style variables.</p>\n<p>A complete list of variables can be found in built-in variables <a href=\"https://github.com/didi/mand-mobile/blob/master/components/_style/mixin/theme.basic.styl\" target=\"_blank\">Global Variables</a>\u3001<a href=\"https://github.com/didi/mand-mobile/blob/master/components/_style/mixin/theme.components.styl\" target=\"_blank\">Components Variables</a></p>\n<h3 id=\"Variable Coverage\">Variable Coverage<a href=\"javascript:jumpAnchor('Variable Coverage')\" class=\"mfe-blog-toc-item mfe-blog-toc-item-h3\">#</a></h3><p>You can achieve theme customization by importing component source code and overriding style variables.</p>\n<ul>\n<li>First, install dependencies\uFF0C<code>babel-plugin-import stylus stylus-loader css-loader</code></li>\n</ul>\n<pre><code class=\"language-shell\"><span class=\"hljs-built_in\">npm</span> install --save-dev babel-plugin-<span class=\"hljs-keyword\">import</span> stylus stylus-loader css-loader</code></pre>\n<ul>\n<li>Configure <code>babel-plugin-import</code> to ensure that component source code is imported</li>\n</ul>\n<pre><code class=\"language-javascript\"><span class=\"hljs-comment\">// .babelrc or babel-loader/ts-loader option</span>\n{\n <span class=\"hljs-attr\">\"plugins\"</span>: [\n [<span class=\"hljs-string\">\"import\"</span>, {<span class=\"hljs-attr\">\"libraryName\"</span>: <span class=\"hljs-string\">\"mand-mobile\"</span>, <span class=\"hljs-attr\">\"libraryDirectory\"</span>: <span class=\"hljs-string\">\"components\"</span>}],\n ]\n}</code></pre>\n<ul>\n<li>Create a customized theme file, such as <code>theme.custom.styl</code></li>\n</ul>\n<pre><code class=\"language-stylus\"><span class=\"hljs-keyword\">@import</span> <span class=\"hljs-string\">'~mand-mobile/components/_style/mixin/util'</span>\n<span class=\"hljs-variable\">@import</span> <span class=\"hljs-string\">'~mand-mobile/components/_style/mixin/theme.components'</span>\n<span class=\"hljs-variable\">@import</span> <span class=\"hljs-string\">'~mand-mobile/components/_style/mixin/theme.basic'</span>\n\n<span class=\"hljs-comment\">// Import nib (Optional)</span>\n<span class=\"hljs-variable\">@import</span> <span class=\"hljs-string\">'~nib/lib/nib/vendor'</span>\n<span class=\"hljs-variable\">@import</span> <span class=\"hljs-string\">'~nib/lib/nib/gradients'</span>\n\n<span class=\"hljs-comment\">// Override style variables</span>\ncolor-primary = <span class=\"hljs-number\">#1AAD19</span></code></pre>\n<ul>\n<li>Import the <code>mand-mobile</code> global style (either in the project entry or global style), for example:</li>\n</ul>\n<p>main.js</p>\n<pre><code class=\"language-js\"><span class=\"hljs-keyword\">import</span> <span
|