75 lines
4.0 KiB
JSON
75 lines
4.0 KiB
JSON
{
|
||
"slug": "phoneinput",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 phoneinput：根元素 .kole-phone 是整条边框，.kole-phone-code 做区号，is-focus/is-error 表状态。",
|
||
"usage": [
|
||
"根容器 .kole-phone 是 inline-flex 加 stretch 对齐，1px 边框、6px 圆角和 overflow:hidden 把区号与号码合成一格（frameworks/PhoneInput.css:2）。",
|
||
"状态挂在根上：.kole-phone.is-focus 换品牌边框加 3px 光晕，.is-error 换错误色边框（frameworks/PhoneInput.css:3-4）。",
|
||
"区号 .kole-phone-code 是元素自带内右边框的分隔列，底色用表头底、光标 pointer 表示可切（frameworks/PhoneInput.css:5）。",
|
||
"号码输入 .kole-phone-input 去边框去 outline、最小宽 160px，placeholder 走占位文字色（frameworks/PhoneInput.css:6-7）。",
|
||
"提示 .kole-phone-tip 默认次级色，加 .error 转错误色、加 .ok 转成功色（frameworks/PhoneInput.css:8-10）。"
|
||
],
|
||
"bestPractices": [
|
||
"整条边框画在根元素上而不是子元素：因为根用了 overflow:hidden 加圆角，子元素自带边框会被裁切，这也是它和 BankCardInput 外壳写法的差异（frameworks/PhoneInput.css:2）。",
|
||
"区号的可切换性只体现在 cursor:pointer，下拉或弹层的样式不在本文件里，需要业务侧自备（frameworks/PhoneInput.css:5）。",
|
||
"提示态是不带 is- 前缀的 .error / .ok，而根上用的是 .is-error，两处写法不同（frameworks/PhoneInput.css:4、9-10）。"
|
||
],
|
||
"a11y": [
|
||
"区号是 select 语义但样式层不提供元素：请用原生 select 或补 role 与 aria-label（frameworks/PhoneInput.css:5）。",
|
||
"错误态是边框变色，需同步 aria-invalid 与提示文案关联（frameworks/PhoneInput.css:4、9）。",
|
||
"两个输入元素都没有 outline，焦点只能靠根元素的 .is-focus 边框加光晕，业务侧需确保焦点进入时切类（frameworks/PhoneInput.css:3、5-6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-phone（根/边框）、.kole-phone-code（区号列）、.kole-phone-input（号码输入）、.kole-phone-tip（提示）；状态 is-focus / is-error 挂根，提示用 .error / .ok。",
|
||
"table": [
|
||
{
|
||
"name": "kole-phone",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-phone-code",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-phone-input",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-phone-tip",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PhoneInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PhoneInput.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"phoneinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"根与两态见 frameworks/PhoneInput.css:2-4，区号与输入见 frameworks/PhoneInput.css:5-7，提示见 frameworks/PhoneInput.css:8-10。",
|
||
"前缀是 kole-phone-*（不是 kole-phoneinput*），按组件名拼类名会失效。",
|
||
"示例在容器上写了 role 与 inputmode（site/examples/phoneinput.json），样式层不消费这两个属性。"
|
||
]
|
||
}
|