{
 "curated": true,
 "slug": "qrcode",
 "mode": "single",
 "examples": [
  {
   "id": "qrcode-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-panel\">\n  <div class=\"kole-qrcode\" id=\"app\" role=\"img\"></div>\n  <div style=\"margin-top:12px\">\n    <input id=\"val\" style=\"width:200px;border:1px solid var(--color-border);border-radius:6px;padding:6px 8px;\" value=\"https://kole.admin\" />\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-qrcode\" role=\"img\"></div>\n<div style=\"margin-top:12px\">\n  <input style=\"width:200px;border:1px solid var(--color-border);border-radius:6px;padding:6px 8px;\" value=\"https://kole.admin\" />\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleQRCode } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [value, setValue] = useState('https://kole.admin');\n\n  return (\n    <>\n      <KoleQRCode value={value} size={200} color=\"#1F2329\" showText />\n      <input value={value} placeholder=\"输入二维码内容\" onChange={(e) => setValue(e.target.value)} />\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n  <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleQRCode } from 'kole-ui/vue3';\n\nconst value = ref('https://kole.admin');\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n    <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n  </div>\n</template>\n\n<script>\nimport { KoleQRCode } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleQRCode },\n  data() {\n    return { value: 'https://kole.admin' };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleQRCode } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [value, setValue] = useState<string>('https://kole.admin');\n\n  return (\n    <>\n      <KoleQRCode value={value} size={200} color=\"#1F2329\" showText />\n      <input value={value} placeholder=\"输入二维码内容\" onChange={(e) => setValue(e.target.value)} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n  <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleQRCode } from 'kole-ui/vue3';\n\nconst value = ref<string>('https://kole.admin');\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleQRCode :value=\"value\" :size=\"200\" color=\"#1F2329\" :show-text=\"true\" />\n    <input v-model=\"value\" placeholder=\"输入二维码内容\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleQRCode } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleQRCode },\n  data(): Record<string, unknown> {\n    return { value: 'https://kole.admin' };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/QRCode.html:13 的 kole-qrcode 与 :14 输入框初值 value=\"https://kole.admin\"（:38-45 随输入重绘）；size=200、color='#1F2329'、showText 对齐 frameworks/QRCode.jsx 的参数默认值，size 亦见 site/details/qrcode.json contract.dims.size"
  }
 ]
}