50 lines
2.4 KiB
Markdown
50 lines
2.4 KiB
Markdown
# mdui
|
||
|
||
[](https://badge.fury.io/gh/zdhxiong%2Fmdui)
|
||
[](https://www.npmjs.com/package/mdui)
|
||
[](https://cdnjs.com/libraries/mdui)
|
||
|
||
[官网](https://www.mdui.org) | [文档](https://www.mdui.org/docs/2/)
|
||
|
||
使用 Web Components 实现，遵循 Material You 设计规范的 Web 前端组件库。
|
||
|
||
* **Web Components**：mdui 组件全部使用 Web Components 开发，使用组件就像使用 `<div>` 标签一样简单。
|
||
* **Material You**：遵循最新的 Material Design 3（Material You）设计规范，使你的产品美观、易用。
|
||
* **动态配色**：支持根据给定颜色值，或给定一张图片，mdui 能自动计算出颜色值，生成整套配色方案，并在所有 mdui 组件中生效。
|
||
* **暗色模式**：所有组件都支持暗色模式、及支持根据操作系统设置自动切换亮色模式和暗色模式。
|
||
* **轻量级**：gzip 后的 CSS + JavaScript 仅 85KB，使用按需导入可进一步减小体积，使加载更迅速。
|
||
* **IDE 支持**：在 VSCode 和 WebStorm 中能获得完美的代码提示。且提供了 VSCode 扩展和 WebStorm 插件，使开发更便捷。
|
||
* **兼容所有框架**：mdui 能兼容 Vue、React、Angular 等框架，只要在浏览器上运行的应用，都能使用 mdui。
|
||
* **TypeScript 支持**：mdui 完全使用 TypeScript 开发，拥有完美的类型提示。
|
||
* **无依赖**：不需要依赖任何第三方库，节约网络流量，使加载更迅速。
|
||
* **组件丰富**：mdui 包含 30 多个组件，及十余个工具函数，常用组件都有。
|
||
* **Material Icons 图标库**：提供了超过 1 万个图标组件，可按需导入所需图标。
|
||
* **低学习成本**：只需懂一点 HTML、CSS、JavaScript 的基础知识，就能使用 mdui。
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
npm install mdui --save
|
||
```
|
||
|
||
### 导入 CSS 及 JS 文件
|
||
|
||
```js
|
||
import 'mdui/mdui.css';
|
||
import 'mdui';
|
||
```
|
||
|
||
### 使用组件
|
||
|
||
```html
|
||
<mdui-button>Button</mdui-button>
|
||
```
|
||
|
||
## 赞助
|
||
|
||
赞助以帮助 mdui 持续更新
|
||
|
||
|
||
|
||
[](https://www.paypal.me/zdhxiong/5)
|