MDUI-Ext
MDUI-Ext是 MDUI 框架的扩展,使用自定义标签来减少大量重复代码
示例:
<mdui-btn>这是一个按钮</mdui-btn>
<mdui-btn raised>这是一个有浮动效果的按钮</mdui-btn>
<mdui-btn color="indigo">这是一个靛青色扁平按钮</mdui-btn>
效果:
安装
直接引用
这是MDUI的扩展所以你需要先引用MDUI
<body>
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js" integrity="sha256-yZDVNJKUgE4A7uGn33A8XGP3fiALjOiUNILWcczo+vk=" crossorigin="anonymous"></script>
</body>
然后再加上MDUI-Ext
<body>
<script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js" integrity="sha256-yZDVNJKUgE4A7uGn33A8XGP3fiALjOiUNILWcczo+vk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/mdui-ext@0.0.2/dist/js/mdui-ext.min.js" integrity="sha256-8L6miH16rjH+KNblPigAnqh5im/z35bE595eLjR65vo=" crossorigin="anonymous"></script>
</body>
npm安装
npm install --save mdui
npm install --save mdui-ext
TODO-List
样式
- <input checked="" disabled="" type="checkbox"> 图标
- <input disabled="" type="checkbox"> 网格布局
组件
- <input checked="" disabled="" type="checkbox"> 按钮
- <input checked="" disabled="" type="checkbox"> 浮动操作按钮
- <input checked="" disabled="" type="checkbox"> 浮动操作按钮 - 弹出菜单
- <input checked="" disabled="" type="checkbox"> 分割线
- <input disabled="" type="checkbox"> 可扩展面板
- <input disabled="" type="checkbox"> 文本框
- <input disabled="" type="checkbox"> 选择控件
- <input disabled="" type="checkbox"> 滑块
- <input disabled="" type="checkbox"> 列表
- <input disabled="" type="checkbox"> 列表控制
- <input disabled="" type="checkbox"> 网格列表
- <input disabled="" type="checkbox"> Tab 选项卡
- <input disabled="" type="checkbox"> 工具栏
- <input disabled="" type="checkbox"> 应用栏
- <input disabled="" type="checkbox"> 抽屉式导航栏
- <input disabled="" type="checkbox"> 底部导航栏
- <input disabled="" type="checkbox"> 卡片
- <input disabled="" type="checkbox"> 纸片
- <input disabled="" type="checkbox"> 工具提示
- <input disabled="" type="checkbox"> Snackbar
- <input disabled="" type="checkbox"> 表格
- <input disabled="" type="checkbox"> 对话框
- <input disabled="" type="checkbox"> 菜单
- <input disabled="" type="checkbox"> 进度指示器