Dropdown下拉菜单

向下弹出的列表。
使用

何时使用#

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

代码演示

最简单的下拉菜单。

      加载中
    

分割线和不可用菜单项。

      加载中
    

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

      加载中
    

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

      加载中
    
Right Click on here

在区域内任意右击触发。

      加载中
    

支持 6 个弹出位置。

      加载中
    

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

      加载中
    

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

      加载中
    

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

      加载中
    

可以展示一个箭头

      加载中
    

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>-
[nzArrow]下拉框箭头是否显示booleanfalse

菜单使用 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关闭右键菜单--