-
Notifications
You must be signed in to change notification settings - Fork 0
/
125-a28f22da2d828c0b81f9.js
1 lines (1 loc) · 8.06 KB
/
125-a28f22da2d828c0b81f9.js
1
webpackJsonp([125],{1526:function(n,a,e){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function s(n){return _.default.createElement(n.tag,(0,g.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function o(n){return _.default.createElement(s,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function c(n){return _.default.createElement(s,{tag:"style",html:n.style})}function l(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),l(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var p=e(1),r=t(p),i=e(4),d=t(i),u=e(2),h=t(u),m=e(3),f=t(m),k=e(7),g=t(k),v=e(0),_=t(v),y=e(232),b=t(y),z=(function(n){function a(){var n,e,t,s;(0,r.default)(this,a);for(var o=arguments.length,c=Array(o),l=0;l<o;l++)c[l]=arguments[l];return e=t=(0,h.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(c))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},s=e,(0,h.default)(t,s)}(0,f.default)(a,n),(0,d.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,e=a.title,t=a.src,o=a.children;return _.default.createElement("div",{className:"zandoc-react-demo"},_.default.createElement("div",{className:"zandoc-react-demo__preview"},o),_.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},_.default.createElement("div",{className:"zandoc-react-demo__title"},_.default.createElement("p",null,e||"")),_.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&_.default.createElement("pre",{className:"zandoc-react-demo__code"},_.default.createElement(s,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}])}(v.Component),function(n){function a(){return(0,r.default)(this,a),(0,h.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,f.default)(a,n),(0,d.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,b.default)(document.documentElement,0,l(a,-9))}}},{key:"render",value:function(){return _.default.createElement("div",{className:"zandoc-react-container",key:null},_.default.createElement(c,{style:""}),_.default.createElement(o,{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 <Alert>{i18n.content}</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"><</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"><</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}(v.Component));a.default=z}});