{
 "slug": "watermark",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "watermark-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-box\">\n  <div class=\"kole-watermark\" id=\"wm\"></div>\n  <div class=\"kole-watermark is-fullscreen\" id=\"wmFull\" title=\"全屏水印演示\"></div>\n  <h3 style=\"position:relative;color:var(--color-text-title)\">机密文档</h3>\n  <p style=\"position:relative;color:var(--color-text-body)\">该区域内容受水印保护，请勿外传。</p>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-watermark\"></div>\n<div class=\"kole-watermark is-fullscreen\" id=\"wmFull\" title=\"全屏水印演示\"></div>\n<h3 style=\"position:relative;color:var(--color-text-title)\">机密文档</h3>\n<p style=\"position:relative;color:var(--color-text-body)\">该区域内容受水印保护，请勿外传。</p>",
    "jsx": "import { KoleWatermark } from 'kole-ui/react';\n\n<>\n  {/* 局部水印：贴合宿主容器（覆盖区域内的内容） */}\n  <KoleWatermark text=\"Kole UI\" color=\"rgba(0,0,0,0.10)\" fontSize={14} rotate={-22} gap={160} />\n  {/* 全屏水印：铺满整页 */}\n  <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n</>",
    "vue3": "<template>\n  <div style=\"position: relative; overflow: hidden\">\n    <KoleWatermark\n      text=\"Kole UI\"\n      color=\"rgba(0,0,0,0.10)\"\n      :font-size=\"14\"\n      :rotate=\"-22\"\n      :gap=\"160\"\n    />\n    <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n  </div>\n</template>\n\n<script setup>\nimport { KoleWatermark } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div style=\"position: relative; overflow: hidden\">\n    <KoleWatermark\n      text=\"Kole UI\"\n      color=\"rgba(0,0,0,0.10)\"\n      :font-size=\"14\"\n      :rotate=\"-22\"\n      :gap=\"160\"\n    />\n    <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n  </div>\n</template>\n\n<script>\nimport { KoleWatermark } from 'kole-ui/vue2';\nexport default { components: { KoleWatermark } };\n</script>",
    "tsx": "import { KoleWatermark } from 'kole-ui/react';\n\nexport default function KoleWatermarkDemo(): JSX.Element {\n  return (\n    <>\n      {/* 局部水印：贴合宿主容器（覆盖区域内的内容） */}\n      <KoleWatermark text=\"Kole UI\" color=\"rgba(0,0,0,0.10)\" fontSize={14} rotate={-22} gap={160} />\n      {/* 全屏水印：铺满整页 */}\n      <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <div style=\"position: relative; overflow: hidden\">\n    <KoleWatermark\n      text=\"Kole UI\"\n      color=\"rgba(0,0,0,0.10)\"\n      :font-size=\"14\"\n      :rotate=\"-22\"\n      :gap=\"160\"\n    />\n    <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleWatermark } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\n\n</script>",
    "vue2ts": "<template>\n\n  <div style=\"position: relative; overflow: hidden\">\n    <KoleWatermark\n      text=\"Kole UI\"\n      color=\"rgba(0,0,0,0.10)\"\n      :font-size=\"14\"\n      :rotate=\"-22\"\n      :gap=\"160\"\n    />\n    <KoleWatermark fullscreen text=\"机密文档 · 禁止外传\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleWatermark } from 'kole-ui/vue2';\n\nexport default { components: { KoleWatermark },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Watermark.html 第 26 行 buildWatermark(\"Kole UI\", \"rgba(0,0,0,0.10)\", 14, -22, 160) 的五个实参，逐项对应组件的 text / color / fontSize / rotate / gap；第 14 行第二个 .kole-watermark 带 is-fullscreen 类，对应 fullscreen。",
    "prop 名与默认值见 frameworks/Watermark.jsx 第 4-6 行参数表与 frameworks/Watermark.vue3.vue 第 7-14 行 defineProps；覆盖范围 page|area 见 site/details/watermark.json 的 contract.dims。"
   ]
  }
 ]
}