mdui-ext
Version:
a extension for mdui !(not completed)
67 lines (62 loc) • 1.97 kB
Markdown
# MDUI-Ext
[](https://www.jsdelivr.com/package/npm/mdui-ext)
MDUI-Ext是 [MDUI](https://www.mdui.org) 框架的扩展，使用自定义标签来减少大量重复代码
示例：
```html
<mdui-btn>这是一个按钮</mdui-btn>
<mdui-btn raised>这是一个有浮动效果的按钮</mdui-btn>
<mdui-btn color="indigo">这是一个靛青色扁平按钮</mdui-btn>
```
效果：
### 安装
#### 直接引用
这是MDUI的扩展所以你需要先引用MDUI
```html
<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
```html
<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安装
```shell
npm install --save mdui
npm install --save mdui-ext
```
### TODO-List
#### 样式
- [x] 图标
- [ ] 网格布局
#### 组件
- [x] 按钮
- [x] 浮动操作按钮
- [x] 浮动操作按钮 - 弹出菜单
- [x] 分割线
- [ ] 可扩展面板
- [ ] 文本框
- [ ] 选择控件
- [ ] 滑块
- [ ] 列表
- [ ] 列表控制
- [ ] 网格列表
- [ ] Tab 选项卡
- [ ] 工具栏
- [ ] 应用栏
- [ ] 抽屉式导航栏
- [ ] 底部导航栏
- [ ] 卡片
- [ ] 纸片
- [ ] 工具提示
- [ ] Snackbar
- [ ] 表格
- [ ] 对话框
- [ ] 菜单
- [ ] 进度指示器