ZUI 3下拉菜单
将动作或菜单折叠到下拉菜单中。
使用方法
为触发按钮添加属性 data-toggle="dropdown"，然后在触发按钮之后添加一个 .dropdown-menu 用于定义菜单列表。
关联菜单元素
你还可以在触发按钮上通过 data-target 属性来指定要打开的菜单列表元素，这样不用要求触发按钮和菜单列表元素之间必须按顺序紧邻。
手动初始化
你可以通过 new zui.Dropdown() 方法在触发按钮上动态初始化下拉菜单组件，这样无需为触发按钮添加属性 data-toggle="dropdown"，以及预先创建下拉菜单列表元素 .dropdown-menu。
显示箭头
通过给下拉菜单菜单按钮添加 data-arrow="true" 来使下拉菜单展示箭头。
改变箭头大小
通过给下拉菜单按钮添加 data-arrow={size} 来控制下拉菜单的箭头的大小。
data-arrow = 4
data-arrow = 8
data-arrow = 12
鼠标悬停展开菜单
为触发按钮添加属性 data-trigger="hover" 实现鼠标悬停展开菜单。
浮动方向
通过 data-placement=* 属性控制弹出方向。
data-placement = top-start
data-placement = top
data-placement = top-end
data-placement = bottom-start
data-placement = bottom
data-placement = bottom-end
data-placement = left-start
data-placement = left
data-placement = left-end
data-placement = right-start
data-placement = right
data-placement = right-end
多级子菜单
多级子菜单仅支持通过手动初始化的方式创建。
自定义菜单
通常情况下下拉菜单列表使用 <menu> 元素，你也可以替换为其他元素或内容
禁用的菜单项
为菜单项 <li> 添加 .disabled 类即可获得禁用外观。
标题和分割线
在 .dropdown-menu 内 li 标签使用 .dropdown-header类 来显示标题，使用 .divider 来创建分割线。
CSS 类
按钮提供了如下 CSS 类：
| 类 | 类型 | 作用 |
|---|---|---|
dropdown | 实体类 | 元素作为下拉菜单组件 |
dropdown-menu | 实体类 | 元素作为下拉菜单列表 |
dropdown-header | 实体类 | 元素作为下拉菜单中的标题 |
caret | 实体类 | 元素作为下拉菜单icon图标 |
divider | 实体类 | 元素作为下拉菜单分割线 |
dropup | 工具类 | 下拉框浮动方向为上方 |
CSS 变量
| 变量名称 | 变量含义 |
|---|---|
--dropmenu-radius | 下拉菜单圆角 |
--dropmenu-border-color | 下拉菜单边框颜色 |
--dropmenu-bg | 下拉菜单背景颜色 |
--dropmenu-active-color | 下拉菜单条目激活状态文字颜色 |
--dropmenu-active-bg | 下拉菜单条目激活状态背景颜色 |
API
DropdownOptions
操作菜单定义对象。
trigger
触发方式
- 类型：
click | hover | manual； - 必选：否。
arrow
箭头大小 为 true 则为默认12
- 类型：
boolean | number； - 必选：否。
offset
偏移量
- 类型：
number； - 必选：否。
menu
菜单对象 详细配置可参考 菜单。
- 类型：
object； - 必选：否。