91 lines
4.4 KiB
JSON
91 lines
4.4 KiB
JSON
{
|
||
"slug": "input",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "输入框样式：kole-field 包壳、kole-input 本体，配尺寸类与 is-error/is-disabled 状态类。",
|
||
"usage": [
|
||
"结构是 .kole-field 容器包 .kole-input 本体，尺寸类 .kole-input-lg / .kole-input-sm 也加在 .kole-input 上（默认高度由 .kole-input 自身给出）。",
|
||
"错误态把 .is-error 加在 .kole-field 上（不是 input 上），错误文案用独立元素 .error-text 承接。",
|
||
"禁用态同样加在容器：.kole-field.is-disabled 改底色与文字色，若用原生 disabled 属性则需自行补样式，文件里只按 .is-disabled 分支写。",
|
||
"前后缀与清除按钮是兄弟节点：.affix 放单位或图标，.action 放可点击动作，二者都在 .kole-field 内、输入框之外。",
|
||
"令牌入口集中在边框、占位与错误：--kole-color-border、--kole-color-text-placeholder、--kole-color-error。"
|
||
],
|
||
"bestPractices": [
|
||
"状态类挂载点是 .kole-field，写在 <input> 上不会命中任何选择器。",
|
||
"尺寸类只覆盖高度，字号沿用 .kole-input；混用 .kole-input-lg 与 .kole-input-sm 时后出现的规则生效，不要同时加。",
|
||
"错误文案 .error-text 不在 .kole-field 选择器链内，需要宿主自己保证它在 DOM 上跟着字段走。",
|
||
":focus 样式由 .kole-input 的浏览器默认或宿主补写，本文件只有边框与占位令牌，焦点环需在主题层补。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-field",
|
||
"type": "基础类",
|
||
"desc": "字段容器：纵向排布输入框与提示，is-error/is-disabled 状态的挂载点（frameworks/Input.css:2）"
|
||
},
|
||
{
|
||
"name": "kole-input",
|
||
"type": "基础类",
|
||
"desc": "输入体：卡片底、1px 边框、正文色文字、占位色（frameworks/Input.css:4）"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "状态类",
|
||
"desc": "错误态：边框换成 --kole-color-error（frameworks/Input.css:16）"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类",
|
||
"desc": "禁用态：禁用底 + 禁用文字色（frameworks/Input.css:18）"
|
||
},
|
||
{
|
||
"name": "affix",
|
||
"type": "结构类",
|
||
"desc": "前后缀装饰（单位、图标），不参与输入（frameworks/Input.css:20）"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"type": "结构类",
|
||
"desc": "输入框内的动作按钮（如密码可见切换），可点击（frameworks/Input.css:21）"
|
||
},
|
||
{
|
||
"name": "error-text",
|
||
"type": "结构类",
|
||
"desc": "错误提示文案，用错误色小字（frameworks/Input.css:29）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"本体是原生 input，读屏语义来自 input 自身；.kole-field 容器建议用 label 或 aria-describedby 把 .error-text 关联到输入框。",
|
||
"错误态只有颜色变化，不要在 .is-error 时删掉边框，色觉障碍用户需要形状线索配合 aria-invalid。",
|
||
"禁用态务必用原生 disabled 而不是只加 .is-disabled，否则键盘仍能聚焦并输入。",
|
||
"占位色是独立令牌 --kole-color-text-placeholder，改主题时要确认它与卡片底的对比度仍可读。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Input.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Input.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"input-ex-1",
|
||
"input-ex-2",
|
||
"input-ex-3",
|
||
"input-ex-4",
|
||
"input-ex-7"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Input.css:2 定义 .kole-field",
|
||
"依据 frameworks/Input.css:4 定义 .kole-input",
|
||
"依据 frameworks/Input.css:16 定义 .is-error",
|
||
"依据 frameworks/Input.css:18 定义 .is-disabled",
|
||
"依据 frameworks/Input.css:20 定义 .affix",
|
||
"依据 frameworks/Input.css:21 定义 .action",
|
||
"依据 frameworks/Input.css:29 定义 .error-text",
|
||
"类名总表来自 frameworks/Input.css（facts.consumedApi.classes，11 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|