mdui 前端框架是一款轻量、易用，基于 Material Design 的前端框架。它提供了包括 CSS、JS 和 HTML 组件，可以快速的实现 Material Design 风格的页面。

一、基本使用

使用 mdui 前端框架，我们需要首先引入其 CSS 文件和 JS 文件：

<link rel="stylesheet" href="path/to/mdui.min.css"> <script src="path/to/mdui.min.js"></script>

然后就可以在 HTML 中使用 mdui 提供的组件了，例如使用按钮组件：

<button class="mdui-btn">按钮</button>

以上代码会生成一个 Material Design 风格的按钮。

二、组件

1. 表格

mdui 提供了表格组件，可以快速的生成一个 Material Design 风格的表格：

<table class="mdui-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> </tr> <tr> <td>李四</td> <td>20</td> </tr> </tbody> </table>

以上代码会生成一个包含两列、两行数据的表格。可以使用 mdui-table-hover 类来添加鼠标悬浮效果。

2. 抽屉

mdui 提供了抽屉组件，可以快速地实现抽屉效果，例如：

<!-- 左侧抽屉 --> <div class="mdui-drawer" id="left-drawer"> <div class="mdui-list"> <ul> <li class="mdui-subheader">分组1</li> <li class="mdui-list-item">选项1</li> <li class="mdui-list-item">选项2</li> <li class="mdui-list-item">选项3</li> </ul> </div> </div> <!-- 右侧抽屉 --> <div class="mdui-drawer mdui-drawer-right" id="right-drawer"> <div class="mdui-list"> <ul> <li class="mdui-subheader">分组1</li> <li class="mdui-list-item">选项1</li> <li class="mdui-list-item">选项2</li> <li class="mdui-list-item">选项3</li> </ul> </div> </div>

以上代码会生成一个左侧和右侧可以打开或关闭的抽屉菜单。

三、JavaScript 组件

1. Dialog 对话框

mdui 提供了 Dialog 对话框组件，可以快速地实现弹出对话框，例如：

<!-- 触发器 --> <button class="mdui-btn" mdui-dialog="{target:'#my-dialog'}">打开对话框</button> <!-- 对话框内容 --> <div id="my-dialog" class="mdui-dialog"> <div class="mdui-dialog-title">对话框标题</div> <div class="mdui-dialog-content">对话框内容</div> <div class="mdui-dialog-actions"> <button class="mdui-btn mdui-ripple">取消</button> <button class="mdui-btn mdui-ripple">确定</button> </div> </div>

以上代码会生成一个可以触发弹出对话框的按钮，点击后会弹出一个包含标题、内容和操作按钮的对话框。

2. SnackBar 消息框

mdui 提供了 SnackBar 消息框组件，可以快速地实现消息提示效果，例如：

<!-- 触发器 --> <button onclick="mdui.snackbar({message: '操作成功', position: 'bottom'})" class="mdui-btn mdui-ripple">显示消息</button>

以上代码会生成一个按钮，点击后会在页面底部弹出一个包含消息的 SnackBar 消息框。

四、结束语

mdui 前端框架提供了丰富的 CSS 和 JS 组件，可以快速地实现 Material Design 风格的页面。同时，mdui 前端框架也非常易于上手，适合于初学者使用。