144 lines
11 KiB
JSON
144 lines
11 KiB
JSON
{
|
|
"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"
|
|
]
|
|
}
|
|
]
|
|
}
|