{
  "version": 3,
  "file": "button.c40b2c4d.css",
  "sources": [
    "../../../../../../button.svelte"
  ],
  "sourcesContent": [
    "<script context=\"module\">\n  export async function preload(page, session) {\n    const res = await this.fetch(`components/button.json`)\n    const jsdoc = await res.json()\n\n    return { jsdoc }\n  }\n</script>\n\n<script>\n  import { onMount } from 'svelte'\n  import { Button, Icon } from 'svelma-pro'\n  import DocHeader from '../../components/DocHeader.svelte'\n  import Example from '../../components/Example.svelte'\n  import JSDoc from '../../components/JSDoc.svelte'\n\n  export let jsdoc\n\n  let counter = 0\n</script>\n\n<style>\n  .buttons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n  }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvY29tcG9uZW50cy9idXR0b24uc3ZlbHRlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7RUFDRTtJQUNFLG9CQUFhO0lBQWIsb0JBQWE7SUFBYixhQUFhO0lBQ2IsdUJBQTJCO1FBQTNCLG9CQUEyQjtZQUEzQiwyQkFBMkI7SUFDM0IsbUJBQWU7UUFBZixlQUFlO0VBQ2pCIiwiZmlsZSI6InNyYy9yb3V0ZXMvY29tcG9uZW50cy9idXR0b24uc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4gIC5idXR0b25zIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbiAgICBmbGV4LXdyYXA6IHdyYXA7XG4gIH1cbiJdfQ== */</style>\n\n<DocHeader title=\"Buttons\" subtitle=\"可点击按钮\" />\n\n<Example\n  code={`<Button type=\"is-primary\" on:click={() => counter++}>\n  Click!: {counter}\n</Button>`}>\n  <div slot=\"preview\">\n    <Button type=\"is-primary\" on:click={() => counter++}>Click!: {counter}</Button>\n  </div>\n</Example>\n\n<hr class=\"is-medium\" />\n\n<p class=\"title is-4\">状态,样式和类型</p>\n\n<Example\n  code={`<div class=\"buttons\">\n  <Button type=\"is-primary\">Primary</Button>\n  <Button type=\"is-success\">Success</Button>\n  <Button type=\"is-danger\">Danger</Button>\n  <Button type=\"is-warning\">Warning</Button>\n  <Button type=\"is-info\">Info</Button>\n  <Button type=\"is-link\">Link</Button>\n  <Button type=\"is-light\">Light</Button>\n  <Button type=\"is-dark\">Dark</Button>\n  <Button type=\"is-text\">Text</Button>\n</div>\n<div class=\"buttons\">\n  <Button disabled>Disabled</Button>\n  <Button type=\"is-primary\" loading>Loading</Button>\n  <Button type=\"is-success\" rounded>Rounded</Button>\n  <Button type=\"is-info\" outline>Outlined</Button>\n</div>\n<div class=\"buttons\">\n  <div class=\"notification is-primary\">\n    <Button type=\"is-primary\" inverted>Inverted</Button>\n    <Button type=\"is-primary\" inverted outlined>Invert Outlined</Button>\n  </div>\n</div>\n<div class=\"buttons\">\n  <Button type=\"is-primary\" nativeType=\"submit\">Submit</Button>\n  <Button type=\"is-primary\" nativeType=\"reset\">Reset</Button>\n</div>`}>\n  <div slot=\"preview\">\n    <div class=\"buttons\">\n      <Button type=\"is-primary\">Primary</Button>\n      <Button type=\"is-success\">Success</Button>\n      <Button type=\"is-danger\">Danger</Button>\n      <Button type=\"is-warning\">Warning</Button>\n      <Button type=\"is-info\">Info</Button>\n      <Button type=\"is-link\">Link</Button>\n      <Button type=\"is-light\">Light</Button>\n      <Button type=\"is-dark\">Dark</Button>\n      <Button type=\"is-text\">Text</Button>\n    </div>\n    <div class=\"buttons\">\n      <Button disabled>Disabled</Button>\n      <Button type=\"is-primary\" loading>Loading</Button>\n      <Button type=\"is-success\" rounded>Rounded</Button>\n      <Button type=\"is-info\" outline>Outlined</Button>\n    </div>\n    <div class=\"buttons\">\n      <div class=\"notification is-primary\">\n        <Button type=\"is-primary\" inverted>Inverted</Button>\n        <Button type=\"is-primary\" inverted outlined>Invert Outlined</Button>\n      </div>\n    </div>\n    <div class=\"buttons\">\n      <Button type=\"is-primary\" nativeType=\"submit\">Submit</Button>\n      <Button type=\"is-primary\" nativeType=\"reset\">Reset</Button>\n    </div>\n  </div>\n</Example>\n\n<hr class=\"is-medium\" />\n\n<p class=\"title is-4\">Sizes</p>\n\n<Example\n  code={`<div class=\"buttons\">\n  <Button size=\"is-small\">Small</Button>\n  <Button>Default</Button>\n  <Button size=\"is-medium\">Medium</Button>\n  <Button size=\"is-large\">Large</Button>\n</div>`}>\n  <div slot=\"preview\">\n    <div class=\"buttons\">\n      <Button size=\"is-small\">Small</Button>\n      <Button>Default</Button>\n      <Button size=\"is-medium\">Medium</Button>\n      <Button size=\"is-large\">Large</Button>\n    </div>\n  </div>\n</Example>\n\n<hr class=\"is-medium\" />\n\n<p class=\"title is-4\">Icons</p>\n\n<Example\n  code={`<div class=\"buttons\">\n  <Button>\n    <Icon icon=\"bold\" />\n  </Button>\n  <Button>\n    <Icon icon=\"underline\" />\n  </Button>\n  <Button>\n    <Icon icon=\"italic\" />\n  </Button>\n</div>\n<div class=\"buttons\">\n  <Button iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n  <Button type=\"is-primary\" iconPack=\"fab\" iconLeft=\"twitter\">Twitter</Button>\n  <Button type=\"is-success\" iconPack=\"fa\" iconLeft=\"check\">Save</Button>\n  <Button type=\"is-danger\" outline iconPack=\"fa\" iconRight=\"times\">Delete</Button>\n</div>\n<div class=\"buttons\">\n  <Button size=\"is-small\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n  <Button iconLeft=\"github\" iconPack=\"fab\">GitHub</Button>\n  <Button size=\"is-medium\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n  <Button size=\"is-large\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n</div>`}>\n  <div slot=\"preview\">\n    <div class=\"buttons\">\n      <Button>\n        <Icon icon=\"bold\" />\n      </Button>\n      <Button>\n        <Icon icon=\"underline\" />\n      </Button>\n      <Button>\n        <Icon icon=\"italic\" />\n      </Button>\n    </div>\n    <div class=\"buttons\">\n      <Button iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n      <Button type=\"is-primary\" iconPack=\"fab\" iconLeft=\"twitter\">Twitter</Button>\n      <Button type=\"is-success\" iconPack=\"fa\" iconLeft=\"check\">Save</Button>\n      <Button type=\"is-danger\" outline iconPack=\"fa\" iconRight=\"times\">Delete</Button>\n    </div>\n    <div class=\"buttons\">\n      <Button size=\"is-small\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n      <Button iconLeft=\"github\" iconPack=\"fab\">GitHub</Button>\n      <Button size=\"is-medium\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n      <Button size=\"is-large\" iconPack=\"fab\" iconLeft=\"github\">GitHub</Button>\n    </div>\n  </div>\n</Example>\n\n<JSDoc {jsdoc} />\n"
  ],
  "names": [],
  "mappings": "AAsBE,QAAQ,eAAC,CAAC,AACR,OAAO,CAAE,WAAW,CACpB,OAAO,CAAE,WAAW,CACpB,OAAO,CAAE,IAAI,CACb,gBAAgB,CAAE,KAAK,CACnB,aAAa,CAAE,KAAK,CAChB,eAAe,CAAE,UAAU,CACnC,aAAa,CAAE,IAAI,CACf,SAAS,CAAE,IAAI,AACrB,CAAC"
}