常见问题

使用自闭合标签为何无法显示组件?

mdui 是基于 Web Components 开发的组件库,Web Components 规范不支持自闭合标签,因此请确保为 mdui 组件添加结束标签。

<!-- 错误用法 -->
<mdui-text-field/>

<!-- 正确用法 -->
<mdui-text-field></mdui-text-field>

如何在组件加载完成前隐藏组件?

由于 mdui 组件是通过 JavaScript 进行注册的,因此在 js 文件加载并注册组件之前,组件可能会暂时显示为无样式状态。以下两种方法可以解决这个问题:

一种方法是使用 CSS 的 :defined 伪类来隐藏未注册的 mdui 组件。以下 CSS 代码将隐藏所有未注册的 mdui 组件,并在组件注册完成后立即显示:

:not(:defined) {
  visibility: hidden;
}

另一种方法是使用 JavaScript 的 customElements.whenDefined() 方法。这个方法返回一个 promise,当指定的组件注册完成后,该 promise 将被 resolve。为了处理某些组件由于特殊原因无法加载的情况,你可以配合使用 Promise.allSettled() 方法。

以下示例首先通过 opacity: 0<body> 隐藏,然后在组件注册完成后,使页面淡入显示。同时,示例使用了 Promise.allSettled() 来等待所有 promise 完成,确保即使某个组件无法加载,页面也能正常显示:

<style>
  body {
    opacity: 0;
  }

  body.ready {
    opacity: 1;
    transition: 0.25s opacity;
  }
</style>

<script type="module">
  await Promise.allSettled([
    customElements.whenDefined('mdui-button'),
    customElements.whenDefined('mdui-card'),
    customElements.whenDefined('mdui-checkbox')
  ]);

  // 现在 button, card, checkbox 组件已经注册完成,添加 ready class,使页面淡入显示
  document.body.classList.add('ready');
</script>
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 图标组件库