{
 "slug": "messagepro",
 "mode": "scenarios",
 "examples": [
  {
   "id": "messagepro-ex-1",
   "title": "success",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleMessage.success('保存成功')\">success</button>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleMessage.success('保存成功')\">success</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function SaveSuccess() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 success\n  return (\n    <>\n      <button onClick={() => host.current.success('保存成功')}>保存成功</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.success('保存成功')\">保存成功</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 success -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.success('保存成功')\">保存成功</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 success -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script>\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function SaveSuccess(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 success\n  return (\n    <>\n      <button onClick={() => host.current.success('保存成功')}>保存成功</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.success('保存成功')\">保存成功</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 success -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleMessagePro } 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('保存成功')\">保存成功</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 success -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/MessagePro.html L12 KoleMessage.success(\"保存成功\")；React 端调用形态取 MessagePro.jsx L19-27 useImperativeHandle 暴露的 success(c,d)，L6 duration 默认 3000，L32 渲染 .kole-message.is-success。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "messagepro-ex-2",
   "title": "error",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleMessage.error('操作失败')\">error</button>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleMessage.error('操作失败')\">error</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function SaveError() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 error\n  return (\n    <>\n      <button onClick={() => host.current.error('操作失败')}>操作失败</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.error('操作失败')\">操作失败</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 error -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMessagePro } 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    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script>\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function SaveError(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 error\n  return (\n    <>\n      <button onClick={() => host.current.error('操作失败')}>操作失败</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.error('操作失败')\">操作失败</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 error -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleMessagePro } 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    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/MessagePro.html L13 KoleMessage.error(\"操作失败\")；调用形态取 MessagePro.jsx L23 的 error(c,d)，渲染类名 is-error 见 L32。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "messagepro-ex-3",
   "title": "warning",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleMessage.warning('注意风险')\">warning</button>",
   "preview": {
    "show": [
     [
      2
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleMessage.warning('注意风险')\">warning</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function RiskWarning() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 warning\n  return (\n    <>\n      <button onClick={() => host.current.warning('注意风险')}>注意风险</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.warning('注意风险')\">注意风险</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 warning -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.warning('注意风险')\">注意风险</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 warning -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script>\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function RiskWarning(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 warning\n  return (\n    <>\n      <button onClick={() => host.current.warning('注意风险')}>注意风险</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.warning('注意风险')\">注意风险</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 warning -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleMessagePro } 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('注意风险')\">注意风险</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 warning -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/MessagePro.html L14 KoleMessage.warning(\"注意风险\")；调用形态取 MessagePro.jsx L24 的 warning(c,d)，渲染类名 is-warning 见 L32。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "messagepro-ex-4",
   "title": "info",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleMessage.info('已发送通知')\">info</button>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ],
     [
      5
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleMessage.info('已发送通知')\">info</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function NotifySent() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 info\n  return (\n    <>\n      <button onClick={() => host.current.info('已发送通知')}>已发送通知</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.info('已发送通知')\">已发送通知</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 info -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.info('已发送通知')\">已发送通知</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 info -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script>\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function NotifySent(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 info\n  return (\n    <>\n      <button onClick={() => host.current.info('已发送通知')}>已发送通知</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.info('已发送通知')\">已发送通知</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 info -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleMessagePro } 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('已发送通知')\">已发送通知</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 info -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/MessagePro.html L15 KoleMessage.info(\"已发送通知\")；调用形态取 MessagePro.jsx L25 的 info(c,d)，渲染类名 is-info 见 L32。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  },
  {
   "id": "messagepro-ex-5",
   "title": "loading",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button onclick=\"KoleMessage.loading('加载中…')\">loading</button>",
   "preview": {
    "show": [
     [
      4
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      5
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本向 body 追加节点"
   ],
   "source": "curated",
   "code": {
    "html": "<button onclick=\"KoleMessage.loading('加载中…')\">loading</button>",
    "jsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function LoadingTip() {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 loading\n  return (\n    <>\n      <button onClick={() => host.current.loading('加载中…')}>加载中…</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div>\n    <button @click=\"host.loading('加载中…')\">加载中…</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 loading -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue3';\n\nconst host = ref(null);\n</script>",
    "vue2": "<template>\n  <div>\n    <button @click=\"$refs.host.loading('加载中…')\">加载中…</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 loading -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script>\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro }\n};\n</script>",
    "tsx": "import { useRef } from 'react';\nimport { KoleMessagePro } from 'kole-ui/react';\n\nexport default function LoadingTip(): JSX.Element {\n  const host = useRef(null);\n  // 命令式 API：ref 拿到组件实例后调用 loading\n  return (\n    <>\n      <button onClick={() => host.current.loading('加载中…')}>加载中…</button>\n      <KoleMessagePro ref={host} duration={3000} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div>\n    <button @click=\"host.loading('加载中…')\">加载中…</button>\n    <!-- 命令式 API：模板 ref 拿到实例后调用 loading -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleMessagePro } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('loading');\nconst host = ref(null);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button @click=\"$refs.host.loading('加载中…')\">加载中…</button>\n    <!-- 命令式 API：ref 拿到实例后经 $refs 调用 loading -->\n    <KoleMessagePro ref=\"host\" :duration=\"3000\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleMessagePro } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleMessagePro },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/MessagePro.html L16 KoleMessage.loading(\"加载中…\")；调用形态取 MessagePro.jsx L26 的 loading(c,d)，图标表 L4 中 loading 为「…」，渲染类名 is-loading 见 L32。命令式调用需先经 ref 拿到组件实例（jsx `ref={host}` / vue `ref=\"host\"`）再调 success/error/warning/info/loading。"
  }
 ],
 "curated": true
}