82 lines
3.6 KiB
JSON
82 lines
3.6 KiB
JSON
{
|
||
"slug": "slider",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "滑块样式：kole-slider 轨道由 rail/fill/handle 三层构成，is-disabled 与刻度类表达状态。",
|
||
"usage": [
|
||
"轨道分三层：.kole-slider-rail 底轨、.kole-slider-fill 已选区、.kole-slider-track 外包裹，宽度与定位由宿主按值设置。",
|
||
"手柄是 .kole-slider-handle，双滑块时放两个，样式层不区分左右手柄。",
|
||
"刻度用 .kole-slider-ticks 容器加 .kole-slider-tick 单个刻度点。",
|
||
"禁用态加在根上：.kole-slider.is-disabled；数值与标签分别用 .kole-slider-value 与 .kole-slider-label。"
|
||
],
|
||
"bestPractices": [
|
||
".kole-slider-fill 与 .kole-slider-handle 的位置依赖宿主写入的百分比，静态类名不带定位值。",
|
||
"双滑块场景两个 handle 共用同一套样式，不要用不同类名分别指代左右。",
|
||
"刻度与数值标签都是可选项，加了 .kole-slider-ticks 就必须提供对应数量的 .kole-slider-tick。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-slider",
|
||
"type": "基础类",
|
||
"desc": "根容器：水平轨道与相对定位（frameworks/Slider.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-slider-track",
|
||
"type": "结构类",
|
||
"desc": "轨道外层包裹（frameworks/Slider.css:5）"
|
||
},
|
||
{
|
||
"name": "kole-slider-rail",
|
||
"type": "结构类",
|
||
"desc": "未选中底轨（frameworks/Slider.css:6）"
|
||
},
|
||
{
|
||
"name": "kole-slider-fill",
|
||
"type": "结构类",
|
||
"desc": "已选区间填充，宽度由宿主控制（frameworks/Slider.css:7）"
|
||
},
|
||
{
|
||
"name": "kole-slider-handle",
|
||
"type": "结构类",
|
||
"desc": "拖动手柄，可多个（frameworks/Slider.css:8）"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类",
|
||
"desc": "禁用：不可拖动、颜色变灰（frameworks/Slider.css:4）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"滑块应使用原生 input[type=range] 或 role=slider 并设置 aria-valuenow/min/max，样式层不提供无障碍数值。",
|
||
"手柄需有足够触摸目标尺寸，纯视觉手柄在小尺寸下要补 padding 扩大命中区。",
|
||
"已选色（--kole-color-brand）与底轨色（--kole-color-border）需有明显对比，否则读不出当前值位置。",
|
||
"禁用态应配 aria-disabled，并确保不允许键盘方向键改值。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Slider.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Slider.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"slider-ex-1",
|
||
"slider-ex-2",
|
||
"slider-ex-3",
|
||
"slider-ex-4"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Slider.css:3 定义 .kole-slider",
|
||
"依据 frameworks/Slider.css:5 定义 .kole-slider-track",
|
||
"依据 frameworks/Slider.css:6 定义 .kole-slider-rail",
|
||
"依据 frameworks/Slider.css:7 定义 .kole-slider-fill",
|
||
"依据 frameworks/Slider.css:8 定义 .kole-slider-handle",
|
||
"依据 frameworks/Slider.css:4 定义 .is-disabled",
|
||
"类名总表来自 frameworks/Slider.css（facts.consumedApi.classes，11 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|