MDUI 组件大观园

本文展示了 MDUI v2 中各类常用组件的实际渲染效果。所有组件均为原生 Web Components，无需任何框架即可使用。

一、按钮（Button）

MDUI 的按钮支持四种变体：filled（填充）、tonal（色调）、outlined（描边）、text（文字）。

基础变体

Filled
Tonal
Outlined
Text

带图标的按钮

发送消息

禁用状态

禁用按钮
禁用描边

二、卡片（Card）

卡片是 Material Design 的核心容器组件，用于组织相关内容。

卡片标题

这是一张 Material Design 风格的卡片。你可以在这里放置任何内容：文本、图片、按钮、列表等。

取消

确认

带图片的卡片

山间日出

清晨的第一缕阳光洒在山峰上，整个世界都被染成了金色。

风景

摄影

旅行

GitHub 仓库卡片

只需一行代码，即可在文章中插入美观的 GitHub 仓库信息卡片。

我的项目

xingmihai / xmh-mdui

MDUI v2 个人博客主题

其他示例

microsoft / vscode

Visual Studio Code

facebook / react

A JavaScript library for building user interfaces

用法说明

在 Markdown 中插入以下语法即可：

<div class="gh-wrap"><mdui-card class="gh-card" variant="filled" href="https://github.com/用户名/仓库名" target="_blank" clickable><div class="gh-header"><div class="gh-avatar-wrap"><img class="gh-avatar" src="https://github.com/用户名.png" alt="用户名"></div><div class="gh-info"><div class="gh-name">用户名 / 仓库名</div><div class="gh-desc">仓库描述</div></div><mdui-icon name="open_in_new" style="opacity:0.4"></mdui-icon></div><div class="gh-badges"><a href="https://github.com/用户名/仓库名/stargazers" target="_blank" rel="noopener"><img src="https://img.shields.io/github/stars/用户名/仓库名?style=flat&logo=github&label=Stars" alt="Stars"></a><a href="https://github.com/用户名/仓库名/network/members" target="_blank" rel="noopener"><img src="https://img.shields.io/github/forks/用户名/仓库名?style=flat&logo=github&label=Forks" alt="Forks"></a><a href="https://github.com/用户名/仓库名/blob/main/LICENSE" target="_blank" rel="noopener"><img src="https://img.shields.io/github/license/用户名/仓库名?style=flat" alt="License"></a></div></mdui-card></div>

参数	必填	说明
`card`	是	GitHub 用户名和仓库名，格式 `用户/仓库`
`desc`	否	仓库描述，默认显示 `GitHub Repository`

---

三、输入控件

文本框（Text Field）

复选框与单选框

已选中

未选中

半选状态

选项一

选项二

选项三

开关（Switch）

开启通知

深色模式

滑块（Slider）

四、列表（List）

列表组件用于展示一组相关的数据项。

五、进度条

线性进度条（Linear Progress）

圆形进度条（Circular Progress）

六、选项卡（Tabs）

选项卡用于在同一视图中切换不同的内容面板。

文章

图片

视频

这里是文章列表的内容区域。你可以在这里展示博客文章、技术文档等内容。

这里是图片画廊的内容区域。适合展示摄影作品、设计稿等视觉内容。

这里是视频列表的内容区域。可以嵌入视频播放器或展示视频封面。

七、折叠面板（Collapse）

折叠面板用于在有限空间内展示大量内容。

Web Components 是一组 Web 平台 API，允许你创建可重用的自定义元素（封装功能）并在你的 Web 应用中使用它们，就像使用标准 HTML 元素一样。

MDUI 基于原生 Web Components 开发，因此可以在任何 Web 框架中使用，包括 React、Vue、Angular、Svelte 等。无需额外的适配层。

MDUI 提供了丰富的 CSS 自定义属性（Design Tokens），你可以通过修改这些变量来自定义颜色、圆角、动画等。也可以使用 setColorScheme() 函数动态生成配色方案。

八、徽标与标签

徽标（Badge）

99+

标签（Chip）

前端开发

Web Components

Material Design

UI 设计

响应式

TypeScript

九、头像（Avatar）

头像组件支持图片、图标和文字三种形式。

星

十、代码块

MDUI 博客本身也支持代码高亮，以下是一些示例：

JavaScript

import { snackbar } from 'mdui/functions/snackbar.js';

snackbar({
  message: '操作已成功完成！',
  action: '撤销',
  onActionClick: () => {
    console.log('用户点击了撤销');
  }
});

CSS

:root {
  --mdui-shape-corner-medium: 0.75rem;
  --mdui-motion-duration-short2: 100ms;
}

.custom-card {
  background: rgb(var(--mdui-color-surface-container));
  border-radius: var(--mdui-shape-corner-large);
}

HTML

<mdui-card style="padding: 24px;">
  <div class="mdui-typescale-headline-medium">Hello MDUI</div>
  <mdui-button variant="filled">点击我</mdui-button>
</mdui-card>

十一、表格

组件名称	类型	说明
`mdui-button`	基础	按钮，支持多种变体
`mdui-card`	容器	卡片，用于组织内容
`mdui-text-field`	输入	文本输入框
`mdui-dialog`	反馈	对话框
`mdui-snackbar`	反馈	底部提示条
`mdui-list`	布局	列表
`mdui-tabs`	布局	选项卡
`mdui-collapse`	布局	折叠面板
`mdui-chip`	展示	标签/筛选器
`mdui-avatar`	展示	头像

十二、引用块

MDUI 是一套基于 Web Components 开发的组件库，遵循 Material Design 3 设计规范。

它无需任何框架即可使用，同时也完美支持 React、Vue、Angular 等主流前端框架。

总结

以上就是 MDUI v2 中常用组件的展示。通过这些组件，你可以快速构建出符合 Material Design 3 规范的现代化 Web 界面。

如果你对这些组件感兴趣，可以访问 MDUI 官方文档了解更多详细信息。

MDUI 组件拓展