Dropdown 下拉菜单

向下弹出的列表。

何时使用

当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

代码演示

最简单的下拉菜单。

分割线和不可用菜单项。

点击菜单项后会触发事件。

传入的菜单里有多个层级。

支持 6 个弹出位置。

默认是移入触发菜单,可以点击触发。

左边是按钮,右边是额外的相关功能菜单。

默认是点击关闭菜单,可以关闭此功能。

API

nz-dropdown

注意:需要在触发下拉菜单的元素上加入[nz-dropdown]的directive标记用于定位元素位置,属性如下
参数 说明 类型 默认值
[nz-dropdown] 用于定位触发下拉菜单的元素 Directive -
nzTrigger 触发下拉的行为 'click'|'hover' 'hover'
nzClickHide 点击后是否隐藏菜单 Boolean false
nzVisible 菜单是否显示 Boolean false
nzVisibleChange 菜单显示状态改变时调用,参数为 nzVisible Function(visible)
nzPlacement 菜单弹出位置:bottomLeftbottomCenterbottomRighttopLefttopCentertopRight String bottomLeft

nz-dropdown-button

参数 说明 类型 默认值
nzType 按钮类型 String 'default'
nzSize 按钮大小 String -
nzClick 点击左侧按钮的回调 Function -
nzTrigger 触发下拉的行为 'click'|'hover' 'hover'
nzClickHide 点击后是否隐藏菜单 Boolean false
nzVisible 菜单是否显示 Boolean false
nzVisibleChange 菜单显示状态改变时调用,参数为 nzVisible Function -
nzPlacement 菜单弹出位置:bottomLeftbottomCenterbottomRighttopLefttopCentertopRight String bottomLeft

菜单可由 nz-menu取得,菜单还包括菜单项 nz-menu-item分割线 nz-menu-divider和 子菜单nz-submenu