3807-4aeb7e5b8a1ddf9bc86b.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3807],{13807:(n,a,t)=>{"use strict";t.r(a),t.d(a,{default:()=>h});var s=t(73450),e=t(27378),o=t(57318),p=t(24246);function c(n,a){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(n);a&&(s=s.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),t.push.apply(t,s)}return t}function r(n){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?c(Object(t),!0).forEach((function(a){(0,s.Z)(n,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(t,a))}))}return n}function l(n){return(0,p.jsx)(n.tag,r(r({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function i(n){return(0,p.jsx)(l,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function d(n){return(0,p.jsx)(l,{tag:"style",html:n.style})}function u(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),u(n.parentNode,a);return a}class h extends e.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,o.l)(document.documentElement,0,u(a,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(d,{style:""}),e.createElement(i,{html:'<h2 class="anchor-heading"><a href="#zu-jian-wen-dang-ru-he-bian-xie">¶</a><a href="javascript:void(0)" id="zu-jian-wen-dang-ru-he-bian-xie" class="anchor-point"></a>组件文档如何编写</h2>\n<h4 class="anchor-heading"><a href="#wen-jian-ge-shi">¶</a><a href="javascript:void(0)" id="wen-jian-ge-shi" class="anchor-point"></a>文件格式</h4>\n<p>组件文档采用 Markdown 格式。</p>\n<p>不过为了支持示例和国际化，有些东西你需要注意一下。</p>\n<p>请往下看。</p>\n<h4 class="anchor-heading"><a href="#wen-dang-nei-de-biao-ti-gui-fan">¶</a><a href="javascript:void(0)" id="wen-dang-nei-de-biao-ti-gui-fan" class="anchor-point"></a>文档内的标题规范</h4>\n<p>文档标题从 <code>h2</code>（即 <code>##</code> 标题 ）开始，每往下一级多加一个 <code>#</code> 号；一般到 <code>h3</code> (两级标题) 或<code>h4</code> (三级标题)即可，不要出现过多的标题层级。</p>\n<h4 class="anchor-heading"><a href="#zu-jian-miao-shu">¶</a><a href="javascript:void(0)" id="zu-jian-miao-shu" class="anchor-point"></a>组件描述</h4>\n<p>大标题下面是对组件的一句话简要描述。</p>\n<h4 class="anchor-heading"><a href="#shi-yong-zhi-nan-ke-xuan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan-ke-xuan" class="anchor-point"></a>使用指南（可选）</h4>\n<p>如果组件需要使用指南，放在组件描述下方，另起一个二级标题(<code>h3</code>)。</p>\n<h4 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h4>\n<p>代码示例都写在 <code>demos</code> 子目录下，一个文件对应一个示例。</p>\n<p>示例最终会被 loader 插入到文档中。</p>\n<pre><code class="language-text"><span class="token operator">--</span><span class="token operator">-</span>\n<span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token number">1</span>                          <span class="token comment">// `order` 定义示例的顺序，从小到大。</span>\nzh<span class="token operator">-</span><span class="token constant">CN</span><span class="token operator">:</span>                            <span class="token comment">// 中文字符串定义</span>\n  <span class="token literal-property property">title</span><span class="token operator">:</span> 基础用法                  <span class="token comment">// 必填，示例介绍</span>\n  <span class="token literal-property property">content</span><span class="token operator">:</span> 公告内容                <span class="token comment">// `content` 在中文文档中会被替换为 `公告内容`</span>\nen<span class="token operator">-</span><span class="token constant">US</span><span class="token operator">:</span>                            <span class="token comment">// 英文字符串定义</span>\n  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token maybe-class-name">Basic</span>                    <span class="token comment">// 必填，英文介绍</span>\n  <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token maybe-class-name">Alert</span> content          <span class="token comment">// `content` 在英文文档中会被替换为 `Alert content`</span>\n<span class="token operator">--</span><span class="token operator">-</span>\n\n<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">jsx\nimport { Alert } from \'zent\';\nReactDOM.render(                  // ReactDOM.render 是入口，必须这么写\n  &#x3C;Alert>{i18n.content}&#x3C;/Alert>   // 要渲染的东西\n  , mountNode                     // </span><span class="token template-punctuation string">`</span></span>mountNode<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> 直接用就可以\n);\n</span><span class="token template-punctuation string">`</span></span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>\n\n<span class="token comment">// precss 语法</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span><span class="token punctuation">></span></span>\n  <span class="token punctuation">.</span><span class="token property-access">zent</span><span class="token operator">-</span>badge <span class="token punctuation">{</span>\n    <span class="token punctuation">.</span><span class="token property-access">nested</span> <span class="token punctuation">{</span>\n      <span class="token literal-property property">background</span><span class="token operator">:</span> red<span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span><span class="token punctuation">></span></span></code></pre>\n<p>每个示例由三部分组成：</p>\n<ul>\n<li>\n<p>YAML 配置</p>\n<ul>\n<li><code>order</code> 和 <code>title</code> 是必填的</li>\n</ul>\n</li>\n<li>\n<p>JavaScript 代码</p>\n<ul>\n<li>字符串请用 <code>i18n.varName</code> 替代，并在 YAML 中配置 <code>varName</code> 的值</li>\n</ul>\n</li>\n<li>\n<p>样式(可选)</p>\n<ul>\n<li>基本用不到</li>\n</ul>\n</li>\n</ul>\n<p>代码演示的几个书写原则：</p>\n<ul>\n<li>从简单用法开始介绍，不要上来就同时使用一大堆 API，会让人觉得难以上手</li>\n<li>正交性原则，一个示例只演示一个（或者一类）API 的使用方法，如无特殊需求不要在一个示例中同时演示多个 API 混合使用</li>\n</ul>\n<h4 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h4>\n<p>组件的 API 说明，请以表格的形式书写，表格包含以下列：</p>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必须</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>visible</td>\n<td>是否可见</td>\n<td>bool</td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code>\n \n|\n \n<code>false</code></td>\n</tr>\n</tbody>\n</table>'}))}}}}]);