向下弹出的列表。
当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
最简单的下拉菜单。
分割线和不可用菜单项。
点击菜单项后会触发事件。
传入的菜单里有多个层级。
支持 6 个弹出位置。
默认是移入触发菜单,可以点击触发。
左边是按钮,右边是额外的相关功能菜单。
默认是点击关闭菜单,可以关闭此功能。
注意:需要在触发下拉菜单的元素上加入[nz-dropdown]的directive标记用于定位元素位置,属性如下
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[nz-dropdown] | 用于定位触发下拉菜单的元素 | Directive | - |
[nz-dropdown-custom] | 自定义下拉菜单内容,不可与menu混用 | ng-content | - |
nzTrigger | 触发下拉的行为 | 'click'|'hover' | 'hover' |
nzClickHide | 点击后是否隐藏菜单 | Boolean | true |
nzVisible | 菜单是否显示 | Boolean | false |
nzVisibleChange | 菜单显示状态改变时调用,参数为 nzVisible | Function(visible) | |
nzPlacement | 菜单弹出位置:bottomLeft bottomCenter bottomRight topLeft topCenter topRight
|
String | bottomLeft |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzType | 按钮类型 | String | 'default' |
nzSize | 按钮大小 | String | - |
nzClick | 点击左侧按钮的回调 | Function | - |
nzTrigger | 触发下拉的行为 | 'click'|'hover' | 'hover' |
nzClickHide | 点击后是否隐藏菜单 | Boolean | false |
nzVisible | 菜单是否显示 | Boolean | false |
nzVisibleChange | 菜单显示状态改变时调用,参数为 nzVisible | Function | - |
nzPlacement | 菜单弹出位置:bottomLeft bottomCenter bottomRight topLeft topCenter topRight
|
String | bottomLeft |
菜单可由 nz-menu
取得,菜单还包括菜单项 nz-menu-item
分割线
nz-menu-divider
和 子菜单nz-submenu