首页 > itarticle > Dropdown

Dropdown

admin 11月 13, 2020 0

API#

Property	Description	Type	Default
`[nzDropdownMenu]`	Dropdown menu	`NzDropdownMenuComponent`	-
`[nzDisabled]`	whether the dropdown menu is disabled	`boolean`	-
`[nzPlacement]`	placement of pop menu	`'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'`	`'bottomLeft'`
`[nzTrigger]`	the trigger mode which executes the drop-down action	`'click' \| 'hover'`	`'hover'`
`[nzClickHide]`	whether hide menu when click	`boolean`	`true`
`[nzVisible]`	whether the dropdown menu is visible, double binding	`boolean`	-
`[nzBackdrop]`	whether the dropdown has a backdrop when `nzTrigger` is `click`	`boolean`	`true`
`[nzOverlayClassName]`	Class name of the dropdown root element	`string`	-
`[nzOverlayStyle]`	Style of the dropdown root element	`object`	-
`(nzVisibleChange)`	a callback function takes an argument: `nzVisible`, is executed when the visible state is changed	`EventEmitter<boolean>`	-

You should use nz-menu in nz-dropdown. The menu items and dividers are also available by using nz-menu-item and nz-menu-divider.

nz-menu of nz-dropdown is unselectable by default, you can make it selectable via <ul nz-menu nzSelectable>.

Wrap Dropdown Menu and pass to [nz-dropdown] 和 NzContextMenuService, you can export it via Template Syntax nzDropdownMenu

Note：Every [nz-dropdown] should pass independent nz-dropdown-menu.

<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>

NzContextMenuServiceservice#

Create dropdown with contextmenu, the detail can be found in the example above

Property	Description	Arguments	Return Value
create	create dropdown	`($event:MouseEvent, menu:NzDropdownMenuComponent)`	-
close	close dropdown	-	-