-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path37-bc4eac5649ec72ccd951.js
1 lines (1 loc) · 44 KB
/
37-bc4eac5649ec72ccd951.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{626:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return H});var t=s(23),p=s.n(t),e=s(24),o=s.n(e),c=s(25),l=s.n(c),u=s(26),k=s.n(u),i=s(32),r=s.n(i),d=s(27),g=s.n(d),m=s(28),h=s.n(m),y=s(580),B=s.n(y),v=s(585),E=s.n(v),f=s(0),b=s.n(f),w=s(111),z=s(82),D=function(){return b.a.createElement(z.i,null,"按钮")},N=function(){return b.a.createElement("div",null,b.a.createElement("div",null,b.a.createElement(z.i,{type:"primary"},"实心按钮"),b.a.createElement(z.i,{type:"danger"},"实心按钮"),b.a.createElement(z.i,{type:"success"},"实心按钮"),b.a.createElement(z.i,{type:"warning"},"实心按钮")),b.a.createElement("div",{style:{marginTop:10}},b.a.createElement(z.i,{type:"primary",outline:!0},"描边按钮"),b.a.createElement(z.i,{type:"danger",outline:!0},"描边按钮"),b.a.createElement(z.i,{type:"success",outline:!0},"描边按钮"),b.a.createElement(z.i,{type:"warning",outline:!0},"描边按钮"),b.a.createElement(z.i,null,"普通按钮")))},_=function(){return b.a.createElement("div",null,b.a.createElement("div",null,b.a.createElement(z.i,{loading:!0,type:"primary"},"实心按钮"),b.a.createElement(z.i,{loading:!0,type:"danger"},"实心按钮"),b.a.createElement(z.i,{loading:!0,type:"success"},"实心按钮"),b.a.createElement(z.i,{loading:!0,type:"warning"},"实心按钮")),b.a.createElement("div",{style:{marginTop:10}},b.a.createElement(z.i,{loading:!0,type:"primary",outline:!0},"描边按钮"),b.a.createElement(z.i,{loading:!0,type:"danger",outline:!0},"描边按钮"),b.a.createElement(z.i,{loading:!0,type:"success",outline:!0},"描边按钮"),b.a.createElement(z.i,{loading:!0,type:"warning",outline:!0},"描边按钮"),b.a.createElement(z.i,{loading:!0},"普通按钮")))},j=function(){return b.a.createElement(z.i,{disabled:!0},"不可用的按钮")},M=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{size:"large"},"大号按钮"),b.a.createElement(z.i,null,"正常按钮"),b.a.createElement(z.i,{size:"small"},"小号按钮"))},O=function(){return b.a.createElement(z.i,{bordered:!1,type:"primary"},"无边框")},R=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{href:"https://youzan.com"},"有赞首页"),b.a.createElement(z.i,{href:"https://youzan.com",target:"_blank"},"新窗口打开"))},G=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{icon:"search"},"搜索"),b.a.createElement(z.i,null,b.a.createElement(z.O,{type:"check"}),"保存"),b.a.createElement(z.i,null,"下一步",b.a.createElement(z.O,{type:"right"})))},L=function(){return b.a.createElement("div",null,b.a.createElement(z.j,null,b.a.createElement(z.i,null,"加粗"),b.a.createElement(z.i,null,"斜体"),b.a.createElement(z.i,null,"下划线")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(z.j,null,b.a.createElement(z.i,null,"左对齐"),b.a.createElement(z.i,null,"居中"),b.a.createElement(z.i,null,"右对齐")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(z.j,null,b.a.createElement(z.i,{disabled:!0},"左对齐"),b.a.createElement(z.i,{disabled:!0},"居中"),b.a.createElement(z.i,{disabled:!0},"右对齐")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(z.j,null,b.a.createElement(z.i,{type:"primary",icon:"share"},"分享"),b.a.createElement(z.i,{type:"primary",icon:"download"},"下载")))},T=function(){return b.a.createElement(z.i.Directive,{type:"primary"},b.a.createElement(function(n){var a=n.path,s=E()(n,["path"]);return b.a.createElement("a",B()({},s,{href:"#".concat(a)}))},{path:"path"},"Link"))};function C(n){return b.a.createElement(n.tag,B()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function I(n){return b.a.createElement(C,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function S(n){return b.a.createElement(C,{tag:"style",html:n.style})}var A=function(n){function a(){var n,s;p()(this,a);for(var t=arguments.length,e=new Array(t),o=0;o<t;o++)e[o]=arguments[o];return s=l()(this,(n=k()(a)).call.apply(n,[this].concat(e))),h()(r()(s),"state",{showCode:!1}),h()(r()(s),"toggle",function(){s.setState({showCode:!s.state.showCode})}),s}return g()(a,n),o()(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return b.a.createElement("div",{className:"zandoc-react-demo"},b.a.createElement("div",{className:"zandoc-react-demo__preview"},p),b.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},b.a.createElement("div",{className:"zandoc-react-demo__title"},b.a.createElement("p",null,s||"")),b.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&b.a.createElement("pre",{className:"zandoc-react-demo__code"},b.a.createElement(C,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(f.Component),H=function(n){function a(){return p()(this,a),l()(this,k()(a).apply(this,arguments))}return g()(a,n),o()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(w.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(S,{style:""}),b.a.createElement(I,{html:'<h2 class="anchor-heading"><a href="#button-an-niu">¶</a><a href="javascript:void(0)" id="button-an-niu" class="anchor-point"></a>Button 按钮</h2>\n<p>按钮, 提供基础样式及基础状态.</p>\n<h3 class="anchor-heading"><a href="#shi-yong-zhi-nan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan" class="anchor-point"></a>使用指南</h3>\n<ul>\n<li>通过 <code>type</code> 来控制按钮的样式</li>\n<li>通过 <code>size</code> 控制按钮的大小</li>\n<li>提供 <code>\'block\'</code>、<code>\'disabled\'</code>、<code>\'loading\'</code> 等修饰状态</li>\n<li>传入 <code>href/target</code>, Button 将渲染为 a 标签, 仍然支持以其他属性控制样式及状态</li>\n<li>使用 directive 模式来自定义渲染组件</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),b.a.createElement(A,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(D)),b.a.createElement(A,{title:"风格",id:"Demostyle",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>实心按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>实心按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>实心按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>实心按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(N)),b.a.createElement(A,{title:"正在加载的状态",id:"Demoloading",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 实心按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 实心按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 实心按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 实心按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>\n 描边按钮\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>普通按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(_)),b.a.createElement(A,{title:"不可用的状态",id:"Demodisabled",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>不可用的按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(j)),b.a.createElement(A,{title:"按钮大小",id:"Demosize",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>大号按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>正常按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>小号按钮<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(M)),b.a.createElement(A,{title:"无边框按钮，一般在背景色比较深的地方使用，使用时要注意和背景色的对比区分。",id:"Demonoborder",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">bordered</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>无边框<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(O)),b.a.createElement(A,{title:"将按钮变成链接, 只需要提供`href`属性，并可以通过`target`属性控制打开方式",id:"Demolink",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://youzan.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>有赞首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://youzan.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n 新窗口打开\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(R)),b.a.createElement(A,{title:"按钮图标",id:"Demoicon",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>check<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>保存<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>下一步<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(G)),b.a.createElement(A,{title:"Button Group",id:"Demogroup",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> ButtonGroup<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>加粗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>斜体<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>下划线<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>左对齐<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>居中<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span><span class="token punctuation">></span></span>右对齐<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>左对齐<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>居中<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>右对齐<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>分享<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>download<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>下载<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ButtonGroup</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(L)),b.a.createElement(A,{title:"Directive",id:"Demodirective",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">RouterLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token punctuation">,</span> <span class="token operator">...</span>props <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token attr-name">href</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>path<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button.Directive</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>RouterLink</span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>RouterLink</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Button.Directive</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(T)),b.a.createElement(I,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#button">¶</a><a href="javascript:void(0)" id="button" class="anchor-point"></a>Button</h4>\n<table class="table">\n<thead>\n<tr>\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>type</td>\n<td>风格</td>\n<td>string</td>\n<td><code>\'default\'</code></td>\n<td><code>\'primary\'</code>\n、\n<code>\'danger\'</code>\n、\n<code>\'success\'</code></td>\n</tr>\n<tr>\n<td>size</td>\n<td>尺寸</td>\n<td>string</td>\n<td><code>\'medium\'</code></td>\n<td><code>\'large\'</code>\n、\n<code>\'small\'</code></td>\n</tr>\n<tr>\n<td>htmlType</td>\n<td>button 标签原生 type 属性</td>\n<td>string</td>\n<td><code>\'button\'</code></td>\n<td><code>submit</code>\n、\n<code>reset</code>\n、\n<code>button</code></td>\n</tr>\n<tr>\n<td>block</td>\n<td>是否以块级元素的形式展开</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>状态控制</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>状态控制</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n</tr>\n<tr>\n<td>outline</td>\n<td>边框有颜色，内部没有颜色</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td></td>\n</tr>\n<tr>\n<td>bordered</td>\n<td>边框透明控制</td>\n<td>bool</td>\n<td><code>true</code></td>\n<td></td>\n</tr>\n<tr>\n<td>其他参数</td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>href</td>\n<td>可选，如果设置的话会用 a 标签而不是 button</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>target</td>\n<td>可选，和 href 一起使用，就是 a 标签的 target 属性</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td><code>\'_blank\'</code></td>\n</tr>\n<tr>\n<td>download</td>\n<td>HTML5 的下载功能</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义类名</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>自定 style</td>\n<td>object</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#buttondirective">¶</a><a href="javascript:void(0)" id="buttondirective" class="anchor-point"></a>ButtonDirective</h4>\n<p>这个组件会将 <code>Button</code> 的样式渲染到自己的 <code>children</code> 上，主要用在需要 <code>Button</code> 的样式，但是需要有特殊逻辑的按钮，例如将一个 <code>react-router</code> 的 <code>Link</code> 渲染成 <code>Button</code> 的样式，但是保留 <code>Link</code> 自身的功能。API 只支持 <code>Button</code> 的样式参数，用法参考 demo。</p>\n<h4 class="anchor-heading"><a href="#buttongroup">¶</a><a href="javascript:void(0)" id="buttongroup" class="anchor-point"></a>ButtonGroup</h4>\n<table class="table">\n<thead>\n<tr>\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>className</td>\n<td>自定义类名</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>自定 style</td>\n<td>object</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>'}))}}]),a}(f.Component)}}]);