Cascader 设计文档
级联选择器,点击(或 hover)逐级展开列,单选叶子/任一层级;支持 multiple 多选(每列 checkbox + 父子联动 + 多 tag 回显)、可搜索过滤(本地/远程 + 结果虚拟滚动)、动态加载子节点、自定义字段映射与触发器/结果渲染。
← API 文档使用建议
级联选择器,点击(或 hover)逐级展开列,单选叶子/任一层级;支持 multiple 多选(每列 checkbox + 父子联动 + 多 tag 回显)、可搜索过滤(本地/远程 + 结果虚拟滚动)、动态加载子节点、自定义字段映射与触发器/结果渲染。
Accessibility
ARIA role:combobox
- combobox + 每列 listbox + option ARIA 模式
- 触发器 aria-haspopup="listbox"、aria-expanded
- 每列 option aria-selected 标记当前路径
- disabled 节点 aria-disabled 且不可点击
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-cascader-column-border | var(--cd-color-fill-0) | 级联选择各级菜单分割线颜色(组件消费) |
--cd-color-cascader-icon-default | var(--cd-color-text-2) | 级联选择触发器图标颜色 - 默认 |
--cd-color-cascader-label-text-default | var(--cd-color-text-2) | 级联选择 prefix 文字颜色 |
--cd-color-cascader-option-bg-active | var(--cd-color-fill-1) | 级联选择菜单项背景颜色 - 按下 |
--cd-color-cascader-option-bg-hover | var(--cd-color-fill-0) | 级联选择菜单项背景颜色 - 悬浮 |
--cd-color-cascader-option-icon-default | var(--cd-color-cascader-icon-default) | 级联选择菜单项图标颜色 |
--cd-color-cascader-option-main-text-default | var(--cd-color-text-0) | 级联选择菜单项文字颜色 |
--cd-color-cascader-prefix-suffix-text-default | var(--cd-color-text-2) | 级联选择前后缀文字颜色 |
--cd-color-cascader-select-highlight | var(--cd-color-primary) | 级联选择器搜索命中后文字高亮的颜色 |