185 lines
8.8 KiB
JSON
185 lines
8.8 KiB
JSON
{
|
||
"slug": "chartpanel",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "chartpanel-ex-1",
|
||
"title": "刷新",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-chartpanel-tool\" id=\"refresh\">刷新</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
2
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-chartpanel-tool\">刷新</button>",
|
||
"jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nfunction handleRefresh() {\n console.log('刷新图表');\n}\n\n<KoleChartPanel title=\"访问趋势\" onRefresh={handleRefresh}>\n 图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
|
||
"vue3": "<template>\n <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nfunction handleRefresh() {\n console.log('刷新图表');\n}\n</script>",
|
||
"vue2": "<template>\n <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleChartPanel },\n methods: {\n handleRefresh() {\n console.log('刷新图表');\n }\n }\n};\n</script>",
|
||
"tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n function handleRefresh() {\n console.log('刷新图表');\n }\n return (\n <KoleChartPanel title=\"访问趋势\" onRefresh={handleRefresh}>\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('刷新');\nfunction handleRefresh() {\n console.log('刷新图表');\n}\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" @refresh=\"handleRefresh\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleChartPanel },\n methods: {\n handleRefresh(): void {\n console.log('刷新图表');\n }\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ChartPanel.html:14 标题「访问趋势」与 :16 id=refresh「刷新」按钮的 onclick（:29 alert('刷新图表')）；prop/事件取自 frameworks/ChartPanel.jsx:4 与 ChartPanel.vue3.vue:22"
|
||
]
|
||
},
|
||
{
|
||
"id": "chartpanel-ex-2",
|
||
"title": "导出",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-chartpanel-tool\" id=\"export\">导出</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
2
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-chartpanel-tool\">导出</button>",
|
||
"jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nfunction handleExport() {\n console.log('导出图表');\n}\n\n<KoleChartPanel title=\"访问趋势\" onExport={handleExport}>\n 图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
|
||
"vue3": "<template>\n <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nfunction handleExport() {\n console.log('导出图表');\n}\n</script>",
|
||
"vue2": "<template>\n <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleChartPanel },\n methods: {\n handleExport() {\n console.log('导出图表');\n }\n }\n};\n</script>",
|
||
"tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n function handleExport() {\n console.log('导出图表');\n }\n return (\n <KoleChartPanel title=\"访问趋势\" onExport={handleExport}>\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('导出');\nfunction handleExport() {\n console.log('导出图表');\n}\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" @export=\"handleExport\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleChartPanel },\n methods: {\n handleExport(): void {\n console.log('导出图表');\n }\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ChartPanel.html:17 id=export「导出」按钮与 :30 alert('导出图表')；事件名 export 取自 frameworks/ChartPanel.vue3.vue:22"
|
||
]
|
||
},
|
||
{
|
||
"id": "chartpanel-ex-3",
|
||
"title": "图表面板 ChartPanel 示例 3",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-chartpanel-tool kole-chartpanel-caret\" id=\"toggle\">▾</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
0,
|
||
1,
|
||
1
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-chartpanel-tool kole-chartpanel-caret\">▾</button>",
|
||
"jsx": "import { KoleChartPanel } from 'kole-ui/react';\n\n<KoleChartPanel title=\"访问趋势\" collapsible collapsed={false}>\n 图表区域（可放置折线/柱状/饼图）\n</KoleChartPanel>",
|
||
"vue3": "<template>\n <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup>\nimport { KoleChartPanel } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script>\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default { components: { KoleChartPanel } };\n</script>",
|
||
"tsx": "import { KoleChartPanel } from 'kole-ui/react';\n\nexport default function KoleChartPanelDemo(): JSX.Element {\n return (\n <KoleChartPanel title=\"访问趋势\" collapsible collapsed={false}>\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleChartPanel } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('图表面板 ChartPanel 示例 3');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleChartPanel title=\"访问趋势\" collapsible :collapsed=\"false\">\n 图表区域（可放置折线/柱状/饼图）\n </KoleChartPanel>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleChartPanel } from 'kole-ui/vue2';\n\nexport default { components: { KoleChartPanel },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ChartPanel.html:18 的 kole-chartpanel-caret「▾」折叠按钮与 :28 classList.toggle('is-collapsed')；collapsible/collapsed 取自 frameworks/ChartPanel.jsx:4"
|
||
]
|
||
}
|
||
]
|
||
}
|