97 lines
4.4 KiB
JSON
97 lines
4.4 KiB
JSON
{
|
||
"slug": "select",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "下拉选择样式：kole-select 触发区加面板、选项与 is-open/is-disabled/is-selected 状态类。",
|
||
"usage": [
|
||
"触发器结构与输入框同构：.kole-select-trigger 承载文本或 .placeholder 占位，右侧 .caret 作箭头，展开时在 .kole-select 上加 .is-open。",
|
||
"多选标签用 .tag 列表加 .x 删除按钮，二者都在触发器内部，宿主负责在删标签时同步已选类。",
|
||
"面板 .kole-select-panel 内含 .kole-select-search 搜索框、.kole-select-group-label 分组标题、.kole-select-option 选项；选中项加 .is-selected 并显示 .check 勾。",
|
||
"空态用 .kole-select-empty 单独成块，出现在面板内，与选项列表互斥。",
|
||
"禁用态 .kole-select.is-disabled 作用于整个组件（含面板），不是只画灰触发器。"
|
||
],
|
||
"bestPractices": [
|
||
".is-open 挂在最外层 .kole-select 上，面板的显隐与箭头旋转都由它派生，不要只给面板加类。",
|
||
"选项的 .is-selected 用在后缀类名 .kole-select-option 同一元素上，写成 .kole-select-option.is-selected 才命中。",
|
||
"搜索框是可选结构：没有多选/搜索时不要放空的 .kole-select-search，它会引入多余的间距。",
|
||
"空态与选项列表同一容器内互斥渲染，避免同时出现造成高度跳动。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-select",
|
||
"type": "基础类",
|
||
"desc": "组件根：控制面板定位与 is-open / is-disabled 状态（frameworks/Select.css:2）"
|
||
},
|
||
{
|
||
"name": "kole-select-trigger",
|
||
"type": "结构类",
|
||
"desc": "触发器，样式对齐输入框（frameworks/Select.css:3）"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "结构类",
|
||
"desc": "未选中时的占位文本色（frameworks/Select.css:12）"
|
||
},
|
||
{
|
||
"name": "caret",
|
||
"type": "结构类",
|
||
"desc": "下拉箭头，展开时随 is-open 旋转（frameworks/Select.css:13）"
|
||
},
|
||
{
|
||
"name": "kole-select-panel",
|
||
"type": "结构类",
|
||
"desc": "下拉面板容器（frameworks/Select.css:20）"
|
||
},
|
||
{
|
||
"name": "kole-select-option",
|
||
"type": "结构类",
|
||
"desc": "单个选项，hover 有底色（frameworks/Select.css:29）"
|
||
},
|
||
{
|
||
"name": "is-selected",
|
||
"type": "状态类",
|
||
"desc": "选中项：品牌色底与文字（frameworks/Select.css:34）"
|
||
},
|
||
{
|
||
"name": "kole-select-empty",
|
||
"type": "结构类",
|
||
"desc": "无匹配项空态（frameworks/Select.css:38）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"触发器应是原生 button 或带 role=combobox 的元素，否则键盘无法打开面板；样式层不补语义。",
|
||
"面板展开与收起需要宿主同步 aria-expanded，.is-open 只负责视觉。",
|
||
"禁用态同时用原生 disabled/aria-disabled，只加 .is-disabled 键盘仍可进入。",
|
||
"选项文字与选中底色对比度由 --kole-color-brand-bg 与品牌色决定，换品牌色后要复核。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Select.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Select.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"select-ex-1",
|
||
"select-ex-2",
|
||
"select-ex-3",
|
||
"select-ex-4",
|
||
"select-ex-5"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Select.css:2 定义 .kole-select",
|
||
"依据 frameworks/Select.css:3 定义 .kole-select-trigger",
|
||
"依据 frameworks/Select.css:12 定义 .placeholder",
|
||
"依据 frameworks/Select.css:13 定义 .caret",
|
||
"依据 frameworks/Select.css:20 定义 .kole-select-panel",
|
||
"依据 frameworks/Select.css:29 定义 .kole-select-option",
|
||
"依据 frameworks/Select.css:34 定义 .is-selected",
|
||
"依据 frameworks/Select.css:38 定义 .kole-select-empty",
|
||
"类名总表来自 frameworks/Select.css（facts.consumedApi.classes，17 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|