{
 "slug": "exceptionvariants",
 "mode": "scenarios",
 "examples": [
  {
   "id": "exceptionvariants-ex-1",
   "title": "403 禁止访问",
   "titleSrc": "script",
   "desc": "",
   "html": "<div class=\"kole-card\">\n  <div class=\"kole-exception\" role=\"status\" data-type=\"403\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-exception\" role=\"status\" data-type=\"403\"></div>",
    "jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 403 禁止访问：抱歉，你没有权限访问此页面。\nconst goHome = () => { location.href = '/'; };\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n  type=\"403\"\n  role=\"status\"\n  onHome={goHome}\n  onRetry={retry}\n/>",
    "vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n  <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n  <KoleExceptionVariants\n    type=\"403\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>",
    "vue2": "<template>\n  <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n  <KoleExceptionVariants\n    type=\"403\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception403Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    goHome() { location.href = '/'; },\n    retry() { location.reload(); },\n  },\n};\n</script>",
    "tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n  // 403 禁止访问：抱歉，你没有权限访问此页面。\n  const goHome = () => { location.href = '/'; };\n  const retry = () => location.reload();\n  return (\n    <KoleExceptionVariants\n      type=\"403\"\n      role=\"status\"\n      onHome={goHome}\n      onRetry={retry}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n  <KoleExceptionVariants\n    type=\"403\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('403 禁止访问');\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>",
    "vue2ts": "<template>\n\n  <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n  <KoleExceptionVariants\n    type=\"403\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception403Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    goHome(): void { location.href = '/'; },\n    retry(): void { location.reload(); },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ExceptionVariants.html:19-24 的 DATA['403']（emoji/title/desc）与该行 data-type=\"403\" 的卡片",
    "type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
   ]
  },
  {
   "id": "exceptionvariants-ex-2",
   "title": "404 页面不存在",
   "titleSrc": "script",
   "desc": "",
   "html": "<div class=\"kole-card\">\n  <div class=\"kole-exception\" role=\"status\" data-type=\"404\"></div>\n</div>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-exception\" role=\"status\" data-type=\"404\"></div>",
    "jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 404 页面不存在：你访问的页面已被移除或从未存在。\n// 预设 type=\"404\" 已含 emoji/title/desc；下面显式覆盖为演示页 DATA['404'] 的同一组值\n<KoleExceptionVariants\n  type=\"404\"\n  emoji=\"🔍\"\n  title=\"404 页面不存在\"\n  desc=\"你访问的页面已被移除或从未存在。\"\n  role=\"status\"\n/>",
    "vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\n</script>\n\n<template>\n  <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n  <KoleExceptionVariants\n    type=\"404\"\n    role=\"status\"\n    emoji=\"🔍\"\n    title=\"404 页面不存在\"\n    desc=\"你访问的页面已被移除或从未存在。\"\n  />\n</template>",
    "vue2": "<template>\n  <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n  <KoleExceptionVariants\n    type=\"404\"\n    role=\"status\"\n    emoji=\"🔍\"\n    title=\"404 页面不存在\"\n    desc=\"你访问的页面已被移除或从未存在。\"\n  />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception404Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n  },\n};\n</script>",
    "tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n  // 404 页面不存在：你访问的页面已被移除或从未存在。\n  // 预设 type=\"404\" 已含 emoji/title/desc；下面显式覆盖为演示页 DATA['404'] 的同一组值\n  return (\n    <KoleExceptionVariants\n      type=\"404\"\n      emoji=\"🔍\"\n      title=\"404 页面不存在\"\n      desc=\"你访问的页面已被移除或从未存在。\"\n      role=\"status\"\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n  <KoleExceptionVariants\n    type=\"404\"\n    role=\"status\"\n    emoji=\"🔍\"\n    title=\"404 页面不存在\"\n    desc=\"你访问的页面已被移除或从未存在。\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('404 页面不存在');\n\n</script>",
    "vue2ts": "<template>\n\n  <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n  <KoleExceptionVariants\n    type=\"404\"\n    role=\"status\"\n    emoji=\"🔍\"\n    title=\"404 页面不存在\"\n    desc=\"你访问的页面已被移除或从未存在。\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception404Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n  },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ExceptionVariants.html:19-24 的 DATA['404']（emoji/title/desc）与该行 data-type=\"404\" 的卡片",
    "emoji/title/desc 为演示页 DATA 的实参（与组件内 PRESET 同值），片段演示显式覆盖写法"
   ]
  },
  {
   "id": "exceptionvariants-ex-3",
   "title": "500 服务器错误",
   "titleSrc": "script",
   "desc": "",
   "html": "<div class=\"kole-card\">\n  <div class=\"kole-exception\" role=\"status\" data-type=\"500\"></div>\n</div>",
   "preview": {
    "show": [
     [
      2
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-exception\" role=\"status\" data-type=\"500\"></div>",
    "jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 500 服务器错误：服务器开小差了，请稍后再试。\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n  type=\"500\"\n  role=\"status\"\n  onRetry={retry}\n/>",
    "vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n  <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n  <KoleExceptionVariants\n    type=\"500\"\n    role=\"status\"\n    @retry=\"retry\"\n  />\n</template>",
    "vue2": "<template>\n  <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n  <KoleExceptionVariants\n    type=\"500\"\n    role=\"status\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception500Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    retry() { location.reload(); },\n  },\n};\n</script>",
    "tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n  // 500 服务器错误：服务器开小差了，请稍后再试。\n  const retry = () => location.reload();\n  return (\n    <KoleExceptionVariants\n      type=\"500\"\n      role=\"status\"\n      onRetry={retry}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n  <KoleExceptionVariants\n    type=\"500\"\n    role=\"status\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('500 服务器错误');\nfunction retry() { location.reload(); }\n</script>",
    "vue2ts": "<template>\n\n  <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n  <KoleExceptionVariants\n    type=\"500\"\n    role=\"status\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception500Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    retry(): void { location.reload(); },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ExceptionVariants.html:19-24 的 DATA['500']（emoji/title/desc）与该行 data-type=\"500\" 的卡片",
    "type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
   ]
  },
  {
   "id": "exceptionvariants-ex-4",
   "title": "502 网关错误",
   "titleSrc": "script",
   "desc": "",
   "html": "<div class=\"kole-card\">\n  <div class=\"kole-exception\" role=\"status\" data-type=\"502\"></div>\n</div>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-exception\" role=\"status\" data-type=\"502\"></div>",
    "jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 502 网关错误：网关无响应，请检查网络后重试。\nconst goHome = () => { location.href = '/'; };\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n  type=\"502\"\n  role=\"status\"\n  onHome={goHome}\n  onRetry={retry}\n/>",
    "vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n  <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n  <KoleExceptionVariants\n    type=\"502\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>",
    "vue2": "<template>\n  <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n  <KoleExceptionVariants\n    type=\"502\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception502Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    goHome() { location.href = '/'; },\n    retry() { location.reload(); },\n  },\n};\n</script>",
    "tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n  // 502 网关错误：网关无响应，请检查网络后重试。\n  const goHome = () => { location.href = '/'; };\n  const retry = () => location.reload();\n  return (\n    <KoleExceptionVariants\n      type=\"502\"\n      role=\"status\"\n      onHome={goHome}\n      onRetry={retry}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n  <KoleExceptionVariants\n    type=\"502\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('502 网关错误');\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>",
    "vue2ts": "<template>\n\n  <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n  <KoleExceptionVariants\n    type=\"502\"\n    role=\"status\"\n    @home=\"goHome\"\n    @retry=\"retry\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n  name: 'Exception502Demo',\n  components: { KoleExceptionVariants },\n  methods: {\n    goHome(): void { location.href = '/'; },\n    retry(): void { location.reload(); },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ExceptionVariants.html:19-24 的 DATA['502']（emoji/title/desc）与该行 data-type=\"502\" 的卡片",
    "type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
   ]
  }
 ],
 "curated": true
}