12 lines
6.1 KiB
Plaintext
12 lines
6.1 KiB
Plaintext
{
|
|
"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"
|
|
} |