component---docs-components-button-button-en-mdx-6c2d6bfa408b7125a7bf.js.map

{"version":3,"sources":["webpack:///../docs/components/button/button.en.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","__position","__code","__scope","Playground","useThemeUI","Props","Button","language","wrapper","variant","size","color","disabled","href","colorMode","propsItems","name","type","default","description","isMDXComponent"],"mappings":"6RAUaA,G,UAAe,S,sNAC5B,IAAMC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,QAFDC,EAEC,EAFDA,WACGC,EACF,8BACD,OAAO,YAACJ,EAAD,eAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,iBAAQ,CACN,GAAM,UADR,UAGA,kGACA,iBAAQ,CACN,GAAM,YADR,YAGA,YAAC,IAAD,CAAYC,WAAY,EAAGC,OAAQ,0iBAAykBC,SAAO,GACjnBJ,QACAH,kBACAQ,eACAC,eACAC,UACAC,iBANinB,gBAOjnBX,IAPinB,EAQjnBH,eARinB,GAShnBe,SAAS,MACZC,QAAQ,wIAAwIT,QAAQ,cACxJ,YAAC,SAAD,CAAQA,QAAQ,UAAhB,QACA,YAAC,SAAD,CAAQU,QAAQ,WAAWV,QAAQ,UAAnC,YACA,YAAC,SAAD,CAAQU,QAAQ,YAAYC,KAAK,QAAQX,QAAQ,UAAjD,SACA,YAAC,SAAD,CAAQU,QAAQ,YAAYC,KAAK,SAASX,QAAQ,UAAlD,UACA,YAAC,SAAD,CAAQU,QAAQ,YAAYC,KAAK,QAAQX,QAAQ,UAAjD,SACA,YAAC,SAAD,CAAQU,QAAQ,YAAYE,MAAM,UAAUZ,QAAQ,UAApD,WACA,YAAC,SAAD,CAAQU,QAAQ,YAAYE,MAAM,YAAYZ,QAAQ,UAAtD,aACA,YAAC,SAAD,CAAQU,QAAQ,YAAYG,UAAQ,EAACb,QAAQ,UAA7C,YACA,YAAC,SAAD,CAAQU,QAAQ,YAAYE,MAAM,UAAUE,KAAK,qBAAqBd,QAAQ,UAA9E,SAEA,uBAAM,uBACN,YAAC,IAAD,CAAYC,WAAY,EAAGC,OAAQ,mNAA0NC,SAAO,GAClQJ,QACAH,kBACAQ,eACAC,eACAC,UACAC,iBANkQ,gBAOlQX,IAPkQ,EAQlQH,eARkQ,GASjQO,QAAQ,eACV,WAAM,IAEDe,EACEV,cADFU,UAEF,OAAO,YAAC,SAAD,CAAQL,QAAQ,YAAYE,MAAqB,SAAdG,EAAuB,UAAY,UAAWf,QAAQ,UACvFe,MAIb,iBAAQ,CACN,GAAM,OADR,OAGA,YAAC,IAAD,CAAOC,WAAY,CAAC,CAClBC,KAAM,WACNC,KAAM,kBACNC,QAAS,GACTC,YAAa,8BACZ,CACDH,KAAM,UACNC,KAAM,SACNC,QAAS,GACTC,YAAa,+FACZ,CACDH,KAAM,QACNC,KAAM,+CACNC,QAAS,YACTC,YAAa,kGACZ,CACDH,KAAM,YACNC,KAAM,cACNC,QAAS,WACTC,YAAa,+FACZ,CACDH,KAAM,WACNC,KAAM,OACNC,QAAS,QACTC,YAAa,0CACXpB,QAAQ,gB,oNAKhBH,EAAWwB,gBAAiB","file":"component---docs-components-button-button-en-mdx-6c2d6bfa408b7125a7bf.js","sourcesContent":["import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"E:/Git/Zain/zain-ui-organizations/zain-ui/packages/zain-ui/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nimport { Playground } from 'docz';\nimport { useThemeUI } from 'theme-ui';\nimport { Props } from 'src/zain-components-docz';\nimport { Button } from 'zain-ui/button';\nexport const _frontmatter = {};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h1 {...{\n      \"id\": \"button\"\n    }}>{`Button`}</h1>\n    <p>{`Buttons allow users to take actions, and make choices, with a single tap.`}</p>\n    <h2 {...{\n      \"id\": \"examples\"\n    }}>{`Examples`}</h2>\n    <Playground __position={0} __code={'<Button>Zain</Button>\\n<Button variant=\\\"outlined\\\">outlined</Button>\\n<Button variant=\\\"contained\\\" size=\\\"small\\\">\\n  small\\n</Button>\\n<Button variant=\\\"contained\\\" size=\\\"medium\\\">\\n  medium\\n</Button>\\n<Button variant=\\\"contained\\\" size=\\\"large\\\">\\n  large\\n</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\\\" disabled>\\n  Disabled\\n</Button>\\n<Button variant=\\\"contained\\\" color=\\\"primary\\\" href=\\\"#contained-buttons\\\">\\n  Link\\n</Button>'} __scope={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} language='tsx' // demo 网址，可以通过组件旁边的按钮，链接到不同平台的 demo (多个平台间 '|' 号隔开，第一个按钮 codesandbox，第二个按钮 stackblitz)\n    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\">\n    <Button mdxType=\"Button\">Zain</Button>\n    <Button variant=\"outlined\" mdxType=\"Button\">outlined</Button>\n    <Button variant=\"contained\" size='small' mdxType=\"Button\">small</Button>\n    <Button variant=\"contained\" size='medium' mdxType=\"Button\">medium</Button>\n    <Button variant=\"contained\" size='large' mdxType=\"Button\">large</Button>\n    <Button variant=\"contained\" color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <Button variant=\"contained\" color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <Button variant=\"contained\" disabled mdxType=\"Button\">Disabled</Button>\n    <Button variant=\"contained\" color=\"primary\" href=\"#contained-buttons\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <br /><br />\n    <Playground __position={2} __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    {() => {\n        const {\n          colorMode\n        } = useThemeUI();\n        return <Button variant=\"contained\" color={colorMode === 'dark' ? 'primary' : 'default'} mdxType=\"Button\">\n                {colorMode}\n            </Button>;\n      }}\n    </Playground>\n    <h2 {...{\n      \"id\": \"api\"\n    }}>{`API`}</h2>\n    <Props propsItems={[{\n      name: 'children',\n      type: 'React.ReactNode',\n      default: '',\n      description: 'The content of the button.'\n    }, {\n      name: 'classes',\n      type: 'object',\n      default: '',\n      description: 'Override or extend the styles applied to the component. See CSS API below for more details.'\n    }, {\n      name: 'color',\n      type: \"'default'| 'inherit'| 'primary'| 'secondary'\",\n      default: \"'default'\",\n      description: 'The color of the component. It supports those theme colors that make sense for this component.'\n    }, {\n      name: 'component',\n      type: 'elementType',\n      default: \"'button'\",\n      description: 'The component used for the root node. Either a string to use a HTML element or a component.'\n    }, {\n      name: 'disabled',\n      type: 'bool',\n      default: 'false',\n      description: 'If true, the button will be disabled.'\n    }]} mdxType=\"Props\" />\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}