(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{697:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return x});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),i=s.n(u),k=s(32),r=s.n(k),d=s(27),g=s.n(d),m=s(28),h=s.n(m),y=s(580),B=s.n(y),v=s(585),f=s.n(v),E=s(0),b=s.n(E),w=s(111),z=s(82),D=function(){return b.a.createElement(z.i,null,"Button")},O=function(){return b.a.createElement("div",null,b.a.createElement("div",null,b.a.createElement(z.i,{type:"primary"},"Filled"),b.a.createElement(z.i,{type:"danger"},"Filled"),b.a.createElement(z.i,{type:"success"},"Filled"),b.a.createElement(z.i,{type:"warning"},"Filled")),b.a.createElement("div",{style:{marginTop:10}},b.a.createElement(z.i,{type:"primary",outline:!0},"Outline"),b.a.createElement(z.i,{type:"danger",outline:!0},"Outline"),b.a.createElement(z.i,{type:"success",outline:!0},"Outline"),b.a.createElement(z.i,{type:"warning",outline:!0},"Outline"),b.a.createElement(z.i,null,"Normal")))},N=function(){return b.a.createElement("div",null,b.a.createElement("div",null,b.a.createElement(z.i,{loading:!0,type:"primary"},"Filled"),b.a.createElement(z.i,{loading:!0,type:"danger"},"Filled"),b.a.createElement(z.i,{loading:!0,type:"success"},"Filled"),b.a.createElement(z.i,{loading:!0,type:"warning"},"Filled")),b.a.createElement("div",{style:{marginTop:10}},b.a.createElement(z.i,{loading:!0,type:"primary",outline:!0},"Outline"),b.a.createElement(z.i,{loading:!0,type:"danger",outline:!0},"Outline"),b.a.createElement(z.i,{loading:!0,type:"success",outline:!0},"Outline"),b.a.createElement(z.i,{loading:!0,type:"warning",outline:!0},"Outline"),b.a.createElement(z.i,{loading:!0},"Normal")))},_=function(){return b.a.createElement(z.i,{disabled:!0},"Button disabled")},M=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{size:"large"},"Big"),b.a.createElement(z.i,null,"Normal"),b.a.createElement(z.i,{size:"small"},"Small"))},j=function(){return b.a.createElement(z.i,{bordered:!1,type:"primary"},"No border")},R=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{href:"https://youzan.com"},"Index"),b.a.createElement(z.i,{href:"https://youzan.com",target:"_blank"},"Open in a new window"))},F=function(){return b.a.createElement("div",null,b.a.createElement(z.i,{icon:"search"},"Search"),b.a.createElement(z.i,null,b.a.createElement(z.O,{type:"check"}),"Save"),b.a.createElement(z.i,null,"Next step",b.a.createElement(z.O,{type:"right"})))},S=function(){return b.a.createElement("div",null,b.a.createElement(z.j,null,b.a.createElement(z.i,null,"B"),b.a.createElement(z.i,null,"I"),b.a.createElement(z.i,null,"U")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(z.j,null,b.a.createElement(z.i,null,"L"),b.a.createElement(z.i,null,"M"),b.a.createElement(z.i,null,"R")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(z.j,null,b.a.createElement(z.i,{disabled:!0},"L"),b.a.createElement(z.i,{disabled:!0},"M"),b.a.createElement(z.i,{disabled:!0},"R")),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"},"Share"),b.a.createElement(z.i,{type:"primary",icon:"download"},"Download")))},L=function(){return b.a.createElement(z.i.Directive,{type:"primary"},b.a.createElement(function(n){var a=n.path,s=f()(n,["path"]);return b.a.createElement("a",B()({},s,{href:"#".concat(a)}))},{path:"path"},"Link"))};function G(n){return b.a.createElement(n.tag,B()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function I(n){return b.a.createElement(G,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function T(n){return b.a.createElement(G,{tag:"style",html:n.style})}var C=function(n){function a(){var n,s;p()(this,a);for(var t=arguments.length,e=new Array(t),o=0;oButton\n

Button. Basic style and basic status are provided.

\n

Guide

\n\n

Demos

'}),b.a.createElement(C,{title:"Basic Usage",id:"Demobasic",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <Button>Button</Button>\n , mountNode\n);'},b.a.createElement(D)),b.a.createElement(C,{title:"Style",id:"Demostyle",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <div>\n <div>\n <Button type="primary">Filled</Button>\n <Button type="danger">Filled</Button>\n <Button type="success">Filled</Button>\n <Button type="warning">Filled</Button>\n </div>\n <div style={{ marginTop: 10 }}>\n <Button type="primary" outline>\n Outline\n </Button>\n <Button type="danger" outline>\n Outline\n </Button>\n <Button type="success" outline>\n Outline\n </Button>\n <Button type="warning" outline>\n Outline\n </Button>\n <Button>Normal</Button>\n </div>\n </div>,\n mountNode\n);'},b.a.createElement(O)),b.a.createElement(C,{title:"Loading",id:"Demoloading",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <div>\n <div>\n <Button loading type="primary">\n Filled\n </Button>\n <Button loading type="danger">\n Filled\n </Button>\n <Button loading type="success">\n Filled\n </Button>\n <Button loading type="warning">\n Filled\n </Button>\n </div>\n <div style={{ marginTop: 10 }}>\n <Button loading type="primary" outline>\n Outline\n </Button>\n <Button loading type="danger" outline>\n Outline\n </Button>\n <Button loading type="success" outline>\n Outline\n </Button>\n <Button loading type="warning" outline>\n Outline\n </Button>\n <Button loading>Normal</Button>\n </div>\n </div>,\n mountNode\n);'},b.a.createElement(N)),b.a.createElement(C,{title:"Disabled",id:"Demodisabled",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <Button disabled>Button disabled</Button>\n , mountNode\n);'},b.a.createElement(_)),b.a.createElement(C,{title:"Button sizes",id:"Demosize",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <div>\n <Button size="large">Big</Button>\n <Button>Normal</Button>\n <Button size="small">Small</Button>\n </div>\n , mountNode\n);'},b.a.createElement(M)),b.a.createElement(C,{title:"Button without border, generally used in a darker background. Make sure the colors are different between background and button.",id:"Demonoborder",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <Button bordered={false} type="primary">No border</Button>\n , mountNode\n);'},b.a.createElement(j)),b.a.createElement(C,{title:"Only the `href` property is needed to be set to turn a button to a link, and the `target` property specifies where to open.",id:"Demolink",src:'import { Button } from \'zent\';\n\nReactDOM.render(\n <div>\n <Button href="https://youzan.com">Index</Button>\n <Button href="https://youzan.com" target="_blank">\n Open in a new window\n </Button>\n </div>,\n mountNode\n);'},b.a.createElement(R)),b.a.createElement(C,{title:"Button Icon",id:"Demoicon",src:'import { Button, Icon } from \'zent\';\n\nReactDOM.render(\n <div>\n <Button icon="search">Search</Button>\n <Button><Icon type="check" />Save</Button>\n <Button>Next step<Icon type="right" /></Button>\n </div>\n , mountNode\n);'},b.a.createElement(F)),b.a.createElement(C,{title:"Button Groupe",id:"Demogroup",src:'import { ButtonGroup, Button } from \'zent\';\n\nReactDOM.render(\n <div>\n <ButtonGroup>\n <Button>B</Button>\n <Button>I</Button>\n <Button>U</Button>\n </ButtonGroup>\n <br />\n <br />\n <ButtonGroup>\n <Button>L</Button>\n <Button>M</Button>\n <Button>R</Button>\n </ButtonGroup>\n <br />\n <br />\n <ButtonGroup>\n <Button disabled>L</Button>\n <Button disabled>M</Button>\n <Button disabled>R</Button>\n </ButtonGroup>\n <br />\n <br />\n <ButtonGroup>\n <Button type="primary" icon="share">Share</Button>\n <Button type="primary" icon="download">Download</Button>\n </ButtonGroup>\n </div>\n , mountNode\n);'},b.a.createElement(S)),b.a.createElement(C,{title:"Directive",id:"Demodirective",src:'import { Button } from \'zent\';\n\nfunction RouterLink({ path, ...props }) {\n return <a {...props} href={`#${path}`} />;\n}\n\nReactDOM.render(\n <Button.Directive type="primary">\n <RouterLink path="path">Link</RouterLink>\n </Button.Directive>,\n mountNode\n);'},b.a.createElement(L)),b.a.createElement(I,{html:'

API

\n

Button

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultAlternative
typestylestring\'default\'\'primary\'\n、\n\'danger\'\n、\n\'success\'
sizesizestring\'medium\'\'large\'\n、\n\'small\'
htmlTypebutton tag native type attributestring\'button\'submit\n、\nreset\n、\nbutton
blockwhether to be displayed as a blockboolfalse
disabledcontrols statusboolfalse
loadingcontrols statusboolfalse
outlinedetermines whether the background is transparentboolfalse
bordereddetermines whether the border is displayedbooltrue
Other Properties
hrefOptional, the component will be rendered as an a tag instead of a button tag if this property is setstring
targetOptional, used together with href, which is the target property of the a tagstring\'\'\'_blank\'
downloadHTML5 download
classNamecustom class namestring
stylecustom styleobject
prefixcustom prefixstring\'zent\'
\n

ButtonDirective

\n

ButtonDirective renders button styles onto its child. Use this to make a react-router Link look like a button, and preserve all of its router functionalities.

\n

ButtonGroup

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultAlternative
classNamecustom class namestring
stylecustom styleobject
'}))}}]),a}(E.Component)}}]);