67 lines
3.0 KiB
JSON
67 lines
3.0 KiB
JSON
{
|
||
"slug": "mention",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "@ 提及样式：kole-mention 下 textarea 加候选面板，item 用 is-active 表高亮、chips 存已选项。",
|
||
"usage": [
|
||
"输入区结构是 .kole-mention-area 包原生 .kole-mention-input（textarea），候选面板 .kole-mention-panel 绝对定位在其下。",
|
||
"候选项 .kole-mention-item 内部固定三段：.kole-mention-avatar、.kole-mention-name、.kole-mention-dept；键盘高亮项加 .is-active。",
|
||
"已提及对象用 .kole-mention-chips 容器加 .kole-mention-chip 单个标签展示，与输入区并列。",
|
||
"面板底色与高亮底色用 --kole-color-card-bg 与 --kole-color-brand-bg。"
|
||
],
|
||
"bestPractices": [
|
||
".is-active 写在 .kole-mention-item 上，容器加类不会高亮任何一行。",
|
||
"部署与部门是可省略的结构，去掉 .kole-mention-dept 后 item 仍保持对齐。",
|
||
"标签与输入区并列时由宿主决定换行策略，容器本身不设最大高度。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-mention",
|
||
"type": "基础类",
|
||
"desc": "根容器：相对定位，面板定位参照（frameworks/Mention.css:2）"
|
||
},
|
||
{
|
||
"name": "kole-mention-panel",
|
||
"type": "结构类",
|
||
"desc": "候选面板：卡片底 + 阴影（frameworks/Mention.css:6）"
|
||
},
|
||
{
|
||
"name": "kole-mention-item",
|
||
"type": "结构类",
|
||
"desc": "候选行，hover 底色（frameworks/Mention.css:7）"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类",
|
||
"desc": "键盘高亮的候选行（frameworks/Mention.css:8）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"输入框建议用 textarea 加 aria-autocomplete=list、aria-expanded，候选面板用 role=listbox 关联。",
|
||
"高亮行需要 aria-selected，.is-active 只表达视觉高亮。",
|
||
"头像图片要有 alt 或 aria-hidden（纯装饰时），姓名文本才是可读内容。",
|
||
"标签区的删除动作需可键盘触发，样式层不含删除按钮样式，宿主自行补。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Mention.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Mention.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mention-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Mention.css:2 定义 .kole-mention",
|
||
"依据 frameworks/Mention.css:6 定义 .kole-mention-panel",
|
||
"依据 frameworks/Mention.css:7 定义 .kole-mention-item",
|
||
"依据 frameworks/Mention.css:8 定义 .is-active",
|
||
"类名总表来自 frameworks/Mention.css（facts.consumedApi.classes，11 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|