91 lines
4.7 KiB
JSON
91 lines
4.7 KiB
JSON
{
|
||
"slug": "plateinput",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 plateinput：.kole-plate-field 是车牌外壳，.kole-plate-prov 是省份色块，三态 is-* 表校验。",
|
||
"usage": [
|
||
"外壳 .kole-plate-field 是 inline-flex 加 stretch，6px 圆角配 overflow:hidden 把省份块与号码格拼成一体（frameworks/PlateInput.css:3）。",
|
||
"三态挂在外壳上：is-focus 换品牌边框加 3px 光晕，is-valid 走成功色，is-invalid 走错误色（frameworks/PlateInput.css:4-6）。",
|
||
"省份块 .kole-plate-prov 是品牌实底加反色文字、16px 字重 700，充当车牌左侧的省份位（frameworks/PlateInput.css:7）。",
|
||
"号码格 .kole-plate-input 是 18px 字重 700、3px 字距、等宽字体，并带 text-transform:uppercase 自动转大写（frameworks/PlateInput.css:8）。",
|
||
"placeholder 会把 3px 字距归零并把字重降到 400，避免提示被拉成车牌样式（frameworks/PlateInput.css:9）。",
|
||
"提示 .kole-plate-tip 默认次级色，加 .valid / .invalid 切色；内部 .kole-plate-tag 是品牌浅底小标签，用来标“新能源”等标记（frameworks/PlateInput.css:10-13）。"
|
||
],
|
||
"bestPractices": [
|
||
"大小写无需业务侧转换：text-transform:uppercase 已保证视觉大写，但提交给后端的数据仍是用户输入的原始大小写（frameworks/PlateInput.css:8）。",
|
||
"省份块是 10px 内边距的色块，点击切换省份的下拉样式不在本文件里（frameworks/PlateInput.css:7）。",
|
||
"提示态用不带 is- 前缀的 .valid / .invalid，外壳上用 .is-valid / .is-invalid，两处别混（frameworks/PlateInput.css:5-6、11-12）。"
|
||
],
|
||
"a11y": [
|
||
"省份块是 button 语义但只有视觉：建议用原生 button 或补 role 与 aria-label（frameworks/PlateInput.css:7）。",
|
||
"uppercase 只改显示，读屏读到的仍是原文；如果要求大写需在数据层转换（frameworks/PlateInput.css:8）。",
|
||
"校验态仅靠边框色，需配合 .kole-plate-tip 的文字说明与 aria-invalid（frameworks/PlateInput.css:4-6、10-12）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-plate-field（外壳）、.kole-plate-prov（省份块）、.kole-plate-input（号码格）、.kole-plate-tip / -tag（提示与标记）；状态 is-focus / is-valid / is-invalid 挂外壳，提示用 .valid / .invalid。",
|
||
"table": [
|
||
{
|
||
"name": "kole-plate",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-plate-field",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-valid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-invalid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-plate-prov",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-plate-input",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-plate-tip",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-plate-tag",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PlateInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PlateInput.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"plateinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"外壳与三态见 frameworks/PlateInput.css:3-6，省份块与号码格见 frameworks/PlateInput.css:7-9，提示与标记见 frameworks/PlateInput.css:10-13。",
|
||
"is-focus 光晕色 rgba(47,84,235,0.2) 为硬编码，不随主题令牌变化（frameworks/PlateInput.css:4）。",
|
||
"示例在容器上写了 id 与 role（site/examples/plateinput.json），样式层不消费这两个属性。"
|
||
]
|
||
}
|