92 lines
5.1 KiB
JSON
92 lines
5.1 KiB
JSON
{
|
||
"slug": "timepicker",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 时间选择：label 包一个原生 input[type=time]，取值与格式校验都交给浏览器。",
|
||
"usage": [
|
||
"结构是三层：外层 .kole-timepicker 做作用域，中间 .kole-timepicker-item 是 label 行（含文字「执行时间」），最里层 .kole-timepicker-control 挂在 input 上（TimePicker.html:6）。",
|
||
"控件本体就是原生 <input type=\"time\">，值用原生 value=\"09:30\" 写，不写任何自定义下拉或面板（TimePicker.html:6）。",
|
||
"输入上带 aria-label=\"执行时间\"，与 label 文字重复，是演示页显式补的可读名称（TimePicker.html:6；示例 timepicker-ex-1）。",
|
||
"该页 <script> 为空（TimePicker.html:6 尾部），没有取值、提交或格式转换的脚本，读取值要靠外部表单逻辑。",
|
||
"格式由浏览器按本地化规则呈现，没有 format 属性可用；示例里的「HH:mm / HH:mm:ss」两种形态在 H5 端不可控（TimePicker.html:6）。",
|
||
"面板与说明类 .kole-timepicker-surface / .kole-timepicker-desc 只用于示例二把文案包成一块说明区，与时间控件本身无关（TimePicker.html:6）。"
|
||
],
|
||
"bestPractices": [
|
||
"label 已经包住 input，控件名即文字；示例一又额外写了 aria-label，两处文案要一致否则读屏器可能重复播报（TimePicker.html:6；示例 timepicker-ex-1）。",
|
||
"组件类 .kole-timepicker 只做 box-sizing 归一与字体继承，横排布局靠演示页的 .row 类；放进表单时自己给布局容器（TimePicker.css:2-3）。",
|
||
"禁用态需要同时加原生 disabled，CSS 里 .kole-timepicker-disabled 与 [disabled] 两条选择器负责外观（TimePicker.css:13）。",
|
||
"原生时间控件的秒级精度与步进（step）由浏览器与 input 属性决定，本页没有设置 step，秒级场景要自己补（TimePicker.html:6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端载体是类名加原生属性：.kole-timepicker 是作用域根、.kole-timepicker-item 是带文字的 label 行、.kole-timepicker-control 是控件外观类；取值、格式与步进全部走原生 input[type=time] 的 value/step 等属性，没有脚本 API。",
|
||
"table": [
|
||
{
|
||
"name": "kole-timepicker",
|
||
"type": "作用域类名",
|
||
"desc": "根容器：box-sizing 归一、字体令牌与正文色"
|
||
},
|
||
{
|
||
"name": "kole-timepicker-item",
|
||
"type": "结构类名",
|
||
"desc": "label 行：inline-flex、垂直居中、gap 8px、最小高度取控件令牌"
|
||
},
|
||
{
|
||
"name": "kole-timepicker-control",
|
||
"type": "控件类名",
|
||
"desc": "原生时间输入框外观：最小高度令牌、边框、圆角、卡底"
|
||
},
|
||
{
|
||
"name": "kole-timepicker-surface",
|
||
"type": "容器类名",
|
||
"desc": "面板外观类，示例二用来包说明文案"
|
||
},
|
||
{
|
||
"name": "kole-timepicker-desc",
|
||
"type": "文字类名",
|
||
"desc": "说明文字类：次要色配 caption 字号与行高"
|
||
},
|
||
{
|
||
"name": "aria-label",
|
||
"type": "原生属性",
|
||
"desc": "输入框上写的可读名称「执行时间」"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "演示页布局类名",
|
||
"desc": "演示页内联样式提供的 flex 换行行容器，与组件类叠加使用"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"输入框有 aria-label=\"执行时间\"，读屏器可播报控件用途；同时外层 label 文字也是同一内容，两处重复（TimePicker.html:6）。",
|
||
"使用原生 <input type=\"time\">，键盘上下键调时分、Tab 聚焦、触摸目标都由浏览器提供，无需自建键盘处理（TimePicker.html:6）。",
|
||
"容器没有 role 与 aria-hidden 声明，说明类节点（.kole-timepicker-desc）作为普通文本会被读屏器念出（TimePicker.html:6）。",
|
||
"本页没有禁用示例；若在业务里加 disabled，注意 CSS 的 0.55 透明会同时弱化文字与控件本身（TimePicker.css:13）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/TimePicker.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 空脚本）",
|
||
"desc": "TimePicker.html —— 纯 H5 演示页：label 包原生 input[type=time] 的静态结构，脚本为空"
|
||
},
|
||
{
|
||
"file": "frameworks/TimePicker.css",
|
||
"kind": "样式文件",
|
||
"desc": "TimePicker.css —— .kole-timepicker 根、item 行与 control 控件外观，另含同族通用类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"timepicker-ex-1",
|
||
"timepicker-ex-2"
|
||
],
|
||
"notes": [
|
||
"结构与原生 input[type=time]：frameworks/TimePicker.html:6",
|
||
"输入框的 aria-label：frameworks/TimePicker.html:6",
|
||
"空脚本：frameworks/TimePicker.html:6 尾部 <script></script>",
|
||
"根容器与 item/control 样式：frameworks/TimePicker.css:2-3,16-17",
|
||
"禁用态：frameworks/TimePicker.css:13",
|
||
"format 属性在 H5 端不存在：frameworks/TimePicker.html 全文没有 format 字样，示例 timepicker-ex-2 里的 HH:mm:ss 写法是本端不可控的（按实现记录）。"
|
||
]
|
||
}
|