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>

示例

禁用状态

添加 disabled 属性可以禁用下拉组件。

打开位置

使用 placement 属性可以设置下拉组件的打开位置。

触发方式

使用 trigger 属性可以设置下拉组件的触发方式。

在光标处打开

添加 open-on-pointer 属性可以在光标处打开下拉组件。通常与 trigger="contextmenu" 配合使用,实现用鼠标右键打开菜单。

保持菜单打开状态

在下拉组件中使用菜单时,默认点击菜单项后,会自动关闭下拉组件。通过添加 stay-open-on-click 属性,可以在点击菜单项时,保持下拉组件的打开状态。

打开/关闭的延时

在设置了 trigger="hover" 时,可以通过 open-delayclose-delay 属性设置打开和关闭的延时。

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
openopenbooleanfalse

是否打开下拉组件

disableddisabledbooleanfalse

是否禁用下拉组件

triggertrigger'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string'click'

下拉组件的触发方式,支持多个值,用空格分隔。可选值包括:

  • click:点击触发
  • hover:鼠标悬浮触发
  • focus:聚焦触发
  • contextmenu:鼠标右键点击、或触摸长按触发
  • manual:仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式
placementplacement'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-clickstayOpenOnClickbooleanfalse

点击 <mdui-menu-item> 后,下拉组件是否保持打开状态

open-delayopenDelaynumber150

鼠标悬浮触发下拉组件打开的延时,单位为毫秒

close-delaycloseDelaynumber150

鼠标悬浮触发下拉组件关闭的延时,单位为毫秒

open-on-pointeropenOnPointerbooleanfalse

是否在触发下拉组件的光标位置打开下拉组件,常用于打开鼠标右键菜单

事件

名称
open

下拉组件开始打开时,事件被触发。可以通过调用 event.preventDefault() 阻止下拉组件打开

opened

下拉组件打开动画完成时,事件被触发

close

下拉组件开始关闭时,事件被触发。可以通过调用 event.preventDefault() 阻止下拉组件关闭

closed

下拉组件关闭动画完成时,事件被触发

Slots

名称
默认

下拉组件的内容

trigger

触发下拉组件的元素,例如 <mdui-button> 元素

CSS Parts

名称
trigger

触发下拉组件的元素的容器,即 trigger slot 的容器

panel

下拉组件内容的容器

CSS 自定义属性

名称
--z-index

组件的 CSS z-index

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库