{
 "slug": "imagepreview",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "imagepreview-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div id=\"thumbs\"></div>\n<div class=\"kole-imgprev-mask\" id=\"mask\" style=\"display:none\" aria-modal=\"true\">\n  <button class=\"kole-imgprev-close\" id=\"close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n  <button class=\"kole-imgprev-arrow prev\" id=\"prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n  <img class=\"kole-imgprev-img\" id=\"big\" aria-modal=\"true\" />\n  <button class=\"kole-imgprev-arrow next\" id=\"next\" role=\"dialog\" aria-modal=\"true\">›</button>\n  <div class=\"kole-imgprev-count\" id=\"count\" role=\"dialog\" aria-modal=\"true\"></div>\n  <div class=\"kole-imgprev-thumbs\" id=\"strip\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ],
     [
      1
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div></div>\n<div class=\"kole-imgprev-mask\" style=\"display:none\" aria-modal=\"true\">\n  <button class=\"kole-imgprev-close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n  <button class=\"kole-imgprev-arrow prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n  <img class=\"kole-imgprev-img\" aria-modal=\"true\" />\n  <button class=\"kole-imgprev-arrow next\" role=\"dialog\" aria-modal=\"true\">›</button>\n  <div class=\"kole-imgprev-count\" role=\"dialog\" aria-modal=\"true\"></div>\n  <div class=\"kole-imgprev-thumbs\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleImagePreview } from 'kole-ui/react';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n      '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n      '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n      '</linearGradient></defs>' +\n      '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n      '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n      label +\n      '</text></svg>'\n  );\n\nconst IMAGES = [\n  svg('#2F54EB', '#1D39C4', '图 1'),\n  svg('#13C2C2', '#08979C', '图 2'),\n  svg('#722ED1', '#531DAB', '图 3'),\n  svg('#8C5A00', '#D46B08', '图 4'),\n];\n\nfunction Demo() {\n  const [visible, setVisible] = useState(false);\n  const [index, setIndex] = useState(0);\n  return (\n    <>\n      {IMAGES.map((src, i) => (\n        <img\n          key={i}\n          src={src}\n          width=\"80\"\n          alt={'图 ' + (i + 1)}\n          onClick={() => {\n            setIndex(i);\n            setVisible(true);\n          }}\n        />\n      ))}\n      <KoleImagePreview\n        images={IMAGES}\n        visible={visible}\n        index={index}\n        onClose={() => setVisible(false)}\n        onChange={setIndex}\n      />\n    </>\n  );\n}",
    "vue3": "<template>\n  <img\n    v-for=\"(src, i) in images\"\n    :key=\"i\"\n    :src=\"src\"\n    width=\"80\"\n    :alt=\"'图 ' + (i + 1)\"\n    @click=\"open(i)\"\n  />\n  <KoleImagePreview\n    :images=\"images\"\n    :visible=\"visible\"\n    :index=\"index\"\n    @close=\"visible = false\"\n    @change=\"index = $event\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleImagePreview } from 'kole-ui/vue3';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n      '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n      '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n      '</linearGradient></defs>' +\n      '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n      '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n      label +\n      '</text></svg>'\n  );\n\nconst images = [\n  svg('#2F54EB', '#1D39C4', '图 1'),\n  svg('#13C2C2', '#08979C', '图 2'),\n  svg('#722ED1', '#531DAB', '图 3'),\n  svg('#8C5A00', '#D46B08', '图 4'),\n];\nconst visible = ref(false);\nconst index = ref(0);\nfunction open(i) {\n  index.value = i;\n  visible.value = true;\n}\n</script>",
    "vue2": "<template>\n  <div>\n    <img\n      v-for=\"(src, i) in images\"\n      :key=\"i\"\n      :src=\"src\"\n      width=\"80\"\n      :alt=\"'图 ' + (i + 1)\"\n      @click=\"open(i)\"\n    />\n    <KoleImagePreview\n      :images=\"images\"\n      :visible=\"visible\"\n      :index=\"index\"\n      @close=\"visible = false\"\n      @change=\"index = $event\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KoleImagePreview } from 'kole-ui/vue2';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nvar svg = function (c1, c2, label) {\n  return (\n    'data:image/svg+xml;utf8,' +\n    encodeURIComponent(\n      '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n        '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n        '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n        '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n        '</linearGradient></defs>' +\n        '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n        '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n        label +\n        '</text></svg>'\n    )\n  );\n};\n\nexport default {\n  components: { KoleImagePreview },\n  data() {\n    return {\n      images: [\n        svg('#2F54EB', '#1D39C4', '图 1'),\n        svg('#13C2C2', '#08979C', '图 2'),\n        svg('#722ED1', '#531DAB', '图 3'),\n        svg('#8C5A00', '#D46B08', '图 4'),\n      ],\n      visible: false,\n      index: 0,\n    };\n  },\n  methods: {\n    open(i) {\n      this.index = i;\n      this.visible = true;\n    },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleImagePreview } from 'kole-ui/react';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n      '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n      '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n      '</linearGradient></defs>' +\n      '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n      '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n      label +\n      '</text></svg>'\n  );\n\nconst IMAGES = [\n  svg('#2F54EB', '#1D39C4', '图 1'),\n  svg('#13C2C2', '#08979C', '图 2'),\n  svg('#722ED1', '#531DAB', '图 3'),\n  svg('#8C5A00', '#D46B08', '图 4'),\n];\n\nfunction Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n  const [index, setIndex] = useState<number>(0);\n  return (\n    <>\n      {IMAGES.map((src, i) => (\n        <img\n          key={i}\n          src={src}\n          width=\"80\"\n          alt={'图 ' + (i + 1)}\n          onClick={() => {\n            setIndex(i);\n            setVisible(true);\n          }}\n        />\n      ))}\n      <KoleImagePreview\n        images={IMAGES}\n        visible={visible}\n        index={index}\n        onClose={() => setVisible(false)}\n        onChange={setIndex}\n      />\n    </>\n  );\n}\n\nexport default svg;",
    "vue3ts": "<template>\n\n  <img\n    v-for=\"(src, i) in images\"\n    :key=\"i\"\n    :src=\"src\"\n    width=\"80\"\n    :alt=\"'图 ' + (i + 1)\"\n    @click=\"open(i)\"\n  />\n  <KoleImagePreview\n    :images=\"images\"\n    :visible=\"visible\"\n    :index=\"index\"\n    @close=\"visible = false\"\n    @change=\"index = $event\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleImagePreview } from 'kole-ui/vue3';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n      '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n      '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n      '</linearGradient></defs>' +\n      '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n      '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n      label +\n      '</text></svg>'\n  );\n\nconst images = [\n  svg('#2F54EB', '#1D39C4', '图 1'),\n  svg('#13C2C2', '#08979C', '图 2'),\n  svg('#722ED1', '#531DAB', '图 3'),\n  svg('#8C5A00', '#D46B08', '图 4'),\n];\nconst visible = ref<boolean>(false);\nconst index = ref<number>(0);\nfunction open(i) {\n  index.value = i;\n  visible.value = true;\n}\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <img\n      v-for=\"(src, i) in images\"\n      :key=\"i\"\n      :src=\"src\"\n      width=\"80\"\n      :alt=\"'图 ' + (i + 1)\"\n      @click=\"open(i)\"\n    />\n    <KoleImagePreview\n      :images=\"images\"\n      :visible=\"visible\"\n      :index=\"index\"\n      @close=\"visible = false\"\n      @change=\"index = $event\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleImagePreview } from 'kole-ui/vue2';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nvar svg = function (c1, c2, label) {\n  return (\n    'data:image/svg+xml;utf8,' +\n    encodeURIComponent(\n      '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n        '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n        '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n        '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n        '</linearGradient></defs>' +\n        '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n        '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n        label +\n        '</text></svg>'\n    )\n  );\n};\n\nexport default {\n  components: { KoleImagePreview },\n  data(): Record<string, unknown> {\n    return {\n      images: [\n        svg('#2F54EB', '#1D39C4', '图 1'),\n        svg('#13C2C2', '#08979C', '图 2'),\n        svg('#722ED1', '#531DAB', '图 3'),\n        svg('#8C5A00', '#D46B08', '图 4'),\n      ],\n      visible: false,\n      index: 0,\n    };\n  },\n  methods: {\n    open(i) {\n      this.index = i;\n      this.visible = true;\n    },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ImagePreview.html:24-30 的 svg() 造图函数与 4 张图 IMGS（#2F54EB/#13C2C2/#722ED1/#8C5A00）；:41-56 的 cur/prev/next/hide 对应 props index + onClose/onChange"
   ]
  }
 ]
}