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

{"version":3,"sources":["webpack:///../docs/components/button/button.cn.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","__position","__code","__scope","Playground","useThemeUI","Props","Button","language","wrapper","color","href","variant","elevation","disabled","size","colorMode","propsItems","name","type","default","description","isMDXComponent"],"mappings":"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","file":"component---docs-components-button-button-cn-mdx-d81be52fd81c0f0d46be.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    <h4 {...{\n      \"id\": \"使用按钮，只需单击一下即可执行操作并做出选择。\"\n    }}>{`使用按钮，只需单击一下即可执行操作并做出选择。`}</h4>\n    <h2 {...{\n      \"id\": \"文本按钮\"\n    }}>{`文本按钮`}</h2>\n    <Playground __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,\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\">Default</Button>\n    <Button color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <Button color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <Button href=\"#文本按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <h2 {...{\n      \"id\": \"空心按钮\"\n    }}>{`空心按钮`}</h2>\n    <Playground __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    <Button variant=\"outlined\" mdxType=\"Button\">Default</Button>\n    <Button variant=\"outlined\" color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <Button variant=\"outlined\" color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <Button variant=\"outlined\" href=\"#空心按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <h2 {...{\n      \"id\": \"实心按钮\"\n    }}>{`实心按钮`}</h2>\n    <Playground __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    <Button variant=\"contained\" mdxType=\"Button\">Default</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\" href=\"#实心按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <h2 {...{\n      \"id\": \"立体按钮\"\n    }}>{`立体按钮`}</h2>\n    <Playground __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    <Button elevation mdxType=\"Button\">Default</Button>\n    <Button elevation color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <Button elevation color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <Button elevation href=\"#立体按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <h2 {...{\n      \"id\": \"禁用按钮\"\n    }}>{`禁用按钮`}</h2>\n    <Playground __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    <Button elevation mdxType=\"Button\">Default</Button>\n    <Button disabled elevation mdxType=\"Button\">Default</Button>\n    <br /><br />\n    <Button elevation color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <Button disabled elevation color=\"primary\" mdxType=\"Button\">Primary</Button>\n    <br /><br />\n    <Button elevation color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <Button disabled elevation color=\"secondary\" mdxType=\"Button\">Secondary</Button>\n    <br /><br />\n    <Button elevation href=\"#立体按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    <Button disabled elevation href=\"#立体按钮\" color=\"primary\" mdxType=\"Button\">Link</Button>\n    </Playground>\n    <h2 {...{\n      \"id\": \"按钮大小\"\n    }}>{`按钮大小`}</h2>\n    <Playground __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={{\n      props,\n      DefaultLayout,\n      Playground,\n      useThemeUI,\n      Props,\n      Button,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n    <Button size='small' mdxType=\"Button\">small</Button>\n    <Button size='medium' color=\"primary\" mdxType=\"Button\">medium</Button>\n    <Button size='large' color=\"secondary\" mdxType=\"Button\">large</Button>\n    <br /><br />\n    <Button size='small' variant=\"outlined\" mdxType=\"Button\">small</Button>\n    <Button size='medium' variant=\"outlined\" color=\"primary\" mdxType=\"Button\">medium</Button>\n    <Button size='large' variant=\"outlined\" color=\"secondary\" mdxType=\"Button\">large</Button>\n    <br /><br />\n    <Button size='small' variant=\"contained\" mdxType=\"Button\">small</Button>\n    <Button size='medium' variant=\"contained\" color=\"primary\" mdxType=\"Button\">medium</Button>\n    <Button size='large' variant=\"contained\" color=\"secondary\" mdxType=\"Button\">large</Button>\n    <br /><br />\n    <Button size='small' elevation mdxType=\"Button\">small</Button>\n    <Button size='medium' elevation color=\"primary\" mdxType=\"Button\">medium</Button>\n    <Button size='large' elevation color=\"secondary\" mdxType=\"Button\">large</Button>\n    </Playground>\n    <br /><br />\n    <h2 {...{\n      \"id\": \"动态样式\"\n    }}>{`动态样式`}</h2>\n    <Playground __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={{\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":""}