98 lines
5.5 KiB
JSON
98 lines
5.5 KiB
JSON
{
|
||
"slug": "listpicker",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 listpicker：.kole-listpicker-trigger 下拉触发器，is-open 展开面板，选项用 is-checked 标选中。",
|
||
"usage": [
|
||
"根容器 .kole-listpicker 是 position:relative 加 min-width:220px，是面板的定位参照（frameworks/ListPicker.css:3）。",
|
||
"触发器 .kole-listpicker-trigger 允许换行（flex-wrap）以容纳多枚标签，右侧留 28px 给 .kole-listpicker-caret（frameworks/ListPicker.css:4-6、14）。",
|
||
"展开态给触发器加 .is-open：品牌边框加 2px 光晕，与 hover 的单边框变化区分开（frameworks/ListPicker.css:8-9）。",
|
||
"已选项以标签呈现：容器 .kole-listpicker-tag 是品牌浅底小胶囊，内部 .x 是删除叉，默认 0.65 透明度、hover 提到 1（frameworks/ListPicker.css:10-12）。",
|
||
"无选中时显示 .kole-listpicker-placeholder，走占位文字色（frameworks/ListPicker.css:13）。",
|
||
"面板 .kole-listpicker-panel 绝对定位在触发器下方 4px、定宽 240px、z-index 100，按 搜索 / 全选 / 分组 / 选项 依次排（frameworks/ListPicker.css:16-22）。",
|
||
"选项 .kole-listpicker-option 选中时加 .is-checked：文字转品牌色，同时内部 .box 填成品牌底作勾选框（frameworks/ListPicker.css:25、26-27）。",
|
||
"禁用选项加 .is-disabled：文字转禁用色并改 not-allowed 光标（frameworks/ListPicker.css:28）。"
|
||
],
|
||
"bestPractices": [
|
||
"面板宽度 240px 与触发器的 min-width:220px 是两个独立数值，触发器被内容撑宽后面板不会跟随，需要时在业务侧对齐（frameworks/ListPicker.css:3、16）。",
|
||
"选中态分两处写：选项文字靠 .kole-listpicker-option.is-checked，勾选框靠 .kole-listpicker-option.is-checked .box；只改一处会出现文字变色但方框空的中间态（frameworks/ListPicker.css:25-27）。",
|
||
"搜索框的 focus 是边框加光晕、outline:none，键盘用户依赖这层视觉，覆盖样式时保留（frameworks/ListPicker.css:18-19）。"
|
||
],
|
||
"a11y": [
|
||
"触发器展开态只是视觉变化，需要同步 aria-expanded 才能被读屏识别（frameworks/ListPicker.css:9）。",
|
||
"勾选框 .box 是 14px 的自绘方块，建议在外层选项元素上补 role=\"option\" 与 aria-selected（frameworks/ListPicker.css:26-27）。",
|
||
"标签上的删除叉是 4px 内边距的小目标，触控场景建议扩大点击区（frameworks/ListPicker.css:11）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-listpicker（定位容器）、.kole-listpicker-trigger / -caret / -placeholder / -tag（触发器侧）、.kole-listpicker-panel / -search / -selectall / -group-label / -option（面板侧），内联类 .x / .box 承担细节；状态 is-open / is-checked / is-disabled。",
|
||
"table": [
|
||
{
|
||
"name": "kole-listpicker",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-trigger",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-tag",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-placeholder",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-caret",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-search",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-selectall",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-listpicker-group-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ListPicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ListPicker.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"listpicker-ex-1"
|
||
],
|
||
"notes": [
|
||
"根与触发器见 frameworks/ListPicker.css:3-9，标签见 frameworks/ListPicker.css:10-13，面板各区见 frameworks/ListPicker.css:16-22，选项状态见 frameworks/ListPicker.css:25-28。",
|
||
"is-open 的光晕色 rgba(47,84,235,0.2) 为硬编码，不随主题令牌变化（frameworks/ListPicker.css:9）。",
|
||
"示例只写了 .kole-listpicker 根（site/examples/listpicker.json），触发器与面板由脚本渲染。"
|
||
]
|
||
}
|