{
 "slug": "notificationpro",
 "mode": "scenarios",
 "examples": [
  {
   "id": "notificationpro-ex-1",
   "title": "success",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleNotify.success('审批通过', '订单 ORD-2024 已通过主管审批')\">success</button>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleNotify.success('审批通过', '订单 ORD-2024 已通过主管审批')\">success</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function ApprovalNotice() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 success\n  return (\n    <>\n      <button onClick={() => host.current.success('审批通过', '订单 ORD-2024 已通过主管审批')}>审批通过</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.success('审批通过', '订单 ORD-2024 已通过主管审批')\">审批通过</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 success -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.success('审批通过', '订单 ORD-2024 已通过主管审批')\">审批通过</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 success -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script>\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function ApprovalNotice(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 success\n  return (\n    <>\n      <button onClick={() => host.current.success('审批通过', '订单 ORD-2024 已通过主管审批')}>审批通过</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.success('审批通过', '订单 ORD-2024 已通过主管审批')\">审批通过</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 success -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('success');\nconst host = ref(null);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button @click=\"$refs.host.success('审批通过', '订单 ORD-2024 已通过主管审批')\">审批通过</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 success -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/NotificationPro.html L12 KoleNotify.success(\"审批通过\", \"订单 ORD-2024 已通过主管审批\")；React 端调用形态取 NotificationPro.jsx L19-26 useImperativeHandle 暴露的 success(t,d,dur)，L6 duration 默认 4500，L31 渲染 .kole-notification.is-success 的标题+描述。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "notificationpro-ex-2",
   "title": "error",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleNotify.error('提交失败', '网络异常，请稍后重试')\">error</button>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleNotify.error('提交失败', '网络异常，请稍后重试')\">error</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function SubmitFailedNotice() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 error\n  return (\n    <>\n      <button onClick={() => host.current.error('提交失败', '网络异常，请稍后重试')}>提交失败</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.error('提交失败', '网络异常，请稍后重试')\">提交失败</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 error -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.error('提交失败', '网络异常，请稍后重试')\">提交失败</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 error -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script>\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function SubmitFailedNotice(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 error\n  return (\n    <>\n      <button onClick={() => host.current.error('提交失败', '网络异常，请稍后重试')}>提交失败</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.error('提交失败', '网络异常，请稍后重试')\">提交失败</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 error -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('error');\nconst host = ref(null);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button @click=\"$refs.host.error('提交失败', '网络异常，请稍后重试')\">提交失败</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 error -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/NotificationPro.html L13 KoleNotify.error(\"提交失败\", \"网络异常，请稍后重试\")；调用形态取 NotificationPro.jsx L23 的 error(t,d,dur)，渲染类名 is-error 见 L31。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "notificationpro-ex-3",
   "title": "warning",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleNotify.warning('存储空间不足', '当前已使用 92%')\">warning</button>",
   "preview": {
    "show": [
     [
      2
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleNotify.warning('存储空间不足', '当前已使用 92%')\">warning</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function StorageWarningNotice() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 warning\n  return (\n    <>\n      <button onClick={() => host.current.warning('存储空间不足', '当前已使用 92%')}>存储空间不足</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.warning('存储空间不足', '当前已使用 92%')\">存储空间不足</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 warning -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.warning('存储空间不足', '当前已使用 92%')\">存储空间不足</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 warning -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script>\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function StorageWarningNotice(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 warning\n  return (\n    <>\n      <button onClick={() => host.current.warning('存储空间不足', '当前已使用 92%')}>存储空间不足</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.warning('存储空间不足', '当前已使用 92%')\">存储空间不足</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 warning -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('warning');\nconst host = ref(null);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button @click=\"$refs.host.warning('存储空间不足', '当前已使用 92%')\">存储空间不足</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 warning -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/NotificationPro.html L14 KoleNotify.warning(\"存储空间不足\", \"当前已使用 92%\")；调用形态取 NotificationPro.jsx L24 的 warning(t,d,dur)，渲染类名 is-warning 见 L31。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "notificationpro-ex-4",
   "title": "info",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleNotify.info('新版本', '系统已发布 v2.3.0')\">info</button>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleNotify.info('新版本', '系统已发布 v2.3.0')\">info</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function VersionNotice() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 info\n  return (\n    <>\n      <button onClick={() => host.current.info('新版本', '系统已发布 v2.3.0')}>新版本</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.info('新版本', '系统已发布 v2.3.0')\">新版本</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 info -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.info('新版本', '系统已发布 v2.3.0')\">新版本</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 info -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script>\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleNotificationPro } from 'kole-ui/react';\n\nexport default function VersionNotice(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 info\n  return (\n    <>\n      <button onClick={() => host.current.info('新版本', '系统已发布 v2.3.0')}>新版本</button>\n      <KoleNotificationPro ref={host} duration={4500} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.info('新版本', '系统已发布 v2.3.0')\">新版本</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 info -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleNotificationPro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('info');\nconst host = ref(null);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button @click=\"$refs.host.info('新版本', '系统已发布 v2.3.0')\">新版本</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 info -->\n    <KoleNotificationPro ref=\"host\" :duration=\"4500\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleNotificationPro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleNotificationPro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/NotificationPro.html L15 KoleNotify.info(\"新版本\", \"系统已发布 v2.3.0\")；调用形态取 NotificationPro.jsx L25 的 info(t,d,dur)，渲染类名 is-info 见 L31。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  }
 ],
 "curated": true
}