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