component---docs-components-button-button-cn-mdx-d81be52fd81c0f0d46be.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{AkYK:function(t,n,o){"use strict";o.r(n),o.d(n,"_frontmatter",(function(){return b})),o.d(n,"default",(function(){return B}));var e=o("Fcif"),a=o("+I+c"),r=o("/FXl"),u=o("TjRS"),i=o("ZFoC"),l=o("zL5+"),c=o("3ql3"),d=o("DrYe"),b=(o("aD51"),{});void 0!==b&&b&&b===Object(b)&&Object.isExtensible(b)&&!b.hasOwnProperty("__filemeta")&&Object.defineProperty(b,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"docs/components/button/button.cn.mdx"}});var m={_frontmatter:b},y=u.a;function B(t){var n,o,B,s,p,j,f,O=t.components,v=Object(a.a)(t,["components"]);return Object(r.b)(y,Object(e.a)({},m,v,{components:O,mdxType:"MDXLayout"}),Object(r.b)("h1",{id:"button-按钮"},"Button 按钮"),Object(r.b)("h4",{id:"使用按钮，只需单击一下即可执行操作并做出选择。"},"使用按钮，只需单击一下即可执行操作并做出选择。"),Object(r.b)("h2",{id:"文本按钮"},"文本按钮"),Object(r.b)(i.c,{__position:0,__code:'<Button>Default</Button>\n<Button color="primary">Primary</Button>\n<Button color="secondary">Secondary</Button>\n<Button href="#文本按钮" color="primary">\n  Link\n</Button>',__scope:(n={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},n.DefaultLayout=u.a,n._frontmatter=b,n),language:"tsx",wrapper:"https://codesandbox.io/s/zain-ui-button-7xsri?file=/src/buttonDemo.tsx|https://stackblitz.com/edit/zain-ui-button?file=buttonDemo.tsx",mdxType:"Playground"},Object(r.b)(d.Button,{mdxType:"Button"},"Default"),Object(r.b)(d.Button,{color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(d.Button,{color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(d.Button,{href:"#文本按钮",color:"primary",mdxType:"Button"},"Link")),Object(r.b)("h2",{id:"空心按钮"},"空心按钮"),Object(r.b)(i.c,{__position:1,__code:'<Button variant="outlined">Default</Button>\n<Button variant="outlined" color="primary">\n  Primary\n</Button>\n<Button variant="outlined" color="secondary">\n  Secondary\n</Button>\n<Button variant="outlined" href="#空心按钮" color="primary">\n  Link\n</Button>',__scope:(o={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},o.DefaultLayout=u.a,o._frontmatter=b,o),mdxType:"Playground"},Object(r.b)(d.Button,{variant:"outlined",mdxType:"Button"},"Default"),Object(r.b)(d.Button,{variant:"outlined",color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(d.Button,{variant:"outlined",color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(d.Button,{variant:"outlined",href:"#空心按钮",color:"primary",mdxType:"Button"},"Link")),Object(r.b)("h2",{id:"实心按钮"},"实心按钮"),Object(r.b)(i.c,{__position:2,__code:'<Button variant="contained">Default</Button>\n<Button variant="contained" color="primary">\n  Primary\n</Button>\n<Button variant="contained" color="secondary">\n  Secondary\n</Button>\n<Button variant="contained" href="#实心按钮" color="primary">\n  Link\n</Button>',__scope:(B={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},B.DefaultLayout=u.a,B._frontmatter=b,B),mdxType:"Playground"},Object(r.b)(d.Button,{variant:"contained",mdxType:"Button"},"Default"),Object(r.b)(d.Button,{variant:"contained",color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(d.Button,{variant:"contained",color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(d.Button,{variant:"contained",href:"#实心按钮",color:"primary",mdxType:"Button"},"Link")),Object(r.b)("h2",{id:"立体按钮"},"立体按钮"),Object(r.b)(i.c,{__position:3,__code:'<Button elevation>Default</Button>\n<Button elevation color="primary">\n  Primary\n</Button>\n<Button elevation color="secondary">\n  Secondary\n</Button>\n<Button elevation href="#立体按钮" color="primary">\n  Link\n</Button>',__scope:(s={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},s.DefaultLayout=u.a,s._frontmatter=b,s),mdxType:"Playground"},Object(r.b)(d.Button,{elevation:!0,mdxType:"Button"},"Default"),Object(r.b)(d.Button,{elevation:!0,color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(d.Button,{elevation:!0,color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(d.Button,{elevation:!0,href:"#立体按钮",color:"primary",mdxType:"Button"},"Link")),Object(r.b)("h2",{id:"禁用按钮"},"禁用按钮"),Object(r.b)(i.c,{__position:4,__code:'<Button elevation>Default</Button>\n<Button disabled elevation>\n  Default\n</Button>\n<br />\n<br />\n<Button elevation color="primary">\n  Primary\n</Button>\n<Button disabled elevation color="primary">\n  Primary\n</Button>\n<br />\n<br />\n<Button elevation color="secondary">\n  Secondary\n</Button>\n<Button disabled elevation color="secondary">\n  Secondary\n</Button>\n<br />\n<br />\n<Button elevation href="#立体按钮" color="primary">\n  Link\n</Button>\n<Button disabled elevation href="#立体按钮" color="primary">\n  Link\n</Button>',__scope:(p={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},p.DefaultLayout=u.a,p._frontmatter=b,p),mdxType:"Playground"},Object(r.b)(d.Button,{elevation:!0,mdxType:"Button"},"Default"),Object(r.b)(d.Button,{disabled:!0,elevation:!0,mdxType:"Button"},"Default"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{elevation:!0,color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(d.Button,{disabled:!0,elevation:!0,color:"primary",mdxType:"Button"},"Primary"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{elevation:!0,color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(d.Button,{disabled:!0,elevation:!0,color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{elevation:!0,href:"#立体按钮",color:"primary",mdxType:"Button"},"Link"),Object(r.b)(d.Button,{disabled:!0,elevation:!0,href:"#立体按钮",color:"primary",mdxType:"Button"},"Link")),Object(r.b)("h2",{id:"按钮大小"},"按钮大小"),Object(r.b)(i.c,{__position:5,__code:'<Button size="small">small</Button>\n<Button size="medium" color="primary">\n  medium\n</Button>\n<Button size="large" color="secondary">\n  large\n</Button>\n<br />\n<br />\n<Button size="small" variant="outlined">\n  small\n</Button>\n<Button size="medium" variant="outlined" color="primary">\n  medium\n</Button>\n<Button size="large" variant="outlined" color="secondary">\n  large\n</Button>\n<br />\n<br />\n<Button size="small" variant="contained">\n  small\n</Button>\n<Button size="medium" variant="contained" color="primary">\n  medium\n</Button>\n<Button size="large" variant="contained" color="secondary">\n  large\n</Button>\n<br />\n<br />\n<Button size="small" elevation>\n  small\n</Button>\n<Button size="medium" elevation color="primary">\n  medium\n</Button>\n<Button size="large" elevation color="secondary">\n  large\n</Button>',__scope:(j={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},j.DefaultLayout=u.a,j._frontmatter=b,j),mdxType:"Playground"},Object(r.b)(d.Button,{size:"small",mdxType:"Button"},"small"),Object(r.b)(d.Button,{size:"medium",color:"primary",mdxType:"Button"},"medium"),Object(r.b)(d.Button,{size:"large",color:"secondary",mdxType:"Button"},"large"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{size:"small",variant:"outlined",mdxType:"Button"},"small"),Object(r.b)(d.Button,{size:"medium",variant:"outlined",color:"primary",mdxType:"Button"},"medium"),Object(r.b)(d.Button,{size:"large",variant:"outlined",color:"secondary",mdxType:"Button"},"large"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{size:"small",variant:"contained",mdxType:"Button"},"small"),Object(r.b)(d.Button,{size:"medium",variant:"contained",color:"primary",mdxType:"Button"},"medium"),Object(r.b)(d.Button,{size:"large",variant:"contained",color:"secondary",mdxType:"Button"},"large"),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(d.Button,{size:"small",elevation:!0,mdxType:"Button"},"small"),Object(r.b)(d.Button,{size:"medium",elevation:!0,color:"primary",mdxType:"Button"},"medium"),Object(r.b)(d.Button,{size:"large",elevation:!0,color:"secondary",mdxType:"Button"},"large")),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)("h2",{id:"动态样式"},"动态样式"),Object(r.b)(i.c,{__position:7,__code:"() => {\n  const { colorMode } = useThemeUI()\n  return (\n    <Button\n      variant=\"contained\"\n      color={colorMode === 'dark' ? 'primary' : 'default'}\n    >\n      {colorMode}\n    </Button>\n  )\n}",__scope:(f={props:v,DefaultLayout:u.a,Playground:i.c,useThemeUI:l.j,Props:c.a,Button:d.Button},f.DefaultLayout=u.a,f._frontmatter=b,f),mdxType:"Playground"},(function(){var t=Object(l.j)().colorMode;return Object(r.b)(d.Button,{variant:"contained",color:"dark"===t?"primary":"default",mdxType:"Button"},t)})),Object(r.b)("h2",{id:"api"},"API"),Object(r.b)(c.a,{propsItems:[{name:"children",type:"React.ReactNode",default:"",description:"The content of the button."},{name:"classes",type:"object",default:"",description:"Override or extend the styles applied to the component. See CSS API below for more details."},{name:"color",type:"'default'| 'inherit'| 'primary'| 'secondary'",default:"'default'",description:"The color of the component. It supports those theme colors that make sense for this component."},{name:"component",type:"elementType",default:"'button'",description:"The component used for the root node. Either a string to use a HTML element or a component."},{name:"disabled",type:"bool",default:"false",description:"If true, the button will be disabled."}],mdxType:"Props"}))}void 0!==B&&B&&B===Object(B)&&Object.isExtensible(B)&&!B.hasOwnProperty("__filemeta")&&Object.defineProperty(B,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"docs/components/button/button.cn.mdx"}}),B.isMDXComponent=!0}}]);
//# sourceMappingURL=component---docs-components-button-button-cn-mdx-d81be52fd81c0f0d46be.js.map