184 lines
15 KiB
JSON
184 lines
15 KiB
JSON
{
|
||
"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
|
||
}
|