{
 "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
}