70 lines
3.1 KiB
JSON
70 lines
3.1 KiB
JSON
{
|
||
"slug": "watermark",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 水印：页内脚本拼 SVG 背景图赋给容器，示例同时给出局部与全屏两种用法。",
|
||
"usage": [
|
||
"容器写 .kole-watermark，脚本用 buildWatermark 生成 data URL 并赋给 style.backgroundImage。",
|
||
"参数是函数实参而不是属性：buildWatermark(文字, 颜色, 字号, 角度, 间距)，示例调用为 Kole UI / rgba(0,0,0,0.10) / 14 / -22 / 160。",
|
||
"全屏水印用 .kole-watermark.is-fullscreen 组合类，示例里两个容器并存以对比效果。",
|
||
"水印容器被放在 .kole-box 这类相对定位盒子里，文字内容用 position:relative 压在水印之上。"
|
||
],
|
||
"bestPractices": [
|
||
"水印容器与内容必须分层：内容节点要加 position:relative（示例的内联样式即如此），否则会被水印背景盖住。",
|
||
"容器需要显式高度：示例的 .kole-box 给了 height:240px，空容器不会显示水印。",
|
||
"本页 CSS 通过相对路径引用同目录的 Watermark.css，复制结构时要保留样式文件引用。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-watermark、全屏组合类 is-fullscreen）加页内脚本函数 buildWatermark 的参数，参数以函数实参而非属性传入。",
|
||
"table": [
|
||
{
|
||
"name": "kole-watermark",
|
||
"type": "基础类名",
|
||
"desc": "水印容器，脚本给它设置背景图"
|
||
},
|
||
{
|
||
"name": "is-fullscreen",
|
||
"type": "状态类名",
|
||
"desc": "与 .kole-watermark 组合，把水印铺满整屏"
|
||
},
|
||
{
|
||
"name": "kole-box",
|
||
"type": "示例容器类名",
|
||
"desc": "演示页里的相对定位盒子，给水印提供高度与边界"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "原生属性",
|
||
"desc": "示例给全屏水印容器加了 title=\"全屏水印演示\" 作说明"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"水印是装饰性背景图，不承载文本语义，读屏器不会读出被保护字样。",
|
||
"示例的水印容器带 title=\"全屏水印演示\"，只是一个提示属性，不构成可访问名。",
|
||
"水印不参与交互，不涉及键盘操作。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Watermark.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Watermark.html —— 纯 H5 演示页：局部与全屏两个水印容器，加 1 个 buildWatermark 函数生成背景图"
|
||
},
|
||
{
|
||
"file": "frameworks/Watermark.css",
|
||
"kind": "样式文件",
|
||
"desc": "Watermark.css —— 本页组件类名的样式定义，由 Watermark.html 第 8 行的 <link rel=\"stylesheet\" href=\"Watermark.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"watermark-ex-1"
|
||
],
|
||
"notes": [
|
||
"水印背景图的生成函数与调用见（frameworks/Watermark.html:20）",
|
||
"全屏水印的组合类见（frameworks/Watermark.html:14）",
|
||
"提供高度与定位的示例容器见（frameworks/Watermark.html:9）",
|
||
"局部水印的挂载点见（frameworks/Watermark.html:26）"
|
||
]
|
||
}
|