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)级联选择器搜索命中后文字高亮的颜色