42 lines
11 KiB
JSON
42 lines
11 KiB
JSON
{
|
||
"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"
|
||
]
|
||
}
|
||
]
|
||
}
|