{
  "version": 3,
  "file": "collapse.8816a02c.css",
  "sources": [
    "../../../../../../collapse.svelte"
  ],
  "sourcesContent": [
    "<script context=\"module\">\n\texport async function preload() {\n\t\tconst res = await this.fetch(`components/collapse.json`);\n    const jsdoc = await res.json();\n\n\t\treturn { jsdoc };\n\t}\n</script>\n\n<script>\n  import { Collapse, CollapseItem } 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\n  let activeNames1 = '1';\n\n  function change(e) {\n    console.log(e.detail)\n  }\n</script>\n<style>\n  .notification {\n    background-color: #ffffff;\n    margin: 0;\n  }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9yb3V0ZXMvY29tcG9uZW50cy9jb2xsYXBzZS5zdmVsdGUiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtFQUNFO0lBQ0UseUJBQXlCO0lBQ3pCLFNBQVM7RUFDWCIsImZpbGUiOiJzcmMvcm91dGVzL2NvbXBvbmVudHMvY29sbGFwc2Uuc3ZlbHRlIiwic291cmNlc0NvbnRlbnQiOlsiXG4gIC5ub3RpZmljYXRpb24ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gICAgbWFyZ2luOiAwO1xuICB9XG4iXX0= */</style>\n\n<DocHeader title=\"Collapse\" subtitle=\"可折叠元素\" />\n\n\n<p class=\"title is-4\">基础用法</p>\n<Example code={`<script>\n  import { Collapse, CollapseItem } from 'svelma-pro'\n\n  let activeNames = ['1', '2'];\n\n  function change(e) {\n    console.log(e.detail)\n  }\n</script>\n\n<Collapse activeNames={activeNames} on:change={change}>\n  <CollapseItem title=\"Click Me!\" name='1'>\n    <div class=\"notification\">\n      <div class=\"content\">\n        <h3>Subtitle</h3>\n        <p>Lorem ipsum dolor...</p>\n      </div>\n    </div>\n  </CollapseItem>\n  <CollapseItem title=\"娱乐新闻\" name='2'>\n    <div class=\"notification\"> \n      <div class=\"content\">\n        <p>娱乐八卦天天有</p>\n      </div>\n    </div>\n  </CollapseItem>\n  <CollapseItem title=\"体育新闻\" name='3'>\n    <div class=\"notification\"> \n      <div class=\"content\">\n        <p>这里有你最喜欢的体育趣闻</p>\n      </div>\n    </div>\n  </CollapseItem>\n</Collapse>`}>\n  <div slot=\"preview\">\n    <Collapse activeNames={activeNames1} on:change={change}>\n      <CollapseItem title=\"Click Me!\" name='1'>\n        <div class=\"notification\">\n          <div class=\"content\">\n            <h3>Subtitle</h3>\n            <p>Lorem ipsum dolor...</p>\n          </div>\n        </div>\n      </CollapseItem>\n      <CollapseItem title=\"娱乐新闻\" name='2'>\n        <div class=\"notification\"> \n          <div class=\"content\">\n            <p>娱乐八卦天天有</p>\n          </div>\n        </div>\n      </CollapseItem>\n      <CollapseItem title=\"体育新闻\" name='3'>\n        <div class=\"notification\"> \n          <div class=\"content\">\n            <p>这里有你最喜欢的体育趣闻</p>\n          </div>\n        </div>\n      </CollapseItem>\n    </Collapse>\n  </div>\n</Example>\n<hr class=\"is-medium\" />\n\n<p class=\"title is-4\">手风琴模式</p>\n<Example code={`<script>\n  import { Collapse, CollapseItem } from 'svelma-pro'\n\n  let accordion = true;\n\n  function change(e) {\n    console.log(e.detail)\n  }\n</script>\n\n<Collapse accordion activeNames='1'  on:change={change}>\n  <CollapseItem active=\"{true}\" title=\"目录一\" name=\"1\">\n    <div class=\"notification\">\n      <div class=\"content\">\n        <h3>Subtitle</h3>\n        <p>Lorem ipsum dolor...</p>\n      </div>\n    </div>\n  </CollapseItem>\n  <CollapseItem title=\"目录二\" name=\"3\">\n    <div class=\"notification\">\n      <div class=\"content\">\n        <p>我最喜欢的颜色</p>\n      </div>\n    </div>\n  </CollapseItem>\n</Collapse>`}>\n  <div slot=\"preview\">\n    <Collapse accordion activeNames='1'>\n      <CollapseItem title=\"目录一\" name=\"1\">\n        <div class=\"notification\">\n          <div class=\"content\">\n            <h3>Subtitle</h3>\n            <p>Lorem ipsum dolor...</p>\n          </div>\n        </div>\n      </CollapseItem>\n      <CollapseItem title=\"目录二\" name=\"2\">\n        <div class=\"notification\">\n          <div class=\"content\">\n            <p>我最喜欢的颜色</p>\n          </div>\n        </div>\n      </CollapseItem>\n    </Collapse>\n  </div>\n</Example>\n<hr class=\"is-medium\" />\n\n<p class=\"title is-4\">自定义面板标题</p>\n<Example code={`<script>\n  import { Collapse, CollapseItem } from 'svelma-pro'\n\n</script>\n\n<Collapse>\n  <CollapseItem name=\"1\">\n    <div slot=\"title\">\n      我是自定义面板!\n      <i class=\"fa fa-check\"></i>\n    </div>\n    <div class=\"notification\">\n      <div class=\"content\">\n        <h3>Subtitle</h3>\n        <p>Lorem ipsum dolor...</p>\n      </div>\n    </div>\n  </CollapseItem>\n  <CollapseItem title=\"我是标题面板\" name=\"2\">\n    <div class=\"notification\">\n      <div class=\"content\">\n        <p>我最喜欢的颜色</p>\n      </div>\n    </div>\n  </CollapseItem>\n</Collapse>`}>\n  <div slot=\"preview\">\n    <Collapse>\n      <CollapseItem name=\"1\">\n        <div slot=\"title\">\n          我是自定义面板!\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div class=\"notification\">\n          <div class=\"content\">\n            <h3>Subtitle</h3>\n            <p>Lorem ipsum dolor...</p>\n          </div>\n        </div>\n      </CollapseItem>\n      <CollapseItem title=\"我是标题面板\" name=\"2\">\n        <div class=\"notification\">\n          <div class=\"content\">\n            <p>我最喜欢的颜色</p>\n          </div>\n        </div>\n      </CollapseItem>\n    </Collapse>\n  </div>\n</Example>\n\n<JSDoc {jsdoc} showEvent=\"true\"></JSDoc>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    <!-- <Collapse>\n      <button class=\"button is-primary\" slot=\"trigger\">Click Me!</button>\n      <div class=\"notification\">\n        <div class=\"content\">\n          <h3>Subtitle</h3>\n          <p>Lorem ipsum dolor...</p>\n        </div>\n      </div>\n    </Collapse> -->"
  ],
  "names": [],
  "mappings": "AAyBE,aAAa,eAAC,CAAC,AACb,gBAAgB,CAAE,OAAO,CACzB,MAAM,CAAE,CAAC,AACX,CAAC"
}