115 lines
4.3 KiB
JSON
115 lines
4.3 KiB
JSON
{
|
||
"slug": "rate",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 评分：data-value 定初始分值，星数与半星能力由 data-count / data-half 声明。",
|
||
"usage": [
|
||
"根容器写 role=\"radiogroup\" 与 data-rate，初始分值放 data-value=\"3\"，星数用 data-count=\"5\" 指定。",
|
||
"能力开关是布尔钩子：加 data-half 支持半星、加 data-text 显示文字，脚本用 hasAttribute 判断。",
|
||
"只读与禁用用类名表达：.is-readonly 与 .is-disabled，脚本在点击处理开头判断这两个类就直接 return。",
|
||
"每个星是带 .kole-rate-fill 的节点，填充宽度按分值计算，半星表现为部分填充。",
|
||
"尺寸类 .sm 与 .lg 直接加在根容器上，不加就是默认尺寸。"
|
||
],
|
||
"bestPractices": [
|
||
"initial 分值只能通过 data-value 给：本端没有受控绑定，脚本渲染后改 data-value 需要重新调用渲染函数。",
|
||
"半星能力用属性存在性判断（hasAttribute），写 data-half=\"false\" 仍然是开启状态，要关闭就整个删掉这个属性。",
|
||
"半星的分值同样按 0.5 步进，展示文案若依赖分值请一并按这个精度取整。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-rate 与尺寸类 sm/lg、状态类 is-readonly / is-disabled、星填充类）加 data-* 入参钩子（data-rate、data-count、data-value、data-half、data-text）。",
|
||
"table": [
|
||
{
|
||
"name": "kole-rate",
|
||
"type": "基础类名",
|
||
"desc": "评分容器，需配 role=\"radiogroup\""
|
||
},
|
||
{
|
||
"name": "kole-rate-fill",
|
||
"type": "结构类名",
|
||
"desc": "星的填充层，宽度按分值计算"
|
||
},
|
||
{
|
||
"name": "is-readonly",
|
||
"type": "状态类名",
|
||
"desc": "只读态，脚本据此跳过点击处理"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类名",
|
||
"desc": "禁用态，同样跳过点击处理"
|
||
},
|
||
{
|
||
"name": "sm",
|
||
"type": "尺寸类名",
|
||
"desc": "小尺寸星"
|
||
},
|
||
{
|
||
"name": "lg",
|
||
"type": "尺寸类名",
|
||
"desc": "大尺寸星"
|
||
},
|
||
{
|
||
"name": "data-rate",
|
||
"type": "data-* 钩子",
|
||
"desc": "标记评分容器，脚本据此批量初始化"
|
||
},
|
||
{
|
||
"name": "data-count",
|
||
"type": "data-* 钩子",
|
||
"desc": "星星总数（示例为 5）"
|
||
},
|
||
{
|
||
"name": "data-value",
|
||
"type": "data-* 钩子",
|
||
"desc": "初始分值，可为 0.5 的倍数"
|
||
},
|
||
{
|
||
"name": "data-half",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即支持半星，脚本用 hasAttribute 判断"
|
||
},
|
||
{
|
||
"name": "data-text",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即显示分值说明文字"
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "原生属性",
|
||
"desc": "容器 role=\"radiogroup\"，补单选组语义"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器带 role=\"radiogroup\"，但星节点是 span，既没有 role=\"radio\" 也没有 aria-checked，组内没有可访问的选项。",
|
||
"星不可聚焦：没有 tabindex，方向键与数字键都不响应，键盘用户无法评分。",
|
||
"分值变化没有 aria-live 播报，读屏器不会主动念出新的评分值。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Rate.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Rate.html —— 纯 H5 演示页：基础/半星/只读带文字/两种尺寸四组结构，含 2 个渲染与交互函数"
|
||
},
|
||
{
|
||
"file": "frameworks/Rate.css",
|
||
"kind": "样式文件",
|
||
"desc": "Rate.css —— 本页组件类名的样式定义，由 Rate.html 第 8 行的 <link rel=\"stylesheet\" href=\"Rate.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rate-ex-1",
|
||
"rate-ex-2",
|
||
"rate-ex-3",
|
||
"rate-ex-4"
|
||
],
|
||
"notes": [
|
||
"半星示例的分值入参见（frameworks/Rate.html:29）",
|
||
"半星能力用属性存在性判断，见（frameworks/Rate.html:29）",
|
||
"容器的语义标注见（frameworks/Rate.html:24）",
|
||
"只读态类名与点击拦截见（frameworks/Rate.html:34）",
|
||
"脚本批量初始化入口见（frameworks/Rate.html:24）"
|
||
]
|
||
}
|