{
 "slug": "signaturepad",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "signaturepad-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">SignaturePad 签名板</h2>\n  <p class=\"kole-desc\">手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-sign\" id=\"sign\">\n      <div class=\"kole-sign-pad\">\n        <canvas class=\"kole-sign-canvas\" id=\"canvas\"></canvas>\n        <div class=\"kole-sign-placeholder\" id=\"ph\">请在此处签名</div>\n      </div>\n      <div class=\"kole-sign-actions\">\n        <button class=\"kole-btn\" id=\"undo\">撤销</button>\n        <button class=\"kole-btn\" id=\"clear\">清除</button>\n        <button class=\"kole-btn kole-btn--primary\" id=\"save\">保存</button>\n        <span class=\"kole-sign-preview\" id=\"preview\"></span>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>SignaturePad 签名板</h2>\n<p>手写签名区域，支持鼠标与触屏，可撤销、清除、导出图片。</p>\n<div class=\"kole-sign\" id=\"sign\">\n  <div class=\"kole-sign-pad\">\n    <canvas class=\"kole-sign-canvas\"></canvas>\n    <div class=\"kole-sign-placeholder\">请在此处签名</div>\n  </div>\n  <div class=\"kole-sign-actions\">\n    <button>撤销</button>\n    <button>清除</button>\n    <button>保存</button>\n    <span class=\"kole-sign-preview\"></span>\n  </div>\n</div>",
    "jsx": "import { KoleSignaturePad } from 'kole-ui/react';\n\n// 组件自持画布与「撤销 / 清除 / 保存」三个动作（SignaturePad.jsx 第 69-91 行），\n// 对外没有 props / emit / slot；画布尺寸随容器自适应（SignaturePad.css 第 4 行，高 180px）。\n// key 是 React 协调用的框架属性，也是该组件唯一可写的合法属性。\nexport default function ContractSignature() {\n  return <KoleSignaturePad key=\"contract-sign\" />;\n}",
    "vue3": "<script setup>\nimport { KoleSignaturePad } from 'kole-ui/vue3';\n</script>\n\n<template>\n  <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue3.vue 第 1-13 行） -->\n  <KoleSignaturePad key=\"contract-sign\" />\n</template>",
    "vue2": "<template>\n  <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue2.vue 第 1-14 行） -->\n  <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script>\nimport { KoleSignaturePad } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSignaturePad }\n};\n</script>",
    "tsx": "import { KoleSignaturePad } from 'kole-ui/react';\n\n// 组件自持画布与「撤销 / 清除 / 保存」三个动作（SignaturePad.jsx 第 69-91 行），\n// 对外没有 props / emit / slot；画布尺寸随容器自适应（SignaturePad.css 第 4 行，高 180px）。\n// key 是 React 协调用的框架属性，也是该组件唯一可写的合法属性。\nexport default function ContractSignature(): JSX.Element {\n  return <KoleSignaturePad key=\"contract-sign\" />;\n}",
    "vue3ts": "<template>\n\n  <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue3.vue 第 1-13 行） -->\n  <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSignaturePad } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\n\n</script>",
    "vue2ts": "<template>\n\n  <!-- 组件自带画布与「撤销 / 清除 / 保存」，对外没有 props / emit / slot（SignaturePad.vue2.vue 第 1-14 行） -->\n  <KoleSignaturePad key=\"contract-sign\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSignaturePad } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSignaturePad },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/SignaturePad.html 第 16-27 行的真实结构：画布 .kole-sign-canvas + 占位「请在此处签名」+「撤销 / 清除 / 保存」三个按钮，第 49-70 行是鼠标与触屏绘制、撤销、清除、保存（回显「已导出（W×H）」）的实现；四端实现对应 frameworks/SignaturePad.jsx 第 69-91 行、SignaturePad.vue3.vue 第 1-13 行。",
    "该组件对外没有 props / emit / slot（site/details/signaturepad.json 的 contract.dims 只有 state、device 两个内部状态轴，四端均未暴露对应 prop），所以调用形态就是不带业务属性的空属性调用；片段只补一个白名单内的框架属性 key（React/Vue 协调用），以免与生成器兜底的零信息量骨架同形。"
   ]
  }
 ]
}