167 lines
13 KiB
JSON
167 lines
13 KiB
JSON
{
|
||
"slug": "modal",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "modal-ex-1",
|
||
"title": "打开默认对话框",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"btn-base btn-primary\" onclick=\"openModal('default')\">打开默认对话框</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn-base btn-primary\" onclick=\"openModal('default')\">打开默认对话框</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\nexport default function DefaultModal() {\n const [open, setOpen] = useState(false);\n return (\n <>\n <button onClick={() => setOpen(true)}>打开默认对话框</button>\n <KoleModal\n open={open}\n title=\"提示\"\n size=\"default\"\n onClose={() => setOpen(false)}\n onOk={() => setOpen(false)}\n >\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3": "<template>\n <div>\n <button @click=\"visible = true\">打开默认对话框</button>\n <KoleModal v-model:visible=\"visible\" title=\"提示\" size=\"default\" @ok=\"visible = false\">\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
|
||
"vue2": "<template>\n <div>\n <button @click=\"visible = true\">打开默认对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" size=\"default\" @ok=\"visible = false\">\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script>\nimport { KoleModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleModal },\n data() {\n return { visible: false };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default function DefaultModal(): JSX.Element {\n const [open, setOpen] = useState<boolean>(false);\n const size: ModalSize = 'default';\n\n function close(): void {\n setOpen(false);\n }\n\n return (\n <>\n <button onClick={() => setOpen(true)}>打开默认对话框</button>\n <KoleModal open={open} title=\"提示\" size={size} onClose={close} onOk={close}>\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <div>\n <button @click=\"visible = true\">打开默认对话框</button>\n <KoleModal\n v-model:visible=\"visible\"\n title=\"提示\"\n :size=\"size\"\n @ok=\"visible = false\"\n >\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nconst size: ModalSize = 'default';\nconst visible = ref<boolean>(false);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <button @click=\"visible = true\">打开默认对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" :size=\"size\" @ok=\"visible = false\">\n 这是默认尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleModal } from 'kole-ui/vue2';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default Vue.extend({\n components: { KoleModal },\n data(): { size: ModalSize; visible: boolean } {\n return { size: 'default', visible: false };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Modal.html L43 openModal(\"default\") 与 L55-67 渲染的 kole-modal--default（标题「提示」、正文「这是默认尺寸对话框的内容区…」、右下角取消/确定）；受控 prop 取自 Modal.jsx L11-24（open/title/size/closable/maskClosable/hideFooter/cancelText/okText/onClose/onOk）与 Modal.vue3.vue L20-28（visible/title/size）。"
|
||
},
|
||
{
|
||
"id": "modal-ex-2",
|
||
"title": "打开大对话框",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"btn-base btn-ghost\" style=\"margin-left:8px\" onclick=\"openModal('large')\">打开大对话框</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn-base btn-ghost\" style=\"margin-left:8px\" onclick=\"openModal('large')\">打开大对话框</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\nexport default function LargeModal() {\n const [open, setOpen] = useState(false);\n return (\n <>\n <button onClick={() => setOpen(true)}>打开大对话框</button>\n <KoleModal\n open={open}\n title=\"提示\"\n size=\"large\"\n onClose={() => setOpen(false)}\n onOk={() => setOpen(false)}\n >\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3": "<template>\n <div>\n <button @click=\"visible = true\">打开大对话框</button>\n <KoleModal v-model:visible=\"visible\" title=\"提示\" size=\"large\" @ok=\"visible = false\">\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
|
||
"vue2": "<template>\n <div>\n <button @click=\"visible = true\">打开大对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" size=\"large\" @ok=\"visible = false\">\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script>\nimport { KoleModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleModal },\n data() {\n return { visible: false };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default function LargeModal(): JSX.Element {\n const [open, setOpen] = useState<boolean>(false);\n const size: ModalSize = 'large';\n\n function close(): void {\n setOpen(false);\n }\n\n return (\n <>\n <button onClick={() => setOpen(true)}>打开大对话框</button>\n <KoleModal open={open} title=\"提示\" size={size} onClose={close} onOk={close}>\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <div>\n <button @click=\"visible = true\">打开大对话框</button>\n <KoleModal\n v-model:visible=\"visible\"\n title=\"提示\"\n :size=\"size\"\n @ok=\"visible = false\"\n >\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nconst size: ModalSize = 'large';\nconst visible = ref<boolean>(false);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <button @click=\"visible = true\">打开大对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" :size=\"size\" @ok=\"visible = false\">\n 这是大尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleModal } from 'kole-ui/vue2';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default Vue.extend({\n components: { KoleModal },\n data(): { size: ModalSize; visible: boolean } {\n return { size: 'large', visible: false };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Modal.html L44 openModal(\"large\")、L55 类名 kole-modal--large 与 L61 正文「这是大尺寸对话框的内容区…」；size 取值 small|default|large 见 Modal.jsx L14 注释与 Modal.vue2.vue L24 validator。"
|
||
},
|
||
{
|
||
"id": "modal-ex-3",
|
||
"title": "打开小对话框",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"btn-base btn-ghost\" style=\"margin-left:8px\" onclick=\"openModal('small')\">打开小对话框</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn-base btn-ghost\" style=\"margin-left:8px\" onclick=\"openModal('small')\">打开小对话框</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\nexport default function SmallModal() {\n const [open, setOpen] = useState(false);\n return (\n <>\n <button onClick={() => setOpen(true)}>打开小对话框</button>\n <KoleModal\n open={open}\n title=\"提示\"\n size=\"small\"\n onClose={() => setOpen(false)}\n onOk={() => setOpen(false)}\n >\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3": "<template>\n <div>\n <button @click=\"visible = true\">打开小对话框</button>\n <KoleModal v-model:visible=\"visible\" title=\"提示\" size=\"small\" @ok=\"visible = false\">\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
|
||
"vue2": "<template>\n <div>\n <button @click=\"visible = true\">打开小对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" size=\"small\" @ok=\"visible = false\">\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script>\nimport { KoleModal } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleModal },\n data() {\n return { visible: false };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleModal } from 'kole-ui/react';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default function SmallModal(): JSX.Element {\n const [open, setOpen] = useState<boolean>(false);\n const size: ModalSize = 'small';\n\n function close(): void {\n setOpen(false);\n }\n\n return (\n <>\n <button onClick={() => setOpen(true)}>打开小对话框</button>\n <KoleModal open={open} title=\"提示\" size={size} onClose={close} onOk={close}>\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <div>\n <button @click=\"visible = true\">打开小对话框</button>\n <KoleModal\n v-model:visible=\"visible\"\n title=\"提示\"\n :size=\"size\"\n @ok=\"visible = false\"\n >\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleModal } from 'kole-ui/vue3';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nconst size: ModalSize = 'small';\nconst visible = ref<boolean>(false);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <button @click=\"visible = true\">打开小对话框</button>\n <KoleModal :visible.sync=\"visible\" title=\"提示\" :size=\"size\" @ok=\"visible = false\">\n 这是小尺寸对话框的内容区，可放置表单或说明文字。\n </KoleModal>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleModal } from 'kole-ui/vue2';\n\ntype ModalSize = 'small' | 'default' | 'large';\n\nexport default Vue.extend({\n components: { KoleModal },\n data(): { size: ModalSize; visible: boolean } {\n return { size: 'small', visible: false };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Modal.html L45 openModal(\"small\")、L55 类名 kole-modal--small 与 L61 正文「这是小尺寸对话框的内容区…」；三档宽度 320/480/680 见 Modal.html L22-24 与 contract.structure.width。"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|