43 lines
6.5 KiB
JSON
43 lines
6.5 KiB
JSON
{
|
||
"slug": "loadingoverlay",
|
||
"mode": "single",
|
||
"examples": [
|
||
{
|
||
"id": "loadingoverlay-ex-1",
|
||
"title": "切换全屏遮罩",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button onclick=\"toggleFull()\">切换全屏遮罩</button>\n<div class=\"kole-box\">\n 局部内容区域\n <button style=\"margin-top:8px\" onclick=\"toggleInline()\">切换局部遮罩</button>\n <div class=\"kole-loading-overlay is-inline\" id=\"inline\" role=\"status\" style=\"display:none\" aria-busy=\"true\">\n <div class=\"kole-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n <div class=\"kole-loading-text\" aria-busy=\"true\">加载中…</div>\n </div>\n</div>\n<div class=\"kole-loading-overlay is-dark\" id=\"full\" role=\"status\" style=\"display:none\" aria-busy=\"true\">\n <div class=\"kole-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n <div class=\"kole-loading-text\" aria-busy=\"true\">正在提交，请稍候</div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [],
|
||
"mode": "single"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button onclick=\"toggleFull()\">切换全屏遮罩</button>\n<div>\n 局部内容区域\n <button style=\"margin-top:8px\" onclick=\"toggleInline()\">切换局部遮罩</button>\n <div class=\"kole-loading-overlay is-inline\" role=\"status\" style=\"display:none\" aria-busy=\"true\">\n <div class=\"kole-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n <div class=\"kole-loading-text\" aria-busy=\"true\">加载中…</div>\n </div>\n</div>\n<div class=\"kole-loading-overlay is-dark\" role=\"status\" style=\"display:none\" aria-busy=\"true\">\n <div class=\"kole-loading-spinner\" role=\"status\" aria-busy=\"true\"></div>\n <div class=\"kole-loading-text\" aria-busy=\"true\">正在提交，请稍候</div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleLoadingOverlay } from 'kole-ui/react';\n\nexport default function SubmitDemo() {\n const [full, setFull] = useState(false);\n const [inline, setInline] = useState(true);\n return (\n <>\n <button onClick={() => setFull(true)}>切换全屏遮罩</button>\n <div style={{ position: 'relative', height: 200, padding: 16 }}>\n 局部内容区域\n <button onClick={() => setInline(!inline)}>切换局部遮罩</button>\n <KoleLoadingOverlay visible={inline} inline text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay visible={full} dark text=\"正在提交，请稍候\" />\n </>\n );\n}",
|
||
"vue3": "<template>\n <div>\n <button @click=\"full = true\">切换全屏遮罩</button>\n <div style=\"position: relative; height: 200px; padding: 16px\">\n 局部内容区域\n <button @click=\"inline = !inline\">切换局部遮罩</button>\n <KoleLoadingOverlay :visible=\"inline\" :inline=\"true\" text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay :visible=\"full\" :dark=\"true\" text=\"正在提交，请稍候\" />\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleLoadingOverlay } from 'kole-ui/vue3';\n\nconst full = ref(false);\nconst inline = ref(true);\n</script>",
|
||
"vue2": "<template>\n <div>\n <button @click=\"full = true\">切换全屏遮罩</button>\n <div style=\"position: relative; height: 200px; padding: 16px\">\n 局部内容区域\n <button @click=\"inline = !inline\">切换局部遮罩</button>\n <KoleLoadingOverlay :visible=\"inline\" :inline=\"true\" text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay :visible=\"full\" :dark=\"true\" text=\"正在提交，请稍候\" />\n </div>\n</template>\n\n<script>\nimport { KoleLoadingOverlay } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleLoadingOverlay },\n data() {\n return { full: false, inline: true };\n }\n};\n</script>",
|
||
"tsx": "import React, { useState } from 'react';\nimport { KoleLoadingOverlay } from 'kole-ui/react';\n\nconst inlineFrameStyle: React.CSSProperties = { position: 'relative', height: 200, padding: 16 };\n\nexport default function SubmitDemo(): JSX.Element {\n const [full, setFull] = useState<boolean>(false);\n const [inline, setInline] = useState<boolean>(true);\n return (\n <>\n <button onClick={() => setFull(true)}>切换全屏遮罩</button>\n <div style={inlineFrameStyle}>\n 局部内容区域\n <button onClick={() => setInline(!inline)}>切换局部遮罩</button>\n <KoleLoadingOverlay visible={inline} inline text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay visible={full} dark text=\"正在提交，请稍候\" />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <div>\n <button @click=\"full = true\">切换全屏遮罩</button>\n <div style=\"position: relative; height: 200px; padding: 16px\">\n 局部内容区域\n <button @click=\"inline = !inline\">切换局部遮罩</button>\n <KoleLoadingOverlay :visible=\"inline\" :inline=\"true\" text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay :visible=\"full\" :dark=\"true\" text=\"正在提交，请稍候\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleLoadingOverlay } from 'kole-ui/vue3';\n\nconst full = ref<boolean>(false);\nconst inline = ref<boolean>(true);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <button @click=\"full = true\">切换全屏遮罩</button>\n <div style=\"position: relative; height: 200px; padding: 16px\">\n 局部内容区域\n <button @click=\"inline = !inline\">切换局部遮罩</button>\n <KoleLoadingOverlay :visible=\"inline\" :inline=\"true\" text=\"加载中…\" />\n </div>\n <KoleLoadingOverlay :visible=\"full\" :dark=\"true\" text=\"正在提交，请稍候\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLoadingOverlay } from 'kole-ui/vue2';\n\nexport default Vue.extend({\n components: { KoleLoadingOverlay },\n data(): { full: boolean; inline: boolean } {\n return { full: false, inline: true };\n },\n});\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/LoadingOverlay.html L15 的 toggleFull()、L18 的 toggleInline() 与 L19-28 两处遮罩标记（局部 is-inline +「加载中…」，全屏 is-dark +「正在提交，请稍候」，均由 display 切换可见）；prop 名取自 LoadingOverlay.jsx L4（visible/text/inline/dark），visible=false 返回 null。"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|