53 lines
2.4 KiB
JSON
53 lines
2.4 KiB
JSON
{
|
||
"slug": "watermark",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "水印样式：kole-watermark 容器平铺文本，is-fullscreen 变体改为固定全屏覆盖。",
|
||
"usage": [
|
||
"仅两个类：.kole-watermark 在容器内平铺水印文本并禁止选中，.is-fullscreen 变体把它改为 fixed 覆盖全屏。",
|
||
"平铺纹理由背景重复实现，文本内容与旋转角度由宿主通过内联样式或令牌传入。",
|
||
"水印透明度要低到不掩盖底下内容，同时又要可辨识，具体值由宿主按背景明度调整。"
|
||
],
|
||
"bestPractices": [
|
||
"全屏水印要设 pointer-events:none 之类的穿透处理，否则会挡住页面点击（本文件只定义视觉，宿主需确认穿透）。",
|
||
"不要给水印容器加 z-index 高于弹层，否则会盖住对话框与通知。",
|
||
"水印文案若要随用户变化，应由宿主注入，不要改 CSS 内容。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-watermark",
|
||
"type": "基础类",
|
||
"desc": "容器内平铺水印，文本不可选中（frameworks/Watermark.css:3）"
|
||
},
|
||
{
|
||
"name": "is-fullscreen",
|
||
"type": "状态类",
|
||
"desc": "固定定位覆盖全屏的变体（frameworks/Watermark.css:4）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"水印是装饰性内容，应对读屏隐藏（aria-hidden），避免重复朗读用户信息。",
|
||
"水印不得干扰正文对比度，透明度需在最低可辨识与不遮挡之间取值。",
|
||
"全屏水印必须不拦截指针与键盘事件，否则会阻断整个页面的可操作性。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Watermark.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Watermark.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"watermark-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Watermark.css:3 定义 .kole-watermark",
|
||
"依据 frameworks/Watermark.css:4 定义 .is-fullscreen",
|
||
"类名总表来自 frameworks/Watermark.css（facts.consumedApi.classes，3 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|