{
 "slug": "alert",
 "mode": "scenarios",
 "examples": [
  {
   "id": "alert-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-alert\">\n    <div class=\"kole-alert-alert\" role=\"alert\">\n      <strong>系统提示</strong>\n      <br />\n      <span class=\"kole-alert-desc\">请检查当前配置后继续。</span>\n      <button class=\"kole-alert-close\" type=\"button\" aria-label=\"关闭\" data-close>×</button>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-alert\">\n  <div class=\"kole-alert-alert\" role=\"alert\">\n    <strong>系统提示</strong>\n    <br />\n    <span class=\"kole-alert-desc\">请检查当前配置后继续。</span>\n    <button class=\"kole-alert-close\" type=\"button\" aria-label=\"关闭\">×</button>\n  </div>\n</div>",
    "jsx": "import { KoleAlert } from 'kole-ui/react';\n\n<KoleAlert\n  type=\"info\"\n  title=\"系统提示\"\n  description=\"请检查当前配置后继续。\"\n  closable\n/>",
    "vue3": "<template>\n  <KoleAlert\n    type=\"info\"\n    title=\"系统提示\"\n    description=\"请检查当前配置后继续。\"\n    closable\n    @close=\"onClose\"\n  />\n</template>\n\n<script setup>\nimport { KoleAlert } from 'kole-ui/vue3';\n\nfunction onClose() {\n  console.log('已关闭提示');\n}\n</script>",
    "vue2": "<template>\n  <KoleAlert\n    type=\"info\"\n    title=\"系统提示\"\n    description=\"请检查当前配置后继续。\"\n    closable\n    @close=\"onClose\"\n  />\n</template>\n\n<script>\nimport { KoleAlert } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlert },\n  methods: {\n    onClose() {\n      console.log('已关闭提示');\n    }\n  }\n};\n</script>",
    "tsx": "import { KoleAlert } from 'kole-ui/react';\n\nexport default function KoleAlertDemo(): JSX.Element {\n  return (\n    <KoleAlert\n      type=\"info\"\n      title=\"系统提示\"\n      description=\"请检查当前配置后继续。\"\n      closable\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleAlert\n    type=\"info\"\n    title=\"系统提示\"\n    description=\"请检查当前配置后继续。\"\n    closable\n    @close=\"onClose\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAlert } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\nfunction onClose() {\n  console.log('已关闭提示');\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleAlert\n    type=\"info\"\n    title=\"系统提示\"\n    description=\"请检查当前配置后继续。\"\n    closable\n    @close=\"onClose\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAlert } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlert },\n  methods: {\n    onClose(): void {\n      console.log('已关闭提示');\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Alert.html 第一个 demo-block（kole-alert-alert + kole-alert-desc + kole-alert-close「×」）；type/title/description/closable 见 Alert.vue3 defineProps 与 Alert.jsx 形参默认值。"
   ]
  },
  {
   "id": "alert-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-alert\">\n    <div class=\"kole-alert-surface\" style=\"padding:12px\">在页面内持续展示风险、限制、成功结果或操作说明。</div>\n    <span class=\"kole-alert-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-alert\">\n  <div class=\"kole-alert-surface\" style=\"padding:12px\">在页面内持续展示风险、限制、成功结果或操作说明。</div>\n  <span class=\"kole-alert-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleAlert } from 'kole-ui/react';\n\n<>\n  <KoleAlert type=\"info\" title=\"系统提示\" description=\"在页面内持续展示风险、限制、成功结果或操作说明。\" />\n  <KoleAlert type=\"success\" title=\"操作成功\" description=\"配置已保存，刷新后仍然生效。\" closable={false} />\n  <KoleAlert type=\"warning\" title=\"警告提示\" description=\"该操作不可撤销，请确认后再继续。\" />\n  <KoleAlert type=\"error\" title=\"操作失败\" description=\"服务暂时不可用，请稍后重试。\" />\n</>",
    "vue3": "<template>\n  <template v-for=\"item in CASES\" :key=\"item.title\">\n    <KoleAlert\n      :type=\"item.type\"\n      :title=\"item.title\"\n      :description=\"item.desc\"\n      :closable=\"item.closable\"\n    />\n  </template>\n</template>\n\n<script setup>\nimport { KoleAlert } from 'kole-ui/vue3';\n\nconst CASES = [\n  { type: 'info', title: '系统提示', desc: '在页面内持续展示风险、限制、成功结果或操作说明。', closable: true },\n  { type: 'success', title: '操作成功', desc: '配置已保存，刷新后仍然生效。', closable: false },\n  { type: 'warning', title: '警告提示', desc: '该操作不可撤销，请确认后再继续。', closable: true },\n  { type: 'error', title: '操作失败', desc: '服务暂时不可用，请稍后重试。', closable: true }\n];\n</script>",
    "vue2": "<template>\n  <div>\n    <div v-for=\"item in CASES\" :key=\"item.title\">\n      <KoleAlert\n        :type=\"item.type\"\n        :title=\"item.title\"\n        :description=\"item.desc\"\n        :closable=\"item.closable\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { KoleAlert } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlert },\n  data() {\n    return {\n      CASES: [\n        { type: 'info', title: '系统提示', desc: '在页面内持续展示风险、限制、成功结果或操作说明。', closable: true },\n        { type: 'success', title: '操作成功', desc: '配置已保存，刷新后仍然生效。', closable: false },\n        { type: 'warning', title: '警告提示', desc: '该操作不可撤销，请确认后再继续。', closable: true },\n        { type: 'error', title: '操作失败', desc: '服务暂时不可用，请稍后重试。', closable: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleAlert } from 'kole-ui/react';\n\nexport default function KoleAlertDemo(): JSX.Element {\n  return (\n    <>\n      <KoleAlert type=\"info\" title=\"系统提示\" description=\"在页面内持续展示风险、限制、成功结果或操作说明。\" />\n      <KoleAlert type=\"success\" title=\"操作成功\" description=\"配置已保存，刷新后仍然生效。\" closable={false} />\n      <KoleAlert type=\"warning\" title=\"警告提示\" description=\"该操作不可撤销，请确认后再继续。\" />\n      <KoleAlert type=\"error\" title=\"操作失败\" description=\"服务暂时不可用，请稍后重试。\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <template v-for=\"item in CASES\" :key=\"item.title\">\n    <KoleAlert\n      :type=\"item.type\"\n      :title=\"item.title\"\n      :description=\"item.desc\"\n      :closable=\"item.closable\"\n    />\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAlert } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\nconst CASES = [\n  { type: 'info', title: '系统提示', desc: '在页面内持续展示风险、限制、成功结果或操作说明。', closable: true },\n  { type: 'success', title: '操作成功', desc: '配置已保存，刷新后仍然生效。', closable: false },\n  { type: 'warning', title: '警告提示', desc: '该操作不可撤销，请确认后再继续。', closable: true },\n  { type: 'error', title: '操作失败', desc: '服务暂时不可用，请稍后重试。', closable: true }\n];\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <div v-for=\"item in CASES\" :key=\"item.title\">\n      <KoleAlert\n        :type=\"item.type\"\n        :title=\"item.title\"\n        :description=\"item.desc\"\n        :closable=\"item.closable\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAlert } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAlert },\n  data(): Record<string, unknown> {\n    return {\n      CASES: [\n        { type: 'info', title: '系统提示', desc: '在页面内持续展示风险、限制、成功结果或操作说明。', closable: true },\n        { type: 'success', title: '操作成功', desc: '配置已保存，刷新后仍然生效。', closable: false },\n        { type: 'warning', title: '警告提示', desc: '该操作不可撤销，请确认后再继续。', closable: true },\n        { type: 'error', title: '操作失败', desc: '服务暂时不可用，请稍后重试。', closable: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Alert.html 第二个 demo-block（kole-alert-surface / kole-alert-desc）与 Alert.vue3 的 :class=\"is- + props.type\"；四档取值 info/success/warning/error 见 Alert.css 的 .is-info/.is-success/.is-warning/.is-error。"
   ]
  }
 ],
 "curated": true
}