Vue Material

Vue Material：多端适配 响应式 UI 组件库

文章底部获取项目地址

https://mp.weixin.qq.com/s/JB42YwQ388M0xMLJxTqZ9A

Vue Material 是一个基于 Vue.js 的 UI 组件框架，提供了一系列遵循 Google Material Design 规范的组件。帮助开发者快速构建美观、响应式的 Web 应用，支持所有现代浏览器，并提供动态主题和易于使用的 API。

1. 功能介绍
   1.1 组件库
   Vue Material 提供了丰富的组件，覆盖了大多数常见的 UI 需求。以下是一些核心组件：

组件
描述
按钮
支持多种样式和功能的按钮，包括浮动按钮、图标按钮等。
卡片
用于展示内容的卡片组件，支持多种布局和样式。
对话框
弹出式对话框，支持多种配置，如标题、内容、操作按钮等。
输入框
支持文本输入、密码输入、多行输入等。
导航栏
顶部导航栏，支持多种布局和样式。
标签页
用于分页显示内容，支持动态切换。
进度条
显示加载进度的进度条组件。
开关
用于切换状态的开关组件。
滑块
用于选择范围的滑块组件。
1.2 主题定制
Vue Material 支持动态主题，允许开发者在运行时切换主题。你可以通过简单的配置文件自定义主题颜色、字体等。

1.3 响应式设计
Vue Material 使用栅格系统布局，确保内容在不同设备上显示良好。它支持桌面、平板和手机等设备，适配多种屏幕尺寸。

1.4 易于集成
Vue Material 支持多种包管理器，如 npm 和 yarn。它也支持单文件组件（.vue 文件），方便开发者使用。

2. 组件预览

3. 安装与使用

3.1 安装

通过 npm 或 yarn 安装 Vue Material：

npm install vue-material --save

# 或
yarn add vue-material

3.2 全局引入
在项目中全局引入 Vue Material：

import Vue from 'vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';

Vue.use(VueMaterial);

3.3 按需引入

按需引入特定组件：

import Vue from 'vue';
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components';
import 'vue-material/dist/vue-material.min.css';

Vue.use(MdButton);
Vue.use(MdContent);
Vue.use(MdTabs);

3.4 HTML 引入

通过 HTML 引入 Vue Material：

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

3.5 字体与图标

可选地引入 Roboto 字体和 Material Icons：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">

4. 示例代码

4.1 按钮组件

<template>
  <div>
    <md-button class="md-raised md-primary">Primary</md-button>
    <md-button class="md-raised md-accent">Accent</md-button>
  </div>
</template>

4.2 对话框组件

<template>
  <md-dialog :md-active.sync="showDialog">
    <md-dialog-title>Dialog Title</md-dialog-title>
    <md-dialog-content>
      <p>Dialog content here...</p>
    </md-dialog-content>
    <md-dialog-actions>
      <md-button class="md-primary" @click="showDialog = false">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

4.3 主题切换

import Vuefrom'vue';
importVueMaterialfrom'vue-material';
import'vue-material/dist/vue-material.min.css';
import'vue-material/dist/theme/default.css'; // 默认主题
import'vue-material/dist/theme/roboto-font.css'; // Roboto 字体
import'vue-material/dist/theme/material-icons.css'; // Material Icons
Vue.use(VueMaterial);

5. 浏览器支持
   Vue Material 支持所有现代浏览器，包括但不限于：

• Chrome
• Firefox
• Safari
• Edge