下拉菜单
将动作或菜单折叠到下拉菜单中。
使用方法
为触发按钮添加属性 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
; - 必选:否。