Skip to content

下拉菜单

将动作或菜单折叠到下拉菜单中。

使用方法

为触发按钮添加属性 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> 元素,你也可以替换为其他元素或内容

51015202530354045505560

禁用的菜单项

为菜单项 <li> 添加 .disabled 类即可获得禁用外观。

标题和分割线

.dropdown-menuli 标签使用 .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

    操作菜单定义对象。

    trigger

    触发方式

    • 类型:click | hover | manual
    • 必选:否。

    arrow

    箭头大小 为 true 则为默认12

    • 类型:boolean | number
    • 必选:否。

    offset

    偏移量

    • 类型:number
    • 必选:否。

    菜单对象 详细配置可参考 菜单

    • 类型:object
    • 必选:否。