{
 "slug": "fullscreenmodal",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "fullscreenmodal-ex-1",
   "title": "基础信息",
   "titleSrc": "demo",
   "desc": "",
   "html": "<p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>",
   "preview": {
    "show": [
     [
      1,
      1,
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      1,
      0
     ],
     [
      1,
      2
     ],
     [
      1,
      1,
      0
     ],
     [
      1,
      1,
      2
     ],
     [
      1,
      1,
      3
     ],
     [
      1,
      1,
      4
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>",
    "jsx": "import { useState } from 'react';\nimport { KoleFullScreenModal } from 'kole-ui/react';\n\nfunction Demo() {\n  const [visible, setVisible] = useState(false);\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>打开全屏编辑</button>\n      <KoleFullScreenModal\n        visible={visible}\n        title=\"商品编辑（全屏）\"\n        onCancel={() => setVisible(false)}\n        onOk={() => setVisible(false)}\n      >\n        <h3>基础信息</h3>\n        <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n        <p>内容区可滚动，底部固定操作栏始终可见。</p>\n      </KoleFullScreenModal>\n    </>\n  );\n}",
    "vue3": "<template>\n  <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n  <KoleFullScreenModal\n    :visible=\"visible\"\n    title=\"商品编辑（全屏）\"\n    @cancel=\"visible = false\"\n    @ok=\"visible = false\"\n  >\n    <h3>基础信息</h3>\n    <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n    <p>内容区可滚动，底部固定操作栏始终可见。</p>\n  </KoleFullScreenModal>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleFullScreenModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
    "vue2": "<template>\n  <div>\n    <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n    <KoleFullScreenModal\n      :visible=\"visible\"\n      title=\"商品编辑（全屏）\"\n      @cancel=\"visible = false\"\n      @ok=\"visible = false\"\n    >\n      <h3>基础信息</h3>\n      <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n      <p>内容区可滚动，底部固定操作栏始终可见。</p>\n    </KoleFullScreenModal>\n  </div>\n</template>\n\n<script>\nimport { KoleFullScreenModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleFullScreenModal },\n  data() {\n    return { visible: false };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleFullScreenModal } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>打开全屏编辑</button>\n      <KoleFullScreenModal\n        visible={visible}\n        title=\"商品编辑（全屏）\"\n        onCancel={() => setVisible(false)}\n        onOk={() => setVisible(false)}\n      >\n        <h3>基础信息</h3>\n        <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n        <p>内容区可滚动，底部固定操作栏始终可见。</p>\n      </KoleFullScreenModal>\n    </>\n  );\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n  <KoleFullScreenModal\n    :visible=\"visible\"\n    title=\"商品编辑（全屏）\"\n    @cancel=\"visible = false\"\n    @ok=\"visible = false\"\n  >\n    <h3>基础信息</h3>\n    <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n    <p>内容区可滚动，底部固定操作栏始终可见。</p>\n  </KoleFullScreenModal>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFullScreenModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n    <KoleFullScreenModal\n      :visible=\"visible\"\n      title=\"商品编辑（全屏）\"\n      @cancel=\"visible = false\"\n      @ok=\"visible = false\"\n    >\n      <h3>基础信息</h3>\n      <p>此处可放置复杂表单、富文本编辑、多区块配置等内容。全屏模式便于处理信息密度高的任务。</p>\n      <p>内容区可滚动，底部固定操作栏始终可见。</p>\n    </KoleFullScreenModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFullScreenModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleFullScreenModal },\n  data(): Record<string, unknown> {\n    return { visible: false };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/FullScreenModal.html:21-28 标题栏 title='商品编辑（全屏）' 与正文首段（基础信息区块）；:39-44 的 open/close/cancel/ok 事件对应 visible 与 onCancel/onOk"
   ]
  },
  {
   "id": "fullscreenmodal-ex-2",
   "title": "详细描述",
   "titleSrc": "demo",
   "desc": "",
   "html": "<p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>",
   "preview": {
    "show": [
     [
      1,
      1,
      4
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ],
     [
      1,
      0
     ],
     [
      1,
      2
     ],
     [
      1,
      1,
      0
     ],
     [
      1,
      1,
      1
     ],
     [
      1,
      1,
      2
     ],
     [
      1,
      1,
      3
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>",
    "jsx": "import { useState } from 'react';\nimport { KoleFullScreenModal } from 'kole-ui/react';\n\nfunction Demo() {\n  const [visible, setVisible] = useState(false);\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>打开全屏编辑</button>\n      <KoleFullScreenModal\n        visible={visible}\n        title=\"商品编辑（全屏）\"\n        onCancel={() => setVisible(false)}\n        onOk={() => setVisible(false)}\n      >\n        <h3>详细描述</h3>\n        <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n      </KoleFullScreenModal>\n    </>\n  );\n}",
    "vue3": "<template>\n  <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n  <KoleFullScreenModal\n    :visible=\"visible\"\n    title=\"商品编辑（全屏）\"\n    @cancel=\"visible = false\"\n    @ok=\"visible = false\"\n  >\n    <h3>详细描述</h3>\n    <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n  </KoleFullScreenModal>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleFullScreenModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
    "vue2": "<template>\n  <div>\n    <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n    <KoleFullScreenModal\n      :visible=\"visible\"\n      title=\"商品编辑（全屏）\"\n      @cancel=\"visible = false\"\n      @ok=\"visible = false\"\n    >\n      <h3>详细描述</h3>\n      <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n    </KoleFullScreenModal>\n  </div>\n</template>\n\n<script>\nimport { KoleFullScreenModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleFullScreenModal },\n  data() {\n    return { visible: false };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleFullScreenModal } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>打开全屏编辑</button>\n      <KoleFullScreenModal\n        visible={visible}\n        title=\"商品编辑（全屏）\"\n        onCancel={() => setVisible(false)}\n        onOk={() => setVisible(false)}\n      >\n        <h3>详细描述</h3>\n        <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n      </KoleFullScreenModal>\n    </>\n  );\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n  <KoleFullScreenModal\n    :visible=\"visible\"\n    title=\"商品编辑（全屏）\"\n    @cancel=\"visible = false\"\n    @ok=\"visible = false\"\n  >\n    <h3>详细描述</h3>\n    <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n  </KoleFullScreenModal>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFullScreenModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button type=\"button\" @click=\"visible = true\">打开全屏编辑</button>\n    <KoleFullScreenModal\n      :visible=\"visible\"\n      title=\"商品编辑（全屏）\"\n      @cancel=\"visible = false\"\n      @ok=\"visible = false\"\n    >\n      <h3>详细描述</h3>\n      <p>支持长文、图片、视频等富媒体内容。关闭弹窗时可通过底部按钮提交或取消。</p>\n    </KoleFullScreenModal>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFullScreenModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleFullScreenModal },\n  data(): Record<string, unknown> {\n    return { visible: false };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/FullScreenModal.html:29-30 正文第二块（详细描述）与 :32-35 底部取消/保存按钮；组件实现见 frameworks/FullScreenModal.jsx 的 visible/title/onCancel/onOk"
   ]
  }
 ]
}