86 lines
4.8 KiB
JSON
86 lines
4.8 KiB
JSON
{
|
||
"slug": "passwordinput",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 passwordinput：.kole-pwd-field 做输入框，.kole-pwd-bar 三段强度条用 on+weak/mid/strong 上色。",
|
||
"usage": [
|
||
"根容器 .kole-pwd 定宽 260px，是密码输入区的整体宽度（frameworks/PasswordInput.css:3）。",
|
||
"输入外壳 .kole-pwd-field 是 36px 高、flex 横排、1px 边框加 6px 圆角；聚焦时加 .is-focus 换品牌边框与 3px 光晕（frameworks/PasswordInput.css:4-5）。",
|
||
"输入本体 .kole-pwd-input 去边框去 outline 并撑满（height:100%），明文/密文切换按钮 .kole-pwd-toggle 是次级色无边框按钮（frameworks/PasswordInput.css:6-7）。",
|
||
"强度条容器 .kole-pwd-strength 是 4px 间距的横向 flex；单段 .kole-pwd-bar 高 4px、默认轨道色，flex:1 等分（frameworks/PasswordInput.css:8-9）。",
|
||
"强度上色要两个类同时存在：.kole-pwd-bar.on.weak 走错误色、.on.mid 走警告色、.on.strong 走成功色——.on 表示这段已点亮，weak/mid/strong 决定颜色（frameworks/PasswordInput.css:10-12）。",
|
||
"下方提示 .kole-pwd-tip 是 12px 次级文字色（frameworks/PasswordInput.css:13）。"
|
||
],
|
||
"bestPractices": [
|
||
"强度条是三段共用一套类：每段都写 .kole-pwd-bar，点亮的段再加 .on 与 weak/mid/strong；漏掉 .on 时那段会保持灰色轨道，看起来像“没算强度”（frameworks/PasswordInput.css:10-12）。",
|
||
"weak/mid/strong 是三个互斥的等级名，同一段上写两个时后定义的规则赢（strong 在最后，第 12 行）（frameworks/PasswordInput.css:10-12）。",
|
||
"强度判定算法不在样式文件里：类切换由业务侧根据评分完成，样式层只负责上色（frameworks/PasswordInput.css:10-12）。"
|
||
],
|
||
"a11y": [
|
||
"强度条是纯色块，无法向读屏传达等级；需要配合文字（如“强度：中”）才能被理解（frameworks/PasswordInput.css:8-12）。",
|
||
"明文切换按钮只有文字或图标，需要 aria-label 与 aria-pressed 标明当前状态（frameworks/PasswordInput.css:7）。",
|
||
"input 已 outline:none，焦点可见性靠 .kole-pwd-field.is-focus 的边框加光晕，请确保该状态被切换（frameworks/PasswordInput.css:5-6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-pwd（根）、.kole-pwd-field（外壳）、.kole-pwd-input（输入本体）、.kole-pwd-toggle（明密切换）、.kole-pwd-strength / -bar（强度条）、.kole-pwd-tip（提示）；状态 is-focus 挂外壳，强度段用 .on.weak / .on.mid / .on.strong。",
|
||
"table": [
|
||
{
|
||
"name": "kole-pwd",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-field",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-focus",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-input",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-toggle",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-strength",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-bar",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pwd-tip",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/PasswordInput.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/PasswordInput.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"passwordinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"根与外壳见 frameworks/PasswordInput.css:3-5，输入与切换见 frameworks/PasswordInput.css:6-7，强度条与三档上色见 frameworks/PasswordInput.css:8-12。",
|
||
"强度条同时用 .on 与等级类两个类名叠加，是本文件独有写法（frameworks/PasswordInput.css:10-12）。",
|
||
"示例在输入框上写了 id、type 与 role（site/examples/passwordinput.json），说明可访问语义由业务侧声明。"
|
||
]
|
||
}
|