This repository has been archived by the owner on Aug 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
19-es5.3a78f47a43e5ffc00fc3.js
1 lines (1 loc) · 210 KB
/
19-es5.3a78f47a43e5ffc00fc3.js
1
function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{"7VLu":function(t,e,d){"use strict";d.r(e);var o=d("8Y7J"),a=d("0qEG"),c=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/docs/getting-started.en-US.md","zh-CN":"packages/theme/docs/getting-started.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p><code>@delon/theme</code> is the only must be imported to ng-alain scaffold. It contains a lot of <a href="/theme/global" data-url="/theme/global">style parameters</a> and several generalities <a href="/theme/menu" data-url="/theme/menu">services</a>, <a href="/theme/date" data-url="/theme/date">pipes</a>.</p><h2 id="Style">Style<a onclick="window.location.hash = \'Style\'" class="anchor">#</a></h2><p>ng-alain defaults to using less as the style language, we recommend that you learn about the features of <a target="_blank" href="http://lesscss.org/" data-url="http://lesscss.org/">less</a> before using it or sometimes when you have some questions. If you want to get a basic knowledge of CSS or look for properties usage, you can refer to the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" data-url="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">MDN doc</a>.</p><h2 id="Layout">Layout<a onclick="window.location.hash = \'Layout\'" class="anchor">#</a></h2><p>Scaffolding include two layouts: <a href="/theme/default" data-url="/theme/default">default layout</a>, <a href="/theme/fullscreen" data-url="/theme/fullscreen">fullscreen layout</a>, scaffolding does not contain these style files, it\'s in the <code>@delon/theme</code> library.</p><h2 id="Scaffold-Style">Scaffold Style<a onclick="window.location.hash = \'Scaffold-Style\'" class="anchor">#</a></h2><p>You can use the toolset provided by ng-alain to adjust spacing, color, size, borders, etc. It\'s a set of like bootstrap style tools.</p><p>Or customize your styles with <em>src/styles/index.less</em>, which will work in global applications, in the style development process, there are two prominent problems:</p><ul><li><p>Global Pollution - CSS selectors are globally valid. Selectors with the same name in different files will be built together, and the former will be overrided by the latter.</p></li><li><p>Complex Selector - in order to avoid the above problem, we have to be careful when writing styles. The increase in flags for range restriction will lead to a growing class name, besides that, naming style confusion in multi person development and an increasing number of selectors on an element is hard to avoid.</p></li></ul><p>We should use component <code>styles</code> property to create component styles. For how use Angular styles, please refer to <a target="_blank" href="https://zhuanlan.zhihu.com/p/31235358" data-url="https://zhuanlan.zhihu.com/p/31235358">About Angular Style Packaging</a>.</p><h2 id="Style-file-category">Style file category<a onclick="window.location.hash = \'Style-file-category\'" class="anchor">#</a></h2><p>In a project, style files can be divided into different categories depending on their function.</p><h3 id="src/styles/index.less">src/styles/index.less<a onclick="window.location.hash = \'src/styles/index.less\'" class="anchor">#</a></h3><p>Global style file, where you can make some common settings.</p><h3 id="Tools">Tools<a onclick="window.location.hash = \'Tools\'" class="anchor">#</a></h3><p>Please refer to <a href="/theme/tools" data-url="/theme/tools">Tools</a>\u3002</p><h3 id="Page-level">Page level<a onclick="window.location.hash = \'Page-level\'" class="anchor">#</a></h3><p>Specific page-related style, such as <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/routes/dashboard/monitor/monitor.component.less" data-url="https:/ng-alain/ng-alain/blob/master/src/app/routes/dashboard/monitor/monitor.component.less">monitor.component.less</a>, the content is only related to the content of this page. Under normal circumstances, if it is not particularly complex page, with the previous global style and tools style, there should be little to write.</p><h2 id="How-to-override-parameters">How to override parameters<a onclick="window.location.hash = \'How-to-override-parameters\'" class="anchor">#</a></h2><p>We are using <a target="_blank" href="http://lesscss.org/" data-url="http://lesscss.org/">Less</a> as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.</p><p>The changes parameters put into the <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less" data-url="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less">theme.less</a> LESS file, all parameters include:</p><ul><li><p><a href="/theme/global" data-url="/theme/global">Global Parameters</a></p></li><li><p><a href="/theme/default" data-url="/theme/default">Default Layout</a></p></li><li><p><a href="/theme/fullscreen" data-url="/theme/fullscreen">Fullscreen Layout</a></p></li></ul><p>Please report an issue if the existing list of variables is not enough for you.</p></article></section>',meta:{order:1,title:"Getting Started",type:"Documents",module:"AlainThemeModule",config:"AlainThemeConfig"},toc:[{id:"Style",title:"Style",h:2},{id:"Layout",title:"Layout",h:2},{id:"Scaffold-Style",title:"Scaffold Style",h:2},{id:"Style-file-category",title:"Style file category",h:2},{id:"src/styles/index.less",title:"src/styles/index.less",h:3},{id:"Tools",title:"Tools",h:3},{id:"Page-level",title:"Page level",h:3},{id:"How-to-override-parameters",title:"How to override parameters",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p><code>@delon/theme</code> \u662f ng-alain \u67b6\u624b\u811a\u552f\u4e00\u5fc5\u987b\u5f15\u5165\u7684\u6a21\u5757\u3002\u5b83\u5305\u542b\u4e86\u975e\u5e38\u591a<a href="/theme/global" data-url="/theme/global">\u4e3b\u9898\u6837\u5f0f\u53c2\u6570</a>\uff0c\u901a\u8fc7\u8986\u76d6\u53c2\u6570\u6570\u503c\u8fdb\u800c\u5b9a\u5236\u4e00\u4e9b\u7279\u522b\u7684\u9700\u6c42\uff1b\u4ee5\u53ca\u82e5\u5e72\u901a\u7528\u6027<a href="/theme/menu" data-url="/theme/menu">\u670d\u52a1</a>\u3001<a href="/theme/date" data-url="/theme/date">\u7ba1\u9053</a>\u3002</p><h2 id="\u6837\u5f0f">\u6837\u5f0f<a onclick="window.location.hash = \'\u6837\u5f0f\'" class="anchor">#</a></h2><p>ng-alain \u9ed8\u8ba4\u4f7f\u7528 less \u4f5c\u4e3a\u6837\u5f0f\u8bed\u8a00\uff0c\u5efa\u8bae\u5728\u4f7f\u7528\u524d\u6216\u8005\u9047\u5230\u7591\u95ee\u65f6\u5b66\u4e60\u4e00\u4e0b <a target="_blank" href="http://lesscss.org/" data-url="http://lesscss.org/">less</a> \u7684\u76f8\u5173\u7279\u6027\uff0c\u5982\u679c\u60f3\u83b7\u53d6\u57fa\u7840\u7684 CSS \u77e5\u8bc6\u6216\u67e5\u9605\u5c5e\u6027\uff0c\u53ef\u4ee5\u53c2\u8003 <a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference" data-url="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference">MDN\u6587\u6863</a>\u3002</p><h2 id="\u5e03\u5c40">\u5e03\u5c40<a onclick="window.location.hash = \'\u5e03\u5c40\'" class="anchor">#</a></h2><p>\u811a\u624b\u67b6\u63d0\u4f9b\u4e24\u79cd\u5e03\u5c40\uff1a<a href="/theme/default" data-url="/theme/default">\u9ed8\u8ba4\u5e03\u5c40</a>\u3001<a href="/theme/fullscreen" data-url="/theme/fullscreen">\u5168\u5c4f\u5e03\u5c40</a>\uff0c\u811a\u624b\u67b6\u5e76\u4e0d\u5305\u542b\u4e24\u79cd\u5e03\u5c40\u6837\u5f0f\u6587\u4ef6\uff0c\u5b83\u4f4d\u4e8e <code>@delon/theme</code> \u7c7b\u5e93\u5f53\u4e2d\u3002</p><h2 id="\u811a\u624b\u67b6\u6837\u5f0f">\u811a\u624b\u67b6\u6837\u5f0f<a onclick="window.location.hash = \'\u811a\u624b\u67b6\u6837\u5f0f\'" class="anchor">#</a></h2><p>\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u7edd\u5927\u90e8\u5206\u60c5\u51b5\u4e0b\u53ef\u4ee5\u5229\u7528 ng-alain \u63d0\u4f9b\u7684\u5de5\u5177\u96c6\u6765\u8c03\u6574\u95f4\u8ddd\u3001\u989c\u8272\u3001\u5927\u5c0f\u3001\u8fb9\u6846\u7b49\uff0c\u5b83\u662f\u4e00\u4e2a\u5957\u7c7b\u4f3c bootstrap \u98ce\u683c\u7684\u5de5\u5177\u96c6\u3002</p><p>\u6216\u901a\u8fc7 <em>src/styles/index.less</em> \u4e0b\u5b9a\u5236\u4f60\u7684\u6837\u5f0f\uff0c\u8fd9\u4e9b\u6837\u5f0f\u5c06\u4f1a\u5728\u5168\u5c40\u5e94\u7528\u4e2d\u6709\u6548\uff0c\u4e14\u6709\u4e24\u4e2a\u95ee\u9898\u6bd4\u8f83\u7a81\u51fa\uff1a</p><ul><li><p>\u5168\u5c40\u6c61\u67d3 \u2014\u2014 CSS \u6587\u4ef6\u4e2d\u7684\u9009\u62e9\u5668\u662f\u5168\u5c40\u751f\u6548\u7684\uff0c\u4e0d\u540c\u6587\u4ef6\u4e2d\u7684\u540c\u540d\u9009\u62e9\u5668\uff0c\u6839\u636e build \u540e\u751f\u6210\u6587\u4ef6\u4e2d\u7684\u5148\u540e\u987a\u5e8f\uff0c\u540e\u9762\u7684\u6837\u5f0f\u4f1a\u5c06\u524d\u9762\u7684\u8986\u76d6\uff1b</p></li><li><p>\u9009\u62e9\u5668\u590d\u6742 \u2014\u2014 \u4e3a\u4e86\u907f\u514d\u4e0a\u9762\u7684\u95ee\u9898\uff0c\u6211\u4eec\u5728\u7f16\u5199\u6837\u5f0f\u7684\u65f6\u5019\u4e0d\u5f97\u4e0d\u5c0f\u5fc3\u7ffc\u7ffc\uff0c\u7c7b\u540d\u91cc\u4f1a\u5e26\u4e0a\u9650\u5236\u8303\u56f4\u7684\u6807\u8bc6\uff0c\u53d8\u5f97\u8d8a\u6765\u8d8a\u957f\uff0c\u591a\u4eba\u5f00\u53d1\u65f6\u8fd8\u5f88\u5bb9\u6613\u5bfc\u81f4\u547d\u540d\u98ce\u683c\u6df7\u4e71\uff0c\u4e00\u4e2a\u5143\u7d20\u4e0a\u4f7f\u7528\u7684\u9009\u62e9\u5668\u4e2a\u6570\u4e5f\u53ef\u80fd\u8d8a\u6765\u8d8a\u591a\u3002</p></li></ul><p>\u56e0\u6b64\uff0c\u9664\u975e\u8bbe\u8ba1\u5e08\u660e\u786e\u9700\u6c42\u4ee5\u5916\uff0c\u6211\u4eec\u5e94\u8be5\u5c3d\u53ef\u80fd\u4f7f\u7528\u7ec4\u4ef6 <code>styles</code> \u5c5e\u6027\u521b\u5efa\u7ec4\u4ef6\u6837\u5f0f\uff0c\u6709\u5173\u5982\u4f55Angular\u6837\u5f0f\u8bf7\u53c2\u8003\u300a<a target="_blank" href="https://zhuanlan.zhihu.com/p/31235358" data-url="https://zhuanlan.zhihu.com/p/31235358">\u5173\u4e8eAngular\u6837\u5f0f\u5c01\u88c5</a>\u300b\u3002</p><h2 id="\u6837\u5f0f\u6587\u4ef6\u7c7b\u522b">\u6837\u5f0f\u6587\u4ef6\u7c7b\u522b<a onclick="window.location.hash = \'\u6837\u5f0f\u6587\u4ef6\u7c7b\u522b\'" class="anchor">#</a></h2><p>\u5728\u4e00\u4e2a\u9879\u76ee\u4e2d\uff0c\u6837\u5f0f\u6587\u4ef6\u6839\u636e\u529f\u80fd\u4e0d\u540c\uff0c\u53ef\u4ee5\u5212\u5206\u4e3a\u4e0d\u540c\u7684\u7c7b\u522b\u3002</p><h3 id="src/styles/index.less">src/styles/index.less<a onclick="window.location.hash = \'src/styles/index.less\'" class="anchor">#</a></h3><p>\u5168\u5c40\u6837\u5f0f\u6587\u4ef6\uff0c\u5728\u8fd9\u91cc\u4f60\u53ef\u4ee5\u8fdb\u884c\u4e00\u4e9b\u901a\u7528\u8bbe\u7f6e\u3002</p><h3 id="\u5de5\u5177\u96c6">\u5de5\u5177\u96c6<a onclick="window.location.hash = \'\u5de5\u5177\u96c6\'" class="anchor">#</a></h3><p>\u8bf7\u53c2\u8003 <a href="/theme/tools" data-url="/theme/tools">\u5de5\u5177\u96c6\u6837\u5f0f</a>\u3002</p><h3 id="\u9875\u9762\u7ea7">\u9875\u9762\u7ea7<a onclick="window.location.hash = \'\u9875\u9762\u7ea7\'" class="anchor">#</a></h3><p>\u5177\u4f53\u9875\u9762\u76f8\u5173\u7684\u6837\u5f0f\uff0c\u4f8b\u5982 <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/routes/dashboard/monitor/monitor.component.less" data-url="https:/ng-alain/ng-alain/blob/master/src/app/routes/dashboard/monitor/monitor.component.less">monitor.component.less</a>\uff0c\u91cc\u9762\u7684\u5185\u5bb9\u4ec5\u548c\u672c\u9875\u9762\u7684\u5185\u5bb9\u76f8\u5173\u3002\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u5982\u679c\u4e0d\u662f\u9875\u9762\u5185\u5bb9\u7279\u522b\u590d\u6742\uff0c\u6709\u4e86\u524d\u9762\u5168\u5c40\u6837\u5f0f\u3001\u5de5\u5177\u96c6\u6837\u5f0f\u7684\u914d\u5408\uff0c\u8fd9\u91cc\u8981\u5199\u7684\u5e94\u8be5\u4e0d\u591a\u3002</p><h2 id="\u5982\u4f55\u8986\u76d6\u53c2\u6570">\u5982\u4f55\u8986\u76d6\u53c2\u6570<a onclick="window.location.hash = \'\u5982\u4f55\u8986\u76d6\u53c2\u6570\'" class="anchor">#</a></h2><p>ng-alain \u7684\u6837\u5f0f\u4f7f\u7528\u4e86 <a target="_blank" href="http://lesscss.org/" data-url="http://lesscss.org/">Less</a> \u4f5c\u4e3a\u5f00\u53d1\u8bed\u8a00\uff0c\u5e76\u5b9a\u4e49\u4e86\u4e00\u7cfb\u5217\u5168\u5c40/\u7ec4\u4ef6\u7684\u6837\u5f0f\u53d8\u91cf\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u76f8\u5e94\u8c03\u6574\u3002</p><p>\u8981\u6539\u53d8\u7684\u53c2\u6570\u7edf\u4e00\u653e\u5728 <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less" data-url="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less">theme.less</a> LESS\u6587\u4ef6\u4e2d\uff0c\u6240\u6709\u53c2\u6570\u5305\u62ec\uff1a</p><ul><li><p><a href="/theme/global" data-url="/theme/global">\u5168\u5c40\u53c2\u6570</a></p></li><li><p><a href="/theme/default" data-url="/theme/default">\u9ed8\u8ba4\u5e03\u5c40</a></p></li><li><p><a href="/theme/fullscreen" data-url="/theme/fullscreen">\u5168\u5c4f\u5e03\u5c40</a></p></li></ul><p>\u5982\u679c\u4ee5\u4e0a\u53d8\u91cf\u4e0d\u80fd\u6ee1\u8db3\u4f60\u7684\u5b9a\u5236\u9700\u6c42\uff0c\u53ef\u4ee5\u7ed9\u6211\u4eec\u63d0 issue\u3002</p></article></section>',meta:{order:1,title:"\u5f00\u59cb\u4f7f\u7528",type:"Documents",module:"AlainThemeModule",config:"AlainThemeConfig"},toc:[{id:"\u6837\u5f0f",title:"\u6837\u5f0f",h:2},{id:"\u5e03\u5c40",title:"\u5e03\u5c40",h:2},{id:"\u811a\u624b\u67b6\u6837\u5f0f",title:"\u811a\u624b\u67b6\u6837\u5f0f",h:2},{id:"\u6837\u5f0f\u6587\u4ef6\u7c7b\u522b",title:"\u6837\u5f0f\u6587\u4ef6\u7c7b\u522b",h:2},{id:"src/styles/index.less",title:"src/styles/index.less",h:3},{id:"\u5de5\u5177\u96c6",title:"\u5de5\u5177\u96c6",h:3},{id:"\u9875\u9762\u7ea7",title:"\u9875\u9762\u7ea7",h:3},{id:"\u5982\u4f55\u8986\u76d6\u53c2\u6570",title:"\u5982\u4f55\u8986\u76d6\u53c2\u6570",h:2}]}},demo:!1},this.codes=[]},n=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/docs/global.en-US.md","zh-CN":"packages/theme/docs/global.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="Public">Public<a onclick="window.location.hash = \'Public\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@layout-gutter</code></td><td><code>8px</code></td><td>Antd layout spacing (unchageable)</td></tr><tr><td><code>@font-size-base</code></td><td><code>14px</code></td><td>Antd font size (unchageable)</td></tr><tr><td><code>@primary-color</code></td><td>Blue</td><td>antd primary color</td></tr><tr><td><code>@mobile-min</code></td><td><code>768px</code></td><td>PC of width</td></tr><tr><td><code>@mobile-max</code></td><td><code>767px</code></td><td>Mobile of width</td></tr><tr><td><code>@text-xs</code></td><td><code>@font-size-base - 2</code></td><td>Text of xs size</td></tr><tr><td><code>@text-sm</code></td><td><code>@font-size-base + 0</code></td><td>Text of sm size</td></tr><tr><td><code>@text-md</code></td><td><code>@font-size-base + 2</code></td><td>Text of md size</td></tr><tr><td><code>@text-lg</code></td><td><code>@font-size-base + 4</code></td><td>Text of lg size</td></tr><tr><td><code>@text-xl</code></td><td><code>@font-size-base + 8</code></td><td>Text of xl size</td></tr><tr><td><code>@text-xxl</code></td><td><code>@font-size-base + 12</code></td><td>Text of xxl size</td></tr><tr><td><code>@icon-sm</code></td><td><code>@font-size-base * 2</code></td><td>Icon of sm size</td></tr><tr><td><code>@icon-md</code></td><td><code>@font-size-base * 4</code></td><td>Icon of md size</td></tr><tr><td><code>@icon-lg</code></td><td><code>@font-size-base * 6</code></td><td>Icon of lg size</td></tr><tr><td><code>@icon-xl</code></td><td><code>@font-size-base * 8</code></td><td>Icon of xl size</td></tr><tr><td><code>@icon-xxl</code></td><td><code>@font-size-base * 10</code></td><td>Icon of xxl size</td></tr><tr><td><code>@h1-font-size</code></td><td><code>32px</code></td><td>h1 font size</td></tr><tr><td><code>@h2-font-size</code></td><td><code>24px</code></td><td>h2 font size</td></tr><tr><td><code>@h3-font-size</code></td><td><code>20px</code></td><td>h3 font size</td></tr><tr><td><code>@h4-font-size</code></td><td><code>16px</code></td><td>h4 font size</td></tr><tr><td><code>@h5-font-size</code></td><td><code>14px</code></td><td>h5 font size</td></tr><tr><td><code>@h6-font-size</code></td><td><code>12px</code></td><td>h6 font size</td></tr><tr><td><code>@enable-all-colors</code></td><td><code>true</code></td><td>Turn on background, text color<br>eg: <code>.bg-teal</code>\u3001<code>.text-teal</code></td></tr><tr><td><code>@modal-sm</code></td><td><code>300px</code></td><td>Small modal</td></tr><tr><td><code>@modal-md</code></td><td><code>500px</code></td><td>Medium modal</td></tr><tr><td><code>@modal-lg</code></td><td><code>900px</code></td><td>Large modal</td></tr><tr><td><code>@modal-lg</code></td><td><code>1200px</code></td><td>Extra large modal</td></tr><tr><td><code>@drawer-sm</code></td><td><code>300px</code></td><td>Small drawer</td></tr><tr><td><code>@drawer-md</code></td><td><code>500px</code></td><td>Medium drawer</td></tr><tr><td><code>@drawer-lg</code></td><td><code>900px</code></td><td>Large drawer</td></tr><tr><td><code>@drawer-lg</code></td><td><code>1200px</code></td><td>Extra large drawer</td></tr><tr><td><code>@code-border-color</code></td><td><code>#eee</code></td><td><code><code></code> border color</td></tr><tr><td><code>@code-bg</code></td><td><code>#f7f7f7</code></td><td><code><code></code> background color</td></tr><tr><td><code>@widths</code></td><td><code>xs @layout-gutter * 10</code><br><code>sm @layout-gutter * 20</code><br><code>md @layout-gutter * 30</code><br><code>lg @layout-gutter * 40</code><br><code>xl @layout-gutter * 50</code><br><code>xxl @layout-gutter * 50</code></td><td>width</td></tr><tr><td><code>@border-radius-md</code></td><td><code>4px</code></td><td>Medium border rounded corner</td></tr><tr><td><code>@border-radius-lg</code></td><td><code>6px</code></td><td>Large border rounded corner</td></tr><tr><td><code>@masonry-column-gap</code></td><td><code>@layout-gutter * 2</code></td><td>CSS waterfall flow column and column spacing</td></tr><tr><td><code>@scrollbar-enabled</code></td><td><code>true</code></td><td>Enable landscaping scrollbars</td></tr><tr><td><code>@scrollbar-width</code></td><td><code>6px</code></td><td>Scroll bar width</td></tr><tr><td><code>@scrollbar-height</code></td><td><code>6px</code></td><td>Scroll bar height</td></tr><tr><td><code>@scrollbar-track-color</code></td><td><code>rgba(0, 0, 0, 0.3)</code></td><td>Scrollbar track color</td></tr><tr><td><code>@scrollbar-thumb-color</code></td><td><code>#6e6e6e</code></td><td>Scrollbar thumb color</td></tr><tr><td><code>@scrollbar-table-enabled</code></td><td><code>false</code></td><td>Enable landscaping scrollbars of nz-table</td></tr></tbody></table><h2 id="Ng-patch">Ng patch<a onclick="window.location.hash = \'Ng-patch\'" class="anchor">#</a></h2><h3 id="General">General<a onclick="window.location.hash = \'General\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@preserve-white-spaces-enabled</code></td><td><code>true</code></td><td>Fixed between buttons spacing when enabled <a target="_blank" href="https://angular.io/api/core/Component#preserveWhitespaces" data-url="https://angular.io/api/core/Component#preserveWhitespaces">preserveWhitespaces</a> is true</td></tr><tr><td><code>@preserve-sf-and-st-spaces</code></td><td><code>16px</code></td><td>Spacing between <code>sf</code> and <code>st</code></td></tr><tr><td><code>@preserve-buttons-spaces</code></td><td>Spacing between <code>button</code> and <code>button</code>(incluldes: <code>button</code>,<code>button-group</code>,<code>popconfirm</code>)</td></tr><tr><td><code>@router-animation-duration</code></td><td><code>antFadeIn</code></td><td>Route switching animation name</td></tr><tr><td><code>@router-animation-duration</code></td><td><code>1s</code></td><td>Animation duration</td></tr></tbody></table><h2 id="Zorro-patch">Zorro patch<a onclick="window.location.hash = \'Zorro-patch\'" class="anchor">#</a></h2><h3 id="General">General<a onclick="window.location.hash = \'General\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@forced-turn-off-nz-modal-animation-enabled</code></td><td><code>false</code></td><td>Forced to turn off <code>nz-modal</code> animation</td></tr></tbody></table><h3 id="Form">Form<a onclick="window.location.hash = \'Form\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@form-state-visual-feedback-enabled</code></td><td><code>false</code></td><td>Turn on visual feedback of form invalid elements</td></tr><tr><td><code>@search-form-bg</code></td><td><code>#fbfbfb</code></td><td>Background color of simple search form</td></tr><tr><td><code>@search-form-radius</code></td><td><code>4px</code></td><td>Border rounded corner of simple search form</td></tr></tbody></table><h3 id="Table">Table<a onclick="window.location.hash = \'Table\'" class="anchor">#</a></h3><p>By <code>nz-table</code>\u3002</p><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@nz-table-img-radius</code></td><td><code>4px</code></td><td>Image rounded in the table</td></tr><tr><td><code>@nz-table-img-margin-right</code></td><td><code>4px</code></td><td>Image margin-right in the table</td></tr><tr><td><code>@nz-table-img-max-width</code></td><td><code>32px</code></td><td>Image maximum width in the table</td></tr><tr><td><code>@nz-table-img-max-height</code></td><td><code>32px</code></td><td>Image maximum height in the table</td></tr><tr><td><code>@nz-table-rep-max-width</code></td><td><code>@mobile-max</code></td><td>Triggering table response when mobile screen</td></tr><tr><td><code>@nz-table-rep-header-background</code></td><td><code>@border-color-split</code></td><td>Table responsive: title background color</td></tr><tr><td><code>@nz-table-rep-even-background</code></td><td><code>#f9f9f9</code></td><td>Table responsive: even background color</td></tr><tr><td><code>@nz-table-rep-padding-vertical</code></td><td><code>8px</code></td><td>Table responsive: Cell vertical spacing</td></tr><tr><td><code>@nz-table-rep-padding-horizontal</code></td><td><code>8px</code></td><td>Table responsive: Cell horizontal spacing</td></tr><tr><td><code>@nz-table-rep-column-name-width</code></td><td><code>100px</code></td><td>Table responsive: Column name maximum width</td></tr><tr><td><code>@nz-table-rep-column-name-text-align</code></td><td><code>right</code></td><td>Table responsive: Column name text alignment</td></tr><tr><td><code>@nz-table-rep-column-name-padding-right</code></td><td><code>right</code></td><td>Table responsive: Column name right spacing</td></tr><tr><td><code>@nz-table-rep-column-name-color</code></td><td><code>rgba(0, 0, 0, 0.5)</code></td><td>Table responsive: Column name color</td></tr></tbody></table><h2 id="Widgets">Widgets<a onclick="window.location.hash = \'Widgets\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@badge-enabled</code></td><td><code>true</code></td><td>Whether bootstrap badge</td></tr><tr><td><code>@hafl-enabled</code></td><td><code>true</code></td><td>Whether hafl image</td></tr><tr><td><code>@abs-enabled</code></td><td><code>true</code></td><td>Whether abs element</td></tr><tr><td><code>@masonry-enabled</code></td><td><code>true</code></td><td>Whether css masonry</td></tr><tr><td><code>@setting-drawer-enabled</code></td><td><code>true</code></td><td>Whether setting drawer css</td></tr><tr><td><code>@search-form-enabled</code></td><td><code>true</code></td><td>Simple style search form, <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr><tr><td><code>@search__form-enabled</code></td><td><code>true</code></td><td>Pro style search form, <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr></tbody></table></article></section>',meta:{type:"Theme",order:1,title:"Global Parameters"},toc:[{id:"Public",title:"Public",h:2},{id:"Ng-patch",title:"Ng patch",h:2},{id:"General",title:"General",h:3},{id:"Zorro-patch",title:"Zorro patch",h:2},{id:"General",title:"General",h:3},{id:"Form",title:"Form",h:3},{id:"Table",title:"Table",h:3},{id:"Widgets",title:"Widgets",h:2}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="\u516c\u5171\u7c7b">\u516c\u5171\u7c7b<a onclick="window.location.hash = \'\u516c\u5171\u7c7b\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@layout-gutter</code></td><td><code>8px</code></td><td>antd\u5e03\u5c40\u95f4\u8ddd\uff0c\u4e0d\u53ef\u6539\u53d8</td></tr><tr><td><code>@font-size-base</code></td><td><code>14px</code></td><td>antd\u5b57\u53f7</td></tr><tr><td><code>@primary-color</code></td><td>\u84dd\u8272</td><td>antd \u4e3b\u8272</td></tr><tr><td><code>@mobile-min</code></td><td><code>768px</code></td><td>PC\u7aef</td></tr><tr><td><code>@mobile-max</code></td><td><code>767px</code></td><td>\u79fb\u52a8\u7aef</td></tr><tr><td><code>@text-xs</code></td><td><code>@font-size-base - 2</code></td><td>xs \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@text-sm</code></td><td><code>@font-size-base + 0</code></td><td>sm \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@text-md</code></td><td><code>@font-size-base + 2</code></td><td>md \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@text-lg</code></td><td><code>@font-size-base + 4</code></td><td>lg \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@text-xl</code></td><td><code>@font-size-base + 8</code></td><td>xl \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@text-xxl</code></td><td><code>@font-size-base + 12</code></td><td>xxl \u6587\u672c\u5927\u5c0f</td></tr><tr><td><code>@icon-sm</code></td><td><code>@font-size-base * 2</code></td><td>sm \u56fe\u6807</td></tr><tr><td><code>@icon-md</code></td><td><code>@font-size-base * 4</code></td><td>md \u56fe\u6807</td></tr><tr><td><code>@icon-lg</code></td><td><code>@font-size-base * 6</code></td><td>lg \u56fe\u6807</td></tr><tr><td><code>@icon-xl</code></td><td><code>@font-size-base * 8</code></td><td>xl \u56fe\u6807</td></tr><tr><td><code>@icon-xxl</code></td><td><code>@font-size-base * 10</code></td><td>xxl \u56fe\u6807</td></tr><tr><td><code>@h1-font-size</code></td><td><code>32px</code></td><td>h1\u5b57\u53f7</td></tr><tr><td><code>@h2-font-size</code></td><td><code>24px</code></td><td>h2\u5b57\u53f7</td></tr><tr><td><code>@h3-font-size</code></td><td><code>20px</code></td><td>h3\u5b57\u53f7</td></tr><tr><td><code>@h4-font-size</code></td><td><code>16px</code></td><td>h4\u5b57\u53f7</td></tr><tr><td><code>@h5-font-size</code></td><td><code>14px</code></td><td>h5\u5b57\u53f7</td></tr><tr><td><code>@h6-font-size</code></td><td><code>12px</code></td><td>h6\u5b57\u53f7</td></tr><tr><td><code>@enable-all-colors</code></td><td><code>true</code></td><td>\u5f00\u542f\u80cc\u666f\u3001\u6587\u672c\u989c\u8272<br>\u4f8b\u5982\uff1a<code>.bg-teal</code>\u3001<code>.text-teal</code><br>\u6709\u5173\u989c\u8272\u503c\u89c1\u6837\u5f0f\u89c4\u5219\u7ae0\u8282</td></tr><tr><td><code>@modal-sm</code></td><td><code>300px</code></td><td>\u5c0f\u53f7\u5bf9\u8bdd\u6846</td></tr><tr><td><code>@modal-md</code></td><td><code>500px</code></td><td>\u4e2d\u53f7\u5bf9\u8bdd\u6846</td></tr><tr><td><code>@modal-lg</code></td><td><code>900px</code></td><td>\u5927\u53f7\u5bf9\u8bdd\u6846</td></tr><tr><td><code>@modal-xl</code></td><td><code>1200px</code></td><td>\u8d85\u5927\u53f7\u5bf9\u8bdd\u6846</td></tr><tr><td><code>@drawer-sm</code></td><td><code>300px</code></td><td>\u5c0f\u53f7\u62bd\u5c49</td></tr><tr><td><code>@drawer-md</code></td><td><code>500px</code></td><td>\u4e2d\u53f7\u62bd\u5c49</td></tr><tr><td><code>@drawer-lg</code></td><td><code>900px</code></td><td>\u5927\u53f7\u62bd\u5c49</td></tr><tr><td><code>@drawer-xl</code></td><td><code>1200px</code></td><td>\u8d85\u5927\u53f7\u62bd\u5c49</td></tr><tr><td><code>@code-border-color</code></td><td><code>#eee</code></td><td><code><code></code> \u8fb9\u6846\u989c\u8272</td></tr><tr><td><code>@code-bg</code></td><td><code>#f7f7f7</code></td><td><code><code></code> \u80cc\u666f\u989c\u8272</td></tr><tr><td><code>@widths</code></td><td><code>xs @layout-gutter * 10</code><br><code>sm @layout-gutter * 20</code><br><code>md @layout-gutter * 30</code><br><code>lg @layout-gutter * 40</code><br><code>xl @layout-gutter * 50</code><br><code>xxl @layout-gutter * 50</code></td><td>\u5bbd\u5ea6</td></tr><tr><td><code>@border-radius-md</code></td><td><code>4px</code></td><td>\u4e2d\u53f7\u8fb9\u6846\u5706\u89d2</td></tr><tr><td><code>@border-radius-lg</code></td><td><code>6px</code></td><td>\u5927\u53f7\u8fb9\u6846\u5706\u89d2</td></tr><tr><td><code>@masonry-column-gap</code></td><td><code>@layout-gutter * 2</code></td><td>CSS\u7011\u5e03\u6d41\u5217\u4e0e\u5217\u7684\u95f4\u8ddd</td></tr><tr><td><code>@scrollbar-enabled</code></td><td><code>true</code></td><td>\u542f\u7528\u7f8e\u5316\u6eda\u52a8\u6761</td></tr><tr><td><code>@scrollbar-width</code></td><td><code>6px</code></td><td>\u7f8e\u5316\u6eda\u52a8\u6761\u5bbd\u5ea6</td></tr><tr><td><code>@scrollbar-height</code></td><td><code>6px</code></td><td>\u7f8e\u5316\u6eda\u52a8\u6761\u9ad8\u5ea6</td></tr><tr><td><code>@scrollbar-track-color</code></td><td><code>rgba(0, 0, 0, 0.3)</code></td><td>\u7f8e\u5316\u6eda\u52a8\u6761\u7684\u8f68\u9053\u989c\u8272</td></tr><tr><td><code>@scrollbar-thumb-color</code></td><td><code>#6e6e6e</code></td><td>\u7f8e\u5316\u6eda\u52a8\u6761\u5c0f\u65b9\u5757\u989c\u8272</td></tr><tr><td><code>@scrollbar-table-enabled</code></td><td><code>false</code></td><td>\u542f\u7528\u7f8e\u5316\u8868\u683c\u6eda\u52a8\u6761</td></tr></tbody></table><h2 id="Ng\u8865\u4e01">Ng\u8865\u4e01<a onclick="window.location.hash = \'Ng\u8865\u4e01\'" class="anchor">#</a></h2><h3 id="\u901a\u7528">\u901a\u7528<a onclick="window.location.hash = \'\u901a\u7528\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@preserve-white-spaces-enabled</code></td><td><code>true</code></td><td>\u89e3\u51b3\u5f00\u542f <a target="_blank" href="https://angular.io/api/core/Component#preserveWhitespaces" data-url="https://angular.io/api/core/Component#preserveWhitespaces">preserveWhitespaces</a> \u65f6\u6309\u94ae\u95f4\u53ef\u80fd\u4f1a\u51fa\u73b0\u65e0\u7f1d</td></tr><tr><td><code>@preserve-sf-and-st-spaces</code></td><td><code>16px</code></td><td><code>sf</code> \u4e0e <code>st</code> \u95f4\u95f4\u8ddd</td></tr><tr><td><code>@preserve-buttons-spaces</code></td><td>\u6309\u94ae\u95f4\u95f4\u8ddd\uff08\u5305\u62ec\uff1abutton\u3001button-group\u3001popconfirm\uff09</td></tr><tr><td><code>@router-animation-duration</code></td><td><code>antFadeIn</code></td><td>\u8def\u7531\u5207\u6362\u52a8\u753b</td></tr><tr><td><code>@router-animation-duration</code></td><td><code>1s</code></td><td>\u8def\u7531\u5207\u6362\u52a8\u753b\u65f6\u957f</td></tr></tbody></table><h2 id="Zorro\u7ec4\u4ef6\u8865\u4e01">Zorro\u7ec4\u4ef6\u8865\u4e01<a onclick="window.location.hash = \'Zorro\u7ec4\u4ef6\u8865\u4e01\'" class="anchor">#</a></h2><h3 id="\u901a\u7528">\u901a\u7528<a onclick="window.location.hash = \'\u901a\u7528\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@forced-turn-off-nz-modal-animation-enabled</code></td><td><code>false</code></td><td>\u5f3a\u5236\u5173\u95ed <code>nz-modal</code> \u52a8\u753b\u6548\u679c</td></tr></tbody></table><h3 id="\u8868\u5355">\u8868\u5355<a onclick="window.location.hash = \'\u8868\u5355\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@form-state-visual-feedback-enabled</code></td><td><code>false</code></td><td>\u5f00\u542f\u8868\u5355\u5143\u7d20\u7684\u89c6\u89c9\u53cd\u9988</td></tr><tr><td><code>@search-form-bg</code></td><td><code>#fbfbfb</code></td><td>\u5217\u8868\u9875\u7b80\u6613\u641c\u7d22\u8868\u5355\u80cc\u666f\u8272</td></tr><tr><td><code>@search-form-radius</code></td><td><code>4px</code></td><td>\u5217\u8868\u9875\u7b80\u6613\u641c\u7d22\u8868\u5355\u5706\u89d2</td></tr></tbody></table><h3 id="\u8868\u683c">\u8868\u683c<a onclick="window.location.hash = \'\u8868\u683c\'" class="anchor">#</a></h3><p>\u6307 <code>nz-table</code>\u3002</p><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@nz-table-img-radius</code></td><td><code>4px</code></td><td>\u8868\u683c\u4e2d\u7684\u56fe\u7247\u5706\u89d2</td></tr><tr><td><code>@nz-table-img-margin-right</code></td><td><code>4px</code></td><td>\u8868\u683c\u4e2d\u7684\u56fe\u7247\u53f3\u5916\u8fb9\u8ddd</td></tr><tr><td><code>@nz-table-img-max-width</code></td><td><code>32px</code></td><td>\u8868\u683c\u4e2d\u7684\u56fe\u7247\u6700\u5927\u5bbd\u5ea6</td></tr><tr><td><code>@nz-table-img-max-height</code></td><td><code>32px</code></td><td>\u8868\u683c\u4e2d\u7684\u56fe\u7247\u6700\u5927\u9ad8\u5ea6</td></tr><tr><td><code>@nz-table-rep-max-width</code></td><td><code>@mobile-max</code></td><td>\u5f53\u79fb\u52a8\u7aef\u5c4f\u5e55\u65f6\u89e6\u53d1\u8868\u683c\u54cd\u5e94\u5f0f</td></tr><tr><td><code>@nz-table-rep-header-background</code></td><td><code>@border-color-split</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u6807\u9898\u80cc\u666f\u8272</td></tr><tr><td><code>@nz-table-rep-even-background</code></td><td><code>#f9f9f9</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5076\u6570\u884c\u80cc\u666f\u8272</td></tr><tr><td><code>@nz-table-rep-padding-vertical</code></td><td><code>8px</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5355\u5143\u683c\u5782\u76f4\u95f4\u8ddd</td></tr><tr><td><code>@nz-table-rep-padding-horizontal</code></td><td><code>8px</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5355\u5143\u683c\u6c34\u5e73\u95f4\u8ddd</td></tr><tr><td><code>@nz-table-rep-column-name-width</code></td><td><code>100px</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5217\u540d\u6700\u5927\u5bbd\u5ea6</td></tr><tr><td><code>@nz-table-rep-column-name-text-align</code></td><td><code>right</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5217\u540d\u6587\u672c\u5bf9\u9f50\u65b9\u5f0f</td></tr><tr><td><code>@nz-table-rep-column-name-padding-right</code></td><td><code>right</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5217\u540d\u53f3\u95f4\u8ddd</td></tr><tr><td><code>@nz-table-rep-column-name-color</code></td><td><code>rgba(0, 0, 0, 0.5)</code></td><td>\u8868\u683c\u54cd\u5e94\u5f0f\uff1a\u5217\u540d\u989c\u8272</td></tr></tbody></table><h2 id="\u5c0f\u90e8\u4ef6">\u5c0f\u90e8\u4ef6<a onclick="window.location.hash = \'\u5c0f\u90e8\u4ef6\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@badge-enabled</code></td><td><code>true</code></td><td>bootstrap\u5fbd\u7ae0</td></tr><tr><td><code>@hafl-enabled</code></td><td><code>true</code></td><td>\u534a\u56fe</td></tr><tr><td><code>@abs-enabled</code></td><td><code>true</code></td><td>\u4e2d\u5fc3\u5143\u7d20</td></tr><tr><td><code>@masonry-enabled</code></td><td><code>true</code></td><td>CSS\u7011\u5e03\u6d41\u5217</td></tr><tr><td><code>@setting-drawer-enabled</code></td><td><code>true</code></td><td>\u4e3b\u9898\u8bbe\u7f6e</td></tr><tr><td><code>@search-form-enabled</code></td><td><code>true</code></td><td>\u7b80\u5316\u641c\u7d22\u6846\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr><tr><td><code>@search__form-enabled</code></td><td><code>true</code></td><td>Pro\u641c\u7d22\u6846\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr></tbody></table></article></section>',meta:{type:"Theme",order:1,title:"\u5168\u5c40\u53c2\u6570"},toc:[{id:"\u516c\u5171\u7c7b",title:"\u516c\u5171\u7c7b",h:2},{id:"Ng\u8865\u4e01",title:"Ng\u8865\u4e01",h:2},{id:"\u901a\u7528",title:"\u901a\u7528",h:3},{id:"Zorro\u7ec4\u4ef6\u8865\u4e01",title:"Zorro\u7ec4\u4ef6\u8865\u4e01",h:2},{id:"\u901a\u7528",title:"\u901a\u7528",h:3},{id:"\u8868\u5355",title:"\u8868\u5355",h:3},{id:"\u8868\u683c",title:"\u8868\u683c",h:3},{id:"\u5c0f\u90e8\u4ef6",title:"\u5c0f\u90e8\u4ef6",h:2}]}},demo:!1},this.codes=[]},r=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"zh-CN":"packages/theme/docs/icon.md"},content:{"zh-CN":{content:'<section class="markdown"><article><p>\u81ea ng-zorro-antd 1.7.x \u4ee5\u540e\u56fe\u6807\u53d1\u751f\u7834\u574f\u6027\u53d8\u66f4\uff0c\u867d\u7136\u5e26\u4e86\u8bf8\u591a<a target="_blank" href="https://ng.ant.design/components/icon/zh#svg-%E5%9B%BE%E6%A0%87" data-url="https://ng.ant.design/components/icon/zh#svg-%E5%9B%BE%E6%A0%87">\u4f18\u52bf</a>\uff0c\u540c\u65f6\u4e5f\u5e26\u6765\u51e0\u4e2a\u52a3\u52bf\uff1a</p><ul><li><p>\u82e5\u91c7\u7528\u52a8\u6001\u52a0\u8f7d\u4f1a\u4ea7\u751f\u989d\u5916\u7684HTTP\u8bf7\u6c42</p></li><li><p>\u82e5\u9759\u6001\u52a0\u8f7d\u9700\u8981\u9010\u4e00\u6ce8\u518c\u56fe\u6807</p></li><li><p><code>st</code> \u7ec4\u4ef6\u7684 <code>format</code> \u53c2\u6570\u65e0\u6cd5\u76f4\u63a5\u6307\u5b9a\u56fe\u6807</p></li></ul><p>ng-alain \u9ed8\u8ba4\u4f7f\u7528\u9759\u6001\u52a0\u8f7d\u7684\u505a\u6cd5\uff0c\u6bd5\u7adf\u540e\u7aef\u4f7f\u7528\u56fe\u6807\u76f8\u5bf9\u4e8e\u6bd4\u8f83\u6709\u9650\uff0c\u5373\u4f7f\u5c06 svg \u90fd\u6253\u5305\u8fdb\u811a\u672c\u76f8\u6bd4\u8f83\u4e4b\u524d\u6574\u4e2a styles \u4f53\u79ef\u4e0a\u662f\u6240\u6709\u51cf\u5c11\uff0c\u4f46\u6bd4\u8f83\u5e76\u4e0d\u591a\u3002</p><p>\u800c\u9488\u5bf9\u4ee5\u4e0a\u95ee\u9898\uff0cng-alain \u63d0\u4f9b\u51e0\u79cd\u65b9\u6848\u3002</p><h2 id="\u4f7f\u7528icon\u63d2\u4ef6\uff08\u63a8\u8350\uff09">\u4f7f\u7528icon\u63d2\u4ef6\uff08\u63a8\u8350\uff09<a onclick="window.location.hash = \'\u4f7f\u7528icon\u63d2\u4ef6\uff08\u63a8\u8350\uff09\'" class="anchor">#</a></h2><p><strong>\u5c3d\u53ef\u80fd</strong>\u4ece\u9879\u76ee\u4e2d\u5206\u6790\u5e76\u751f\u6210\u9759\u6001 Icon\uff0c\u63d2\u4ef6\u4f1a\u81ea\u52a8\u5728 <code>src</code> \u76ee\u5f55\u4e0b\u751f\u6210\u4e24\u4e2a\u6587\u4ef6\uff1a</p><ul><li><p><code>src/style-icons.ts</code> \u81ea\u5b9a\u4e49\u90e8\u5206\u65e0\u6cd5\u89e3\u6790\uff08\u4f8b\u5982\uff1a\u8fdc\u7a0b\u83dc\u5355\u56fe\u6807\uff09</p></li><li><p><code>src/style-icons-auto.ts</code> \u547d\u4ee4\u81ea\u52a8\u751f\u6210\u6587\u4ef6</p></li></ul><blockquote><p>\u81ea\u52a8\u6392\u9664 <a target="_blank" href="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6" data-url="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6">ng-zorro-antd</a> \u548c <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/theme.module.ts#L33">@delon</a> \u5df2\u7ecf\u52a0\u8f7d\u7684\u56fe\u6807\u3002</p></blockquote><pre class="hljs language-bash"><code>ng g ng-alain:plugin icon</code></pre><p>\u540c\u65f6\uff0c\u9700\u8981\u624b\u52a8\u5728 <code>startup.service.ts</code> \u4e2d\u5bfc\u5165\uff1a</p><pre class="hljs language-ts"><code>import { ICONS_AUTO } from \'../../../style-icons-auto\';\nimport { ICONS } from \'../../../style-icons\';\n\n@Injectable()\nexport class StartupService {\n constructor(iconSrv: NzIconService) {\n iconSrv.addIcon(...ICONS_AUTO, ...ICONS);\n }\n}</code></pre><p><strong>\u6709\u6548\u8bed\u6cd5</strong></p><pre class="hljs language-html"><code><i class="anticon anticon-user"></i>\n<i class="anticon anticon-question-circle-o"></i>\n<i class="anticon anticon-spin anticon-loading"></i>\n<i nz-icon class="anticon anticon-user"></i>\n<i nz-icon nzType="align-{{type ? \'left\' : \'right\'}}"></i>\n<i nz-icon [type]="type ? \'menu-fold\' : \'menu-unfold\'" [theme]="theme ? \'outline\' : \'fill\'"></i>\n<i nz-icon [type]="type ? \'fullscreen\' : \'fullscreen-exit\'"></i>\n<i nz-icon nzType="{{ type ? \'arrow-left\' : \'arrow-right\' }}"></i>\n<i nz-icon nzType="filter" theme="outline"></i>\n<nz-input-group [nzAddOnBeforeIcon]="focus ? \'anticon anticon-arrow-down\' : \'anticon anticon-search\'"></nz-input-group></code></pre><h2 id="\u52a8\u6001\u52a0\u8f7d">\u52a8\u6001\u52a0\u8f7d<a onclick="window.location.hash = \'\u52a8\u6001\u52a0\u8f7d\'" class="anchor">#</a></h2><p><a target="_blank" href="https://ng.ant.design/components/icon/zh#%E9%9D%99%E6%80%81%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD" data-url="https://ng.ant.design/components/icon/zh#%E9%9D%99%E6%80%81%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD">\u52a8\u6001\u52a0\u8f7d</a>\uff0c\u8fd9\u662f\u4e3a\u4e86\u51cf\u5c11\u5305\u4f53\u79ef\u800c\u63d0\u4f9b\u7684\u65b9\u5f0f\u3002\u5f53 NG-ZORRO \u68c0\u6d4b\u7528\u6237\u60f3\u8981\u6e32\u67d3\u7684\u56fe\u6807\u8fd8\u6ca1\u6709\u9759\u6001\u5f15\u5165\u65f6\uff0c\u4f1a\u53d1\u8d77 HTTP \u8bf7\u6c42\u52a8\u6001\u5f15\u5165\u3002\u4f60\u53ea\u9700\u8981\u914d\u7f6e <code>angular.json</code> \u6587\u4ef6\uff1a</p><pre class="hljs language-json"><code>{\n "assets": [\n {\n "glob": "**/*",\n "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",\n "output": "/assets/"\n }\n ]\n}</code></pre><h2 id="\u52a8\u6001\u4f7f\u7528">\u52a8\u6001\u4f7f\u7528<a onclick="window.location.hash = \'\u52a8\u6001\u4f7f\u7528\'" class="anchor">#</a></h2><p>\u4e0d\u7ba1\u662f\u9759\u6001\u6216\u52a8\u6001\u52a0\u8f7d\uff0c\u4f9d\u7136\u65e0\u6cd5\u89e3\u51b3\u539f\u59cb\u65b9\u6cd5 <code>class="anticon anticon-"</code> \u7684\u4fbf\u5229\u6027\uff0c\u6bd5\u7adf\u5b57\u7b26\u4e32\u5c31\u662f\u5b57\u7b26\u4e32\u5e76\u975e Angular \u6a21\u677f\u65e0\u6cd5\u88ab\u89e3\u6790\uff0c\u800c\u9488\u5bf9\u8fd9\u4e2a\u95ee\u9898\uff0c\u63d0\u4f9b\u4e24\u79cd\u89e3\u51b3\u529e\u6cd5\u3002</p><h3 id="\u7c7b\u6837\u5f0f">\u7c7b\u6837\u5f0f<a onclick="window.location.hash = \'\u7c7b\u6837\u5f0f\'" class="anchor">#</a></h3><p>\u4e8b\u5b9e\u4e0a\u6240\u6709 Antd \u56fe\u6807\u90fd\u53ef\u4ee5\u5728 <a target="_blank" href="http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402" data-url="http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=9402">iconfont</a> \u627e\u5f97\u5230\uff0c\u53ef\u4ee5\u70b9\u9009\u81ea\u5df1\u9700\u8981\u7684\u56fe\u6807\u5e76\u751f\u6210\u76f8\u5e94\u7684 css \u6587\u4ef6\u6216 cdn\uff0c\u6700\u540e\u5728\u9879\u76ee\u4e2d\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 <code>1.7.0</code> \u4e4b\u524d\u7684\u5199\u6cd5\u3002</p><blockquote><p><strong>\u6ce8\u610f\uff1a</strong> \u5728\u9879\u76ee\u7f16\u8f91\u91cc\u52a0\u4e0a <code>anticon anticon-</code> \u524d\u7f00\u624d\u80fd\u540c\u4e4b\u524d\u7684\u7c7b\u540d\u4fdd\u6301\u4e00\u81f4\u3002</p></blockquote><pre class="hljs language-null"><code>// angular.json\n"styles": [\n "src/iconfont.css"\n],</code></pre><p>\u5982\u679c\u975ecnd\u8fd8\u9700\u8981\u5c06\u76f8\u5e94\u7684 icon \u56fe\u6807\u6587\u4ef6\u590d\u5236\u5230 <code>assets</code> \u76ee\u5f55\u4e0b\uff0c\u540c\u65f6\u4fee\u6539 <code>iconfont.css</code> \u4e2d <code>@font-face</code> \u5bf9\u5e94\u7684 url \u8def\u5f84\u3002</p><h3 id="@angular/elements">@angular/elements<a onclick="window.location.hash = \'@angular/elements\'" class="anchor">#</a></h3><p>\u52a8\u6001\u52a0\u8f7d\u7684\u53e6\u4e00\u79cd\u65b9\u5f0f\u662f\u4f7f\u7528 @angular/elements\uff0c\u53ea\u9700\u8981 <code>nz-icon</code> \u6307\u4ee4\u91cd\u65b0\u5c01\u88c5\u6210\u7ec4\u4ef6\u3002</p><pre class="hljs language-ts"><code>import { Component, Input } from \'@angular/core\';\n\n@Component({\n selector: \'nz-icon\',\n template: `<i nz-icon [type]="type"></i>`,\n})\nexport class IconComponent {\n @Input()\n type: string;\n}</code></pre><p>\u540c\u65f6\u5728\u6839\u6a21\u5757\u91cc\u6ce8\u518c\u5b83\u3002</p><pre class="hljs language-ts"><code>import { createCustomElement } from \'@angular/elements\';\n\n@NgModule({\n declarations: [],\n entryComponents: []\n})\nexport class AppModule {\n constructor(injector: Injector) {\n customElements.define(\'nz-icon\', createCustomElement(IconComponent, { injector }));\n }\n}</code></pre><p>\u6700\u540e\u3002</p><pre class="hljs language-ts"><code>@Component({\n selector: \'app-demo\',\n template: `\n <div [innerHTML]="value"></div>\n `,\n})\nexport class DemoComponent {\n\n constructor(private san: DomSanitizer) { }\n\n value = this.san.bypassSecurityTrustHtml(\n `icon: <nz-icon nzType="bell"></nz-icon>`,\n );\n}</code></pre></article></section>',meta:{type:"Theme",order:3,title:"Icon"},toc:[{id:"\u4f7f\u7528icon\u63d2\u4ef6\uff08\u63a8\u8350\uff09",title:"\u4f7f\u7528icon\u63d2\u4ef6\uff08\u63a8\u8350\uff09",h:2},{id:"\u52a8\u6001\u52a0\u8f7d",title:"\u52a8\u6001\u52a0\u8f7d",h:2},{id:"\u52a8\u6001\u4f7f\u7528",title:"\u52a8\u6001\u4f7f\u7528",h:2},{id:"\u7c7b\u6837\u5f0f",title:"\u7c7b\u6837\u5f0f",h:3},{id:"@angular/elements",title:"@angular/elements",h:3}]}},demo:!1},this.codes=[]},l=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/docs/locale.en-US.md","zh-CN":"packages/theme/docs/locale.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Provide a uniform localization support for <code>@delon/*</code> class library built-in text of components.</p><h2 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h2><h3 id="Providers">Providers<a onclick="window.location.hash = \'Providers\'" class="anchor">#</a></h3><p>Provides the token of <code>DELON_LOCALE</code> for configuring antd locale text globally.</p><pre class="hljs language-ts"><code>import { DELON_LOCALE, en_US } from \'@delon/theme\';\n@NgModule({\n ...\n providers : [ { provide: DELON_LOCALE, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><h3 id="Service">Service<a onclick="window.location.hash = \'Service\'" class="anchor">#</a></h3><p>Provides the service of <code>DelonLocaleService</code> to dynamic change the locale text.</p><pre class="hljs language-ts"><code>import { en_US, DelonLocaleService } from \'@delon/theme\';\n...\nconstructor(private delonLocaleService: DelonLocaleService) {\n}\n\nswitchLanguage() {\n this.delonLocaleService.setLocale(en_US);\n}</code></pre><p>Note: <code>en_US</code> is the package name, follow below.</p><h2 id="Supported-languages">Supported languages<a onclick="window.location.hash = \'Supported-languages\'" class="anchor">#</a></h2><table><thead><tr><th>Language</th><th>Filename</th></tr></thead><tbody><tr><td>English</td><td>en_US</td></tr><tr><td>Chinese (Simplified)</td><td>zh_CN</td></tr><tr><td>Chinese (Traditional)</td><td>zh_TW</td></tr><tr><td>Turkish</td><td>tr_TR</td></tr><tr><td>Polish</td><td>pl_PL</td></tr><tr><td>Greek</td><td>el_GR</td></tr><tr><td>Korean</td><td>ko_KR</td></tr><tr><td>Croatian</td><td>hr_HR</td></tr></tbody></table><h2 id="Add-a-new-language">Add a new language<a onclick="window.location.hash = \'Add-a-new-language\'" class="anchor">#</a></h2><p>If you can\'t find your language, you are welcome to create a locale package based on <a target="_blank" href="https:/ng-alain/delon/tree/master/packages/theme/src/locale/languages/en-US.ts" data-url="https:/ng-alain/delon/tree/master/packages/theme/src/locale/languages/en-US.ts">en_US</a> and send us a pull request.</p></article></section>',meta:{order:2,title:"Internationalization",type:"Documents"},toc:[{id:"Usage",title:"Usage",h:2},{id:"Providers",title:"Providers",h:3},{id:"Service",title:"Service",h:3},{id:"Supported-languages",title:"Supported languages",h:2},{id:"Add-a-new-language",title:"Add a new language",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>\u4e3a\u6574\u4e2a <code>@delon/*</code> \u7c7b\u5e93\u5185\u5efa\u6587\u6848\u63d0\u4f9b\u7edf\u4e00\u7684\u56fd\u9645\u5316\u652f\u6301\u3002</p><h2 id="\u4f7f\u7528">\u4f7f\u7528<a onclick="window.location.hash = \'\u4f7f\u7528\'" class="anchor">#</a></h2><h3 id="\u5168\u5c40\u914d\u7f6e">\u5168\u5c40\u914d\u7f6e<a onclick="window.location.hash = \'\u5168\u5c40\u914d\u7f6e\'" class="anchor">#</a></h3><p>\u53ea\u9700\u8981\u5728\u6839\u6a21\u5757\u91cd\u65b0\u5bf9 <code>DELON_LOCALE</code> \u6ce8\u5165\u76ee\u6807\u8bed\u8a00\u5373\u53ef\u5168\u5c40\u751f\u6548\u3002</p><pre class="hljs language-ts"><code>import { DELON_LOCALE, en_US } from \'@delon/theme\';\n@NgModule({\n ...\n providers : [ { provide: DELON_LOCALE, useValue: en_US } ]\n})\nexport class AppModule { }</code></pre><h3 id="\u8fd0\u884c\u65f6\u4fee\u6539">\u8fd0\u884c\u65f6\u4fee\u6539<a onclick="window.location.hash = \'\u8fd0\u884c\u65f6\u4fee\u6539\'" class="anchor">#</a></h3><p><code>@delon</code> \u63d0\u4f9b\u4e86\u4e00\u4e2a\u670d\u52a1 <code>DelonLocaleService</code> \u7528\u4e8e\u52a8\u6001\u4fee\u6539\u56fd\u9645\u5316\u6587\u6848\u3002</p><pre class="hljs language-ts"><code>import { en_US, DelonLocaleService } from \'@delon/theme\';\n...\nconstructor(private delonLocaleService: DelonLocaleService) {\n}\n\nswitchLanguage() {\n this.delonLocaleService.setLocale(en_US);\n}</code></pre><p>\u6ce8\u610f\uff1a<code>en_US</code> \u662f\u8bed\u8a00\u5305\u540d\u79f0\uff0c\u4ee5\u4e0b\u8868\u683c\u4e5f\u9075\u5faa\u540c\u6837\u7684\u89c4\u5219\u3002</p><h2 id="\u652f\u6301\u8bed\u8a00">\u652f\u6301\u8bed\u8a00<a onclick="window.location.hash = \'\u652f\u6301\u8bed\u8a00\'" class="anchor">#</a></h2><table><thead><tr><th>\u8bed\u8a00</th><th>\u8bed\u8a00\u5305\u540d\u79f0</th></tr></thead><tbody><tr><td>\u82f1\u8bed\uff08\u7f8e\u5f0f\uff09</td><td>en_US</td></tr><tr><td>\u7b80\u4f53\u4e2d\u6587</td><td>zh_CN</td></tr><tr><td>\u7e41\u4f53\u4e2d\u6587</td><td>zh_TW</td></tr><tr><td>\u571f\u8033\u5176\u8bed</td><td>tr_TR</td></tr><tr><td>\u6ce2\u5170\u8bed</td><td>pl_PL</td></tr><tr><td>\u5e0c\u814a\u8bed</td><td>el_GR</td></tr><tr><td>\u671d\u9c9c\u8bed</td><td>ko_KR</td></tr><tr><td>\u514b\u7f57\u5730\u4e9a</td><td>hr_HR</td></tr></tbody></table><h2 id="\u589e\u52a0\u8bed\u8a00\u5305">\u589e\u52a0\u8bed\u8a00\u5305<a onclick="window.location.hash = \'\u589e\u52a0\u8bed\u8a00\u5305\'" class="anchor">#</a></h2><p>\u5982\u679c\u4f60\u627e\u4e0d\u5230\u4f60\u9700\u8981\u7684\u8bed\u8a00\u5305\uff0c\u6b22\u8fce\u4f60\u5728 <a target="_blank" href="https:/ng-alain/delon/tree/master/packages/theme/src/locale/languages/en-US.ts" data-url="https:/ng-alain/delon/tree/master/packages/theme/src/locale/languages/en-US.ts">\u82f1\u6587\u8bed\u8a00\u5305</a> \u7684\u57fa\u7840\u4e0a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u8bed\u8a00\u5305\uff0c\u5e76\u7ed9\u6211\u4eec Pull Request\u3002</p></article></section>',meta:{order:2,title:"\u56fd\u9645\u5316",type:"Documents"},toc:[{id:"\u4f7f\u7528",title:"\u4f7f\u7528",h:2},{id:"\u5168\u5c40\u914d\u7f6e",title:"\u5168\u5c40\u914d\u7f6e",h:3},{id:"\u8fd0\u884c\u65f6\u4fee\u6539",title:"\u8fd0\u884c\u65f6\u4fee\u6539",h:3},{id:"\u652f\u6301\u8bed\u8a00",title:"\u652f\u6301\u8bed\u8a00",h:2},{id:"\u589e\u52a0\u8bed\u8a00\u5305",title:"\u589e\u52a0\u8bed\u8a00\u5305",h:2}]}},demo:!1},this.codes=[]},i=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/docs/performance.en-US.md","zh-CN":"packages/theme/docs/performance.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>ng-alain also includes a set of like bootstrap style tools, And built on the design principles developed by <a target="_blank" href="https://ant.design/" data-url="https://ant.design/">Ant Design</a>. If you are familiar with Bootstrap, it will be very friendly, because all naming as close as it. Also, Install <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain snippets</a> plugin in VSCode for intellisense these class names.</p><h2 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h2><p>We have hundreds of Less variables (including ng-zorro-antd, ng-alain), some of which contain the <code>-enabled</code> suffix, which means that these libraries are optional.</p><p>You can to <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less" data-url="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less">theme.less</a> set to <code>false</code>, which can reduce css file size.</p><pre class="hljs language-less"><code>// I don\'t need masonry style\n@masonry-enabled: false</code></pre><h2 id="Parameters">Parameters<a onclick="window.location.hash = \'Parameters\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@scrollbar-enabled</code></td><td><code>true</code></td><td>Enable landscaping scrollbars</td></tr><tr><td><code>@preserve-white-spaces-enabled</code></td><td><code>true</code></td><td>Fixed between buttons spacing when enabled <a target="_blank" href="https://angular.io/api/core/Component#preserveWhitespaces" data-url="https://angular.io/api/core/Component#preserveWhitespaces">preserveWhitespaces</a> is true</td></tr><tr><td><code>@form-state-visual-feedback-enabled</code></td><td><code>false</code></td><td>Turn on visual feedback of form invalid elements</td></tr><tr><td><code>@badge-enabled</code></td><td><code>true</code></td><td>Whether bootstrap badge</td></tr><tr><td><code>@hafl-enabled</code></td><td><code>true</code></td><td>Whether hafl image</td></tr><tr><td><code>@abs-enabled</code></td><td><code>true</code></td><td>Whether abs element</td></tr><tr><td><code>@masonry-enabled</code></td><td><code>true</code></td><td>Whether css masonry</td></tr><tr><td><code>@setting-drawer-enabled</code></td><td><code>true</code></td><td>Whether setting drawer css</td></tr><tr><td><code>@search-form-enabled</code></td><td><code>true</code></td><td>Simple style search form, <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr><tr><td><code>@search__form-enabled</code></td><td><code>true</code></td><td>Pro style search form, <a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr></tbody></table></article></section>',meta:{type:"Theme",order:10,title:"Performance"},toc:[{id:"Usage",title:"Usage",h:2},{id:"Parameters",title:"Parameters",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>ng-alain \u9664\u4e86\u63d0\u4f9b\u4e3b\u9898\u65b9\u6848\u4ee5\u5916\uff0c\u8fd8\u5305\u542b\u4e00\u5957\u7c7b\u4f3c Bootstrap \u7684\u5de5\u5177\u96c6\uff0c\u5e76\u4e14\u4e25\u683c\u9075\u5b88 Antd \u7684\u8bbe\u8ba1\u4ef7\u503c\u89c2\uff0c\u5bf9\u4e8e\u719f\u6089 Bootstrap \u7684\u4eba\u6765\u8bf4\u4f1a\u975e\u5e38\u53cb\u597d\uff0c\u56e0\u4e3a\u6240\u6709\u547d\u540d\u65b9\u5f0f\u90fd\u5c3d\u53ef\u80fd\u4e0e Bootstrap \u76f8\u540c\u3002\u540c\u65f6\uff0c\u6211\u4eec\u4e3a VSCode \u5199\u7684 <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain\u63d2\u4ef6</a> \u4f1a\u81ea\u52a8\u4e3a\u4f60\u63d0\u4f9b\u8fd9\u5957CSS\u5de5\u5177\u96c6\u7684\u667a\u80fd\u63d0\u9192\u3002</p><h2 id="\u5982\u4f55\u4f18\u5316">\u5982\u4f55\u4f18\u5316<a onclick="window.location.hash = \'\u5982\u4f55\u4f18\u5316\'" class="anchor">#</a></h2><p>\u6211\u4eec\u5305\u542b\u7740\u4e0a\u767e\u79cd Less \u53d8\u91cf\uff08\u5305\u542bng-zorro-antd\u3001ng-alain\uff09\uff0c\u8fd9\u4e9b\u53d8\u66f4\u6709\u90e8\u5206\u662f\u5305\u542b\u7740<code>-enabled</code> \u540e\u7f00\uff0c\u5b83\u8868\u793a\u8fd9\u4e9b\u7c7b\u5e93\u662f\u53ef\u9009\u7684\u3002</p><p>\u4f60\u53ef\u4ee5\u5728 ng-alain \u9879\u76ee\u7684 <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less" data-url="https:/ng-alain/ng-alain/blob/master/src/styles/theme.less">theme.less</a> \u4e2d\u8bbe\u7f6e\u4e3a <code>false</code>\uff0c\u53ef\u4ee5\u6709\u6548\u51cf\u5c11 css \u6587\u4ef6\u5927\u5c0f\u3002</p><pre class="hljs language-less"><code>// \u4e0d\u9700\u8981 masonry \u6837\u5f0f\n@masonry-enabled: false</code></pre><h2 id="\u53c2\u6570">\u53c2\u6570<a onclick="window.location.hash = \'\u53c2\u6570\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@scrollbar-enabled</code></td><td><code>true</code></td><td>\u542f\u7528\u7f8e\u5316\u6eda\u52a8\u6761</td></tr><tr><td><code>@preserve-white-spaces-enabled</code></td><td><code>true</code></td><td>\u89e3\u51b3\u5f00\u542f <a target="_blank" href="https://angular.io/api/core/Component#preserveWhitespaces" data-url="https://angular.io/api/core/Component#preserveWhitespaces">preserveWhitespaces</a> \u65f6\u6309\u94ae\u95f4\u53ef\u80fd\u4f1a\u51fa\u73b0\u65e0\u7f1d</td></tr><tr><td><code>@form-state-visual-feedback-enabled</code></td><td><code>false</code></td><td>\u5f00\u542f\u8868\u5355\u5143\u7d20\u7684\u89c6\u89c9\u53cd\u9988</td></tr><tr><td><code>@badge-enabled</code></td><td><code>true</code></td><td>bootstrap\u5fbd\u7ae0</td></tr><tr><td><code>@hafl-enabled</code></td><td><code>true</code></td><td>\u534a\u56fe</td></tr><tr><td><code>@abs-enabled</code></td><td><code>true</code></td><td>\u4e2d\u5fc3\u5143\u7d20</td></tr><tr><td><code>@masonry-enabled</code></td><td><code>true</code></td><td>CSS\u7011\u5e03\u6d41\u5217</td></tr><tr><td><code>@setting-drawer-enabled</code></td><td><code>true</code></td><td>\u4e3b\u9898\u8bbe\u7f6e</td></tr><tr><td><code>@search-form-enabled</code></td><td><code>true</code></td><td>\u7b80\u5316\u641c\u7d22\u6846\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr><tr><td><code>@search__form-enabled</code></td><td><code>true</code></td><td>Pro\u641c\u7d22\u6846\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/" data-url="https://ng-alain.github.io/ng-alain/">DEMO</a></td></tr></tbody></table></article></section>',meta:{type:"Theme",order:10,title:"\u5305\u4f53\u4f18\u5316"},toc:[{id:"\u5982\u4f55\u4f18\u5316",title:"\u5982\u4f55\u4f18\u5316",h:2},{id:"\u53c2\u6570",title:"\u53c2\u6570",h:2}]}},demo:!1},this.codes=[]},s=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/docs/tools.en-US.md","zh-CN":"packages/theme/docs/tools.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>ng-alain builds a set of style tools for size, spacing, color, and more based on Ant Design.</p><blockquote><p>Install <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain snippets</a> plugin in VSCode for intellisense these class names.</p></blockquote><h2 id="Spacing">Spacing<a onclick="window.location.hash = \'Spacing\'" class="anchor">#</a></h2><p>ng-alain believes that these styles tool only using in the content area. Built on the design principles developed by Ant Design, A spacing width is based on <code>8px</code> as a reference unit, and derived from three rule sizes.</p><table><thead><tr><th>Name</th><th>Formula</th><th>Size</th><th>Description</th></tr></thead><tbody><tr><td><code>xs</code></td><td>$gutter / 2</td><td>4px</td><td>Smaller</td></tr><tr><td><code>sm</code></td><td>$gutter</td><td>8px</td><td>Small</td></tr><tr><td><code>md</code></td><td>$gutter * 2</td><td>16px</td><td>Medium</td></tr><tr><td><code>lg</code></td><td>$gutter * 3</td><td>24px</td><td>Large</td></tr></tbody></table><p>According these rules, derived from <code>margin</code>\uff0c<code>padding</code>, and naming rules as follows:</p><ul><li><p>Type: <code>padding</code>, <code>margin</code></p></li><li><p>Direction(Optional): <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>x</code>(equal to <code>left</code>, <code>right</code>), <code>y</code>(equal to <code>top</code>, <code>bottom</code>)</p></li></ul><p><strong>Clean</strong></p><pre class="hljs language-regex"><code>[<Type>p|m][<Direction>t|r|b|l|x|y]?0</code></pre><p><strong>Name Rule</strong></p><pre class="hljs language-regex"><code>[<Type>p|m][<Direction>t|r|b|l|x|y]?-[<Size>sm|md|lg]</code></pre><p>Demo:</p><pre class="hljs language-css"><code>.p-sm { padding: 8px !important; }\n.pt-sm { padding-top: 8px !important; }\n.m-sm { margin: 16px !important; }\n.mt-md { margin-top: 16px !important; }\n\n.p0 { padding: 0 !important; }</code></pre><h2 id="Color">Color<a onclick="window.location.hash = \'Color\'" class="anchor">#</a></h2><p>Ant Design does not have a button color, but is based on visual effects. The default is daybreak blue, for example: button type <code>primary</code> of <code>nz-button</code>.</p><p>ng-alain still does not break this rule, building a set of color classes for text and background based on the <a target="_blank" href="//ant.design/docs/spec/colors" data-url="//ant.design/docs/spec/colors">color</a> section.</p><table><thead><tr><th>Name</th><th>Primary Color</th><th>Description</th></tr></thead><tbody><tr><td><code>red</code></td><td><code>#f5222d</code></td><td>Dust Red: Fighting, unrestrained</td></tr><tr><td><code>volcano</code></td><td><code>#fa541c</code></td><td>Volcano: Eye-catching</td></tr><tr><td><code>orange</code></td><td><code>#fa8c16</code></td><td>Sunset Orange: Warm and cheerful</td></tr><tr><td><code>gold</code></td><td><code>#faad14</code></td><td>Calendula Gold: Vital and active</td></tr><tr><td><code>yellow</code></td><td><code>#fadb14</code></td><td>Sunrise Yellow: Birth, sunshine</td></tr><tr><td><code>lime</code></td><td><code>#a0d911</code></td><td>Lime: Natural, vital</td></tr><tr><td><code>green</code></td><td><code>#52c41a</code></td><td>Polar Green: Health, innovation</td></tr><tr><td><code>cyan</code></td><td><code>#13c2c2</code></td><td>Cyan: Hope, strong</td></tr><tr><td><code>blue</code></td><td><code>#1890ff</code></td><td>Daybreak Blue: Inclusive, technology, Pratt & Whitney</td></tr><tr><td><code>geekblue</code></td><td><code>#2f54eb</code></td><td>Geek Blue: Explore and delve into</td></tr><tr><td><code>purple</code></td><td><code>#722ed1</code></td><td>Golden Purple: Elegant, romantic</td></tr><tr><td><code>magenta</code></td><td><code>#eb2f96</code></td><td>Magenta: Smooth, neutral</td></tr></tbody></table><p>Ant Design\'s base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.</p><p><strong>Category</strong></p><table><thead><tr><th>Name</th><th>Color Size</th></tr></thead><tbody><tr><td><code>light</code></td><td>5</td></tr><tr><td><code>normal</code></td><td>6</td></tr><tr><td><code>dark</code></td><td>7</td></tr></tbody></table><p><strong>Name Rule</strong></p><pre class="hljs language-regex"><code>[<Type>text|bg]-[<Color Name>red|volcano|orange|gold|yellow|lime|green|cyan|blue|geekblue|purple|magenta|grey](-[light|dark])?(-h)?</code></pre><blockquote><p><code>normal</code> itself is the basic color, so it can be ignored\n<code>grey</code> is very often used, so add extra <code>grey-light</code>, <code>grey-darker</code> alias to indicate depth</p></blockquote><p>DEMO:</p><pre class="hljs language-less"><code>// Text color\n.text-red-light { color: #fabeb9 !important; }\n.text-red { color: #f04134 !important; }\n.text-red-dark { color: #a31837 !important; }\n\n// background-color color\n.bg-red-light { background-color: #fabeb9 !important; }\n.bg-red { background-color: #f04134 !important; }\n.bg-red-dark { background-color: #a31837 !important; }\n\n// hover color\n.bg-red-light-h { &:hover { background-color: #fabeb9 !important; } }\n.bg-red-h { &:hover { background-color: #f04134 !important; } }\n.bg-red-dark-h { &:hover { background-color: #a31837 !important; } }</code></pre><h3 id="Aliase">Aliase<a onclick="window.location.hash = \'Aliase\'" class="anchor">#</a></h3><table><thead><tr><th>Aliase</th><th>Color Name</th></tr></thead><tbody><tr><td><code>primary</code></td><td><code>blue</code></td></tr><tr><td><code>success</code></td><td><code>green</code></td></tr><tr><td><code>error</code></td><td><code>red</code></td></tr><tr><td><code>warning</code></td><td><code>yellow</code></td></tr></tbody></table><p>DEMO:</p><pre class="hljs language-less"><code>// Text color\n.text-error-light { color: #fabeb9 !important; }\n.text-error { color: #f04134 !important; }\n.text-error-dark { color: #a31837 !important; }\n\n// background-color color\n.bg-error-light { background-color: #fabeb9 !important; }\n.bg-error { background-color: #f04134 !important; }\n.bg-error-dark { background-color: #a31837 !important; }\n\n// hover color\n.bg-error-light-h { &:hover { background-color: #fabeb9 !important; } }\n.bg-error-h { &:hover { background-color: #f04134 !important; } }\n.bg-error-dark-h { &:hover { background-color: #a31837 !important; } }</code></pre><p><strong>Full Colors</strong></p><p>You can use <code>@enable-all-colors: true</code> to turn on all 120 color rules.</p><pre class="hljs language-less"><code>.text-red-1 { color: #fff1f0 !important; }\n.text-red-6 { color: #f04134 !important; }\n.text-red-10 { color: #5c0011 !important; }\n\n.bg-red-6 { color: #f04134 !important; }\n.bg-red-6-h { color: #f04134 !important; }</code></pre><h2 id="Clearfix">Clearfix<a onclick="window.location.hash = \'Clearfix\'" class="anchor">#</a></h2><p>Clear floats <code>.clearfix</code>.</p><h2 id="Display">Display<a onclick="window.location.hash = \'Display\'" class="anchor">#</a></h2><table><thead><tr><th>Aliase</th><th>CSS</th></tr></thead><tbody><tr><td><code>d-none</code></td><td><code>display: none</code></td></tr><tr><td><code>d-block</code></td><td><code>display: block</code></td></tr><tr><td><code>d-inline-block</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>d-flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>d-inline-flex</code></td><td><code>display: inline-flex</code></td></tr><tr><td><code>justify-content-start</code></td><td><code>justify-content: flex-start</code></td></tr><tr><td><code>justify-content-end</code></td><td><code>justify-content: flex-end</code></td></tr><tr><td><code>justify-content-center</code></td><td><code>justify-content: center</code></td></tr><tr><td><code>justify-content-between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>justify-content-around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>align-items-start</code></td><td><code>align-items: flex-start</code></td></tr><tr><td><code>align-items-end</code></td><td><code>align-items: flex-end</code></td></tr><tr><td><code>align-items-center</code></td><td><code>align-items: center</code></td></tr><tr><td><code>align-items-baseline</code></td><td><code>align-items: baseline</code></td></tr><tr><td><code>align-items-stretch</code></td><td><code>align-items: stretch</code></td></tr><tr><td><code>align-content-start</code></td><td><code>align-content: flex-start</code></td></tr><tr><td><code>align-content-end</code></td><td><code>align-content: flex-end</code></td></tr><tr><td><code>align-content-center</code></td><td><code>align-content: center</code></td></tr><tr><td><code>align-content-between</code></td><td><code>align-content: space-between</code></td></tr><tr><td><code>align-content-around</code></td><td><code>align-content: space-around</code></td></tr><tr><td><code>align-content-stretch</code></td><td><code>align-content: stretch</code></td></tr><tr><td><code>align-self-auto</code></td><td><code>align-self: auto</code></td></tr><tr><td><code>align-self-start</code></td><td><code>align-self: flex-start</code></td></tr><tr><td><code>align-self-end</code></td><td><code>align-self: flex-end</code></td></tr><tr><td><code>align-self-center</code></td><td><code>align-self: center</code></td></tr><tr><td><code>align-self-baseline</code></td><td><code>align-self: baseline</code></td></tr><tr><td><code>align-self-stretch</code></td><td><code>align-self: stretch</code></td></tr><tr><td><code>flex-center</code></td><td><code>display: flex; align-items: center;</code></td></tr><tr><td><code>flex-center-between</code></td><td><code>display: flex; align-items: center; align-content: space-between;</code></td></tr></tbody></table><h2 id="Position">Position<a onclick="window.location.hash = \'Position\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>overflow-auto</code></td><td><code>overflow: auto</code></td></tr><tr><td><code>overflow-hidden</code></td><td><code>overflow: hidden</code></td></tr><tr><td><code>fixed-top</code></td><td>Fixed top</td></tr><tr><td><code>fixed-bottom</code></td><td>Fixed bottom</td></tr></tbody></table><h2 id="Text">Text<a onclick="window.location.hash = \'Text\'" class="anchor">#</a></h2><h3 id="Sizing">Sizing<a onclick="window.location.hash = \'Sizing\'" class="anchor">#</a></h3><p>Ant Design is based on <code>14px</code>.</p><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>text-xs</code></td><td><code>12px</code></td></tr><tr><td><code>text-sm</code></td><td><code>14px</code></td></tr><tr><td><code>text-md</code></td><td><code>16px</code></td></tr><tr><td><code>text-lg</code></td><td><code>18px</code></td></tr><tr><td><code>text-xl</code></td><td><code>22px</code></td></tr></tbody></table><h3 id="Alignment">Alignment<a onclick="window.location.hash = \'Alignment\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>text-left</code></td><td>Text left</td></tr><tr><td><code>text-center</code></td><td>Text center</td></tr><tr><td><code>text-right</code></td><td>Text right</td></tr></tbody></table><h3 id="Overflow">Overflow<a onclick="window.location.hash = \'Overflow\'" class="anchor">#</a></h3><blockquote><p>The container must be <code>display: inline-block</code> or <code>display: block</code>.</p></blockquote><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>text-nowrap</code></td><td>Outputs a single line</td></tr><tr><td><code>text-truncate</code></td><td>Truncate string with ellipsis</td></tr></tbody></table><h3 id="Transformation">Transformation<a onclick="window.location.hash = \'Transformation\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>text-lowercase</code></td><td>Lowercase of text</td></tr><tr><td><code>text-uppercase</code></td><td>Uppercase of text</td></tr><tr><td><code>text-capitalize</code></td><td>Capitalize of text</td></tr><tr><td><code>text-deleted</code></td><td>Deleted line</td></tr></tbody></table><h3 id="Weight-and-italics">Weight and italics<a onclick="window.location.hash = \'Weight-and-italics\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>font-weight-normal</code></td><td><code>font-weight: normal</code></td></tr><tr><td><code>font-weight-bold</code></td><td><code>font-weight: 700</code></td></tr><tr><td><code>font-italic</code></td><td><code>font-style: italic</code></td></tr></tbody></table><h3 id="Other">Other<a onclick="window.location.hash = \'Other\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>text-hover</code></td><td><code>*:hover { color: @primary-color; }</code></td></tr><tr><td><code>disabled</code></td><td>Disabled</td></tr></tbody></table><h2 id="Borders">Borders<a onclick="window.location.hash = \'Borders\'" class="anchor">#</a></h2><h3 id="Border">Border<a onclick="window.location.hash = \'Border\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>border</code></td><td><code>border: 1px solid #f5f5f5 !important;</code></td></tr><tr><td><code>border-0</code></td><td><code>border: 0 !important;</code></td></tr><tr><td><code>border-top-0</code></td><td><code>border-top: 0 !important;</code></td></tr><tr><td><code>border-right-0</code></td><td><code>border-right: 0 !important;</code></td></tr><tr><td><code>border-bottom-0</code></td><td><code>border-bottom: 0 !important;</code></td></tr><tr><td><code>border-left-0</code></td><td><code>border-left: 0 !important;</code></td></tr></tbody></table><h3 id="Color">Color<a onclick="window.location.hash = \'Color\'" class="anchor">#</a></h3><p>Supports all color & aliase of <a href="/theme/tools#color" data-url="/theme/tools#color">color section</a>, such as <code>border-red</code>, <code>border-success</code>.</p><h3 id="Rounded">Rounded<a onclick="window.location.hash = \'Rounded\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>rounded-0</code></td><td><code>border-radius: 0;</code></td></tr><tr><td><code>rounded-circle</code></td><td><code>border-radius: 50%;</code></td></tr><tr><td><code>rounded-sm</code></td><td><code>border-radius: 2px;</code></td></tr><tr><td><code>rounded-md</code></td><td><code>border-radius: 4px;</code></td></tr><tr><td><code>rounded-lg</code></td><td><code>border-radius: 6px;</code></td></tr></tbody></table><h2 id="Width">Width<a onclick="window.location.hash = \'Width\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>width-sm</code></td><td><code>160px</code></td></tr><tr><td><code>width-md</code></td><td><code>240px</code></td></tr><tr><td><code>width-lg</code></td><td><code>320px</code></td></tr><tr><td><code>width-[0-10]</code></td><td><code>0%-100%</code></td></tr></tbody></table><h2 id="Responsive">Responsive<a onclick="window.location.hash = \'Responsive\'" class="anchor">#</a></h2><p>Like Bootstrap responsive rules, all apply <code>hidden-xs</code> classes are hidden when screen less than <code>480px</code>.</p><table><thead><tr><th>Name</th><th>Screen</th></tr></thead><tbody><tr><td><code>hidden-xs</code></td><td><480px</td></tr><tr><td><code>hidden-sm</code></td><td><768px</td></tr><tr><td><code>hidden-md</code></td><td><992px</td></tr><tr><td><code>hidden-lg</code></td><td><1200px</td></tr><tr><td><code>hidden-pc</code></td><td><768px</td></tr><tr><td><code>hidden-mobile</code></td><td>>768px</td></tr></tbody></table><h2 id="Rotate">Rotate<a onclick="window.location.hash = \'Rotate\'" class="anchor">#</a></h2><pre class="hljs language-null"><code>.rotate-[360 / 15]</code></pre><p>DEMO:</p><pre class="hljs language-css"><code>// Rotate 15 degrees\n.rotate-15\n// Rotate 90 degrees\n.rotate-90\n// Rotate 360 degrees\n.rotate-360</code></pre><h2 id="Other">Other<a onclick="window.location.hash = \'Other\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>block-center</code></td><td><code>margin: 0 auto</code></td></tr><tr><td><code>point</code></td><td><code>cursor: pointer</code></td></tr><tr><td><code>no-data</code></td><td>No result</td></tr><tr><td><code>no-resize</code></td><td>Setting does not allow adjustment elements</td></tr><tr><td><code>bg-center</code></td><td>Background image is vertically centered</td></tr><tr><td><code>scrollbar</code></td><td>Custom scrollbar for a div</td></tr><tr><td><code>color-weak</code></td><td>Weak mode</td></tr></tbody></table><h2 id="Widgets">Widgets<a onclick="window.location.hash = \'Widgets\'" class="anchor">#</a></h2><h3 id="Masonry">Masonry<a onclick="window.location.hash = \'Masonry\'" class="anchor">#</a></h3><p>Online <a target="_blank" href="https://ng-alain.github.io/ng-alain/#/style/gridmasonry" data-url="https://ng-alain.github.io/ng-alain/#/style/gridmasonry">DEMO</a>\u3002</p><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>row-masonry</code></td><td>Rows</td></tr><tr><td><code>row-masonry-{xs|sm|md|lg|xl}-{1-10}</code></td><td>Rows, Responsive style</td></tr><tr><td><code>col-masonry</code></td><td>Columns</td></tr></tbody></table><h2 id="ng-zorro">ng-zorro<a onclick="window.location.hash = \'ng-zorro\'" class="anchor">#</a></h2><h3 id="nz-card">nz-card<a onclick="window.location.hash = \'nz-card\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>ant-card__body-nopadding</code></td><td>Force body without spacing</td></tr></tbody></table><h3 id="nz-modal">nz-modal<a onclick="window.location.hash = \'nz-modal\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>modal-{sm|md|lg|xl}</code></td><td>Set size of modal, <code>wrapClassName: \'modal-lg\'</code></td></tr><tr><td><code>modal-body-nopadding</code></td><td>Without padding in body element</td></tr><tr><td><code>modal-header</code></td><td>Use html template to custom modal, <a target="_blank" href="https://ng-alain.github.io/ng-alain/#/extras/poi" data-url="https://ng-alain.github.io/ng-alain/#/extras/poi">DEMO</a></td></tr><tr><td><code>modal-footer</code></td><td>Use html template to custom modal, <a target="_blank" href="https://ng-alain.github.io/ng-alain/#/extras/poi" data-url="https://ng-alain.github.io/ng-alain/#/extras/poi">DEMO</a></td></tr></tbody></table><h3 id="nz-table">nz-table<a onclick="window.location.hash = \'nz-table\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>ant-table-rep__title</code></td><td>Title</td></tr><tr><td><code>ant-table-rep__hide-header-footer</code></td><td>Show title or bottom when mobile screen</td></tr></tbody></table></section><example-table-rep-index></example-table-rep-index><section class="markdown"><h3 id="nz-tag">nz-tag<a onclick="window.location.hash = \'nz-tag\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>ant-tag__plus</code></td><td>Add button style</td></tr></tbody></table></article></section>',meta:{type:"Theme",order:2,title:"Style Tools"},toc:[{id:"Spacing",title:"Spacing",h:2},{id:"Color",title:"Color",h:2},{id:"Aliase",title:"Aliase",h:3},{id:"Clearfix",title:"Clearfix",h:2},{id:"Display",title:"Display",h:2},{id:"Position",title:"Position",h:2},{id:"Text",title:"Text",h:2},{id:"Sizing",title:"Sizing",h:3},{id:"Alignment",title:"Alignment",h:3},{id:"Overflow",title:"Overflow",h:3},{id:"Transformation",title:"Transformation",h:3},{id:"Weight-and-italics",title:"Weight and italics",h:3},{id:"Other",title:"Other",h:3},{id:"Borders",title:"Borders",h:2},{id:"Border",title:"Border",h:3},{id:"Color",title:"Color",h:3},{id:"Rounded",title:"Rounded",h:3},{id:"Width",title:"Width",h:2},{id:"Responsive",title:"Responsive",h:2},{id:"Rotate",title:"Rotate",h:2},{id:"Other",title:"Other",h:2},{id:"Widgets",title:"Widgets",h:2},{id:"Masonry",title:"Masonry",h:3},{id:"ng-zorro",title:"ng-zorro",h:2},{id:"nz-card",title:"nz-card",h:3},{id:"nz-modal",title:"nz-modal",h:3},{id:"nz-table",title:"nz-table",h:3},{id:"nz-tag",title:"nz-tag",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>ng-alain \u5728 Ant Design \u7684\u57fa\u7840\u4e0a\u751f\u4ea7\u4e00\u5957\u5c3a\u5bf8\u3001\u95f4\u8ddd\u3001\u989c\u8272\u7b49\u5de5\u5177\u7c7b\u3002</p><blockquote><p>\u5728 VSCode \u5b89\u88c5 <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode" data-url="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-alain-vscode">ng-alain snippets</a> \u63d2\u4ef6\uff0c\u53ef\u4ee5\u5bf9\u6240\u6709\u5de5\u5177\u96c6\u6837\u5f0f\u540d\u79f0\u7684\u667a\u80fd\u63d0\u9192\u3002</p></blockquote><h2 id="\u95f4\u8ddd">\u95f4\u8ddd<a onclick="window.location.hash = \'\u95f4\u8ddd\'" class="anchor">#</a></h2><p>ng-alain \u8ba4\u4e3a\u8fd9\u4e9b\u5de5\u5177\u7c7b\u53ea\u4f1a\u8fd0\u7528\u5728\u5185\u5bb9\u533a\u57df\uff0c\u4e14\u79c9\u627f Ant Design \u7684\u8bbe\u8ba1\u4ef7\u503c\u89c2\uff0c\u95f4\u8ddd\u5bbd\u5ea6\u662f\u4ee5 <code>8px</code> \u4e3a\u4e00\u4e2a\u57fa\u51c6\u5355\u4f4d\uff0c\u5e76\u884d\u751f\u51fa\u4e09\u4e2a\u5c3a\u5bf8\uff0c\u5206\u522b\u4e3a\uff1a</p><table><thead><tr><th>\u540d\u79f0</th><th>\u516c\u5f0f</th><th>\u5c3a\u5bf8</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>xs</code></td><td>$gutter / 2</td><td>4px</td><td>\u8d85\u5c0f\u53f7</td></tr><tr><td><code>sm</code></td><td>$gutter</td><td>8px</td><td>\u5c0f\u53f7</td></tr><tr><td><code>md</code></td><td>$gutter * 2</td><td>16px</td><td>\u4e2d\u53f7</td></tr><tr><td><code>lg</code></td><td>$gutter * 3</td><td>24px</td><td>\u5927\u53f7</td></tr></tbody></table><p>\u4f9d\u8fd9\u4e9b\u89c4\u5219\uff0c\u884d\u751f\u51fa <code>margin</code>\u3001<code>padding</code>\uff0c\u5176\u547d\u540d\u89c4\u5219\u5982\u4e0b\uff1a</p><ul><li><p>\u7c7b\u578b\uff1a<code>padding</code>\u3001<code>margin</code></p></li><li><p>\u65b9\u5411\uff08\u53ef\u9009\uff09\uff1a<code>top</code>\u3001<code>right</code>\u3001<code>bottom</code>\u3001<code>left</code>\u3001<code>x</code>\uff08\u76f8\u5f53\u4e8e <code>left</code>\u3001<code>right</code>\uff09\u3001<code>y</code>\uff08\u76f8\u5f53\u4e8e <code>top</code>\u3001<code>bottom</code>\uff09</p></li></ul><p><strong>\u6d88\u9664</strong></p><pre class="hljs language-regex"><code>[<\u7c7b\u578b>p|m][<\u65b9\u5411>t|r|b|l|x|y]?0</code></pre><p><strong>\u547d\u540d\u683c\u5f0f</strong></p><pre class="hljs language-regex"><code>[<\u7c7b\u578b>p|m][<\u65b9\u5411>t|r|b|l|x|y]?-[<\u5c3a\u5bf8>sm|md|lg]</code></pre><p>\u793a\u4f8b\uff1a</p><pre class="hljs language-css"><code>.p-sm { padding: 8px !important; }\n.pt-sm { padding-top: 8px !important; }\n.m-sm { margin: 16px !important; }\n.mt-md { margin-top: 16px !important; }\n\n.p0 { padding: 0 !important; }</code></pre><h2 id="\u8272\u5f69">\u8272\u5f69<a onclick="window.location.hash = \'\u8272\u5f69\'" class="anchor">#</a></h2><p>Ant Design \u5e76\u6ca1\u6709\u6309\u94ae\u8272\u8fd9\u4e00\u8bf4\uff0c\u800c\u662f\u4ee5\u89c6\u89c9\u6548\u679c\u4e3a\u57fa\u51c6\u3002\u9ed8\u8ba4\u662f\u84dd\u8272\u7cfb\uff08\u62c2\u6653\u84dd\uff09\uff0c\u4f8b\u5982\uff1a<code>nz-button</code> \u7684\u6309\u94ae\u7c7b\u578b <code>primary</code>\u3002</p><p>\u800c ng-alain \u4f9d\u7136\u4e0d\u4f1a\u7834\u574f\u8fd9\u79cd\u89c4\u5219\uff0c\u4f46\u4f9d <a target="_blank" href="//ant.design/docs/spec/colors-cn" data-url="//ant.design/docs/spec/colors-cn">\u8272\u5f69</a> \u7ae0\u8282\uff0c\u4ea7\u751f\u4e86\u4e00\u79cd\u8fd0\u7528\u4e8e\u6587\u672c\u3001\u80cc\u666f\u7684\u8272\u7cfb\u7c7b\u3002</p><table><thead><tr><th>\u540d\u79f0</th><th>\u57fa\u672c\u8272</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>red</code></td><td><code>#f5222d</code></td><td>\u8584\u66ae\uff1a\u6597\u5fd7\u3001\u5954\u653e</td></tr><tr><td><code>volcano</code></td><td><code>#fa541c</code></td><td>\u706b\u5c71\uff1a\u9192\u76ee\u3001\u6f8e\u6e43</td></tr><tr><td><code>orange</code></td><td><code>#fa8c16</code></td><td>\u65e5\u66ae\uff1a\u6e29\u6696\u3001\u6b22\u5feb</td></tr><tr><td><code>gold</code></td><td><code>#faad14</code></td><td>\u91d1\u76cf\u82b1\uff1a\u6d3b\u529b\u3001\u79ef\u6781</td></tr><tr><td><code>yellow</code></td><td><code>#fadb14</code></td><td>\u65e5\u51fa\uff1a\u51fa\u751f\u3001\u9633\u5149</td></tr><tr><td><code>lime</code></td><td><code>#a0d911</code></td><td>\u9752\u67e0\uff1a\u81ea\u7136\u3001\u751f\u673a</td></tr><tr><td><code>green</code></td><td><code>#52c41a</code></td><td>\u6781\u5149\u7eff\uff1a\u5065\u5eb7\u3001\u521b\u65b0</td></tr><tr><td><code>cyan</code></td><td><code>#13c2c2</code></td><td>\u660e\u9752\uff1a\u5e0c\u671b\u3001\u575a\u5f3a</td></tr><tr><td><code>blue</code></td><td><code>#1890ff</code></td><td>\u62c2\u6653\u84dd\uff1a\u5305\u5bb9\u3001\u79d1\u6280\u3001\u666e\u60e0</td></tr><tr><td><code>geekblue</code></td><td><code>#2f54eb</code></td><td>\u6781\u5ba2\u84dd\uff1a\u63a2\u7d22\u3001\u94bb\u7814</td></tr><tr><td><code>purple</code></td><td><code>#722ed1</code></td><td>\u9171\u7d2b\uff1a\u4f18\u96c5\u3001\u6d6a\u6f2b</td></tr><tr><td><code>magenta</code></td><td><code>#eb2f96</code></td><td>\u6cd5\u5f0f\u6d0b\u7ea2\uff1a\u5e73\u7a33\u3001\u4e2d\u6027</td></tr></tbody></table><p>Ant Design \u7684\u57fa\u7840\u8272\u677f\u5171\u8ba1 120 \u4e2a\u989c\u8272\uff0c\u5305\u542b 12 \u4e2a\u4e3b\u8272\u4ee5\u53ca\u884d\u751f\u8272\u3002\u8fd9\u4e9b\u989c\u8272\u57fa\u672c\u53ef\u4ee5\u6ee1\u8db3\u4e2d\u540e\u53f0\u8bbe\u8ba1\u4e2d\u5bf9\u4e8e\u989c\u8272\u7684\u9700\u6c42\u3002</p><p><strong>\u5206\u7c7b</strong></p><table><thead><tr><th>\u540d\u79f0</th><th>\u8272\u53f7</th></tr></thead><tbody><tr><td><code>light</code></td><td>5\u53f7</td></tr><tr><td><code>normal</code></td><td>6\u53f7</td></tr><tr><td><code>dark</code></td><td>7\u53f7</td></tr></tbody></table><p><strong>\u547d\u540d\u683c\u5f0f</strong></p><pre class="hljs language-regex"><code>[<\u7c7b\u578b>text|bg]-[<\u8272\u5f69\u540d>red|volcano|orange|gold|yellow|lime|green|cyan|blue|geekblue|purple|magenta|grey](-[light|dark])?(-h)?</code></pre><blockquote><p><code>normal</code> \u672c\u8eab\u5373\u662f\u57fa\u672c\u8272\uff0c\u6240\u4ee5\u53ef\u4ee5\u88ab\u5ffd\u7565\n<code>grey</code> \u53ef\u80fd\u4f1a\u66f4\u5e38\u7528\uff0c\u6240\u4ee5\u989d\u5916\u589e\u52a0 <code>grey-lighter</code>\u3001<code>grey-darker</code> \u522b\u540d\u8868\u793a\u6df1\u5ea6</p></blockquote><p>\u793a\u4f8b\uff1a</p><pre class="hljs language-less"><code>// Text color\n.text-red-light { color: #fabeb9 !important; }\n.text-red { color: #f04134 !important; }\n.text-red-dark { color: #a31837 !important; }\n\n// background-color color\n.bg-red-light { background-color: #fabeb9 !important; }\n.bg-red { background-color: #f04134 !important; }\n.bg-red-dark { background-color: #a31837 !important; }\n\n// hover color\n.bg-red-light-h { &:hover { background-color: #fabeb9 !important; } }\n.bg-red-h { &:hover { background-color: #f04134 !important; } }\n.bg-red-dark-h { &:hover { background-color: #a31837 !important; } }</code></pre><h3 id="\u522b\u540d">\u522b\u540d<a onclick="window.location.hash = \'\u522b\u540d\'" class="anchor">#</a></h3><table><thead><tr><th>\u522b\u540d</th><th>\u8272\u7cfb</th></tr></thead><tbody><tr><td><code>primary</code></td><td><code>blue</code></td></tr><tr><td><code>success</code></td><td><code>green</code></td></tr><tr><td><code>error</code></td><td><code>red</code></td></tr><tr><td><code>warning</code></td><td><code>yellow</code></td></tr></tbody></table><p>\u793a\u4f8b\uff1a</p><pre class="hljs language-less"><code>// Text color\n.text-error-light { color: #fabeb9 !important; }\n.text-error { color: #f04134 !important; }\n.text-error-dark { color: #a31837 !important; }\n\n// background-color color\n.bg-error-light { background-color: #fabeb9 !important; }\n.bg-error { background-color: #f04134 !important; }\n.bg-error-dark { background-color: #a31837 !important; }\n\n// hover color\n.bg-error-light-h { &:hover { background-color: #fabeb9 !important; } }\n.bg-error-h { &:hover { background-color: #f04134 !important; } }\n.bg-error-dark-h { &:hover { background-color: #a31837 !important; } }</code></pre><h3 id="\u5168\u91cf\u989c\u8272">\u5168\u91cf\u989c\u8272<a onclick="window.location.hash = \'\u5168\u91cf\u989c\u8272\'" class="anchor">#</a></h3><p>\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>@enable-all-colors: true</code> \u6765\u5f00\u542f\u6240\u6709 120 \u4e2a\u989c\u8272\u7684\u89c4\u5219\u3002</p><pre class="hljs language-less"><code>.text-red-1 { color: #fff1f0 !important; }\n.text-red-6 { color: #f04134 !important; }\n.text-red-10 { color: #5c0011 !important; }\n\n.bg-red-6 { color: #f04134 !important; }\n.bg-red-6-h { color: #f04134 !important; }</code></pre><h2 id="\u6e05\u9664\u6d6e\u52a8">\u6e05\u9664\u6d6e\u52a8<a onclick="window.location.hash = \'\u6e05\u9664\u6d6e\u52a8\'" class="anchor">#</a></h2><p>\u6e05\u9664\u6d6e\u52a8 <code>.clearfix</code>\u3002</p><h2 id="\u663e\u793a">\u663e\u793a<a onclick="window.location.hash = \'\u663e\u793a\'" class="anchor">#</a></h2><table><thead><tr><th>\u522b\u540d</th><th>CSS</th></tr></thead><tbody><tr><td><code>d-none</code></td><td><code>display: none</code></td></tr><tr><td><code>d-block</code></td><td><code>display: block</code></td></tr><tr><td><code>d-inline-block</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>d-flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>d-inline-flex</code></td><td><code>display: inline-flex</code></td></tr><tr><td><code>justify-content-start</code></td><td><code>justify-content: flex-start</code></td></tr><tr><td><code>justify-content-end</code></td><td><code>justify-content: flex-end</code></td></tr><tr><td><code>justify-content-center</code></td><td><code>justify-content: center</code></td></tr><tr><td><code>justify-content-between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>justify-content-around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>align-items-start</code></td><td><code>align-items: flex-start</code></td></tr><tr><td><code>align-items-end</code></td><td><code>align-items: flex-end</code></td></tr><tr><td><code>align-items-center</code></td><td><code>align-items: center</code></td></tr><tr><td><code>align-items-baseline</code></td><td><code>align-items: baseline</code></td></tr><tr><td><code>align-items-stretch</code></td><td><code>align-items: stretch</code></td></tr><tr><td><code>align-content-start</code></td><td><code>align-content: flex-start</code></td></tr><tr><td><code>align-content-end</code></td><td><code>align-content: flex-end</code></td></tr><tr><td><code>align-content-center</code></td><td><code>align-content: center</code></td></tr><tr><td><code>align-content-between</code></td><td><code>align-content: space-between</code></td></tr><tr><td><code>align-content-around</code></td><td><code>align-content: space-around</code></td></tr><tr><td><code>align-content-stretch</code></td><td><code>align-content: stretch</code></td></tr><tr><td><code>align-self-auto</code></td><td><code>align-self: auto</code></td></tr><tr><td><code>align-self-start</code></td><td><code>align-self: flex-start</code></td></tr><tr><td><code>align-self-end</code></td><td><code>align-self: flex-end</code></td></tr><tr><td><code>align-self-center</code></td><td><code>align-self: center</code></td></tr><tr><td><code>align-self-baseline</code></td><td><code>align-self: baseline</code></td></tr><tr><td><code>align-self-stretch</code></td><td><code>align-self: stretch</code></td></tr><tr><td><code>flex-center</code></td><td><code>display: flex; align-items: center;</code></td></tr><tr><td><code>flex-center-between</code></td><td><code>display: flex; align-items: center; align-content: space-between;</code></td></tr></tbody></table><h2 id="\u4f4d\u7f6e">\u4f4d\u7f6e<a onclick="window.location.hash = \'\u4f4d\u7f6e\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>overflow-auto</code></td><td><code>overflow: auto</code></td></tr><tr><td><code>overflow-hidden</code></td><td><code>overflow: hidden</code></td></tr><tr><td><code>fixed-top</code></td><td>\u56fa\u5b9a\u9876\u90e8</td></tr><tr><td><code>fixed-bottom</code></td><td>\u56fa\u5b9a\u5e95\u90e8</td></tr></tbody></table><h2 id="\u6587\u672c">\u6587\u672c<a onclick="window.location.hash = \'\u6587\u672c\'" class="anchor">#</a></h2><h3 id="\u5927\u5c0f">\u5927\u5c0f<a onclick="window.location.hash = \'\u5927\u5c0f\'" class="anchor">#</a></h3><p>Ant Design \u662f\u4ee5 <code>14px</code> \u4e3a\u57fa\u51c6\u5b57\u53f7\u3002</p><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>text-xs</code></td><td><code>12px</code></td></tr><tr><td><code>text-sm</code></td><td><code>14px</code></td></tr><tr><td><code>text-md</code></td><td><code>16px</code></td></tr><tr><td><code>text-lg</code></td><td><code>18px</code></td></tr><tr><td><code>text-xl</code></td><td><code>22px</code></td></tr></tbody></table><h3 id="\u5bf9\u9f50">\u5bf9\u9f50<a onclick="window.location.hash = \'\u5bf9\u9f50\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>text-left</code></td><td>\u6587\u672c\u5c45\u5de6</td></tr><tr><td><code>text-center</code></td><td>\u6587\u672c\u5c45\u4e2d</td></tr><tr><td><code>text-right</code></td><td>\u6587\u672c\u5c45\u53f3</td></tr></tbody></table><h3 id="\u6ea2\u51fa">\u6ea2\u51fa<a onclick="window.location.hash = \'\u6ea2\u51fa\'" class="anchor">#</a></h3><blockquote><p>\u5bb9\u5668\u5fc5\u987b\u662f <code>display: inline-block</code> \u6216 <code>display: block</code>\u3002</p></blockquote><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>text-nowrap</code></td><td>\u6587\u672c\u8d85\u51fa\u4e0d\u6362\u884c</td></tr><tr><td><code>text-truncate</code></td><td>\u6587\u672c\u8d85\u51fa\u622a\u53d6\u5e76\u52a0 <code>...</code></td></tr></tbody></table><h3 id="Transformation">Transformation<a onclick="window.location.hash = \'Transformation\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>text-lowercase</code></td><td>\u5c0f\u5199\u6587\u672c</td></tr><tr><td><code>text-uppercase</code></td><td>\u5927\u5199\u6587\u672c</td></tr><tr><td><code>text-capitalize</code></td><td>\u9996\u8bcd\u5927\u5199</td></tr><tr><td><code>text-deleted</code></td><td>\u5220\u9664\u7ebf</td></tr></tbody></table><h3 id="Weight-and-italics">Weight and italics<a onclick="window.location.hash = \'Weight-and-italics\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>font-weight-normal</code></td><td><code>font-weight: normal</code></td></tr><tr><td><code>font-weight-bold</code></td><td><code>font-weight: 700</code></td></tr><tr><td><code>font-italic</code></td><td><code>font-style: italic</code></td></tr></tbody></table><h3 id="Other">Other<a onclick="window.location.hash = \'Other\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>text-hover</code></td><td><code>*:hover { color: @primary-color; }</code></td></tr><tr><td><code>disabled</code></td><td>\u7981\u6b62</td></tr></tbody></table><h2 id="Borders">Borders<a onclick="window.location.hash = \'Borders\'" class="anchor">#</a></h2><h3 id="\u8fb9\u6846">\u8fb9\u6846<a onclick="window.location.hash = \'\u8fb9\u6846\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>border</code></td><td><code>border: 1px solid #f5f5f5 !important;</code></td></tr><tr><td><code>border-0</code></td><td><code>border: 0 !important;</code></td></tr><tr><td><code>border-top-0</code></td><td><code>border-top: 0 !important;</code></td></tr><tr><td><code>border-right-0</code></td><td><code>border-right: 0 !important;</code></td></tr><tr><td><code>border-bottom-0</code></td><td><code>border-bottom: 0 !important;</code></td></tr><tr><td><code>border-left-0</code></td><td><code>border-left: 0 !important;</code></td></tr></tbody></table><h3 id="\u989c\u8272">\u989c\u8272<a onclick="window.location.hash = \'\u989c\u8272\'" class="anchor">#</a></h3><p>\u652f\u6301<a href="/theme/tools#\u8272\u5f69" data-url="/theme/tools#\u8272\u5f69">\u8272\u5f69\u7ae0\u8282</a>\u6240\u6709\u7684\u8272\u7cfb&\u522b\u540d\u5199\u6cd5\uff0c\u4f8b\u5982\uff1a<code>border-red</code>\u3001<code>border-success</code>\u3002</p><h3 id="\u5706\u89d2">\u5706\u89d2<a onclick="window.location.hash = \'\u5706\u89d2\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>rounded-0</code></td><td><code>border-radius: 0;</code></td></tr><tr><td><code>rounded-circle</code></td><td><code>border-radius: 50%;</code></td></tr><tr><td><code>rounded-sm</code></td><td><code>border-radius: 2px;</code></td></tr><tr><td><code>rounded-md</code></td><td><code>border-radius: 4px;</code></td></tr><tr><td><code>rounded-lg</code></td><td><code>border-radius: 6px;</code></td></tr></tbody></table><h2 id="Width">Width<a onclick="window.location.hash = \'Width\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>width-sm</code></td><td><code>160px</code></td></tr><tr><td><code>width-md</code></td><td><code>240px</code></td></tr><tr><td><code>width-lg</code></td><td><code>320px</code></td></tr><tr><td><code>width-[0-10]</code></td><td><code>0%-100%</code></td></tr></tbody></table><h2 id="Responsive">Responsive<a onclick="window.location.hash = \'Responsive\'" class="anchor">#</a></h2><p>\u7c7b\u4f3c Bootstrap \u54cd\u5e94\u5f0f\u89c4\u5219\uff0c\u5f53\u5c4f\u5e55\u5c0f\u4e8e <code>480px</code> \u65f6\u4f1a\u9690\u85cf\u6240\u6709 <code>hidden-xs</code> \u7c7b\u3002</p><table><thead><tr><th>\u540d\u79f0</th><th>\u5c4f\u5e55</th></tr></thead><tbody><tr><td><code>hidden-xs</code></td><td><480px</td></tr><tr><td><code>hidden-sm</code></td><td><768px</td></tr><tr><td><code>hidden-md</code></td><td><992px</td></tr><tr><td><code>hidden-lg</code></td><td><1200px</td></tr><tr><td><code>hidden-pc</code></td><td><768px</td></tr><tr><td><code>hidden-mobile</code></td><td>>768px</td></tr></tbody></table><h2 id="\u65cb\u8f6c">\u65cb\u8f6c<a onclick="window.location.hash = \'\u65cb\u8f6c\'" class="anchor">#</a></h2><pre class="hljs language-null"><code>.rotate-[360 / 15]</code></pre><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-css"><code>// \u65cb\u8f6c15\u5ea6\n.rotate-15\n// \u65cb\u8f6c90\u5ea6\n.rotate-90\n// \u65cb\u8f6c360\u5ea6\n.rotate-360</code></pre><h2 id="Other">Other<a onclick="window.location.hash = \'Other\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>block-center</code></td><td><code>margin: 0 auto</code></td></tr><tr><td><code>point</code></td><td><code>cursor: pointer</code></td></tr><tr><td><code>no-data</code></td><td>\u7a7a\u6570\u636e\u884c</td></tr><tr><td><code>no-resize</code></td><td>\u8bbe\u7f6e\u4e0d\u5141\u8bb8\u8c03\u6574\u5143\u7d20</td></tr><tr><td><code>bg-center</code></td><td>\u80cc\u666f\u56fe\u5782\u76f4\u5c45\u4e2d</td></tr><tr><td><code>scrollbar</code></td><td>\u7f8e\u5316 div \u6eda\u52a8\u6761</td></tr><tr><td><code>color-weak</code></td><td>\u8272\u5f31\u6a21\u5f0f</td></tr></tbody></table><h2 id="\u5c0f\u90e8\u4ef6">\u5c0f\u90e8\u4ef6<a onclick="window.location.hash = \'\u5c0f\u90e8\u4ef6\'" class="anchor">#</a></h2><h3 id="\u7011\u5e03\u6d41">\u7011\u5e03\u6d41<a onclick="window.location.hash = \'\u7011\u5e03\u6d41\'" class="anchor">#</a></h3><p>\u5728\u7ebf<a target="_blank" href="https://ng-alain.github.io/ng-alain/#/style/gridmasonry" data-url="https://ng-alain.github.io/ng-alain/#/style/gridmasonry">\u793a\u4f8b</a>\u3002</p><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>row-masonry</code></td><td>\u884c</td></tr><tr><td><code>row-masonry-{xs|sm|md|lg|xl}-{1-10}</code></td><td>\u5217\uff0c\u54cd\u5e94\u5f0f\u6837\u5f0f</td></tr><tr><td><code>col-masonry</code></td><td>\u5217</td></tr></tbody></table><h2 id="ng-zorro">ng-zorro<a onclick="window.location.hash = \'ng-zorro\'" class="anchor">#</a></h2><h3 id="nz-card">nz-card<a onclick="window.location.hash = \'nz-card\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>ant-card__body-nopadding</code></td><td>\u5f3a\u5236\u5185\u5bb9\u65e0\u95f4\u8ddd</td></tr></tbody></table><h3 id="nz-modal">nz-modal<a onclick="window.location.hash = \'nz-modal\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>modal-{sm|md|lg|xl}</code></td><td>\u8bbe\u7f6eModal\u7684\u5927\u5c0f\uff0c<code>wrapClassName: \'modal-lg\'</code></td></tr><tr><td><code>modal-body-nopadding</code></td><td>\u5185\u5bb9\u65e0\u5185\u8fb9\u8ddd</td></tr><tr><td><code>modal-header</code></td><td>\u81ea\u5b9a\u4e49Modal\u65f6\u975e\u5e38\u6709\u6548\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/#/extras/poi" data-url="https://ng-alain.github.io/ng-alain/#/extras/poi">DEMO</a></td></tr><tr><td><code>modal-footer</code></td><td>\u81ea\u5b9a\u4e49Modal\u65f6\u975e\u5e38\u6709\u6548\uff0c<a target="_blank" href="https://ng-alain.github.io/ng-alain/#/extras/poi" data-url="https://ng-alain.github.io/ng-alain/#/extras/poi">DEMO</a></td></tr></tbody></table><h3 id="nz-table">nz-table<a onclick="window.location.hash = \'nz-table\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>ant-table-rep__title</code></td><td>\u6807\u9898</td></tr><tr><td><code>ant-table-rep__hide-header-footer</code></td><td>\u5c0f\u5c4f\u5e55\u65f6\u624d\u663e\u793a\u6807\u9898\u6216\u5e95\u90e8</td></tr></tbody></table></section><example-table-rep-index></example-table-rep-index><section class="markdown"><h3 id="nz-tag">nz-tag<a onclick="window.location.hash = \'nz-tag\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u8bf4\u660e</th></tr></thead><tbody><tr><td><code>ant-tag__plus</code></td><td>\u589e\u52a0\u6309\u94ae\u6837\u5f0f</td></tr></tbody></table></article></section>',meta:{type:"Theme",order:2,title:"\u6837\u5f0f\u5de5\u5177\u7c7b"},toc:[{id:"\u95f4\u8ddd",title:"\u95f4\u8ddd",h:2},{id:"\u8272\u5f69",title:"\u8272\u5f69",h:2},{id:"\u522b\u540d",title:"\u522b\u540d",h:3},{id:"\u5168\u91cf\u989c\u8272",title:"\u5168\u91cf\u989c\u8272",h:3},{id:"\u6e05\u9664\u6d6e\u52a8",title:"\u6e05\u9664\u6d6e\u52a8",h:2},{id:"\u663e\u793a",title:"\u663e\u793a",h:2},{id:"\u4f4d\u7f6e",title:"\u4f4d\u7f6e",h:2},{id:"\u6587\u672c",title:"\u6587\u672c",h:2},{id:"\u5927\u5c0f",title:"\u5927\u5c0f",h:3},{id:"\u5bf9\u9f50",title:"\u5bf9\u9f50",h:3},{id:"\u6ea2\u51fa",title:"\u6ea2\u51fa",h:3},{id:"Transformation",title:"Transformation",h:3},{id:"Weight-and-italics",title:"Weight and italics",h:3},{id:"Other",title:"Other",h:3},{id:"Borders",title:"Borders",h:2},{id:"\u8fb9\u6846",title:"\u8fb9\u6846",h:3},{id:"\u989c\u8272",title:"\u989c\u8272",h:3},{id:"\u5706\u89d2",title:"\u5706\u89d2",h:3},{id:"Width",title:"Width",h:2},{id:"Responsive",title:"Responsive",h:2},{id:"\u65cb\u8f6c",title:"\u65cb\u8f6c",h:2},{id:"Other",title:"Other",h:2},{id:"\u5c0f\u90e8\u4ef6",title:"\u5c0f\u90e8\u4ef6",h:2},{id:"\u7011\u5e03\u6d41",title:"\u7011\u5e03\u6d41",h:3},{id:"ng-zorro",title:"ng-zorro",h:2},{id:"nz-card",title:"nz-card",h:3},{id:"nz-modal",title:"nz-modal",h:3},{id:"nz-table",title:"nz-table",h:3},{id:"nz-tag",title:"nz-tag",h:3}]}},demo:!1},this.codes=[]},h=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/styles/layout/default/index.en-US.md","zh-CN":"packages/theme/styles/layout/default/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The default layout all parameters are prefixed with <code>@alain-default-</code>.</p><h2 id="Parameters">Parameters<a onclick="window.location.hash = \'Parameters\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@alain-default-prefix</code></td><td><code>.alain-default</code></td><td>Style name prefix</td></tr><tr><td><code>@alain-default-ease</code></td><td><code>cubic-bezier(.25, 0, .15, 1)</code></td><td>Animation filter function</td></tr><tr><td><code>@alain-default-header-hg</code></td><td><code>64px</code></td><td>Height of header</td></tr><tr><td><code>@alain-default-header-bg</code></td><td><code>@primary-color</code></td><td>Background-color of header</td></tr><tr><td><code>@alain-default-header-padding</code></td><td><code>@layout-gutter * 2</code></td><td>Horizontal padding of header</td></tr><tr><td><code>@alain-default-header-search-enabled</code></td><td><code>true</code></td><td>Whether top search</td></tr><tr><td><code>@alain-default-header-search-height</code></td><td><code>34px</code></td><td>Height of top search</td></tr><tr><td><code>@alain-default-header-icon-fs</code></td><td><code>18px</code></td><td>Font size of icon</td></tr><tr><td><code>@alain-default-aside-wd</code></td><td><code>200px</code></td><td>Width of aside</td></tr><tr><td><code>@alain-default-aside-bg</code></td><td><code>#fff</code></td><td>Background-color of aside</td></tr><tr><td><code>@alain-default-aside-scrollbar-width</code></td><td><code>0</code></td><td>Scrollbar width of aside</td></tr><tr><td><code>@alain-default-aside-scrollbar-height</code></td><td><code>0</code></td><td>Scrollbar height of aside</td></tr><tr><td><code>@alain-default-aside-scrollbar-track-color</code></td><td><code>transparent</code></td><td>Scrollbar track color of aside</td></tr><tr><td><code>@alain-default-aside-scrollbar-thumb-color</code></td><td><code>transparent</code></td><td>Scrollbar thumb color of aside</td></tr><tr><td><code>@alain-default-aside-nav-fs</code></td><td><code>14px</code></td><td>Font size of nav name</td></tr><tr><td><code>@alain-default-aside-nav-icon-width</code></td><td><code>14px</code></td><td>Width of nav icon</td></tr><tr><td><code>@alain-default-aside-nav-img-wh</code></td><td><code>14px</code></td><td>Width & height of nav image</td></tr><tr><td><code>@alain-default-aside-nav-padding-top-bottom</code></td><td><code>@layout-gutter</code></td><td>Vertical padding of nav</td></tr><tr><td><code>@alain-default-aside-nav-item-height</code></td><td><code>38px</code></td><td>Item height of nav</td></tr><tr><td><code>@alain-default-aside-nav-text-color</code></td><td><code>rgba(0, 0, 0, 0.65)</code></td><td>Nav text color</td></tr><tr><td><code>@alain-default-aside-nav-text-hover-color</code></td><td><code>#108ee9</code></td><td>Nav text hover color</td></tr><tr><td><code>@alain-default-aside-nav-group-text-color</code></td><td><code>rgba(0, 0, 0, 0.43)</code></td><td>Group text color</td></tr><tr><td><code>@alain-default-aside-nav-selected-text-color</code></td><td><code>#108ee9</code></td><td>Nav selected text color</td></tr><tr><td><code>@alain-default-aside-nav-selected-bg</code></td><td><code>#fcfcfc</code></td><td>Nav selected background color</td></tr><tr><td><code>@alain-default-aside-collapsed-wd</code></td><td><code>@layout-gutter * 8</code></td><td>Width of aside collapsed</td></tr><tr><td><code>@alain-default-aside-collapsed-nav-fs</code></td><td><code>24px</code></td><td>Font size of aside collapsed</td></tr><tr><td><code>@alain-default-aside-collapsed-nav-img-wh</code></td><td><code>24px</code></td><td>Width & height nav image of aside collapsed</td></tr><tr><td><code>@alain-default-content-heading-bg</code></td><td><code>#fafbfc</code></td><td>Heading background color of content area</td></tr><tr><td><code>@alain-default-content-heading-border</code></td><td><code>#efe3e5</code></td><td>Heading bottom border color of content area</td></tr><tr><td><code>@alain-default-content-padding</code></td><td><code>@layout-gutter * 3</code></td><td>Padding of content area</td></tr><tr><td><code>@alain-default-content-bg</code></td><td><code>#f5f7fa</code></td><td>Background color of content area</td></tr><tr><td><code>@alain-default-widget-app-icons-enabled</code></td><td><code>true</code></td><td>Whether the app-icon widget styles</td></tr><tr><td><code>@alain-default-aside-user-enabled</code></td><td><code>true</code></td><td>Whether the user styles of aside</td></tr></tbody></table><h2 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h2><p>Import in <code>src/styles.less</code>:</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/layout/default/index\';</code></pre></article></section>',meta:{type:"Theme",order:100,title:"Default Layout"},toc:[{id:"Parameters",title:"Parameters",h:2},{id:"Usage",title:"Usage",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>\u9ed8\u8ba4\u5e03\u5c40\u6240\u6709\u53c2\u6570\u90fd\u4ee5 <code>@alain-default-</code> \u5f00\u5934\u3002</p><h2 id="\u53c2\u6570">\u53c2\u6570<a onclick="window.location.hash = \'\u53c2\u6570\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@alain-default-prefix</code></td><td><code>.alain-default</code></td><td>\u5e03\u5c40\u6837\u5f0f\u524d\u7f00</td></tr><tr><td><code>@alain-default-ease</code></td><td><code>cubic-bezier(.25, 0, .15, 1)</code></td><td>\u52a8\u753b\u8fc7\u6ee4\u51fd\u6570</td></tr><tr><td><code>@alain-default-header-hg</code></td><td><code>64px</code></td><td>\u9876\u90e8\u9ad8\u5ea6</td></tr><tr><td><code>@alain-default-header-bg</code></td><td><code>@primary-color</code></td><td>\u9876\u90e8\u80cc\u666f\u8272</td></tr><tr><td><code>@alain-default-header-padding</code></td><td><code>@layout-gutter * 2</code></td><td>\u9876\u90e8\u5de6\u53f3\u5185\u8fb9\u8ddd</td></tr><tr><td><code>@alain-default-header-search-enabled</code></td><td><code>true</code></td><td>\u662f\u5426\u5f00\u542f\u9876\u90e8\u641c\u7d22\u6846</td></tr><tr><td><code>@alain-default-header-search-height</code></td><td><code>34px</code></td><td>\u9876\u90e8\u641c\u7d22\u6846\u9ad8\u5ea6</td></tr><tr><td><code>@alain-default-header-icon-fs</code></td><td><code>18px</code></td><td>\u9876\u90e8 Icon \u5927\u5c0f</td></tr><tr><td><code>@alain-default-aside-wd</code></td><td><code>200px</code></td><td>\u4fa7\u8fb9\u680f\u5bbd\u5ea6</td></tr><tr><td><code>@alain-default-aside-bg</code></td><td><code>#fff</code></td><td>\u4fa7\u8fb9\u680f\u80cc\u666f\u8272</td></tr><tr><td><code>@alain-default-aside-scrollbar-width</code></td><td><code>0</code></td><td>\u4fa7\u8fb9\u680f\u6eda\u52a8\u6761\u5bbd\u5ea6</td></tr><tr><td><code>@alain-default-aside-scrollbar-height</code></td><td><code>0</code></td><td>\u4fa7\u8fb9\u680f\u6eda\u52a8\u6761\u9ad8\u5ea6</td></tr><tr><td><code>@alain-default-aside-scrollbar-track-color</code></td><td><code>transparent</code></td><td>\u4fa7\u8fb9\u680f\u6eda\u52a8\u6761\u7684\u8f68\u9053\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-scrollbar-thumb-color</code></td><td><code>transparent</code></td><td>\u4fa7\u8fb9\u680f\u6eda\u52a8\u6761\u5c0f\u65b9\u5757\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-nav-fs</code></td><td><code>14px</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u5b57\u53f7</td></tr><tr><td><code>@alain-default-aside-nav-icon-width</code></td><td><code>14px</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355 ICON \u5bbd\u5ea6</td></tr><tr><td><code>@alain-default-aside-nav-img-wh</code></td><td><code>14px</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u56fe\u50cf\u5bbd\u9ad8</td></tr><tr><td><code>@alain-default-aside-nav-padding-top-bottom</code></td><td><code>@layout-gutter</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u9879\u4e0a\u4e0b\u5185\u8fb9\u8ddd</td></tr><tr><td><code>@alain-default-aside-nav-item-height</code></td><td><code>38px</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u9879\u9ad8\u5ea6</td></tr><tr><td><code>@alain-default-aside-nav-text-color</code></td><td><code>rgba(0, 0, 0, 0.65)</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u6587\u672c\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-nav-text-hover-color</code></td><td><code>#108ee9</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u6587\u672c\u60ac\u505c\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-nav-group-text-color</code></td><td><code>rgba(0, 0, 0, 0.43)</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u5206\u7ec4\u6587\u672c\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-nav-selected-text-color</code></td><td><code>#108ee9</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u6fc0\u6d3b\u65f6\u6587\u672c\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-nav-selected-bg</code></td><td><code>#fcfcfc</code></td><td>\u4fa7\u8fb9\u680f\u83dc\u5355\u6fc0\u6d3b\u65f6\u80cc\u666f\u989c\u8272</td></tr><tr><td><code>@alain-default-aside-collapsed-wd</code></td><td><code>@layout-gutter * 8</code></td><td>\u4fa7\u8fb9\u680f\u6536\u7f29\u540e\u5bbd\u5ea6</td></tr><tr><td><code>@alain-default-aside-collapsed-nav-fs</code></td><td><code>24px</code></td><td>\u4fa7\u8fb9\u680f\u6536\u7f29\u540e\u6587\u672c\u5b57\u53f7</td></tr><tr><td><code>@alain-default-aside-collapsed-nav-img-wh</code></td><td><code>24px</code></td><td>\u4fa7\u8fb9\u680f\u6536\u7f29\u540e\u56fe\u50cf\u5bbd\u9ad8</td></tr><tr><td><code>@alain-default-content-heading-bg</code></td><td><code>#fafbfc</code></td><td>\u5185\u5bb9\u533a\u57df\u6807\u9898\u80cc\u666f\u8272</td></tr><tr><td><code>@alain-default-content-heading-border</code></td><td><code>#efe3e5</code></td><td>\u5185\u5bb9\u533a\u57df\u6807\u9898\u5e95\u90e8\u8fb9\u6846\u8272</td></tr><tr><td><code>@alain-default-content-padding</code></td><td><code>@layout-gutter * 3</code></td><td>\u5185\u5bb9\u533a\u57df\u5185\u8fb9\u8ddd</td></tr><tr><td><code>@alain-default-content-bg</code></td><td><code>#f5f7fa</code></td><td>\u5185\u5bb9\u533a\u57df\u80cc\u666f\u8272</td></tr><tr><td><code>@alain-default-widget-app-icons-enabled</code></td><td><code>true</code></td><td>\u662f\u5426 app-icon \u5c0f\u90e8\u4ef6\u6837\u5f0f</td></tr><tr><td><code>@alain-default-aside-user-enabled</code></td><td><code>true</code></td><td>\u662f\u5426\u4fa7\u8fb9\u680f\u7528\u6237\u4fe1\u606f\u6837\u5f0f</td></tr></tbody></table><h2 id="\u4f7f\u7528\u65b9\u5f0f">\u4f7f\u7528\u65b9\u5f0f<a onclick="window.location.hash = \'\u4f7f\u7528\u65b9\u5f0f\'" class="anchor">#</a></h2><p>\u5728 <code>src/styles.less</code> \u5f15\u5165\uff1a</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/layout/default/index\';</code></pre></article></section>',meta:{type:"Theme",order:100,title:"\u9ed8\u8ba4\u5e03\u5c40"},toc:[{id:"\u53c2\u6570",title:"\u53c2\u6570",h:2},{id:"\u4f7f\u7528\u65b9\u5f0f",title:"\u4f7f\u7528\u65b9\u5f0f",h:2}]}},demo:!1},this.codes=[]},p=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/styles/layout/fullscreen/index.en-US.md","zh-CN":"packages/theme/styles/layout/fullscreen/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>The fullscreen layout all parameters are prefixed with <code>@alain-fullscreen-</code>.</p><h2 id="Parameters">Parameters<a onclick="window.location.hash = \'Parameters\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>@prefix</code></td><td><code>.alain-fullscreen</code></td><td>Style name prefix</td></tr><tr><td><code>@bg</code></td><td><code>#f5f7fa</code></td><td>Background color</td></tr><tr><td><code>@content-padding-vertical</code></td><td><code>0</code></td><td>Vertical padding</td></tr><tr><td><code>@content-padding-horizontal</code></td><td><code>16px</code></td><td>Horizontal padding</td></tr></tbody></table><h2 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h2><p>Import in <code>src/styles.less</code>:</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/layout/fullscreen/index\';</code></pre></article></section>',meta:{type:"Theme",order:110,title:"Fullscreen Layout"},toc:[{id:"Parameters",title:"Parameters",h:2},{id:"Usage",title:"Usage",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>\u9ed8\u8ba4\u5e03\u5c40\u6240\u6709\u53c2\u6570\u90fd\u4ee5 <code>@alain-fullscreen-</code> \u5f00\u5934\u3002</p><h2 id="\u53c2\u6570">\u53c2\u6570<a onclick="window.location.hash = \'\u53c2\u6570\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>@prefix</code></td><td><code>.alain-fullscreen</code></td><td>\u5e03\u5c40\u6837\u5f0f\u524d\u7f00</td></tr><tr><td><code>@bg</code></td><td><code>#f5f7fa</code></td><td>\u80cc\u666f\u8272</td></tr><tr><td><code>@content-padding-vertical</code></td><td><code>0</code></td><td>\u5782\u76f4\u5185\u8fb9\u8ddd</td></tr><tr><td><code>@content-padding-horizontal</code></td><td><code>16px</code></td><td>\u6c34\u5e73\u5185\u8fb9\u8ddd</td></tr></tbody></table><h2 id="\u4f7f\u7528\u65b9\u5f0f">\u4f7f\u7528\u65b9\u5f0f<a onclick="window.location.hash = \'\u4f7f\u7528\u65b9\u5f0f\'" class="anchor">#</a></h2><p>\u5728 <code>src/styles.less</code> \u5f15\u5165\uff1a</p><pre class="hljs language-less"><code>@import \'~@delon/theme/styles/layout/fullscreen/index\';</code></pre></article></section>',meta:{type:"Theme",order:110,title:"\u5168\u5c4f\u5e03\u5c40"},toc:[{id:"\u53c2\u6570",title:"\u53c2\u6570",h:2},{id:"\u4f7f\u7528\u65b9\u5f0f",title:"\u4f7f\u7528\u65b9\u5f0f",h:2}]}},demo:!1},this.codes=[]},u=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/pipes/currency/index.en-US.md","zh-CN":"packages/theme/src/pipes/currency/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p><code>_currency</code> currency formatting, simplifying the original <code>currency</code> for <strong>Chinese currency</strong>, the same way as <code>currency</code>.</p><pre class="hljs language-html"><code>{{data.price | _currency}}</code></pre><p>Output:</p><pre class="hljs language-null"><code>\uffe54,035,173.71</code></pre></article></section>',meta:{order:1,title:"_currency",subtitle:"Currenty",type:"Pipe"},toc:[]},"zh-CN":{content:'<section class="markdown"><article><p><code>_currency</code> \u8d27\u5e01\u683c\u5f0f\u5316\uff0c\u7b80\u5316\u539f <code>currency</code> \u9488\u5bf9<strong>\u4e2d\u6587\u8d27\u5e01</strong>\u683c\u5f0f\u5316\u95ee\u9898\uff0c\u4f7f\u7528\u65b9\u5f0f\u540c <code>currency</code> \u4e00\u6837\u3002</p><pre class="hljs language-html"><code>{{data.price | _currency}}</code></pre><p>\u8f93\u51fa\uff1a</p><pre class="hljs language-null"><code>\uffe54,035,173.71</code></pre></article></section>',meta:{order:1,title:"_currency",subtitle:"\u8d27\u5e01",type:"Pipe"},toc:[]}},demo:!1},this.codes=[]},b=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/pipes/date/index.en-US.md","zh-CN":"packages/theme/src/pipes/date/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Based on date-fns date formatting, see more details <a target="_blank" href="https://date-fns.org/v1.29.0/docs/format" data-url="https://date-fns.org/v1.29.0/docs/format">date-fns</a> (China mirror: <a target="_blank" href="http://Momentjs.cn/docs/#/displaying/format/" data-url="http://Momentjs.cn/docs/#/displaying/format/">moment format</a>)</p><p>date-fns supports different kinds of time formats, such as:</p><ul><li><p>2018-08-24 18:08:20</p></li><li><p>2018-08-24</p></li><li><p>20180824</p></li><li><p>1503571962333</p></li></ul><pre class="hljs language-html"><code>{{data.registered | _date: \'YYYY\u5e74MM\u6708DD\u65e5\'}}</code></pre><p>Output:</p><pre class="hljs language-null"><code>2017\u5e7408\u670824\u65e5</code></pre></article></section>',meta:{order:1,title:"_date",subtitle:"Date",type:"Pipe"},toc:[]},"zh-CN":{content:'<section class="markdown"><article><p>\u57fa\u4e8e date-fns \u65e5\u671f\u683c\u5f0f\u5316\uff0c\u663e\u793a\u66f4\u591a\u7ec6\u8282\u53c2\u8003 <a target="_blank" href="https://date-fns.org/v1.29.0/docs/format" data-url="https://date-fns.org/v1.29.0/docs/format">date-fns</a>\uff08\u56fd\u5185\u955c\u50cf\uff1a<a target="_blank" href="http://momentjs.cn/docs/#/displaying/format/" data-url="http://momentjs.cn/docs/#/displaying/format/">moment format</a>\uff09</p><p>\u6700\u5927\u597d\u5904\u662f date-fns \u652f\u6301\u4e0d\u540c\u79cd\u7c7b\u7684\u65f6\u95f4\u683c\u5f0f\uff0c\u4f8b\u5982\uff1a</p><ul><li><p>2018-08-24 18:08:20</p></li><li><p>2018-08-24</p></li><li><p>20180824</p></li><li><p>1503571962333</p></li></ul><p>\u7b49\u7b49\u3002</p><pre class="hljs language-html"><code>{{data.registered | _date: \'YYYY\u5e74MM\u6708DD\u65e5\'}}</code></pre><p>\u8f93\u51fa\uff1a</p><pre class="hljs language-null"><code>2017\u5e7408\u670824\u65e5</code></pre></article></section>',meta:{order:1,title:"_date",subtitle:"\u65e5\u671f",type:"Pipe"},toc:[]}},demo:!1},this.codes=[]},g=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/pipes/keys/index.en-US.md","zh-CN":"packages/theme/src/pipes/keys/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Transforms Object or Map into an array of key value pairs.</p><p>Data:</p><pre class="hljs language-typescript"><code>const data = { name: \'cipchk\', address: { city: \'shanghai\', district: \'changning\' } };</code></pre><p>Use:</p><pre class="hljs language-html"><code><div *ngFor="let item of data | keys">{{item.key}} {{item.value | json}}</div></code></pre><p><strong>Dictionary</strong></p><pre class="hljs language-typescript"><code>const data = { 1: \'Normal\', 2: \'Deleted\' };</code></pre><p>If you want to keep the key name <code>number</code> numeric:</p><pre class="hljs language-null"><code><div *ngFor="let item of data | keys: true">{{item.key}} {{item.value | json}}</div></code></pre><blockquote><p>Angular <code>6.1.0</code> will support natively <a target="_blank" href="https://angular.io/api/common/KeyValuePipe" data-url="https://angular.io/api/common/KeyValuePipe">KeyValuePipe</a>.</p></blockquote></article></section>',meta:{order:1,title:"keys",subtitle:"Keys",type:"Pipe"},toc:[]},"zh-CN":{content:'<section class="markdown"><article><p><code>keys</code> \u5c06\u5bf9\u8c61\u6570\u7ec4\u5316\u3002</p><p>\u4f8b\u5982\uff1a</p><pre class="hljs language-typescript"><code>const data = { name: \'cipchk\', address: { city: \'shanghai\', district: \'changning\' } };</code></pre><p>\u53d8\u6210\u53ef\u8fed\u4ee3\u5bf9\u8c61\uff1a</p><pre class="hljs language-html"><code><div *ngFor="let item of data | keys">{{item.key}} {{item.value | json}}</div></code></pre><p><strong>\u5b57\u5178\u53ef\u8fed\u4ee3</strong></p><pre class="hljs language-typescript"><code>const data = { 1: \'\u6b63\u5e38\', 2: \'\u5220\u9664\' };</code></pre><p>\u82e5\u5e0c\u671b\u4fdd\u6301\u952e\u540d\u4e3a <code>number</code> \u6570\u5b57\u578b\uff1a</p><pre class="hljs language-null"><code><div *ngFor="let item of data | keys: true">{{item.key}} {{item.value | json}}</div></code></pre><blockquote><p>Angular <code>6.1.0</code> \u4ee5\u540e\u539f\u751f\u652f\u6301 <a target="_blank" href="https://angular.io/api/common/KeyValuePipe" data-url="https://angular.io/api/common/KeyValuePipe">KeyValuePipe</a>\uff0c\u7528\u6cd5\u6709\u70b9\u7c7b\u4f3c\u3002</p></blockquote></article></section>',meta:{order:1,title:"keys",subtitle:"\u53ef\u8fed\u4ee3\u5bf9\u8c61",type:"Pipe"},toc:[]}},demo:!1},this.codes=[]},m=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/pipes/safe/index.en-US.md","zh-CN":"packages/theme/src/pipes/safe/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><h2 id="html">html<a onclick="window.location.hash = \'html\'" class="anchor">#</a></h2><p>Simplify the use of <code>bypassSecurityTrustHtml</code>.</p><pre class="hljs language-html"><code><div [innerHTML]="content | html"></div></code></pre><h2 id="url">url<a onclick="window.location.hash = \'url\'" class="anchor">#</a></h2><p>Simplify the use of <code>bypassSecurityTrustUrl</code>.</p><pre class="hljs language-html"><code><a [href]="file_url | url" target="_blank"></a></code></pre></article></section>',meta:{order:1,title:"safe",subtitle:"XSS",type:"Pipe"},toc:[{id:"html",title:"html",h:2},{id:"url",title:"url",h:2}]},"zh-CN":{content:'<section class="markdown"><article><h2 id="html">html<a onclick="window.location.hash = \'html\'" class="anchor">#</a></h2><p>\u7b80\u5316 <code>bypassSecurityTrustHtml</code> \u7684\u4f7f\u7528\u3002</p><pre class="hljs language-html"><code><div [innerHTML]="content | html"></div></code></pre><h2 id="url">url<a onclick="window.location.hash = \'url\'" class="anchor">#</a></h2><p>\u7b80\u5316 <code>bypassSecurityTrustUrl</code> \u7684\u4f7f\u7528\u3002</p><pre class="hljs language-html"><code><a [href]="file_url | url" target="_blank"></a></code></pre></article></section>',meta:{order:1,title:"safe",subtitle:"\u5b89\u5168HTML\u7b49",type:"Pipe"},toc:[{id:"html",title:"html",h:2},{id:"url",title:"url",h:2}]}},demo:!1},this.codes=[]},f=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/pipes/yn/index.en-US.md","zh-CN":"packages/theme/src/pipes/yn/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p><code>yn</code> Make boolean as badge.</p><pre class="hljs language-html"><code><td [innerHTML]="enabled | yn"></td>\nOutput:\n<td><i class="text-blue"><svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></td></code></pre></article></section>',meta:{order:1,title:"yn",subtitle:"Badge",type:"Pipe"},toc:[]},"zh-CN":{content:'<section class="markdown"><article><p><code>yn</code> \u5c06boolean\u7c7b\u578b\u5fbd\u7ae0\u5316\u3002</p><pre class="hljs language-html"><code><td [innerHTML]="enabled | yn"></td>\nOutput:\n<td><i class="text-blue"><svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" aria-hidden="true"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></td></code></pre></article></section>',meta:{order:1,title:"yn",subtitle:"\u5fbd\u7ae0",type:"Pipe"},toc:[]}},demo:!1},this.codes=[]},y=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/drawer/index.en-US.md","zh-CN":"packages/theme/src/services/drawer/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><p>Based on the <code>NzDrawerService</code> package, it solves some known issues:</p><ul><li><p>More friendly handling callbacks</p></li><li><p>Support responsive</p></li></ul><h2 id="create">create<a onclick="window.location.hash = \'create\'" class="anchor">#</a></h2><pre class="hljs language-ts"><code>this.drawerHelper.create(\'Edit\', FormEditComponent, { i }).subscribe(res => this.load());\n// Ok callback\n// 1. considered successful\nthis.NzDrawerRef.close(data);\nthis.NzDrawerRef.close(true);\n\n// Close\nthis.NzDrawerRef.close();\nthis.NzDrawerRef.close(false);</code></pre><p>There are includes <code>create</code> & <code>static</code> methods to open the normal & static drawer.</p><p><strong>Custom component HTML template</strong></p><pre class="hljs language-html"><code>Your body content\n<div class="drawer-footer">\n // The bottom toolbar need wrapped by `drawer-footer`\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div></code></pre><p>If you don\'t bottom toolbar, you need specify <code>footer: false</code>.</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td>Specify drawer size, responsive only supports non-numeric values</td><td><code>sm,md,lg,xl,number</code></td><td><code>md</code></td></tr><tr><td><code>footer</code></td><td>Whether toolbar</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>footerHeight</code></td><td>Toolbar height</td><td><code>number</code></td><td><code>55</code></td></tr><tr><td><code>exact</code></td><td>Exact match return value, default is <code>true</code>, If the return value is not null (<code>null</code> or <code>undefined</code>) is considered successful, otherwise it is considered error.</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>drawerOptions</code></td><td>Drawer raw parameters <a target="_blank" href="https://ng.ant.design/components/drawer/en#nzdraweroptions" data-url="https://ng.ant.design/components/drawer/en#nzdraweroptions">NzDrawerOptions</a> \u53c2\u6570</td><td><code>NzDrawerOptions</code></td><td>-</td></tr></tbody></table>',meta:{order:3,title:"DrawerHelper",subtitle:"Drawer Helper",type:"Service"},toc:[{id:"create",title:"create",h:2},{id:"API",title:"API",h:2}]},"zh-CN":{content:'<section class="markdown"><p>\u57fa\u4e8e <code>NzDrawerService</code> \u5c01\u88c5\uff0c\u5b83\u89e3\u51b3\u4e00\u4e9b\u5df2\u77e5\u95ee\u9898\uff1a</p><ul><li><p>\u66f4\u53cb\u597d\u7684\u5904\u7406\u56de\u8c03</p></li><li><p>\u54cd\u5e94\u5f0f\u5904\u7406</p></li></ul><h2 id="create">create<a onclick="window.location.hash = \'create\'" class="anchor">#</a></h2><pre class="hljs language-ts"><code>this.drawerHelper.create(\'Edit\', FormEditComponent, { i }).subscribe(res => this.load());\n// \u5bf9\u4e8e\u7ec4\u4ef6\u7684\u6210\u529f&\u5173\u95ed\u7684\u5904\u7406\u8bf4\u660e\n// \u6210\u529f\nthis.NzDrawerRef.close(data);\nthis.NzDrawerRef.close(true);\n// \u5173\u95ed\nthis.NzDrawerRef.close();\nthis.NzDrawerRef.close(false);</code></pre><p>\u5305\u62ec <code>create</code> & <code>static</code> \u5206\u522b\u7528\u4e8e\u6253\u5f00\u666e\u901a\u6216\u9759\u6001\u62bd\u5c49\u3002</p><p><strong>\u81ea\u5b9a\u4e49\u7ec4\u4ef6HTML\u6a21\u677f</strong></p><pre class="hljs language-html"><code>\u5185\u5bb9\n<div class="drawer-footer">\n // \u5e95\u90e8\u5de5\u5177\u6761\u7531 `drawer-footer` \u5305\u88f9\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div></code></pre><p>\u82e5\u65e0\u9700\u8981\u5e95\u90e8\u5de5\u5177\u6761\uff0c\u9700\u8981\u6307\u5b9a\u53c2\u6570 <code>footer: false</code>\u3002</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th><th>\u529f\u80fd</th></tr></thead><tbody><tr><td><code>size</code></td><td>\u6307\u5b9a\u62bd\u5c49\u5927\u5c0f\uff0c\u54cd\u5e94\u5f0f\u53ea\u652f\u6301\u975e\u6570\u5b57\u503c\uff0c\u82e5\u503c\u4e3a\u6570\u503c\u7c7b\u578b\uff0c\u5219\u6839\u636e <code>nzPlacement</code> \u81ea\u52a8\u8f6c\u5316\u4e3a <code>nzHeight</code> \u6216 <code>nzWidth</code></td><td><code>sm,md,lg,xl,number</code></td><td><code>md</code></td></tr><tr><td><code>footer</code></td><td>\u662f\u5426\u9700\u8981\u5de5\u5177\u6761</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>footerHeight</code></td><td>\u5de5\u5177\u6761\u9ad8\u5ea6</td><td><code>number</code></td><td><code>55</code></td></tr><tr><td><code>exact</code></td><td>\u662f\u5426\u7cbe\u51c6\uff08\u9ed8\u8ba4\uff1a<code>true</code>\uff09\uff0c\u82e5\u8fd4\u56de\u503c\u975e\u7a7a\u503c\uff08<code>null</code>\u6216<code>undefined</code>\uff09\u89c6\u4e3a\u6210\u529f\uff0c\u5426\u5219\u89c6\u4e3a\u9519\u8bef</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>drawerOptions</code></td><td>\u62bd\u5c49 <a target="_blank" href="https://ng.ant.design/components/drawer/zh#nzdraweroptions" data-url="https://ng.ant.design/components/drawer/zh#nzdraweroptions">NzDrawerOptions</a> \u53c2\u6570</td><td><code>NzDrawerOptions</code></td><td>-</td></tr></tbody></table>',meta:{order:3,title:"DrawerHelper",subtitle:"\u62bd\u5c49\u8f85\u52a9\u7c7b",type:"Service"},toc:[{id:"create",title:"create",h:2},{id:"API",title:"API",h:2}]}},demo:!1},this.codes=[]},w=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/http/index.en-US.md","zh-CN":"packages/theme/src/services/http/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p><a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/http/http.client.ts" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/http/http.client.ts">_HttpClient</a> service is based on Angular <code>HttpClient</code>.</p><h2 id="Features">Features<a onclick="window.location.hash = \'Features\'" class="anchor">#</a></h2><ul><li><p>More friendly call methods</p></li><li><p>Maintain <code>loading</code> attribute</p></li><li><p>Handling null values</p></li><li><p>Unified time format is timestamp</p></li><li><p>Support decorator @GET, @POST etc</p></li></ul><h2 id="DEMO">DEMO<a onclick="window.location.hash = \'DEMO\'" class="anchor">#</a></h2><p>Network requests are generally used with Object as arguments, such as a <code>get</code> request:</p><pre class="hljs language-ts"><code>HttpClient.get(url, { params: { pi: 1 } });</code></pre><p>For <code>_HttpClient</code>:</p><pre class="hljs language-ts"><code>_HttpClient.get(url, { pi: 1 });</code></pre><h2 id="AlainThemeConfig">AlainThemeConfig<a onclick="window.location.hash = \'AlainThemeConfig\'" class="anchor">#</a></h2><p>Common configuration, such as unifying null and time processing for <code>_HttpClient</code>.</p><pre class="hljs language-ts"><code>import { AlainThemeConfig } from \'@delon/theme\';\nexport function fnAlainThemeConfig(): AlainThemeConfig {\n return Object.assign(new AlainThemeConfig(), <AlainThemeConfig>{\n http: {\n nullValueHandling: \'ignore\',\n },\n });\n}\n\n@NgModule({})\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: AlainThemeConfig, useFactory: fnAlainThemeConfig },\n ],\n };\n }\n}</code></pre><h3 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>nullValueHandling</code></td><td>Null processing</td><td><code>include,ignore</code></td><td><code>include</code></td></tr><tr><td><code>dateValueHandling</code></td><td>Time processing</td><td><code>timestamp,ignore</code></td><td><code>timestamp</code></td></tr></tbody></table><h2 id="Decorators">Decorators<a onclick="window.location.hash = \'Decorators\'" class="anchor">#</a></h2><p>The target service must inherit <code>BaseApi</code> abstract class.</p><h3 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h3><pre class="hljs language-ts"><code>@BaseUrl(\'/user\')\n@BaseHeaders({ bh: \'a\' })\nclass RestService extends BaseApi {\n @GET()\n query(@Query(\'pi\') pi: number, @Query(\'ps\') ps: number): Observable<any> {\n return;\n }\n\n @GET(\':id\')\n get(@Path(\'id\') id: number): Observable<any> {\n return;\n }\n\n @GET()\n get(@Payload data: {}): Observable<any> {\n return;\n }\n\n // Use `::id` to indicate escaping, and should be will be ignored when `id` value is `undefined`, like this:\n\xa0\xa0// When `id` is `10` => 10:type\n\xa0\xa0// When `id` is `undefined` => :id:type\n @GET(\':id::type\')\n get(@Path(\'id\') id: number): Observable<any> {\n return;\n }\n\n @POST(\':id\')\n save(@Path(\'id\') id: number, @Body data: Object): Observable<any> {\n return;\n }\n\n @POST()\n save(@Payload data: {}): Observable<any> {\n return;\n }\n\n @FORM()\n save(@Payload data: {}): Observable<any> {\n return;\n }\n\n // If authorization is invalid, will be thrown directly `401` error and will not be sent.\n @GET(\'\', { acl: \'admin\' })\n ACL(): Observable<any> {\n return;\n }\n}</code></pre><h3 id="Class-decorators">Class decorators<a onclick="window.location.hash = \'Class-decorators\'" class="anchor">#</a></h3><ul><li><p><code>@BaseUrl(url: string)</code></p></li><li><p><code>@BaseHeaders(headers: HttpHeaders | { [header: string]: string | string[] })</code></p></li></ul><h3 id="Method-decorators">Method decorators<a onclick="window.location.hash = \'Method-decorators\'" class="anchor">#</a></h3><ul><li><p><code>@GET(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@POST(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@DELETE(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@PUT(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@HEAD(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@PATCH(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@JSONP(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@OPTIONS(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li></ul><h4 id="HttpOptions">HttpOptions<a onclick="window.location.hash = \'HttpOptions\'" class="anchor">#</a></h4><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>acl</code></td><td>ACL config, depends on <code>@delon/acl</code></td><td><code>any</code></td><td>-</td></tr><tr><td><code>observe</code></td><td>Specify response content</td><td><code>body,events,response</code></td><td>-</td></tr><tr><td><code>responseType</code></td><td>Specify content format</td><td><code>arraybuffer,blob,json,text</code></td><td>-</td></tr><tr><td><code>reportProgress</code></td><td>Whether monitor progress events</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>withCredentials</code></td><td>Set withCredentials</td><td><code>boolean</code></td><td>-</td></tr></tbody></table><h3 id="Parameter-decorators">Parameter decorators<a onclick="window.location.hash = \'Parameter-decorators\'" class="anchor">#</a></h3><ul><li><p><code>@Path(key?: string)</code> URL path parameters</p></li><li><p><code>@Query(key?: string)</code> QueryString of URL</p></li><li><p><code>@Body</code> Body of URL</p></li><li><p><code>@Headers(key?: string)</code> Headers of URL</p></li><li><p><code>@Payload</code> Request Payload</p><ul><li><p>Supported body (like<code>POST</code>, <code>PUT</code>) as a body data, equivalent to <code>@Body</code></p></li><li><p>Not supported body (like <code>GET</code>, <code>DELETE</code> etc) as a <code>QueryString</code></p></li></ul></li></ul></article></section>',meta:{order:1,title:"_HttpClient",type:"Service"},toc:[{id:"Features",title:"Features",h:2},{id:"DEMO",title:"DEMO",h:2},{id:"AlainThemeConfig",title:"AlainThemeConfig",h:2},{id:"API",title:"API",h:3},{id:"Decorators",title:"Decorators",h:2},{id:"Usage",title:"Usage",h:3},{id:"Class-decorators",title:"Class decorators",h:3},{id:"Method-decorators",title:"Method decorators",h:3},{id:"Parameter-decorators",title:"Parameter decorators",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p><code>@delon/theme</code> \u5305\u542b\u4e86\u4e00\u4e2a\u53eb <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/http/http.client.ts" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/http/http.client.ts">_HttpClient</a> \u7c7b\uff0c\u5176\u672c\u8d28\u8fd8\u662f\u8c03\u7528 Angular \u7684 <code>HttpClient</code>\u3002</p><h2 id="\u7279\u6027">\u7279\u6027<a onclick="window.location.hash = \'\u7279\u6027\'" class="anchor">#</a></h2><ul><li><p>\u66f4\u53cb\u597d\u7684\u8c03\u7528\u65b9\u6cd5</p></li><li><p>\u7ef4\u62a4 <code>loading</code> \u5c5e\u6027</p></li><li><p>\u5904\u7406\u7a7a\u503c</p></li><li><p>\u7edf\u4e00\u65f6\u95f4\u683c\u5f0f\u4e3a\u65f6\u95f4\u6233</p></li><li><p>\u652f\u6301\u4fee\u9970\u5668 @GET\u3001@POST \u7b49</p></li></ul><h2 id="\u793a\u4f8b">\u793a\u4f8b<a onclick="window.location.hash = \'\u793a\u4f8b\'" class="anchor">#</a></h2><p>\u7f51\u7edc\u8bf7\u6c42\u4e00\u822c\u60c5\u51b5\u4e0b\u662f\u540c Object \u5bf9\u8c61\u505a\u4e3a\u53c2\u6570\u4e00\u8d77\u4f7f\u7528\uff0c\u4f8b\u5982\u4e00\u4e2a <code>get</code> \u8bf7\u6c42\uff0c\u539f\u59cb\u5199\u6cd5\uff1a</p><pre class="hljs language-ts"><code>HttpClient.get(url, { params: { pi: 1 } });</code></pre><p>\u800c\u5bf9\u4e8e <code>_HttpClient</code> \u6765\u8bb2\uff0c\u5c06\u53c2\u6570\u8fdb\u4e00\u6b65\u4f18\u5316\u4e3a\uff1a</p><pre class="hljs language-ts"><code>_HttpClient.get(url, { pi: 1 });</code></pre><h2 id="AlainThemeConfig">AlainThemeConfig<a onclick="window.location.hash = \'AlainThemeConfig\'" class="anchor">#</a></h2><p>\u901a\u7528\u914d\u7f6e\u9879\uff0c\u4f8b\u5982\u7edf\u4e00\u5bf9 <code>_HttpClient</code> \u8bbe\u7f6e\u7a7a\u503c\u3001\u65f6\u95f4\u5904\u7406\u65b9\u5f0f\u3002</p><pre class="hljs language-ts"><code>import { AlainThemeConfig } from \'@delon/theme\';\nexport function fnAlainThemeConfig(): AlainThemeConfig {\n return Object.assign(new AlainThemeConfig(), <AlainThemeConfig>{\n http: {\n nullValueHandling: \'ignore\',\n },\n });\n}\n\n@NgModule({})\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: AlainThemeConfig, useFactory: fnAlainThemeConfig },\n ],\n };\n }\n}</code></pre><h3 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>nullValueHandling</code></td><td>\u7a7a\u503c\u5904\u7406</td><td><code>include,ignore</code></td><td><code>include</code></td></tr><tr><td><code>dateValueHandling</code></td><td>\u65f6\u95f4\u503c\u5904\u7406</td><td><code>timestamp,ignore</code></td><td><code>timestamp</code></td></tr></tbody></table><h2 id="\u4f7f\u7528\u4fee\u9970\u5668">\u4f7f\u7528\u4fee\u9970\u5668<a onclick="window.location.hash = \'\u4f7f\u7528\u4fee\u9970\u5668\'" class="anchor">#</a></h2><p>\u76ee\u6807\u7c7b\u90fd\u5fc5\u987b\u7ee7\u627f <code>BaseApi</code> \u57fa\u7c7b\u3002</p><h3 id="\u793a\u4f8b">\u793a\u4f8b<a onclick="window.location.hash = \'\u793a\u4f8b\'" class="anchor">#</a></h3><pre class="hljs language-ts"><code>@BaseUrl(\'/user\')\n@BaseHeaders({ bh: \'a\' })\nclass RestService extends BaseApi {\n @GET()\n query(@Query(\'pi\') pi: number, @Query(\'ps\') ps: number): Observable<any> {\n return;\n }\n\n @GET(\':id\')\n get(@Path(\'id\') id: number): Observable<any> {\n return;\n }\n\n @GET()\n get(@Payload data: {}): Observable<any> {\n return;\n }\n\n // \u4f7f\u7528 `::id` \u6765\u8868\u793a\u8f6c\u4e49\uff0c\u82e5 `id` \u503c\u4e3a `undefined` \u4f1a\u5ffd\u7565\u8f6c\u6362\uff0c\u4f8b\u5982\uff1a\n // \u5f53 `id` \u4e3a `10` \u65f6 => 10:type\n // \u5f53 `id` \u4e3a `undefined` \u65f6 => :id:type\n @GET(\':id::type\')\n get(@Path(\'id\') id: number): Observable<any> {\n return;\n }\n\n @POST(\':id\')\n save(@Path(\'id\') id: number, @Body data: Object): Observable<any> {\n return;\n }\n\n @POST()\n save(@Payload data: {}): Observable<any> {\n return;\n }\n\n @FORM()\n save(@Payload data: {}): Observable<any> {\n return;\n }\n\n // \u82e5\u8bf7\u6c42\u7684URL\u4e0d\u7b26\u5408\u6388\u6743\u8981\u6c42\uff0c\u4f1a\u76f4\u63a5\u629b\u51fa `401` \u9519\u8bef\uff0c\u4e14\u4e0d\u53d1\u9001\u8bf7\u6c42\n @GET(\'\', { acl: \'admin\' })\n ACL(): Observable<any> {\n return;\n }\n}</code></pre><h3 id="\u7c7b">\u7c7b<a onclick="window.location.hash = \'\u7c7b\'" class="anchor">#</a></h3><ul><li><p><code>@BaseUrl(url: string)</code></p></li><li><p><code>@BaseHeaders(headers: HttpHeaders | { [header: string]: string | string[] })</code></p></li></ul><h3 id="\u65b9\u6cd5">\u65b9\u6cd5<a onclick="window.location.hash = \'\u65b9\u6cd5\'" class="anchor">#</a></h3><ul><li><p><code>@GET(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@POST(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@DELETE(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@PUT(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@HEAD(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@PATCH(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@JSONP(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li><li><p><code>@OPTIONS(url: string = \'\', options?: <a data-toc="HttpOptions">HttpOptions</a>)</code></p></li></ul><h4 id="HttpOptions">HttpOptions<a onclick="window.location.hash = \'HttpOptions\'" class="anchor">#</a></h4><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>acl</code></td><td>ACL \u914d\u7f6e\uff0c\u82e5\u5bfc\u5165 <code>@delon/acl</code> \u65f6\u81ea\u52a8\u6709\u6548\uff0c\u7b49\u540c\u4e8e <code>ACLService.can(roleOrAbility: ACLCanType)</code> \u53c2\u6570\u503c</td><td><code>any</code></td><td>-</td></tr><tr><td><code>observe</code></td><td>\u6307\u5b9a\u54cd\u5e94\u5185\u5bb9</td><td><code>body,events,response</code></td><td>-</td></tr><tr><td><code>responseType</code></td><td>\u6307\u5b9a\u5185\u5bb9\u683c\u5f0f</td><td><code>arraybuffer,blob,json,text</code></td><td>-</td></tr><tr><td><code>reportProgress</code></td><td>\u662f\u5426\u76d1\u542c\u8fdb\u5ea6\u4e8b\u4ef6</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>withCredentials</code></td><td>\u8bbe\u7f6e withCredentials</td><td><code>boolean</code></td><td>-</td></tr></tbody></table><h3 id="\u53c2\u6570">\u53c2\u6570<a onclick="window.location.hash = \'\u53c2\u6570\'" class="anchor">#</a></h3><ul><li><p><code>@Path(key?: string)</code> URL \u8def\u7531\u53c2\u6570</p></li><li><p><code>@Query(key?: string)</code> URL \u53c2\u6570 QueryString</p></li><li><p><code>@Body</code> \u53c2\u6570 Body</p></li><li><p><code>@Headers(key?: string)</code> \u53c2\u6570 Headers</p></li><li><p><code>@Payload</code> \u8bf7\u6c42\u8d1f\u8f7d</p><ul><li><p>\u5f53\u652f\u6301 Body \u65f6\uff08\u4f8b\u5982\uff1a<code>POST</code>\u3001<code>PUT</code>\uff09\u4e3a\u5185\u5bb9\u4f53\u7b49\u540c <code>@Body</code></p></li><li><p>\u5f53\u4e0d\u652f\u6301 Body \u65f6\uff08\u4f8b\u5982\uff1a<code>GET</code>\u3001<code>DELETE</code> \u7b49\uff09\u4e3a <code>QueryString</code></p></li></ul></li></ul></article></section>',meta:{order:1,title:"_HttpClient",type:"Service"},toc:[{id:"\u7279\u6027",title:"\u7279\u6027",h:2},{id:"\u793a\u4f8b",title:"\u793a\u4f8b",h:2},{id:"AlainThemeConfig",title:"AlainThemeConfig",h:2},{id:"API",title:"API",h:3},{id:"\u4f7f\u7528\u4fee\u9970\u5668",title:"\u4f7f\u7528\u4fee\u9970\u5668",h:2},{id:"\u793a\u4f8b",title:"\u793a\u4f8b",h:3},{id:"\u7c7b",title:"\u7c7b",h:3},{id:"\u65b9\u6cd5",title:"\u65b9\u6cd5",h:3},{id:"\u53c2\u6570",title:"\u53c2\u6570",h:3}]}},demo:!1},this.codes=[]},k=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/menu/index.en-US.md","zh-CN":"packages/theme/src/services/menu/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><p>The data format is an array of <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts">Menu</a>, where <code>text</code> text property muse be required, And it\'s not affected by external components (such as <a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a>),</p><p>This is because menus it\'s essential part of the applications, And it can be used more effectively as a service, such as: dynamically generate navigation, title etc.</p><p><strong>Suggest:</strong> Start up Angular (<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service .ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service .ts">startup.service.ts</a>) After get menu data from remote, call the <code>add()</code> method.</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><h3 id="MenuService">MenuService<a onclick="window.location.hash = \'MenuService\'" class="anchor">#</a></h3><table><thead><tr><th>Method</th><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>add</code></td><td><code>items: <a data-toc="Menu">Menu</a>[]</code></td><td>Setting menu data</td></tr><tr><td><code>clear</code></td><td>-</td><td>Clear menu data</td></tr><tr><td><code>resume</code></td><td><code>callback?: (item: <a data-toc="Menu">Menu</a>, parentMenum: <a data-toc="Menu">Menu</a> | null, depth?: number) => void</code></td><td>Reset menu, may need call when I18N, user acl changed</td></tr><tr><td><code>openedByUrl</code></td><td><code>url: string | null, recursive = false</code></td><td>Set menu <code>_open</code> attribute by URL (<code>_open</code> expands the submenu)</td></tr><tr><td><code>getPathByUrl</code></td><td><code>url: string | null, recursive = false</code></td><td>Get menu list based on url</td></tr></tbody></table><p><strong>recursive</strong></p><p>Recursive upward find, for example, the menu data source contains <code>/ware</code>, then <code>/ware/1</code> is equivalent to <code>/ware</code>.</p><h3 id="Menu">Menu<a onclick="window.location.hash = \'Menu\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>text</code></td><td>Text of menu item, can be choose one of <code>text</code> or <code>i18n</code> (Support HTML)</td><td><code>string</code></td><td>-</td></tr><tr><td><code>i18n</code></td><td>I18n key of menu item, can be choose one of <code>text</code> or <code>i18n</code> (Support HTML)</td><td><code>string</code></td><td>-</td></tr><tr><td><code>group</code></td><td>Whether to display the group name</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>link</code></td><td>Routing for the menu item, can be choose one of <code>link</code> or <code>externalLink</code></td><td><code>string</code></td><td>-</td></tr><tr><td><code>externalLink</code></td><td>External link for the menu item, can be choose one of <code>link</code> or <code>externalLink</code></td><td><code>string</code></td><td>-</td></tr><tr><td><code>target</code></td><td>Specifies <code>externalLink</code> where to display the linked URL</td><td><code>_blank,_self,_parent,_top</code></td><td>-</td></tr><tr><td><code>icon</code></td><td>Icon for the menu item, only valid for the first level menu</td><td><code>string | <a data-toc="MenuIcon">MenuIcon</a></code></td><td>-</td></tr><tr><td><code>badge</code></td><td>Badget for the menu item when <code>group</code> is <code>true</code></td><td><code>number</code></td><td>-</td></tr><tr><td><code>badgeDot</code></td><td>Whether to display a red dot instead of <code>badge</code> value</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>badgeStatus</code></td><td>Badge <a target="_blank" href="https://ng.ant.design/components/badge/en#nz-badge" data-url="https://ng.ant.design/components/badge/en#nz-badge">color</a></td><td><code>string</code></td><td>-</td></tr><tr><td><code>disabled</code></td><td>Whether disable for the menu item</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>hide</code></td><td>Whether hidden for the menu item</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>hideInBreadcrumb</code></td><td>Whether hide in breadcrumbs, which are valid when the <code>page-header</code> component automatically generates breadcrumbs</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>acl</code></td><td>ACL configuration, it\'s equivalent to <code>ACLService.can(roleOrAbility: ACLCanType)</code> parameter value</td><td><code>any</code></td><td>-</td></tr><tr><td><code>shortcut</code></td><td>Whether shortcut menu item</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>shortcutRoot</code></td><td>Wheter shortcut menu root node</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>reuse</code></td><td>Whether to allow reuse, need to cooperate with the <code>reuse-tab</code> component</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>open</code></td><td>Whether to expand, when <code>checkStrictly</code> is valid in <code>sidebar-nav</code> component</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>key</code></td><td>Unique identifier of the menu item, can be used in <code>getItem</code>, <code>setItem</code> to update a menu</td><td><code>string</code></td><td>-</td></tr><tr><td><code>children</code></td><td>Children for the menu item</td><td><code><a data-toc="Menu">Menu</a>[]</code></td><td>-</td></tr></tbody></table><h3 id="MenuIcon">MenuIcon<a onclick="window.location.hash = \'MenuIcon\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>[type]</code></td><td>Type for icon</td><td><code>class,icon,iconfont,img</code></td><td><code>icon</code></td></tr><tr><td><code>[value]</code></td><td>Value for the icon, can be set Class Name, nz-icon of <code>nzType</code>, image</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[theme]</code></td><td>Type of the ant design icon</td><td><code>outline,twotone,fill</code></td><td><code>outline</code></td></tr><tr><td><code>[spin]</code></td><td>Rotate icon with animation</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>[twoToneColor]</code></td><td>Only support the two-tone icon. Specific the primary color</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[iconfont]</code></td><td>Type of the icon from iconfont</td><td><code>string</code></td><td>-</td></tr></tbody></table>',meta:{order:2,title:"MenuService",subtitle:"Menu Service",type:"Service"},toc:[{id:"API",title:"API",h:2},{id:"MenuService",title:"MenuService",h:3},{id:"Menu",title:"Menu",h:3},{id:"MenuIcon",title:"MenuIcon",h:3}]},"zh-CN":{content:'<section class="markdown"><p>\u83dc\u5355\u670d\u52a1\u7684\u6570\u636e\u683c\u5f0f\u662f\u4e00\u4e2a <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/menu/interface.ts">Menu</a> \u6570\u7ec4\uff0c\u5176\u4e2d <code>text</code> \u5c5e\u6027\u8868\u793a\u83dc\u5355\u6587\u672c\u4e3a\u5fc5\u586b\u9879\uff0c\u800c\u4e14\u672c\u8eab\u5e76\u4e0d\u53d7\u5916\u90e8\u7ec4\u4ef6\u7684\u5f71\u54cd\uff08\u4f8b\u5982<a href="/components/sidebar-nav" data-url="/components/sidebar-nav">sidebar-nav</a>\u7ec4\u4ef6\uff09\uff0c\u8fd9\u662f\u56e0\u4e3a\u83dc\u5355\u662f\u8d2f\u7a7f\u6574\u4e2a\u9879\u76ee\u5fc5\u4e0d\u53ef\u5c11\u7684\u7ec4\u6210\u90e8\u5206\uff0c\u800c\u5c06\u5176\u72ec\u7acb\u6210\u4e00\u4e2a\u670d\u52a1\u53ef\u4ee5\u66f4\u6709\u6548\u88ab\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a\u52a8\u6001\u751f\u6210\u5bfc\u822a\u3001\u6807\u9898\u7b49\u3002</p><p><strong>\u5efa\u8bae\uff1a</strong> \u5728 Angular \u542f\u52a8\u670d\u52a1\uff08<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>\uff09\u4ece\u8fdc\u7a0b\u83b7\u53d6\u5230\u83dc\u5355\u6570\u636e\u540e\uff0c\u8c03\u7528 <code>add()</code> \u65b9\u6cd5\u3002</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><h3 id="MenuService">MenuService<a onclick="window.location.hash = \'MenuService\'" class="anchor">#</a></h3><table><thead><tr><th>\u65b9\u6cd5</th><th>\u53c2\u6570</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>add</code></td><td><code>items: <a data-toc="Menu">Menu</a>[]</code></td><td>\u8bbe\u7f6e\u83dc\u5355\u6570\u636e</td></tr><tr><td><code>clear</code></td><td>-</td><td>\u6e05\u7a7a\u83dc\u5355\u6570\u636e</td></tr><tr><td><code>resume</code></td><td><code>callback?: (item: <a data-toc="Menu">Menu</a>, parentMenum: <a data-toc="Menu">Menu</a> | null, depth?: number) => void</code></td><td>\u91cd\u7f6e\u83dc\u5355\uff0c\u53ef\u80fdI18N\u3001\u7528\u6237\u6743\u9650\u53d8\u52a8\u65f6\u9700\u8981\u8c03\u7528\u5237\u65b0</td></tr><tr><td><code>openedByUrl</code></td><td><code>url: string | null, recursive = false</code></td><td>\u6839\u636eURL\u8bbe\u7f6e\u83dc\u5355 <code>_open</code> \u5c5e\u6027\uff08<code>_open</code>\u7528\u4e8e\u662f\u5426\u5c55\u5f00\u83dc\u5355\u7684\u6761\u4ef6\u503c\uff09</td></tr><tr><td><code>getPathByUrl</code></td><td><code>url: string | null, recursive = false</code></td><td>\u6839\u636eurl\u83b7\u53d6\u83dc\u5355\u5217\u8868</td></tr></tbody></table><p><strong>recursive</strong></p><p>\u8868\u793a\u81ea\u52a8\u5411\u4e0a\u9012\u5f52\u67e5\u627e\uff0c\u4f8b\u5982\u83dc\u5355\u6570\u636e\u6e90\u5305\u542b <code>/ware</code>\uff0c\u5219 <code>/ware/1</code> \u4e5f\u89c6\u4e3a <code>/ware</code> \u9879\u3002</p><h3 id="Menu">Menu<a onclick="window.location.hash = \'Menu\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>text</code></td><td>\u6587\u672c\uff08\u652f\u6301HTML\uff09\uff0c<strong>\u5fc5\u586b\u9879</strong></td><td><code>string</code></td><td>-</td></tr><tr><td><code>i18n</code></td><td>i18n\u4e3b\u952e\uff08\u652f\u6301HTML\uff09</td><td><code>string</code></td><td>-</td></tr><tr><td><code>group</code></td><td>\u662f\u5426\u663e\u793a\u5206\u7ec4\u540d\uff0c\u6307<a target="_blank" href="//ng-alain.github.io/ng-alain/" data-url="//ng-alain.github.io/ng-alain/">\u793a\u4f8b</a>\u4e2d\u7684\u3010\u4e3b\u5bfc\u822a\u3011\u5b57\u6837</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>link</code></td><td>\u8def\u7531\uff0c<code>link</code>\u3001<code>externalLink</code> \u4e8c\u9009\u5176\u4e00</td><td><code>string</code></td><td>-</td></tr><tr><td><code>externalLink</code></td><td>\u5916\u90e8\u94fe\u63a5\uff0c<code>link</code>\u3001<code>externalLink</code> \u4e8c\u9009\u5176\u4e00</td><td><code>string</code></td><td>-</td></tr><tr><td><code>target</code></td><td>\u94fe\u63a5 target</td><td><code>_blank,_self,_parent,_top</code></td><td>-</td></tr><tr><td><code>icon</code></td><td>\u56fe\u6807\uff0c\u6307<a target="_blank" href="//ng-alain.github.io/ng-alain/" data-url="//ng-alain.github.io/ng-alain/">\u793a\u4f8b</a>\u4e2d\u7684\u3010\u4eea\u8868\u76d8\u3011\u524d\u56fe\u6807\uff0c\u53ea\u5bf9\u4e00\u7ea7\u83dc\u5355\u6709\u6548</td><td><code>string | <a data-toc="MenuIcon">MenuIcon</a></code></td><td>-</td></tr><tr><td><code>badge</code></td><td>\u5fbd\u6807\u6570\uff0c\u5c55\u793a\u7684\u6570\u5b57\uff0c\u6307<a target="_blank" href="//ng-alain.github.io/ng-alain/" data-url="//ng-alain.github.io/ng-alain/">\u793a\u4f8b</a>\u4e2d\u7684\u3010\u5c0f\u90e8\u4ef6\u3011\u540e\u7684\u7ea2\u8272\u5757\u3002\uff08\u6ce8\uff1a<code>group:true</code> \u65f6\u65e0\u6548\uff09</td><td><code>number</code></td><td>-</td></tr><tr><td><code>badgeDot</code></td><td>\u5fbd\u6807\u6570\uff0c\u663e\u793a\u5c0f\u7ea2\u70b9</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>badgeStatus</code></td><td>\u5fbd\u6807 Badge <a target="_blank" href="https://ng.ant.design/components/badge/en#nz-badge" data-url="https://ng.ant.design/components/badge/en#nz-badge">\u989c\u8272</a></td><td><code>string</code></td><td>-</td></tr><tr><td><code>disabled</code></td><td>\u662f\u5426\u7981\u7528\u83dc\u5355</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>hide</code></td><td>\u662f\u5426\u9690\u85cf\u83dc\u5355</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>hideInBreadcrumb</code></td><td>\u9690\u85cf\u9762\u5305\u5c51\uff0c\u6307 <code>page-header</code> \u7ec4\u4ef6\u7684\u81ea\u52a8\u751f\u6210\u9762\u5305\u5c51\u65f6\u6709\u6548</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>acl</code></td><td>ACL\u914d\u7f6e\uff0c\u82e5\u5bfc\u5165 <code>@delon/acl</code> \u65f6\u81ea\u52a8\u6709\u6548\uff0c\u7b49\u540c\u4e8e <code>ACLService.can(roleOrAbility: ACLCanType)</code> \u53c2\u6570\u503c</td><td><code>any</code></td><td>-</td></tr><tr><td><code>shortcut</code></td><td>\u662f\u5426\u5feb\u6377\u83dc\u5355\u9879</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>shortcutRoot</code></td><td>\u5feb\u6377\u83dc\u5355\u6839\u8282\u70b9</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>reuse</code></td><td>\u662f\u5426\u5141\u8bb8\u590d\u7528\uff0c\u9700\u914d\u5408 <code>reuse-tab</code> \u7ec4\u4ef6</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>key</code></td><td>\u83dc\u5355\u9879\u552f\u4e00\u6807\u8bc6\u7b26\uff0c\u53ef\u7528\u4e8e <code>getItem</code>\u3001<code>setItem</code> \u6765\u66f4\u65b0\u67d0\u4e2a\u83dc\u5355</td><td><code>string</code></td><td>-</td></tr><tr><td><code>children</code></td><td>\u5b50\u83dc\u5355</td><td><code><a data-toc="Menu">Menu</a>[]</code></td><td>-</td></tr></tbody></table><h3 id="MenuIcon">MenuIcon<a onclick="window.location.hash = \'MenuIcon\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>[type]</code></td><td>\u7c7b\u578b</td><td><code>class,icon,iconfont,img</code></td><td><code>icon</code></td></tr><tr><td><code>[value]</code></td><td>\u503c\uff0c\u5305\u542b\uff1a\u7c7b\u540d\u3001\u56fe\u6807 <code>nzType</code>\u3001\u56fe\u50cf</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[theme]</code></td><td>\u56fe\u6807\u4e3b\u9898\u98ce\u683c</td><td><code>outline,twotone,fill</code></td><td><code>outline</code></td></tr><tr><td><code>[spin]</code></td><td>\u662f\u5426\u6709\u65cb\u8f6c\u52a8\u753b</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>[twoToneColor]</code></td><td>\u4ec5\u9002\u7528\u53cc\u8272\u56fe\u6807\uff0c\u8bbe\u7f6e\u53cc\u8272\u56fe\u6807\u7684\u4e3b\u8981\u989c\u8272\uff0c\u4ec5\u5bf9\u5f53\u524d icon \u751f\u6548</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[iconfont]</code></td><td>\u6307\u5b9a\u6765\u81ea IconFont \u7684\u56fe\u6807\u7c7b\u578b</td><td><code>string</code></td><td>-</td></tr></tbody></table><blockquote><p>\u4f7f\u7528 <code>iconfont</code> \u7c7b\u578b\u5fc5\u987b\u5148\u52a0\u8f7d <code>NzIconService.fetchFromIconfont</code>\uff0c\u5efa\u8bae\u5728\u6839\u6a21\u5757\u4e2d\u6267\u884c\u3002</p></blockquote>',meta:{order:2,title:"MenuService",subtitle:"\u83dc\u5355\u670d\u52a1",type:"Service"},toc:[{id:"API",title:"API",h:2},{id:"MenuService",title:"MenuService",h:3},{id:"Menu",title:"Menu",h:3},{id:"MenuIcon",title:"MenuIcon",h:3}]}},demo:!1},this.codes=[]},v=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/modal/index.en-US.md","zh-CN":"packages/theme/src/services/modal/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>Based on the <code>NzModalService</code> package, it solves some known issues:</p><ul><li><p>More friendly handling callbacks</p></li></ul><h2 id="Usage">Usage<a onclick="window.location.hash = \'Usage\'" class="anchor">#</a></h2><pre class="hljs language-ts"><code>this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());\n\n// Ok callback\n// 1. considered successful\nthis.subject.close(true);\nthis.subject.close({ other: 1 });\n// 2. considered error\nthis.subject.close();\n\n// Close\nthis.subject.destroy();</code></pre><p>There are includes <code>create</code> & <code>createStatic</code> methods to open the normal & static modal. Add a few parameters based on <code>NzModalService</code>.</p><p><strong>Custom component HTML template</strong></p><pre class="hljs language-html"><code><div class="modal-header">\n <div class="modal-title">Title</div>\n</div>\n\nYour body content\n\n<div class="modal-footer">\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div></code></pre><h3 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td>Specify modal size</td><td><code>sm,md,lg,xl,number</code></td><td><code>lg</code></td></tr><tr><td><code>exact</code></td><td>Exact match return value, default is <code>true</code>, If the return value is not null (<code>null</code> or <code>undefined</code>) is considered successful, otherwise it is considered error.</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>includeTabs</code></td><td>Whether to wrap the tab page</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>modalOptions</code></td><td>nz-modal raw parameters <a target="_blank" href="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/nz-modal.type.ts" data-url="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/nz-modal.type.ts">ModalOptionsForService</a></td><td><code>ModalOptionsForService</code></td><td>-</td></tr></tbody></table></article></section>',meta:{order:3,title:"ModalHelper",subtitle:"Modal Helper",type:"Service"},toc:[{id:"Usage",title:"Usage",h:2},{id:"API",title:"API",h:3}]},"zh-CN":{content:'<section class="markdown"><article><p>\u57fa\u4e8e <code>NzModalService</code> \u5c01\u88c5\uff0c\u5b83\u89e3\u51b3\u4e00\u4e9b\u5df2\u77e5\u95ee\u9898\uff1a</p><ul><li><p>\u66f4\u53cb\u597d\u7684\u5904\u7406\u56de\u8c03</p></li></ul><h2 id="\u7528\u6cd5">\u7528\u6cd5<a onclick="window.location.hash = \'\u7528\u6cd5\'" class="anchor">#</a></h2><pre class="hljs language-ts"><code>this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());\n\n// \u6210\u529f\u8303\u4f8b\n// 1. \u89c6\u4e3a\u6210\u529f\nthis.subject.close(true);\nthis.subject.close({ other: 1 });\n// 2. \u89c6\u4e3a\u5931\u8d25\nthis.subject.close();\n\n// \u5173\u95ed\uff1a\nthis.subject.destroy();</code></pre><p>\u5305\u62ec\u4e24\u4e2a\u65b9\u6cd5\u4f53 <code>create</code> & <code>createStatic</code> \u5206\u522b\u6253\u5f00\u666e\u901a&\u9759\u6001\u5bf9\u8bdd\u6846\u3002\u5728 <code>NzModalService</code> \u57fa\u7840\u4e0a\u65b0\u589e\u82e5\u5e72\u53c2\u6570\u3002</p><p><strong>\u81ea\u5b9a\u4e49\u7ec4\u4ef6HTML\u6a21\u677f</strong></p><pre class="hljs language-html"><code><div class="modal-header">\n <div class="modal-title">Title</div>\n</div>\n\nYour body content\n\n<div class="modal-footer">\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div></code></pre><h3 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>size</code></td><td>\u6307\u5b9a\u5bf9\u8bdd\u6846\u5927\u5c0f</td><td><code>sm,md,lg,xl,number</code></td><td><code>lg</code></td></tr><tr><td><code>exact</code></td><td>\u662f\u5426\u7cbe\u51c6\uff08\u9ed8\u8ba4\uff1a<code>true</code>\uff09\uff0c\u82e5\u8fd4\u56de\u503c\u975e\u7a7a\u503c\uff08<code>null</code>\u6216<code>undefined</code>\uff09\u89c6\u4e3a\u6210\u529f\uff0c\u5426\u5219\u89c6\u4e3a\u9519\u8bef</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>includeTabs</code></td><td>\u662f\u5426\u5305\u88f9\u6807\u7b7e\u9875</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>modalOptions</code></td><td>nz-modal \u5bf9\u8bdd\u6846\u539f\u59cb\u53c2\u6570 <a target="_blank" href="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/nz-modal.type.ts" data-url="https:/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/nz-modal.type.ts">ModalOptionsForService</a></td><td><code>ModalOptionsForService</code></td><td>-</td></tr></tbody></table></article></section>',meta:{order:3,title:"ModalHelper",subtitle:"\u5bf9\u8bdd\u6846\u8f85\u52a9\u7c7b",type:"Service"},toc:[{id:"\u7528\u6cd5",title:"\u7528\u6cd5",h:2},{id:"API",title:"API",h:3}]}},demo:!1},this.codes=[]},x=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/responsive/index.en-US.md","zh-CN":"packages/theme/src/services/responsive/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><article><p>More friendly use responsive rules, the original <code>xs</code>, <code>sm</code> etc. reduced to <code>col</code> property, the default response rule:</p><table><thead><tr><th><code>col</code></th><th><code><576px</code></th><th><code>\u2265576px</code></th><th><code>\u2265768px</code></th><th><code>\u2265992px</code></th><th><code>\u22651200px</code></th><th><code>\u22651600px</code></th></tr></thead><tbody><tr><td><code>1</code></td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td><code>2</code></td><td>1</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr><td><code>3</code></td><td>1</td><td>2</td><td>3</td><td>3</td><td>3</td><td>3</td></tr><tr><td><code>4</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>4</td><td>4</td></tr><tr><td><code>5</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>6</td><td>6</td></tr><tr><td><code>6</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>6</td><td>12</td></tr></tbody></table><p>In order to better develop responsives this view or edit pages, the rule will be used by default in <code>sg</code>, <code>sv</code>, <code>se</code> components. You can via <code>ResponsiveConfig</code> to override the default rules.</p><h2 id="ResponsiveConfig">ResponsiveConfig<a onclick="window.location.hash = \'ResponsiveConfig\'" class="anchor">#</a></h2><pre class="hljs language-ts"><code>import { AlainThemeConfig } from \'@delon/theme\';\nexport function fnAlainThemeConfig(): AlainThemeConfig {\n return Object.assign(new AlainThemeConfig(), <AlainThemeConfig>{\n responsive: <ResponsiveConfig>{\n rules: {\n 1: { xs: 24 },\n 2: { xs: 24, sm: 12 },\n 3: { xs: 24, sm: 12, md: 8 },\n 4: { xs: 24, sm: 12, md: 8, lg: 6 },\n 5: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 },\n 6: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4, xxl: 2 },\n }\n },\n });\n}\n\n@NgModule({})\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: AlainThemeConfig, useFactory: fnAlainThemeConfig },\n ],\n };\n }\n}</code></pre></article></section>',meta:{type:"Service",order:5,title:"ResponsiveService",subtitle:"Responsive Service"},toc:[{id:"ResponsiveConfig",title:"ResponsiveConfig",h:2}]},"zh-CN":{content:'<section class="markdown"><article><p>\u66f4\u53cb\u597d\u7684\u4f7f\u7528\u54cd\u5e94\u5f0f\u89c4\u5219\uff0c\u5c06\u539f <code>xs</code>\u3001<code>sm</code> \u7b49\u5c5e\u6027\u7b80\u5316\u6210 <code>col</code> \u680f\uff0c\u9ed8\u8ba4\u54cd\u5e94\u5f0f\u89c4\u5219\uff1a</p><table><thead><tr><th><code>col</code></th><th><code><576px</code></th><th><code>\u2265576px</code></th><th><code>\u2265768px</code></th><th><code>\u2265992px</code></th><th><code>\u22651200px</code></th><th><code>\u22651600px</code></th></tr></thead><tbody><tr><td><code>1</code></td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td><code>2</code></td><td>1</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr><td><code>3</code></td><td>1</td><td>2</td><td>3</td><td>3</td><td>3</td><td>3</td></tr><tr><td><code>4</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>4</td><td>4</td></tr><tr><td><code>5</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>6</td><td>6</td></tr><tr><td><code>6</code></td><td>1</td><td>2</td><td>3</td><td>4</td><td>6</td><td>12</td></tr></tbody></table><p>\u4e3a\u4e86\u66f4\u597d\u7684\u5f00\u53d1\u54cd\u5e94\u5f0f\u67e5\u770b\u3001\u7f16\u8f91\u9875\uff0c\u8fd9\u79cd\u89c4\u5219\u5c06\u9ed8\u8ba4\u5c06\u8fd0\u7528\u5728 <code>sg</code>\u3001<code>sv</code>\u3001<code>se</code> \u7b49\u7ec4\u4ef6\u4e2d\u3002\u4f60\u4e5f\u53ef\u4ee5\u5229\u7528 <code>ResponsiveConfig</code> \u6765\u6539\u5199\u9ed8\u8ba4\u89c4\u5219\u3002</p><h2 id="ResponsiveConfig">ResponsiveConfig<a onclick="window.location.hash = \'ResponsiveConfig\'" class="anchor">#</a></h2><p>\u901a\u7528\u914d\u7f6e\u9879\uff0c\u4f8b\u5982\u7edf\u4e00\u5bf9 <code>ResponsiveService</code> \u8bbe\u7f6e\u54cd\u5e94\u5f0f\u89c4\u5219\u3002</p><pre class="hljs language-ts"><code>import { AlainThemeConfig } from \'@delon/theme\';\nexport function fnAlainThemeConfig(): AlainThemeConfig {\n return Object.assign(new AlainThemeConfig(), <AlainThemeConfig>{\n responsive: <ResponsiveConfig>{\n rules: {\n 1: { xs: 24 },\n 2: { xs: 24, sm: 12 },\n 3: { xs: 24, sm: 12, md: 8 },\n 4: { xs: 24, sm: 12, md: 8, lg: 6 },\n 5: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4 },\n 6: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4, xxl: 2 },\n }\n },\n });\n}\n\n@NgModule({})\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: AlainThemeConfig, useFactory: fnAlainThemeConfig },\n ],\n };\n }\n}</code></pre></article></section>',meta:{type:"Service",order:5,title:"ResponsiveService",subtitle:"\u54cd\u5e94\u5f0f\u670d\u52a1"},toc:[{id:"ResponsiveConfig",title:"ResponsiveConfig",h:2}]}},demo:!1},this.codes=[]},S=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/scroll/index.en-US.md","zh-CN":"packages/theme/src/services/scroll/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><p>Scrollbar control allows scrolling to where the specified element.</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>Method</th><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>getScrollPosition</code></td><td><code>element?: Element</code></td><td>Retrieves the current scroll position</td></tr><tr><td><code>scrollToPosition</code></td><td><code>element: Element | Window, position: [number, number]</code></td><td>Sets the scroll position</td></tr><tr><td><code>scrollToElement</code></td><td><code>element?: Element, topOffset = 0</code></td><td>Scroll to element</td></tr><tr><td><code>scrollToTop</code></td><td><code>topOffset = 0</code></td><td>Scroll to top</td></tr></tbody></table>',meta:{order:5,title:"ScrollService",subtitle:"Scroll Service",type:"Service"},toc:[{id:"API",title:"API",h:2}]},"zh-CN":{content:'<section class="markdown"><p>\u6eda\u52a8\u6761\u63a7\u5236\uff0c\u5141\u8bb8\u6eda\u52a8\u81f3\u6307\u5b9a\u5143\u7d20\u6240\u5904\u4f4d\u7f6e\u3002</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>\u63a5\u53e3\u540d</th><th>\u53c2\u6570</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>getScrollPosition</code></td><td><code>element?: Element</code></td><td>\u83b7\u53d6\u6eda\u52a8\u6761\u4f4d\u7f6e</td></tr><tr><td><code>scrollToPosition</code></td><td><code>element: Element | Window, position: [number, number]</code></td><td>\u8bbe\u7f6e\u6eda\u52a8\u6761\u4f4d\u7f6e</td></tr><tr><td><code>scrollToElement</code></td><td><code>element?: Element, topOffset = 0</code></td><td>\u8bbe\u7f6e\u6eda\u52a8\u6761\u81f3\u6307\u5b9a\u5143\u7d20</td></tr><tr><td><code>scrollToTop</code></td><td><code>topOffset = 0</code></td><td>\u6eda\u52a8\u81f3\u9876\u90e8</td></tr></tbody></table>',meta:{order:5,title:"ScrollService",subtitle:"\u6eda\u52a8\u6761\u670d\u52a1",type:"Service"},toc:[{id:"API",title:"API",h:2}]}},demo:!1},this.codes=[]},z=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/settings/index.en-US.md","zh-CN":"packages/theme/src/services/settings/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><p>Project config data, includes <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L1" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L1">App</a>, <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L15" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L15">Layout</a>, <a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L8" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L8">User</a>, three data types And store persistence in <code>localStorage</code>.</p><p><strong>Suggest:</strong> Call the <code>setApp()</code>, <code>setUser()</code> methods to restore project config data, via Angular startup service (<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>).</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><h3 id="SettingsService">SettingsService<a onclick="window.location.hash = \'SettingsService\'" class="anchor">#</a></h3><table><thead><tr><th>Name</th><th>Type</th><th>Return Value</th><th>Description</th></tr></thead><tbody><tr><td><code>layout</code></td><td><code>property</code></td><td><code><a data-toc="Layout">Layout</a></code></td><td>Data of layout</td></tr><tr><td><code>app</code></td><td><code>property</code></td><td><code><a data-toc="App">App</a></code></td><td>Data of app</td></tr><tr><td><code>user</code></td><td><code>property</code></td><td><code><a data-toc="User">User</a></code></td><td>Data of User</td></tr><tr><td><code>notify</code></td><td><code>property</code></td><td><code>Observable<SettingsNotify></code></td><td>Changed notification</td></tr><tr><td><code>setLayout(name: string, value: any)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>Set property value of layout</td></tr><tr><td><code>setApp(value: <a data-toc="App">App</a>)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>Set app data</td></tr><tr><td><code>setUser(value: <a data-toc="User">User</a>)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>Set user data</td></tr></tbody></table><h3 id="App">App<a onclick="window.location.hash = \'App\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>[name]</code></td><td>Name for app</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[description]</code></td><td>Description for app</td><td><code>string</code></td><td>-</td></tr></tbody></table><h3 id="User">User<a onclick="window.location.hash = \'User\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>[name]</code></td><td>Name for current user</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[avatar]</code></td><td>Avatar for current user</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[email]</code></td><td>Email for current user</td><td><code>string</code></td><td>-</td></tr></tbody></table><h3 id="Layout">Layout<a onclick="window.location.hash = \'Layout\'" class="anchor">#</a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td><code>[collapsed]</code></td><td>Whether to fold menu</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>[lang]</code></td><td>Current language</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[colorWeak]</code></td><td>Color weak</td><td><code>boolean</code></td><td><code>false</code></td></tr></tbody></table>',meta:{order:1,title:"SettingsService",subtitle:"Project configuration",type:"Service"},toc:[{id:"API",title:"API",h:2},{id:"SettingsService",title:"SettingsService",h:3},{id:"App",title:"App",h:3},{id:"User",title:"User",h:3},{id:"Layout",title:"Layout",h:3}]},"zh-CN":{content:'<section class="markdown"><p>\u9879\u76ee\u914d\u7f6e\u9879\uff0c\u5305\u542b\u5e94\u7528<a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L1" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L1">App</a>\u3001\u5e03\u5c40<a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L15" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L15">Layout</a>\u3001\u7528\u6237\u4fe1\u606f<a target="_blank" href="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L8" data-url="https:/ng-alain/delon/blob/master/packages/theme/src/services/settings/interface.ts#L8">User</a>\u4e09\u79cd\u6570\u636e\u7c7b\u578b\uff0c\u5e76\u4e14\u5b58\u50a8\u6301\u4e45\u5316\u5728 <code>localStorage</code>\u3002</p><p><strong>\u5efa\u8bae\uff1a</strong> \u5728 Angular \u542f\u52a8\u670d\u52a1\uff08<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>\uff09\u4ece\u8fdc\u7a0b\u83b7\u53d6\u5230\u5e94\u7528\u3001\u7528\u6237\u6570\u636e\u540e\uff0c\u8c03\u7528 <code>setApp()</code>\u3001<code>setUser()</code> \u65b9\u6cd5\u3002</p></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><h3 id="SettingsService">SettingsService<a onclick="window.location.hash = \'SettingsService\'" class="anchor">#</a></h3><table><thead><tr><th>\u540d\u79f0</th><th>\u7c7b\u578b</th><th>\u8fd4\u56de\u503c</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>layout</code></td><td><code>property</code></td><td><code><a data-toc="Layout">Layout</a></code></td><td>\u5e03\u5c40\u4fe1\u606f</td></tr><tr><td><code>app</code></td><td><code>property</code></td><td><code><a data-toc="App">App</a></code></td><td>\u9879\u76ee\u4fe1\u606f</td></tr><tr><td><code>user</code></td><td><code>property</code></td><td><code><a data-toc="User">User</a></code></td><td>\u7528\u6237\u4fe1\u606f</td></tr><tr><td><code>notify</code></td><td><code>property</code></td><td><code>Observable<SettingsNotify></code></td><td>\u53d8\u66f4\u901a\u77e5</td></tr><tr><td><code>setLayout(name: string, value: any)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>\u8bbe\u7f6e\u5e03\u5c40\u5c5e\u6027\u503c</td></tr><tr><td><code>setApp(value: <a data-toc="App">App</a>)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>\u8bbe\u7f6e\u9879\u76ee\u4fe1\u606f</td></tr><tr><td><code>setUser(value: <a data-toc="User">User</a>)</code></td><td><code>method</code></td><td><code>boolean</code></td><td>\u8bbe\u7f6e\u7528\u6237\u4fe1\u606f</td></tr></tbody></table><h3 id="App">App<a onclick="window.location.hash = \'App\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>[name]</code></td><td>\u5e94\u7528\u540d\u79f0</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[description]</code></td><td>\u5e94\u7528\u63cf\u8ff0</td><td><code>string</code></td><td>-</td></tr></tbody></table><h3 id="User">User<a onclick="window.location.hash = \'User\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>[name]</code></td><td>\u5f53\u524d\u7528\u6237\u540d\u79f0</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[avatar]</code></td><td>\u5f53\u524d\u7528\u6237\u5934\u50cf</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[email]</code></td><td>\u5f53\u524d\u7528\u6237\u90ae\u7bb1</td><td><code>string</code></td><td>-</td></tr></tbody></table><h3 id="Layout">Layout<a onclick="window.location.hash = \'Layout\'" class="anchor">#</a></h3><table><thead><tr><th>\u53c2\u6570</th><th>\u8bf4\u660e</th><th>\u7c7b\u578b</th><th>\u9ed8\u8ba4\u503c</th></tr></thead><tbody><tr><td><code>[collapsed]</code></td><td>\u662f\u5426\u6298\u53e0\u83dc\u5355</td><td><code>boolean</code></td><td>-</td></tr><tr><td><code>[lang]</code></td><td>\u5f53\u524d\u8bed\u8a00</td><td><code>string</code></td><td>-</td></tr><tr><td><code>[colorWeak]</code></td><td>\u8272\u5f31\u6a21\u5f0f</td><td><code>boolean</code></td><td><code>false</code></td></tr></tbody></table>',meta:{order:1,title:"SettingsService",subtitle:"\u9879\u76ee\u914d\u7f6e\u9879\u670d\u52a1",type:"Service"},toc:[{id:"API",title:"API",h:2},{id:"SettingsService",title:"SettingsService",h:3},{id:"App",title:"App",h:3},{id:"User",title:"User",h:3},{id:"Layout",title:"Layout",h:3}]}},demo:!1},this.codes=[]},C=function t(){_classCallCheck(this,t),this.item={cols:1,urls:{"en-US":"packages/theme/src/services/title/index.en-US.md","zh-CN":"packages/theme/src/services/title/index.zh-CN.md"},content:{"en-US":{content:'<section class="markdown"><p>Used to set page title, generally listen for route changed and refresh title, for example: <a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/app.component.ts#L54" data-url="https:/ng-alain/ng-alain/blob/master/src/app/app.component.ts#L54">app.component.ts</a>; The default data from <code>MenuService</code>.</p><p><strong>Suggest:</strong> Set the <code>prefix</code> or <code>suffix</code> value via Angular startup service (<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>).</p><h2 id="Orders">Orders<a onclick="window.location.hash = \'Orders\'" class="anchor">#</a></h2><p>Get the <code>title</code> value according to the following order:</p><ol><li><p>Routing configuration `{ data: { title: \'page name\', titleI18n: \'page-name\' } }</p></li><li><p>Parse the menu data based on the current URL</p></li><li><p>Get <code>h1</code> content in page <code>alain-default__content-title</code> or <code>page-header__title</code></p></li><li><p>Default title</p></li></ol></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>property</code></td><td>Default title of document title</td></tr><tr><td><code>separator</code></td><td><code>property</code></td><td>Separator</td></tr><tr><td><code>prefix</code></td><td><code>property</code></td><td>Prefix of document title</td></tr><tr><td><code>suffix</code></td><td><code>property</code></td><td>Suffix of document title</td></tr><tr><td><code>reverse</code></td><td><code>property</code></td><td>Whether to reverse</td></tr><tr><td><code>setTitle(title?: string | string[])</code></td><td><code>method</code></td><td>Set the document title, will be delay <code>25ms</code>, pls refer to <a target="_blank" href="https:/ng-alain/ng-alain/issues/1261" data-url="https:/ng-alain/ng-alain/issues/1261">#1261</a></td></tr><tr><td><code>setTitleByI18n(key: string, params?: Object)</code></td><td><code>method</code></td><td>Set i18n key of the document title</td></tr></tbody></table>',meta:{order:4,title:"TitleService",subtitle:"Title Service",type:"Service"},toc:[{id:"Orders",title:"Orders",h:2},{id:"API",title:"API",h:2}]},"zh-CN":{content:'<section class="markdown"><p>\u7528\u4e8e\u8bbe\u7f6e\u9875\u9762\u6807\u9898\uff0c\u4e00\u822c\u76d1\u542c\u8def\u7531\u53d8\u5316\u5e76\u91cd\u65b0\u5237\u65b0\u6807\u9898\uff0c\u4f8b\u5982\uff1a<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/app.component.ts#L54" data-url="https:/ng-alain/ng-alain/blob/master/src/app/app.component.ts#L54">app.component.ts</a>\uff1b\u540c\u65f6\u6807\u9898\u7684\u9ed8\u8ba4\u6570\u636e\u6765\u6e90\u4e8e <code>MenuService</code>\u3002</p><p><strong>\u5efa\u8bae\uff1a</strong> \u5728 Angular \u542f\u52a8\u670d\u52a1\uff08<a target="_blank" href="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts" data-url="https:/ng-alain/ng-alain/blob/master/src/app/core/startup/startup.service.ts">startup.service.ts</a>\uff09\u8fc7\u7a0b\u4e2d\u8bbe\u7f6e <code>prefix</code> \u6216 <code>suffix</code> \u503c\u6765\u8c03\u6574\u7edf\u4e00\u7684\u6807\u9898\u524d\u540e\u7f00\u3002</p><h2 id="\u83b7\u53d6\u987a\u5e8f">\u83b7\u53d6\u987a\u5e8f<a onclick="window.location.hash = \'\u83b7\u53d6\u987a\u5e8f\'" class="anchor">#</a></h2><p>\u6839\u636e\u4ee5\u4e0b\u987a\u5e8f\u83b7\u53d6 <code>title</code> \u503c\uff1a</p><ol><li><p>\u8def\u7531\u914d\u7f6e <code>{ data: { title: \'page name\', titleI18n: \'page-name\' } }</code></p></li><li><p>\u6839\u636e\u5f53\u524d URL \u89e3\u6790\u83dc\u5355\u6570\u636e</p></li><li><p>\u9875\u9762 <code>alain-default__content-title</code> \u6216 <code>page-header__title</code> \u4e2d\u83b7\u53d6 <code>h1</code> \u5185\u5bb9</p></li><li><p>\u9ed8\u8ba4\u6807\u9898\u540d</p></li></ol></section>',api:'<h2 id="API">API<a onclick="window.location.hash = \'API\'" class="anchor">#</a></h2><table><thead><tr><th>\u540d\u79f0</th><th>\u7c7b\u578b</th><th>\u63cf\u8ff0</th></tr></thead><tbody><tr><td><code>default</code></td><td><code>property</code></td><td>\u8bbe\u7f6e\u9ed8\u8ba4\u6807\u9898\u540d</td></tr><tr><td><code>separator</code></td><td><code>property</code></td><td>\u8bbe\u7f6e\u5206\u9694\u7b26</td></tr><tr><td><code>prefix</code></td><td><code>property</code></td><td>\u8bbe\u7f6e\u524d\u7f00</td></tr><tr><td><code>suffix</code></td><td><code>property</code></td><td>\u8bbe\u7f6e\u540e\u7f00</td></tr><tr><td><code>reverse</code></td><td><code>property</code></td><td>\u8bbe\u7f6e\u662f\u5426\u53cd\u8f6c</td></tr><tr><td><code>setTitle(title?: string | string[])</code></td><td><code>method</code></td><td>\u8bbe\u7f6e\u6807\u9898\uff0c\u53d7\u9650\u4e8e <a target="_blank" href="https:/ng-alain/ng-alain/issues/1261" data-url="https:/ng-alain/ng-alain/issues/1261">#1261</a> \u4f1a\u6709 <code>25ms</code> \u7684\u5ef6\u8fdf</td></tr><tr><td><code>setTitleByI18n(key: string, params?: Object)</code></td><td><code>method</code></td><td>\u8bbe\u7f6e\u56fd\u9645\u5316\u6807\u9898</td></tr></tbody></table>',meta:{order:4,title:"TitleService",subtitle:"\u9875\u9762\u6807\u9898\u670d\u52a1",type:"Service"},toc:[{id:"\u83b7\u53d6\u987a\u5e8f",title:"\u83b7\u53d6\u987a\u5e8f",h:2},{id:"API",title:"API",h:2}]}},demo:!1},this.codes=[]},T=function t(){_classCallCheck(this,t)},A=d("pMnS"),P=d("EdU/"),O=d("/Yna"),G=d("JRKe"),M=d("Ed4d"),_=d("8WaK"),N=d("QfCi"),D=d("CghO"),U=d("Sq/J"),I=d("GYi0"),j=d("EXx9"),L=d("R6D3"),H=d("WP5L"),E=d("71F0"),R=d("fE+l"),W=d("0RMT"),B=d("QcbP"),F=d("0D9X"),q=d("SpJI"),V=d("hBP+"),Y=d("QPFe"),Z=d("RdGh"),Q=d("D9vs"),K=d("DyZ0"),J=d("TY3c"),X=d("u+Cy"),$=d("8+8K"),tt=d("YVZs"),et=d("F/j7"),dt=d("/EOF"),ot=d("ZKYL"),at=d("SZk1"),ct=d("5eO6"),nt=d("9BMt"),rt=d("kRch"),lt=d("QkPN"),it=d("vBNu"),st=d("Z7t+"),ht=d("II6v"),pt=d("MRB6"),ut=d("uU7u"),bt=d("iInd"),gt=d("cUpR"),mt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ft(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var yt=o.sb("app-theme-getting-started",c,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-getting-started",[],null,null,null,ft,mt)),o.vb(1,49152,null,0,c,[],null,null)],null,null)}),{},{},[]),wt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function kt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var vt=o.sb("app-theme-global",n,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-global",[],null,null,null,kt,wt)),o.vb(1,49152,null,0,n,[],null,null)],null,null)}),{},{},[]),xt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function St(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var zt=o.sb("app-theme-icon",r,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-icon",[],null,null,null,St,xt)),o.vb(1,49152,null,0,r,[],null,null)],null,null)}),{},{},[]),Ct=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Tt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var At=o.sb("app-theme-locale",l,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-locale",[],null,null,null,Tt,Ct)),o.vb(1,49152,null,0,l,[],null,null)],null,null)}),{},{},[]),Pt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ot(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Gt=o.sb("app-theme-performance",i,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-performance",[],null,null,null,Ot,Pt)),o.vb(1,49152,null,0,i,[],null,null)],null,null)}),{},{},[]),Mt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function _t(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Nt=o.sb("app-theme-tools",s,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-tools",[],null,null,null,_t,Mt)),o.vb(1,49152,null,0,s,[],null,null)],null,null)}),{},{},[]),Dt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ut(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var It=o.sb("app-theme-default",h,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-default",[],null,null,null,Ut,Dt)),o.vb(1,49152,null,0,h,[],null,null)],null,null)}),{},{},[]),jt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Lt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Ht=o.sb("app-theme-fullscreen",p,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-fullscreen",[],null,null,null,Lt,jt)),o.vb(1,49152,null,0,p,[],null,null)],null,null)}),{},{},[]),Et=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Rt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Wt=o.sb("app-theme-currency",u,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-currency",[],null,null,null,Rt,Et)),o.vb(1,49152,null,0,u,[],null,null)],null,null)}),{},{},[]),Bt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Ft(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var qt=o.sb("app-theme-date",b,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-date",[],null,null,null,Ft,Bt)),o.vb(1,49152,null,0,b,[],null,null)],null,null)}),{},{},[]),Vt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Yt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Zt=o.sb("app-theme-keys",g,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-keys",[],null,null,null,Yt,Vt)),o.vb(1,49152,null,0,g,[],null,null)],null,null)}),{},{},[]),Qt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Kt(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var Jt=o.sb("app-theme-safe",m,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-safe",[],null,null,null,Kt,Qt)),o.vb(1,49152,null,0,m,[],null,null)],null,null)}),{},{},[]),Xt=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function $t(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var te=o.sb("app-theme-yn",f,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-yn",[],null,null,null,$t,Xt)),o.vb(1,49152,null,0,f,[],null,null)],null,null)}),{},{},[]),ee=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function de(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var oe=o.sb("app-theme-drawer",y,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-drawer",[],null,null,null,de,ee)),o.vb(1,49152,null,0,y,[],null,null)],null,null)}),{},{},[]),ae=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ce(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ne=o.sb("app-theme-http",w,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-http",[],null,null,null,ce,ae)),o.vb(1,49152,null,0,w,[],null,null)],null,null)}),{},{},[]),re=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function le(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ie=o.sb("app-theme-menu",k,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-menu",[],null,null,null,le,re)),o.vb(1,49152,null,0,k,[],null,null)],null,null)}),{},{},[]),se=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function he(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var pe=o.sb("app-theme-modal",v,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-modal",[],null,null,null,he,se)),o.vb(1,49152,null,0,v,[],null,null)],null,null)}),{},{},[]),ue=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function be(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ge=o.sb("app-theme-responsive",x,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-responsive",[],null,null,null,be,ue)),o.vb(1,49152,null,0,x,[],null,null)],null,null)}),{},{},[]),me=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function fe(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ye=o.sb("app-theme-scroll",S,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-scroll",[],null,null,null,fe,me)),o.vb(1,49152,null,0,S,[],null,null)],null,null)}),{},{},[]),we=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function ke(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ve=o.sb("app-theme-settings",z,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-settings",[],null,null,null,ke,we)),o.vb(1,49152,null,0,z,[],null,null)],null,null)}),{},{},[]),xe=o.ub({encapsulation:0,styles:["[_nghost-%COMP%] { display: block }"],data:{}});function Se(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-docs",[],null,null,null,st.b,st.a)),o.vb(1,245760,null,0,ht.a,[pt.a,ut.a,bt.p,gt.b],{codes:[0,"codes"],item:[1,"item"]},null)],(function(t,e){var d=e.component;t(e,1,0,d.codes,d.item)}),null)}var ze=o.sb("app-theme-title",C,(function(t){return o.Sb(0,[(t()(),o.wb(0,0,null,null,1,"app-theme-title",[],null,null,null,Se,xe)),o.vb(1,49152,null,0,C,[],null,null)],null,null)}),{},{},[]),Ce=d("SVse"),Te=d("s7LF"),Ae=d("5VGP"),Pe=d("QQfA"),Oe=d("IP0z"),Ge=d("POq0"),Me=d("sAdM"),_e=d("ekcc"),Ne=d("pQl/"),De=d("g+Fz"),Ue=d("Ybye"),Ie=d("NFMk"),je=d("10Ig"),Le=d("iC8E"),He=d("/HVE"),Ee=d("v1Dh"),Re=d("66zS"),We=d("5Izy"),Be=d("yTpB"),Fe=d("zMNK"),qe=d("hOhj"),Ve=d("r19J"),Ye=d("anqq"),Ze=d("IYs4"),Qe=d("EcpC"),Ke=d("GaVp"),Je=d("/L1H"),Xe=d("phDe"),$e=d("rJp6"),td=d("Rgb0"),ed=d("kS4m"),dd=d("mW00"),od=d("jTf7"),ad=d("WPSl"),cd=d("YdS3"),nd=d("wQFA"),rd=d("px0D"),ld=d("3ZFI"),id=d("CYS+"),sd=d("oBm0"),hd=d("A7zk"),pd=d("YRt3"),ud=d("lAiz"),bd=d("ce6n"),gd=d("SBNi"),md=d("7QIX"),fd=d("tYkK"),yd=d("wf2+"),wd=d("eCGT"),kd=d("nHXS"),vd=d("fb/r"),xd=d("zTFG"),Sd=d("JK0T"),zd=d("JXeA"),Cd=d("0CZq"),Td=d("qU0y"),Ad=d("vZsH"),Pd=d("W4B1"),Od=d("SHEi"),Gd=d("FPpa"),Md=d("RVNi"),_d=d("NDed"),Nd=d("5A4h"),Dd=d("N2O2"),Ud=d("ozKM"),Id=d("OvZZ"),jd=d("z+yo"),Ld=d("DQmg"),Hd=d("haRT"),Ed=d("1+nf"),Rd=d("XFzh"),Wd=d("p+Sl"),Bd=d("HhpN"),Fd=d("SN7N"),qd=d("fwnu"),Vd=d("VbP7"),Yd=d("gaRz"),Zd=d("e15G"),Qd=d("+YBk"),Kd=d("9J0+"),Jd=d("vIiB"),Xd=d("CGSU"),$d=d("5CFV"),to=d("GTZx"),eo=d("hS58"),oo=d("+ndR"),ao=d("EWQH"),co=d("aq9g"),no=d("7Dpl"),ro=d("ekmu"),lo=d("vjj7"),io=d("l/Xz"),so=d("sRo1"),ho=d("BQzg"),po=d("YQXl"),uo=d("dZIx"),bo=d("9bzR"),go=d("WNQ9"),mo=d("5Oon"),fo=d("lM9c"),yo=d("OSVY"),wo=d("MNSj"),ko=d("MZBU"),vo=d("ev4S"),xo=d("G1y0"),So=d("5sGc"),zo=d("4/RT"),Co=d("Q1qs"),To=d("k5cy"),Ao=d("ceoF"),Po=d("gQlp"),Oo=d("XYAa"),Go=d("vrge"),Mo=d("nMAq"),_o=d("5PV9"),No=d("nIn3"),Do=d("xo13"),Uo=d("CnVV"),Io=d("5p8d"),jo=d("qYUw"),Lo=d("JpOc"),Ho=d("VRoF"),Eo=d("Uto7"),Ro=d("/p+U"),Wo=d("ye40"),Bo=d("qcxY"),Fo=d("T+Em"),qo=d("ucmY"),Vo=d("sbFH"),Yo=d("76lH"),Zo=d("TSSN"),Qo=d("Fg/6"),Ko=d("kzz5"),Jo=d("SqF5"),Xo=d("Wl7g"),$o=d("+TYD"),ta=d("PCNd");d.d(e,"ThemeModuleNgFactory",(function(){return ea}));var ea=o.tb(T,[],(function(t){return o.Fb([o.Gb(512,o.j,o.db,[[8,[A.a,P.a,P.b,O.a,G.a,M.a,_.a,N.a,D.a,U.a,I.a,j.a,L.a,H.a,E.a,R.a,W.a,B.a,F.a,q.a,V.a,Y.a,Z.a,Q.a,K.a,J.a,X.a,$.a,tt.a,et.a,dt.a,ot.a,at.a,ct.a,nt.a,rt.a,lt.a,it.a,yt,vt,zt,At,Gt,Nt,It,Ht,Wt,qt,Zt,Jt,te,oe,ne,ie,pe,ge,ye,ve,ze]],[3,o.j],o.w]),o.Gb(4608,Ce.p,Ce.o,[o.t,[2,Ce.K]]),o.Gb(4608,Te.x,Te.x,[]),o.Gb(4608,Te.e,Te.e,[]),o.Gb(5120,Ae.z,Ae.M,[Ce.e,[3,Ae.z]]),o.Gb(4608,Pe.d,Pe.d,[Pe.k,Pe.f,o.j,Pe.i,Pe.g,o.q,o.y,Ce.e,Oe.b,[2,Ce.j]]),o.Gb(5120,Pe.l,Pe.m,[Pe.d]),o.Gb(4608,Ge.c,Ge.c,[]),o.Gb(5120,Me.b,Me.a,[[3,Me.b],_e.a]),o.Gb(4608,Ne.d,Ne.d,[o.y]),o.Gb(4608,De.d,De.d,[Ce.e]),o.Gb(4608,Ue.a,Ue.a,[Ie.g]),o.Gb(4608,je.a,je.a,[Le.d]),o.Gb(1073742336,Ce.c,Ce.c,[]),o.Gb(1073742336,Te.w,Te.w,[]),o.Gb(1073742336,Te.j,Te.j,[]),o.Gb(1073742336,bt.t,bt.t,[[2,bt.y],[2,bt.p]]),o.Gb(1073742336,Te.t,Te.t,[]),o.Gb(1073742336,He.b,He.b,[]),o.Gb(1073742336,Ee.b,Ee.b,[]),o.Gb(1073742336,Re.b,Re.b,[]),o.Gb(1073742336,Ae.j,Ae.j,[]),o.Gb(1073742336,We.b,We.b,[]),o.Gb(1073742336,Be.a,Be.a,[]),o.Gb(1073742336,Oe.a,Oe.a,[]),o.Gb(1073742336,Fe.e,Fe.e,[]),o.Gb(1073742336,qe.g,qe.g,[]),o.Gb(1073742336,Pe.h,Pe.h,[]),o.Gb(1073742336,Ae.w,Ae.w,[]),o.Gb(1073742336,Ve.b,Ve.b,[]),o.Gb(1073742336,Ye.b,Ye.b,[]),o.Gb(1073742336,Ze.b,Ze.b,[]),o.Gb(1073742336,Ge.d,Ge.d,[]),o.Gb(1073742336,Qe.b,Qe.b,[]),o.Gb(1073742336,Ae.J,Ae.J,[]),o.Gb(1073742336,Ke.c,Ke.c,[]),o.Gb(1073742336,Ae.x,Ae.x,[]),o.Gb(1073742336,Je.e,Je.e,[]),o.Gb(1073742336,Xe.i,Xe.i,[]),o.Gb(1073742336,Xe.a,Xe.a,[]),o.Gb(1073742336,Xe.f,Xe.f,[]),o.Gb(1073742336,$e.c,$e.c,[]),o.Gb(1073742336,td.b,td.b,[]),o.Gb(1073742336,ed.d,ed.d,[]),o.Gb(1073742336,dd.c,dd.c,[]),o.Gb(1073742336,od.h,od.h,[]),o.Gb(1073742336,ad.f,ad.f,[]),o.Gb(1073742336,cd.d,cd.d,[]),o.Gb(1073742336,nd.d,nd.d,[]),o.Gb(1073742336,Ae.s,Ae.s,[]),o.Gb(1073742336,rd.d,rd.d,[]),o.Gb(1073742336,ld.b,ld.b,[]),o.Gb(1073742336,id.c,id.c,[]),o.Gb(1073742336,sd.a,sd.a,[]),o.Gb(1073742336,hd.a,hd.a,[]),o.Gb(1073742336,pd.b,pd.b,[]),o.Gb(1073742336,ud.g,ud.g,[]),o.Gb(1073742336,ud.b,ud.b,[]),o.Gb(1073742336,bd.a,bd.a,[]),o.Gb(1073742336,gd.b,gd.b,[]),o.Gb(1073742336,Le.e,Le.e,[]),o.Gb(1073742336,Le.b,Le.b,[]),o.Gb(1073742336,md.b,md.b,[]),o.Gb(1073742336,fd.b,fd.b,[]),o.Gb(1073742336,yd.g,yd.g,[]),o.Gb(1073742336,wd.b,wd.b,[]),o.Gb(1073742336,kd.a,kd.a,[]),o.Gb(1073742336,vd.b,vd.b,[]),o.Gb(1073742336,xd.d,xd.d,[]),o.Gb(1073742336,Sd.b,Sd.b,[]),o.Gb(1073742336,zd.h,zd.h,[]),o.Gb(1073742336,zd.f,zd.f,[]),o.Gb(1073742336,Ae.y,Ae.y,[]),o.Gb(1073742336,Ie.h,Ie.h,[]),o.Gb(1073742336,Ie.d,Ie.d,[]),o.Gb(1073742336,Ie.e,Ie.e,[]),o.Gb(1073742336,Cd.f,Cd.f,[]),o.Gb(1073742336,Cd.e,Cd.e,[]),o.Gb(1073742336,Td.a,Td.a,[]),o.Gb(1073742336,Ad.b,Ad.b,[]),o.Gb(1073742336,Pd.b,Pd.b,[]),o.Gb(1073742336,Od.c,Od.c,[]),o.Gb(1073742336,Gd.c,Gd.c,[]),o.Gb(1073742336,Md.b,Md.b,[]),o.Gb(1073742336,_d.c,_d.c,[]),o.Gb(1073742336,Nd.a,Nd.a,[]),o.Gb(1073742336,Dd.b,Dd.b,[]),o.Gb(1073742336,Ud.d,Ud.d,[]),o.Gb(1073742336,Id.a,Id.a,[]),o.Gb(1073742336,jd.c,jd.c,[]),o.Gb(1073742336,Ld.b,Ld.b,[]),o.Gb(1073742336,Hd.b,Hd.b,[]),o.Gb(1073742336,Ed.f,Ed.f,[]),o.Gb(1073742336,Rd.b,Rd.b,[]),o.Gb(1073742336,Wd.a,Wd.a,[]),o.Gb(1073742336,Ae.D,Ae.D,[]),o.Gb(1073742336,Bd.c,Bd.c,[]),o.Gb(1073742336,Fd.b,Fd.b,[]),o.Gb(1073742336,qd.b,qd.b,[]),o.Gb(1073742336,Ae.o,Ae.o,[]),o.Gb(1073742336,Vd.a,Vd.a,[]),o.Gb(1073742336,Yd.d,Yd.d,[]),o.Gb(1073742336,Zd.a,Zd.a,[]),o.Gb(1073742336,Qd.a,Qd.a,[]),o.Gb(1073742336,Kd.a,Kd.a,[Re.c]),o.Gb(1073742336,Jd.a,Jd.a,[]),o.Gb(1073742336,Xd.a,Xd.a,[]),o.Gb(1073742336,$d.a,$d.a,[]),o.Gb(1073742336,to.a,to.a,[]),o.Gb(1073742336,eo.a,eo.a,[]),o.Gb(1073742336,oo.a,oo.a,[]),o.Gb(1073742336,ao.a,ao.a,[]),o.Gb(1073742336,co.a,co.a,[]),o.Gb(1073742336,no.a,no.a,[]),o.Gb(1073742336,ro.a,ro.a,[]),o.Gb(1073742336,lo.a,lo.a,[]),o.Gb(1073742336,io.a,io.a,[]),o.Gb(1073742336,so.a,so.a,[]),o.Gb(1073742336,ho.a,ho.a,[]),o.Gb(1073742336,Ne.c,Ne.c,[]),o.Gb(1073742336,po.a,po.a,[]),o.Gb(1073742336,uo.a,uo.a,[]),o.Gb(1073742336,bo.a,bo.a,[]),o.Gb(1073742336,go.a,go.a,[]),o.Gb(1073742336,mo.a,mo.a,[]),o.Gb(1073742336,fo.a,fo.a,[]),o.Gb(1073742336,yo.a,yo.a,[]),o.Gb(1073742336,wo.a,wo.a,[]),o.Gb(1073742336,ko.a,ko.a,[]),o.Gb(1073742336,vo.a,vo.a,[]),o.Gb(1073742336,xo.a,xo.a,[]),o.Gb(1073742336,So.a,So.a,[]),o.Gb(1073742336,zo.a,zo.a,[]),o.Gb(1073742336,Co.a,Co.a,[]),o.Gb(1073742336,To.a,To.a,[]),o.Gb(1073742336,Ao.a,Ao.a,[]),o.Gb(1073742336,Po.a,Po.a,[]),o.Gb(1073742336,Oo.a,Oo.a,[]),o.Gb(1073742336,Go.a,Go.a,[]),o.Gb(1073742336,Mo.a,Mo.a,[]),o.Gb(1073742336,_o.a,_o.a,[]),o.Gb(1073742336,No.a,No.a,[]),o.Gb(1073742336,Do.a,Do.a,[]),o.Gb(1073742336,Uo.a,Uo.a,[]),o.Gb(1073742336,Io.a,Io.a,[]),o.Gb(1073742336,jo.a,jo.a,[]),o.Gb(1073742336,Lo.a,Lo.a,[]),o.Gb(1073742336,Ho.a,Ho.a,[]),o.Gb(1073742336,Eo.a,Eo.a,[]),o.Gb(1073742336,Ro.a,Ro.a,[]),o.Gb(1073742336,Wo.a,Wo.a,[]),o.Gb(1073742336,Bo.a,Bo.a,[]),o.Gb(1073742336,Fo.a,Fo.a,[]),o.Gb(1073742336,qo.a,qo.a,[]),o.Gb(1073742336,Vo.a,Vo.a,[]),o.Gb(1073742336,Yo.a,Yo.a,[]),o.Gb(1073742336,Zo.h,Zo.h,[]),o.Gb(1073742336,Qo.b,Qo.b,[]),o.Gb(1073742336,Ko.a,Ko.a,[]),o.Gb(1073742336,De.c,De.c,[]),o.Gb(1073742336,Jo.c,Jo.c,[]),o.Gb(1073742336,Xo.d,Xo.d,[]),o.Gb(1073742336,Xo.h,Xo.h,[]),o.Gb(1073742336,Xo.b,Xo.b,[]),o.Gb(1073742336,Xo.j,Xo.j,[]),o.Gb(1073742336,Xo.l,Xo.l,[]),o.Gb(1073742336,Xo.p,Xo.p,[]),o.Gb(1073742336,Xo.t,Xo.t,[]),o.Gb(1073742336,$o.a,$o.a,[]),o.Gb(1073742336,ta.a,ta.a,[]),o.Gb(1073742336,T,T,[]),o.Gb(256,zd.b,{nzAnimate:!0,nzDuration:3e3,nzMaxStack:7,nzPauseOnHover:!0,nzTop:24},[]),o.Gb(256,Cd.b,{nzTop:"24px",nzBottom:"24px",nzPlacement:"topRight",nzDuration:4500,nzMaxStack:7,nzPauseOnHover:!0,nzAnimate:!0},[]),o.Gb(256,_e.a,Qd.b,[]),o.Gb(1024,bt.n,(function(){return[[{path:"",component:a.a,children:[{path:"",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started/:lang",component:c},{path:"global",redirectTo:"global/zh",pathMatch:"full"},{path:"global/:lang",component:n},{path:"icon",redirectTo:"icon/zh",pathMatch:"full"},{path:"icon/:lang",component:r},{path:"locale",redirectTo:"locale/zh",pathMatch:"full"},{path:"locale/:lang",component:l},{path:"performance",redirectTo:"performance/zh",pathMatch:"full"},{path:"performance/:lang",component:i},{path:"tools",redirectTo:"tools/zh",pathMatch:"full"},{path:"tools/:lang",component:s},{path:"default",redirectTo:"default/zh",pathMatch:"full"},{path:"default/:lang",component:h},{path:"fullscreen",redirectTo:"fullscreen/zh",pathMatch:"full"},{path:"fullscreen/:lang",component:p},{path:"currency",redirectTo:"currency/zh",pathMatch:"full"},{path:"currency/:lang",component:u},{path:"date",redirectTo:"date/zh",pathMatch:"full"},{path:"date/:lang",component:b},{path:"keys",redirectTo:"keys/zh",pathMatch:"full"},{path:"keys/:lang",component:g},{path:"safe",redirectTo:"safe/zh",pathMatch:"full"},{path:"safe/:lang",component:m},{path:"yn",redirectTo:"yn/zh",pathMatch:"full"},{path:"yn/:lang",component:f},{path:"drawer",redirectTo:"drawer/zh",pathMatch:"full"},{path:"drawer/:lang",component:y},{path:"http",redirectTo:"http/zh",pathMatch:"full"},{path:"http/:lang",component:w},{path:"menu",redirectTo:"menu/zh",pathMatch:"full"},{path:"menu/:lang",component:k},{path:"modal",redirectTo:"modal/zh",pathMatch:"full"},{path:"modal/:lang",component:v},{path:"responsive",redirectTo:"responsive/zh",pathMatch:"full"},{path:"responsive/:lang",component:x},{path:"scroll",redirectTo:"scroll/zh",pathMatch:"full"},{path:"scroll/:lang",component:S},{path:"settings",redirectTo:"settings/zh",pathMatch:"full"},{path:"settings/:lang",component:z},{path:"title",redirectTo:"title/zh",pathMatch:"full"},{path:"title/:lang",component:C}]}]]}),[])])}))}}]);