(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{607:function(n,a,t){"use strict";t.r(a),t.d(a,"default",function(){return x});var s=t(23),e=t.n(s),o=t(24),c=t.n(o),p=t(25),i=t.n(p),l=t(26),r=t.n(l),d=t(32),u=t.n(d),h=t(27),k=t.n(h),m=t(28),g=t.n(m),f=t(580),v=t.n(f),b=t(0),y=t.n(b),j=t(111);function w(n){return y.a.createElement(n.tag,v()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function A(n){return y.a.createElement(w,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function z(n){return y.a.createElement(w,{tag:"style",html:n.style})}b.Component;var x=function(n){function a(){return e()(this,a),i()(this,r()(a).apply(this,arguments))}return k()(a,n),c()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(j.a)(document.documentElement,0,function n(a,t){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(t+=a.offsetTop),n(a.parentNode,t);return t}(a,-9))}}},{key:"render",value:function(){return y.a.createElement("div",{className:"zandoc-react-container",key:null},y.a.createElement(z,{style:""}),y.a.createElement(A,{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>\norder<span class="token punctuation">:</span> <span class="token number">1</span>                          <span class="token comment">// `order` 定义示例的顺序，从小到大。</span>\nzh<span class="token operator">-</span>CN<span class="token punctuation">:</span>                            <span class="token comment">// 中文字符串定义</span>\n  title<span class="token punctuation">:</span> 基础用法                  <span class="token comment">// 必填，示例介绍</span>\n  content<span class="token punctuation">:</span> 公告内容                <span class="token comment">// `content` 在中文文档中会被替换为 `公告内容`</span>\nen<span class="token operator">-</span>US<span class="token punctuation">:</span>                            <span class="token comment">// 英文字符串定义</span>\n  title<span class="token punctuation">:</span> Basic                    <span class="token comment">// 必填，英文介绍</span>\n  content<span class="token punctuation">:</span> Alert 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 string">``</span></span><span class="token template-string"><span class="token string">`jsx\nimport { Alert } from \'zent\';\nReactDOM.render(                  // ReactDOM.render 是入口，必须这么写\n  &#x3C;Alert>{i18n.content}&#x3C;/Alert>   // 要渲染的东西\n  , mountNode                     // `</span></span>mountNode<span class="token template-string"><span class="token string">` 直接用就可以\n);\n`</span></span><span class="token template-string"><span class="token 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>zent<span class="token operator">-</span>badge <span class="token punctuation">{</span>\n    <span class="token punctuation">.</span>nested <span class="token punctuation">{</span>\n      background<span class="token punctuation">:</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>'}))}}]),a}(b.Component)}}]);