Dropdown 下拉组件
下拉组件用于在一个弹出的控件中展示特定内容，通常与菜单组件一起使用。
按需导入组件：
import 'mdui/components/dropdown.js';
按需导入组件的 TypeScript 类型：
import type { Dropdown } from 'mdui/components/dropdown.js';
使用示例：
open dropdown
Item 1
Item 2
<mdui-dropdown>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
open dropdown
Item 1
Item 2
<mdui-dropdown disabled>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码
使用 placement 属性可以设置下拉组件的打开位置。
open dropdown
Item 1
Item 2
<mdui-dropdown placement="right-start">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码
使用 trigger 属性可以设置下拉组件的触发方式。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码
添加 open-on-pointer 属性可以在光标处打开下拉组件。通常与 trigger="contextmenu" 配合使用，实现用鼠标右键打开菜单。
在此区域使用鼠标右键打开菜单
Item 1
Item 2
<mdui-dropdown trigger="contextmenu" open-on-pointer>
<mdui-card slot="trigger" style="width:100%;height: 80px">在此区域使用鼠标右键打开菜单</mdui-card>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码
在下拉组件中使用菜单时，默认点击菜单项后，会自动关闭下拉组件。通过添加 stay-open-on-click 属性，可以在点击菜单项时，保持下拉组件的打开状态。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="click" stay-open-on-click>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码
在设置了 trigger="hover" 时，可以通过 open-delay、close-delay 属性设置打开和关闭的延时。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
源码| HTML 属性 | JavaScript 属性 | Reflect | 类型 | 默认值 |
|---|
open | open | | boolean | false |
是否打开下拉组件
|
disabled | disabled | | boolean | false |
是否禁用下拉组件
|
trigger | trigger | | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' |
下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：
click：点击触发hover：鼠标悬浮触发focus：聚焦触发contextmenu：鼠标右键点击、或触摸长按触发manual：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式
|
placement | placement | | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' |
下拉组件内容的位置。可选值包括：
auto：自动判断位置top-start：上方左对齐top：上方居中top-end：上方右对齐bottom-start：下方左对齐bottom：下方居中bottom-end：下方右对齐left-start：左侧顶部对齐left：左侧居中left-end：左侧底部对齐right-start：右侧顶部对齐right：右侧居中right-end：右侧底部对齐
|
stay-open-on-click | stayOpenOnClick | | boolean | false |
点击 <mdui-menu-item> 后，下拉组件是否保持打开状态
|
open-delay | openDelay | | number | 150 |
鼠标悬浮触发下拉组件打开的延时，单位为毫秒
|
close-delay | closeDelay | | number | 150 |
鼠标悬浮触发下拉组件关闭的延时，单位为毫秒
|
open-on-pointer | openOnPointer | | boolean | false |
是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单
|
| 名称 |
|---|
open |
下拉组件开始打开时，事件被触发。可以通过调用 event.preventDefault() 阻止下拉组件打开
|
opened |
下拉组件打开动画完成时，事件被触发
|
close |
下拉组件开始关闭时，事件被触发。可以通过调用 event.preventDefault() 阻止下拉组件关闭
|
closed |
下拉组件关闭动画完成时，事件被触发
|