79 lines
3.5 KiB
JSON
79 lines
3.5 KiB
JSON
{
|
||
"slug": "transfer",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "穿梭框样式：左右两个 kole-transfer-panel，走 item 与 box 勾选，ops 中放操作按钮。",
|
||
"usage": [
|
||
"两侧面板都是 .kole-transfer-panel，含 .kole-transfer-head（标题与 .count 计数）、可选 .kole-transfer-search 搜索、.kole-transfer-body 列表。",
|
||
"单条数据是 .kole-transfer-item，勾选标记用 .box 加 .is-checked，禁用项加 .is-disabled。",
|
||
"中间操作区 .kole-transfer-ops 放移入移出按钮，与两侧面板同级。",
|
||
"空列表用 .kole-transfer-empty 占位，列表底色与分割线取自 --kole-color-page-bg 与 --kole-color-border。"
|
||
],
|
||
"bestPractices": [
|
||
".is-checked 加在 .box 上（勾选标记元素），加在 .kole-transfer-item 上不会变勾。",
|
||
"搜索框是可选项，没有搜索需求时不要放 .kole-transfer-search，会多出一条分割线与高度。",
|
||
"两侧面板结构完全同构，宿主用同一套模板渲染两侧可避免样式漂移。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-transfer",
|
||
"type": "基础类",
|
||
"desc": "根容器：左右面板横向排布（frameworks/Transfer.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-transfer-panel",
|
||
"type": "结构类",
|
||
"desc": "单侧面板：描边、圆角、纵向三段（frameworks/Transfer.css:4）"
|
||
},
|
||
{
|
||
"name": "kole-transfer-search",
|
||
"type": "结构类",
|
||
"desc": "可选搜索框（frameworks/Transfer.css:7）"
|
||
},
|
||
{
|
||
"name": "kole-transfer-item",
|
||
"type": "结构类",
|
||
"desc": "单条数据行，hover 底色（frameworks/Transfer.css:11）"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类",
|
||
"desc": "不可移动的数据项（frameworks/Transfer.css:13）"
|
||
},
|
||
{
|
||
"name": "kole-transfer-ops",
|
||
"type": "结构类",
|
||
"desc": "中间操作按钮区（frameworks/Transfer.css:17）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"穿梭框建议左右各用 role=listbox 并配 aria-multiselectable，样式层不提供语义。",
|
||
"移动操作按钮要有明确可读名称（如「移至右侧」），不要只用箭头符号。",
|
||
"勾选状态同时用原生 checkbox 或 aria-checked 表达，.is-checked 只是视觉。",
|
||
"禁用数据项与禁用操作按钮都要 aria-disabled，否则键盘仍可操作。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Transfer.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Transfer.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"transfer-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Transfer.css:3 定义 .kole-transfer",
|
||
"依据 frameworks/Transfer.css:4 定义 .kole-transfer-panel",
|
||
"依据 frameworks/Transfer.css:7 定义 .kole-transfer-search",
|
||
"依据 frameworks/Transfer.css:11 定义 .kole-transfer-item",
|
||
"依据 frameworks/Transfer.css:13 定义 .is-disabled",
|
||
"依据 frameworks/Transfer.css:17 定义 .kole-transfer-ops",
|
||
"类名总表来自 frameworks/Transfer.css（facts.consumedApi.classes，13 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|