ZartUI · 常规下拉菜单规范预览

1. 常规下拉菜单

默认 / Hover / 点击三态

规格参数

容器宽度	`min-width: 140px`，根据内容自适应
容器背景	`#FFFFFF`
容器圆角	`4px`
容器阴影	`0 4px 20px 0 #0043ca12`
filter	`blur(0)`
菜单项高度	`32px`
菜单项圆角	`4px`
菜单项间距	`8px`
默认文字	`#223355`
Hover 背景	`#F5F7FA`
点击背景 / 文字	`#F0F9FF` / `#3388FF`

2. 带图标下拉菜单

线状图标 + 文字

规格参数

图标尺寸	`16×16px`
图标样式	线状（stroke，无 fill）
图标颜色	与文字同色，默认 `#223355`，点击 `#3388FF`
图标与文字间距	`8px`

3. 带下级分组菜单

右侧朝右箭头 → 悬停展开二级

规格参数

右侧箭头	`16×16px`，朝右
箭头颜色	`#A8B4C8`
触发方式	悬停展开二级菜单，右侧偏移 `4px`

4. 带搜索的下拉菜单

选项超过 10 个时启用搜索

规格参数

触发条件	选项数量 > 10
搜索框位置	菜单顶部
搜索框高度	`32px`
搜索框圆角	全圆角 `16px`
搜索框边框	`#DDE1EB`
搜索图标 / 提示文字	颜色 `#A8B4C8`
提示文字	"请输入关键字"

5. 带新增选项的下拉菜单（输入框 + 新增按钮）

底部输入框 + 新增文字按钮

规格参数

输入框高度	`32px`
输入框圆角	`4px`
输入框边框	`#DDE1EB`
新增按钮	文字色 `#3388FF`
底部分隔	`1px solid #E9ECF2`，与上方菜单间距 `8px`

6. 带新增选项的下拉菜单（图标按钮 + 弹出输入气泡）

底部"+ 新增"按钮，悬停弹出输入气泡（点击演示）

规格参数

触发按钮	"+" 图标 `16×16px` + "新增"文字 `#3388FF`
气泡弹出位置	菜单底部，间距 `6px`
气泡背景 / 阴影	`#FFFFFF`，`0 4px 20px 0 #0043ca12`
气泡内边距	`12px`
输入框	高 `32px`，圆角 `4px`，边框 `#DDE1EB`
操作按钮	取消（次要） + 确定（主，`#3388FF` 背景）

返回组件首页