188 lines
18 KiB
JSON
188 lines
18 KiB
JSON
{
|
||
"slug": "emptypro",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "emptypro-ex-1",
|
||
"title": "暂无数据",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-empty\" role=\"status\" data-type=\"empty\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-empty\" role=\"status\" data-type=\"empty\"></div>",
|
||
"jsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\n// 暂无数据：当前列表为空，试试新增一条记录。\nconst handlePrimary = () => console.log('暂无数据：主要操作');\nconst handleSecondary = () => console.log('暂无数据：次要操作');\n\n<KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nfunction handlePrimary() { console.log('暂无数据：主要操作'); }\nfunction handleSecondary() { console.log('暂无数据：次要操作'); }\n</script>\n\n<template>\n <!-- 暂无数据：当前列表为空，试试新增一条记录。 -->\n <KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 暂无数据：当前列表为空，试试新增一条记录。 -->\n <KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script>\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProEmptyDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary() { console.log('暂无数据：主要操作'); },\n handleSecondary() { console.log('暂无数据：次要操作'); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\nexport default function KoleEmptyProDemo(): JSX.Element {\n // 暂无数据：当前列表为空，试试新增一条记录。\n const handlePrimary = () => console.log('暂无数据：主要操作');\n const handleSecondary = () => console.log('暂无数据：次要操作');\n return (\n <KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 暂无数据：当前列表为空，试试新增一条记录。 -->\n <KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('暂无数据');\nfunction handlePrimary() { console.log('暂无数据：主要操作'); }\nfunction handleSecondary() { console.log('暂无数据：次要操作'); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 暂无数据：当前列表为空，试试新增一条记录。 -->\n <KoleEmptyPro\n type=\"empty\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProEmptyDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary(): void { console.log('暂无数据：主要操作'); },\n handleSecondary(): void { console.log('暂无数据：次要操作'); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmptyPro.html:19-27 的 PRESET.empty（icon/title/desc）与该行 data-type=\"empty\" 的卡片",
|
||
"actionText/secondaryText 对应演示页填充的主要操作/次要操作按钮；type/icon/title/desc/actionText/secondaryText 见 site/data.json emptypro.api.props 与 EmptyPro.jsx 形参"
|
||
]
|
||
},
|
||
{
|
||
"id": "emptypro-ex-2",
|
||
"title": "无访问权限",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-empty\" role=\"status\" data-type=\"permission\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-empty\" role=\"status\" data-type=\"permission\"></div>",
|
||
"jsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\n// 无访问权限：你没有查看该内容的权限。\nconst handlePrimary = () => console.log('无访问权限：主要操作');\nconst handleSecondary = () => console.log('无访问权限：次要操作');\n\n<KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nfunction handlePrimary() { console.log('无访问权限：主要操作'); }\nfunction handleSecondary() { console.log('无访问权限：次要操作'); }\n</script>\n\n<template>\n <!-- 无访问权限：你没有查看该内容的权限。 -->\n <KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 无访问权限：你没有查看该内容的权限。 -->\n <KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script>\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProPermissionDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary() { console.log('无访问权限：主要操作'); },\n handleSecondary() { console.log('无访问权限：次要操作'); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\nexport default function KoleEmptyProDemo(): JSX.Element {\n // 无访问权限：你没有查看该内容的权限。\n const handlePrimary = () => console.log('无访问权限：主要操作');\n const handleSecondary = () => console.log('无访问权限：次要操作');\n return (\n <KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 无访问权限：你没有查看该内容的权限。 -->\n <KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('无访问权限');\nfunction handlePrimary() { console.log('无访问权限：主要操作'); }\nfunction handleSecondary() { console.log('无访问权限：次要操作'); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 无访问权限：你没有查看该内容的权限。 -->\n <KoleEmptyPro\n type=\"permission\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProPermissionDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary(): void { console.log('无访问权限：主要操作'); },\n handleSecondary(): void { console.log('无访问权限：次要操作'); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmptyPro.html:19-27 的 PRESET.permission（icon/title/desc）与该行 data-type=\"permission\" 的卡片",
|
||
"actionText/secondaryText 对应演示页填充的主要操作/次要操作按钮；type/icon/title/desc/actionText/secondaryText 见 site/data.json emptypro.api.props 与 EmptyPro.jsx 形参"
|
||
]
|
||
},
|
||
{
|
||
"id": "emptypro-ex-3",
|
||
"title": "未找到结果",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-empty\" role=\"status\" data-type=\"search\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-empty\" role=\"status\" data-type=\"search\"></div>",
|
||
"jsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\n// 未找到结果：换个关键词或筛选条件再试。\nconst handlePrimary = () => console.log('未找到结果：主要操作');\nconst handleSecondary = () => console.log('未找到结果：次要操作');\n\n<KoleEmptyPro\n type=\"search\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nfunction handlePrimary() { console.log('未找到结果：主要操作'); }\nfunction handleSecondary() { console.log('未找到结果：次要操作'); }\n</script>\n\n<template>\n <!-- 未找到结果：换个关键词或筛选条件再试。 -->\n <KoleEmptyPro\n type=\"search\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 未找到结果：换个关键词或筛选条件再试。 -->\n <KoleEmptyPro\n type=\"search\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script>\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProSearchDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary() { console.log('未找到结果：主要操作'); },\n handleSecondary() { console.log('未找到结果：次要操作'); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\nexport default function KoleEmptyProDemo(): JSX.Element {\n // 未找到结果：换个关键词或筛选条件再试。\n const handlePrimary = () => console.log('未找到结果：主要操作');\n const handleSecondary = () => console.log('未找到结果：次要操作');\n return (\n <KoleEmptyPro\n type=\"search\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 未找到结果：换个关键词或筛选条件再试。 -->\n <KoleEmptyPro\n type=\"search\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('未找到结果');\nfunction handlePrimary() { console.log('未找到结果：主要操作'); }\nfunction handleSecondary() { console.log('未找到结果：次要操作'); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 未找到结果：换个关键词或筛选条件再试。 -->\n <KoleEmptyPro\n type=\"search\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProSearchDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary(): void { console.log('未找到结果：主要操作'); },\n handleSecondary(): void { console.log('未找到结果：次要操作'); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmptyPro.html:19-27 的 PRESET.search（icon/title/desc）与该行 data-type=\"search\" 的卡片",
|
||
"actionText/secondaryText 对应演示页填充的主要操作/次要操作按钮；type/icon/title/desc/actionText/secondaryText 见 site/data.json emptypro.api.props 与 EmptyPro.jsx 形参"
|
||
]
|
||
},
|
||
{
|
||
"id": "emptypro-ex-4",
|
||
"title": "加载失败",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-empty\" role=\"status\" data-type=\"error\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-empty\" role=\"status\" data-type=\"error\"></div>",
|
||
"jsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\n// 加载失败：网络异常，请稍后重试。\nconst handlePrimary = () => console.log('加载失败：主要操作');\nconst handleSecondary = () => console.log('加载失败：次要操作');\n\n<KoleEmptyPro\n type=\"error\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nfunction handlePrimary() { console.log('加载失败：主要操作'); }\nfunction handleSecondary() { console.log('加载失败：次要操作'); }\n</script>\n\n<template>\n <!-- 加载失败：网络异常，请稍后重试。 -->\n <KoleEmptyPro\n type=\"error\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 加载失败：网络异常，请稍后重试。 -->\n <KoleEmptyPro\n type=\"error\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script>\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProErrorDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary() { console.log('加载失败：主要操作'); },\n handleSecondary() { console.log('加载失败：次要操作'); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleEmptyPro } from 'kole-ui/react';\n\nexport default function KoleEmptyProDemo(): JSX.Element {\n // 加载失败：网络异常，请稍后重试。\n const handlePrimary = () => console.log('加载失败：主要操作');\n const handleSecondary = () => console.log('加载失败：次要操作');\n return (\n <KoleEmptyPro\n type=\"error\"\n role=\"status\"\n actionText=\"主要操作\"\n secondaryText=\"次要操作\"\n onAction={handlePrimary}\n onSecondary={handleSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 加载失败：网络异常，请稍后重试。 -->\n <KoleEmptyPro\n type=\"error\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleEmptyPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('加载失败');\nfunction handlePrimary() { console.log('加载失败：主要操作'); }\nfunction handleSecondary() { console.log('加载失败：次要操作'); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 加载失败：网络异常，请稍后重试。 -->\n <KoleEmptyPro\n type=\"error\"\n role=\"status\"\n action-text=\"主要操作\"\n secondary-text=\"次要操作\"\n @action=\"handlePrimary\"\n @secondary=\"handleSecondary\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleEmptyPro } from 'kole-ui/vue2';\n\nexport default {\n name: 'EmptyProErrorDemo',\n components: { KoleEmptyPro },\n methods: {\n handlePrimary(): void { console.log('加载失败：主要操作'); },\n handleSecondary(): void { console.log('加载失败：次要操作'); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/EmptyPro.html:19-27 的 PRESET.error（icon/title/desc）与该行 data-type=\"error\" 的卡片",
|
||
"actionText/secondaryText 对应演示页填充的主要操作/次要操作按钮；type/icon/title/desc/actionText/secondaryText 见 site/data.json emptypro.api.props 与 EmptyPro.jsx 形参"
|
||
]
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|