98 lines
5.4 KiB
JSON
98 lines
5.4 KiB
JSON
{
|
||
"slug": "cascader",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 cascader：.kole-cascader-trigger 是触发器，is-open 展开 .kole-cascader-panel 多列面板。",
|
||
"usage": [
|
||
"外层 .kole-cascader 是 position:relative 加 min-width:200px，是下拉面板的定位参照（frameworks/Cascader.css:3）。",
|
||
"触发器 .kole-cascader-trigger 展开时加 .is-open：品牌边框加 2px 光晕，同时把内部 .caret 旋转 180 度（frameworks/Cascader.css:9、12）。",
|
||
"未选中时显示占位文字，用 .placeholder 内联类取 --kole-color-text-placeholder（frameworks/Cascader.css:10）。",
|
||
"已选值用标签排：.kole-cascader-tags 横向换行，单枚 .kole-cascader-tag 是品牌浅底小胶囊（frameworks/Cascader.css:13-14）。",
|
||
"面板 .kole-cascader-panel 绝对定位在触发器下方 4px、z-index 100；每列 .kole-cascader-col 最小 140px、最高 240px 可滚动，末列去掉右分隔线（frameworks/Cascader.css:16-18）。",
|
||
"列内选项 .kole-cascader-opt：hover 用页面底色，.is-active 换品牌浅底加品牌字色，多选时 .is-checked .box 填品牌色（frameworks/Cascader.css:19-24）。",
|
||
"搜索层 .kole-cascader-search 是独立浮层（z-index 101、宽 260px），输入框聚焦换品牌边框，结果区 .kole-cascader-results 最高 200px 可滚（frameworks/Cascader.css:26-32）。"
|
||
],
|
||
"bestPractices": [
|
||
"面板层级要留意：面板 z-index 100、搜索层 101，两者都绝对定位在触发器下方；同屏有更高层级弹层时需在业务侧统一层级（frameworks/Cascader.css:16、26）。",
|
||
"多选勾选框 .box 只在 .is-checked 时被填色，选中逻辑仍要由脚本切类，样式不会自勾（frameworks/Cascader.css:23-24）。",
|
||
"列滚动用 max-height:240px 配 overflow:auto，选项很多时靠这层滚动而不是整体拉高面板（frameworks/Cascader.css:17）。"
|
||
],
|
||
"a11y": [
|
||
"触发器展开态只用边框与光晕表达，建议同时维护 aria-expanded，样式层不提供该属性（frameworks/Cascader.css:9）。",
|
||
"搜索输入框的 focus 只有边框+光晕、没有 outline，键盘用户依赖这层视觉，请勿在业务侧取消（frameworks/Cascader.css:28）。",
|
||
"勾选框是 14px 的 .box 内联块，尺寸偏小且非原生控件，建议在外层元素上补 aria-checked 等语义（frameworks/Cascader.css:23-24）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-cascader（定位容器）、.kole-cascader-trigger（触发器）、.kole-cascader-panel / -col / -opt（面板与选项）、.kole-cascader-search / -results（搜索层），内联类 .placeholder / .caret / .arrow / .box 承担细节，状态 is-open / is-active / is-checked。",
|
||
"table": [
|
||
{
|
||
"name": "kole-cascader",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-trigger",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-tags",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-tag",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-col",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-cascader-opt",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-checked",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Cascader.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Cascader.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"cascader-ex-1",
|
||
"cascader-ex-2"
|
||
],
|
||
"notes": [
|
||
"触发器与展开态见 frameworks/Cascader.css:9、12，面板与列见 frameworks/Cascader.css:16-18，选项状态见 frameworks/Cascader.css:21-24，搜索层见 frameworks/Cascader.css:26-32。",
|
||
"示例靠 data-multiple 区分单选与多选（site/examples/cascader.json），该属性用于脚本取参，样式层不消费。",
|
||
"is-open 的光晕色 rgba(47,84,235,0.2) 为硬编码，不随主题令牌变化（frameworks/Cascader.css:9）。"
|
||
]
|
||
}
|