TypeScript 支持

mdui 是用 TypeScript 开发的,因此对 TypeScript 提供了良好的支持。所有的 mdui 官方库都自带类型声明文件,可以直接使用。

组件的实例类型

有时,你可能需要将一个 JavaScript 变量断言为 mdui 的组件实例,这时你可以直接从 mdui 中导入对应的组件类型。

例如,从组件文件中导入 Tooltip 组件的类型:

import type { Tooltip } from 'mdui/components/tooltip.js';

或者直接从 mdui 导入 Tooltip 组件的类型:

import type { Tooltip } from 'mdui';

然后,你就可以将一个 JavaScript 变量断言成 Tooltip 类型:

const tooltip = document.querySelector('mdui-tooltip') as Tooltip;

此时,你的 IDE 会自动提示 tooltip 变量的属性和方法。

如果在 tooltip 变量上添加事件监听,也会自动提示事件名称,事件类型,以及回调函数中 this 的指向:

tooltip.addEventListener('open', function(event) {
});

事件类型

每个组件都会导出一个接口,它映射了组件的事件名和它对应的事件对象类型,接口名为 ${组件名}EventMap

例如,Tooltip 组件会导出一个名为 TooltipEventMap 的接口:

export interface TooltipEventMap {
  open: CustomEvent<void>;
  opened: CustomEvent<void>;
  close: CustomEvent<void>;
  closed: CustomEvent<void>;
}

你可以从组件文件中导入该接口:

import type { TooltipEventMap } from 'mdui/components/tooltip.js';

或者直接从 mdui 导入该接口:

import type { TooltipEventMap } from 'mdui';

请注意,该接口只包含组件特有的事件,但 mdui 组件都继承自 HTMLElement,所以也支持 HTMLElement 的事件,你可以使用交叉类型来获取组件的所有事件类型:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;
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 图标组件库