81 lines
4.4 KiB
JSON
81 lines
4.4 KiB
JSON
{
|
||
"slug": "codeinput",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 codeinput：.kole-code-cell 是单个验证码格，is-focus/is-filled/is-masked 三个状态各自换边框或遮字。",
|
||
"usage": [
|
||
"容器 .kole-code 是 8px 间距的横向 flex，格子按内容等距排开（frameworks/CodeInput.css:3）。",
|
||
"单格 .kole-code-cell 是承载状态的那一层；聚焦时加 .is-focus，换成品牌边框加 3px 光晕（frameworks/CodeInput.css:12）。",
|
||
"已填格加 .is-filled，边框换成 #B7C4FF 的浅品牌色作为填写进度提示（frameworks/CodeInput.css:13）。",
|
||
"密文模式给格子加 .is-masked，内部 .kole-code-input 会被 -webkit-text-security:disc 遮成圆点（frameworks/CodeInput.css:21）。",
|
||
"每格的输入本体是 .kole-code-input，placeholder 用 --kole-color-text-placeholder 并把字重压到 400（frameworks/CodeInput.css:14、20）。",
|
||
"提示文字 .kole-code-tip 是 12px 次级色；出错时在同一元素上加 .error 切到 --kole-color-error（frameworks/CodeInput.css:22-23）。"
|
||
],
|
||
"bestPractices": [
|
||
"is-masked 依赖 -webkit-text-security，属 WebKit 私有属性；Firefox 下不会遮字，密文场景需要业务侧另做方案（frameworks/CodeInput.css:21）。",
|
||
"格子的拆分与聚焦跳转是脚本职责：样式层只提供 is-focus，不会自动移动焦点（frameworks/CodeInput.css:12）。",
|
||
"错误态用的是不带 is- 前缀的 .kole-code-tip.error，与格子上的 .is-* 写法不同，别混写成 .is-error（frameworks/CodeInput.css:23）。"
|
||
],
|
||
"a11y": [
|
||
"is-focus 用边框与光晕表达焦点，没有 outline；键盘用户完全依赖这条视觉，业务侧不要取消它（frameworks/CodeInput.css:12）。",
|
||
"密文遮字只改视觉，输入内容仍可被读屏读到；需要真保密请用 type=password（frameworks/CodeInput.css:21）。",
|
||
"每格输入框建议补 aria-label 标明第几位，纯数字格子容易在读屏里失去位置感（frameworks/CodeInput.css:14）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-code（容器）、.kole-code-cell（单格）、.kole-code-input（输入本体）、.kole-code-tip（提示）；状态 is-focus / is-filled / is-masked 挂格子，错误态用 .kole-code-tip.error。",
|
||
"table": [
|
||
{
|
||
"name": "kole-code",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-code-cell",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-filled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-code-input",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-masked",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-code-tip",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/CodeInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/CodeInput.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"codeinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器见 frameworks/CodeInput.css:3，聚焦与已填见 frameworks/CodeInput.css:12-13，密文见 frameworks/CodeInput.css:21，提示与错误见 frameworks/CodeInput.css:22-23。",
|
||
"示例靠 data-length 与 data-masked 传参并生成格子（site/examples/codeinput.json），样式层不消费这两个属性。",
|
||
"is-filled 的边框色 #B7C4FF 与 is-focus 的光晕 rgba(47,84,235,0.2) 都是硬编码，不随主题令牌变化（frameworks/CodeInput.css:12-13）。"
|
||
]
|
||
}
|