ZartUI · 级联选择规范预览

1. 级联选择 · 单选

触发框（已选三级）

华东 / 浙江 / 杭州

触发框（未选）

请选择地区

展开面板（三级联动，间隔线分隔）

华东

华南

华北

西南

浙江

江苏

上海

杭州

宁波

温州

绍兴

嘉兴

规格参数

触发框	高 `32px`，圆角 `4px`，边框 `1px solid #DDE1EB`，Hover/Focus `#3388FF`
占位文字	`14px · #A8B4C8`
已选展示	各级名称用 ` / ` 拼接，颜色 `#223355`
下拉箭头	`14×14px`，颜色 `#A8B4C8`，展开时 `rotate(180deg)`
面板	白底，宽 `512px`，高度根据内容自适应，圆角 `4px`，阴影 `0 2px 50px 0 #0043ca33`，filter `blur(0)`
列宽 / 列内边距	三列等宽，`padding: 8px`，列之间 `1px solid #E9ECF2` 间隔线
列高度	最大 `337px`，超出滚动
选项	高 `32px`，圆角 `4px`，间距 `4px`；默认文字 `#223355`
Hover	背景 `#F5F7FA`
选中	背景 `#F0F9FF`，文字 `#3388FF`
下级箭头	非叶子节点右侧显示 `14×14px` 朝右箭头，颜色 `#A8B4C8`

2. 级联选择 · 多选

触发框（已选标签可全部显示）

华东/浙江/杭州华东/江苏/南京

触发框（标签过多，显示数量）

华东/浙江/杭州 +4

展开面板（带复选框 + 全选）

华东

华南

华北

全选

浙江

江苏

上海

全选

杭州

宁波

温州

绍兴

全选

规格参数

触发框	规格同单选；多选时已选项以标签形式展示
已选标签	高 `22px`，圆角 `4px`，背景 `#F5F7FA`，文字 `#223355`；右侧关闭图标 `10×10px`
溢出展示	显示不下时使用 "+N" 角标（背景 `#F0F9FF`，文字 `#3388FF`）
复选框	`14×14px`，圆角 `4px`；选中 / 半选背景均为 `#3388FF`
全选行	位于每列底部，复选框 + "全选" 文字，上方 `1px solid #E9ECF2` 分隔
选项布局	左侧复选框 + 文字 + 右侧下级箭头（非叶子节点）
父子联动	子节点全选 → 父节点选中；部分选 → 父节点半选

返回组件首页