86 lines
4.8 KiB
JSON
86 lines
4.8 KiB
JSON
{
|
||
"slug": "bankcardinput",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 bankcardinput：.kole-card-field 做外壳，is-valid/is-invalid 表达校验态，.kole-card-type 显示卡种。",
|
||
"usage": [
|
||
"输入框外壳是 .kole-card-field：40px 高、flex 横排、1px 边框，过渡只针对边框色与阴影（frameworks/BankCardInput.css:3）。",
|
||
"三个状态类直接挂在 field 上：is-focus 用品牌色边框加 3px 光晕，is-valid 走成功色，is-invalid 走错误色（frameworks/BankCardInput.css:4-6）。",
|
||
"输入本体 .kole-card-input 去掉了自身边框与 outline，等宽字体、1px 字距，适合分组显示卡号（frameworks/BankCardInput.css:7）。",
|
||
"placeholder 用 --kole-color-text-placeholder，并把字距归零以免提示文字被拉开（frameworks/BankCardInput.css:8）。",
|
||
"卡种标签 .kole-card-type 默认品牌色浅底，识别不出时加 .unknown 切到禁用底与次级文字色（frameworks/BankCardInput.css:9-10）。",
|
||
"校验提示 .kole-card-tip 默认次级文字色，加 .valid 变成功色、加 .invalid 变错误色（frameworks/BankCardInput.css:11-13）。"
|
||
],
|
||
"bestPractices": [
|
||
"卡号格式化（四位一组）与卡种识别是脚本职责，样式文件只提供分组字距与标签外观（frameworks/BankCardInput.css:7、9）。",
|
||
"is-focus 的光晕是 box-shadow 而非 outline，与浏览器默认焦点环会叠加；需要单一视觉时在业务侧统一（frameworks/BankCardInput.css:4）。",
|
||
"卡种与提示的状态类是不带 is- 前缀的 .unknown / .valid / .invalid，和 field 上的 .is-valid / .is-invalid 写法不同，别混用（frameworks/BankCardInput.css:10、12-13）。"
|
||
],
|
||
"a11y": [
|
||
"输入框需要 inputmode 等原生属性：示例写 inputmode=\"numeric\"（site/examples/bankcardinput.json），样式层不提供（frameworks/BankCardInput.css:7）。",
|
||
"校验态不能只靠边框颜色：is-valid / is-invalid 要给屏幕阅读器可感知的文字提示，.kole-card-tip 是承载位置（frameworks/BankCardInput.css:11-13）。",
|
||
"input 自身 outline:none，焦点可见性完全落在 .kole-card-field.is-focus 的边框与光晕上，请确保该状态确实被切换（frameworks/BankCardInput.css:4、7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-card-field（外壳）、.kole-card-input（输入本体）、.kole-card-type（卡种标签）、.kole-card-tip（提示）；状态 is-focus / is-valid / is-invalid 挂 field，卡种与提示用 .unknown / .valid / .invalid。",
|
||
"table": [
|
||
{
|
||
"name": "kole-card",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-field",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-valid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-invalid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-input",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-type",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-card-tip",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BankCardInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BankCardInput.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bankcardinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"外壳与状态见 frameworks/BankCardInput.css:3-6，输入本体见 frameworks/BankCardInput.css:7，卡种见 frameworks/BankCardInput.css:9-10，提示见 frameworks/BankCardInput.css:11-13。",
|
||
"该文件根类复用了 kole-card（不是 kole-bankcard），与 CardList 的 kole-card-* 同名但不同文件，注意别互相覆盖。",
|
||
"is-focus 的光晕色 rgba(47,84,235,0.2) 是硬编码，不随主题令牌变化（frameworks/BankCardInput.css:4）。"
|
||
]
|
||
}
|