{
 "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
}