243 lines
17 KiB
JSON
243 lines
17 KiB
JSON
{
|
||
"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
|
||
}
|