76 lines
3.4 KiB
JSON
76 lines
3.4 KiB
JSON
{
|
||
"slug": "rate",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "评分样式：kole-rate-star 逐个排布，is-disabled 只读，尺寸类 sm/lg 与文字区 kole-rate-text。",
|
||
"usage": [
|
||
"每颗星是 .kole-rate-star，填充部分由内部 .kole-rate-fill 层叠加控制（支持半星）。",
|
||
"只读模式在容器 .kole-rate 上加 .is-disabled，星星不再有 hover 反馈。",
|
||
"尺寸用附加类 .sm / .lg 挂在 .kole-rate 上，默认尺寸由基础类给出。",
|
||
"右侧说明文字用 .kole-rate-text，令牌 --kole-color-icon-inactive 管未选中星色，--kole-color-brand 管选中色。"
|
||
],
|
||
"bestPractices": [
|
||
"半星靠 .kole-rate-fill 的宽度实现，宿主必须按比例设置该元素宽度，只加类不会自动算比例。",
|
||
"只读与禁用共用 .is-disabled，如果只读还要保留文字说明，把 .kole-rate-text 放在容器外更稳妥。",
|
||
"尺寸类是 .sm/.lg 这种短类名，与组件库其他地方的 kole- 前缀不同，覆盖时注意作用域。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-rate",
|
||
"type": "基础类",
|
||
"desc": "容器：横向排列星星，is-disabled 与尺寸类的挂载点（frameworks/Rate.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-rate-star",
|
||
"type": "结构类",
|
||
"desc": "单颗星，未选中/选中底色切换（frameworks/Rate.css:4）"
|
||
},
|
||
{
|
||
"name": "kole-rate-fill",
|
||
"type": "结构类",
|
||
"desc": "填充层，宽度决定实心比例（半星）（frameworks/Rate.css:6）"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类",
|
||
"desc": "只读/禁用：无 hover 交互反馈（frameworks/Rate.css:8）"
|
||
},
|
||
{
|
||
"name": "kole-rate-text",
|
||
"type": "结构类",
|
||
"desc": "右侧数值或说明文字（frameworks/Rate.css:11）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"评分建议用原生 radio 组或 role=slider，并把当前分数以文本形式呈现，.kole-rate-text 正好承担这一点。",
|
||
"键盘可增减评分需要宿主实现键位，本文件只有视觉。",
|
||
"选中色与未选中色对比要足够（--kole-color-brand 对 --kole-color-icon-inactive），低视力用户才数得清颗数。",
|
||
"只读态不要用 aria-disabled 之外的模糊表达，避免读屏把只读当成可编辑。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Rate.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Rate.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rate-ex-1",
|
||
"rate-ex-2",
|
||
"rate-ex-3",
|
||
"rate-ex-4"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Rate.css:3 定义 .kole-rate",
|
||
"依据 frameworks/Rate.css:4 定义 .kole-rate-star",
|
||
"依据 frameworks/Rate.css:6 定义 .kole-rate-fill",
|
||
"依据 frameworks/Rate.css:8 定义 .is-disabled",
|
||
"依据 frameworks/Rate.css:11 定义 .kole-rate-text",
|
||
"类名总表来自 frameworks/Rate.css（facts.consumedApi.classes，9 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|