-
Notifications
You must be signed in to change notification settings - Fork 0
/
15-9c128e7e1f8e9241073d.js
1 lines (1 loc) · 7.86 KB
/
15-9c128e7e1f8e9241073d.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{883:function(n,a,t){"use strict";t.r(a),t.d(a,"default",(function(){return C}));var s=t(840),e=t.n(s),o=t(841),p=t.n(o),c=t(521),r=t.n(c),l=t(842),i=t.n(l),u=t(843),d=t.n(u),h=t(844),k=t.n(h),m=t(845),f=t.n(m),g=t(846),v=t.n(g),y=t(0),b=t.n(y),j=t(210);function w(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var t,s=k()(n);if(a){var e=k()(this).constructor;t=Reflect.construct(s,arguments,e)}else t=s.apply(this,arguments);return d()(this,t)}}function A(n){return b.a.createElement(n.tag,v()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function x(n){return b.a.createElement(A,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function z(n){return b.a.createElement(A,{tag:"style",html:n.style})}y.Component;var C=function(n){i()(t,n);var a=w(t);function t(){return e()(this,t),a.apply(this,arguments)}return p()(t,[{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 b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(z,{style:""}),b.a.createElement(x,{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 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 title<span class="token operator">:</span> 基础用法 <span class="token comment">// 必填，示例介绍</span>\n content<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 title<span class="token operator">:</span> <span class="token maybe-class-name">Basic</span> <span class="token comment">// 必填，英文介绍</span>\n content<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 <Alert>{i18n.content}</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"><</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 background<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"><</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>'}))}}]),t}(y.Component)}}]);