Dropdown下拉菜单

向下弹出的列表。
使用
源码 components/dropdown
文档 编辑此页

何时使用#

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

代码演示

基本

最简单的下拉菜单。

expand codeexpand code
      加载中
其他元素

分割线和不可用菜单项。

expand codeexpand code
      加载中
触发事件

点击菜单项后会触发事件，用户可以自由添加各种事件进行不同的操作。

expand codeexpand code
      加载中
多级菜单

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

expand codeexpand code
      加载中
Right Click on here
右键菜单

在区域内任意右击触发。

expand codeexpand code
      加载中
弹出位置

支持 6 个弹出位置。

expand codeexpand code
      加载中
触发方式

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

expand codeexpand code
      加载中
带下拉框的按钮

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

expand codeexpand code
      加载中
菜单隐藏方式

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

expand codeexpand code
      加载中

API#

[nz-dropdown]#

参数说明类型默认值
[nzDropdownMenu]Dropdown 下拉菜单组件NzDropdownMenuComponent-
[nzDisabled]菜单是否禁用boolean-
[nzPlacement]菜单弹出位置'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight''bottomLeft'
[nzTrigger]触发下拉的行为'click' | 'hover''hover'
[nzClickHide]点击后是否隐藏菜单booleantrue
[nzVisible]菜单是否显示，可双向绑定boolean-
[nzOverlayClassName]下拉根元素的类名称string-
[nzOverlayStyle]下拉根元素的样式object-
(nzVisibleChange)菜单显示状态改变时调用，参数为 nzVisibleEventEmitter<boolean>-

菜单使用 nz-menu，还包括菜单项 [nz-menu-item]，分割线 [nz-menu-divider]。

注意：nz-dropdown 下的 [nz-menu] 默认不可选中。如果需要菜单可选中，可以指定 <ul nz-menu nzSelectable>.

nz-dropdown-menu 内 [nz-menu] 的 nzMode 只可以是默认值 vertical。

nz-dropdown-menu#

用于包裹菜单项，可以通过 nzDropdownMenu 模板变量导出后传入 [nz-dropdown] 和 NzContextMenuService。

注意：每个 nz-dropdown-menu 只能作为一个 [nz-dropdown] 的输入项

<a nz-dropdown [nzDropdownMenu]="menu">Hover me</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>1st menu item</li>
    <li nz-menu-item>2nd menu item</li>
    <li nz-menu-item>3rd menu item</li>
  </ul>
</nz-dropdown-menu>

NzContextMenuService#

用于右键弹出下拉菜单，具体参见示例

方法/属性说明参数返回
create创建右键菜单($event:MouseEvent | {x:number, y:number}, menu:NzDropdownMenuComponent)EmbeddedViewRef<any>
close关闭右键菜单--