TypeScript Support

mdui is developed with TypeScript, offering robust TypeScript support. All official mdui libraries include type declaration files for immediate use.

Component Instance Types

Occasionally, you may need to assert a JavaScript variable as an mdui component instance. You can import the corresponding component type directly from mdui.

For example, to import the Tooltip component type from the component file:

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

Alternatively, import the Tooltip component type directly from mdui:

import type { Tooltip } from 'mdui';

Then, you can assert a JavaScript variable as the Tooltip type:

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

Your IDE will automatically suggest the properties and methods of the tooltip variable.

When adding an event listener to the tooltip variable, the IDE will also suggest event names, event types, and the this context in the callback function:

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

Event Types

Each component exports an interface mapping the component's event names to their corresponding event object types. The interface is named ${componentName}EventMap.

For example, the Tooltip component exports an interface named TooltipEventMap:

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

You can import the TooltipEventMap interface from the component file:

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

Or directly from mdui:

import type { TooltipEventMap } from 'mdui';

This interface only includes component-specific events. Since mdui components inherit from HTMLElement, they also support HTMLElement events. Use intersection types to get all event types for a component:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
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
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint