Vue 材料

Vue 材料（Vue Material）是由 vuematerial.io 开发的一个 Material Design 风格的 Vue.js 组件库，它为开发人员提供了一套可高度自定义的组件集合。

特性

• 响应式：组件自适应不同屏幕宽度和设备类型。
• 可配置：组件提供了丰富的选项和配置项来实现自定义。
• 规范化：组件遵循 Material Design 规范，让应用看起来更加现代化。
• 模块化：组件具有高度的独立性，可以根据需要单独使用。
• 插件集成：组件可以与其他插件和库无缝集成。

安装

安装 Vue 材料很简单，只需要在命令行中执行以下命令：

npm install vue-material

或者通过 yarn 安装：

yarn add vue-material

使用

要使用 Vue 材料，只需在你的 Vue 项目中引入它，并将其注册为你的根组件。以下是一个简单的示例：

<template>
  <div>
    <md-button class="md-raised md-primary">按钮</md-button>
  </div>
</template>

<script>
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)

export default {
  ...
}
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');

html, body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

div {
  margin: 20px;
}
</style>

在上述代码中，我们首先引入 VueMaterial 组件并将其作为 Vue 的插件使用。然后，我们在模板中使用 md-button 组件来创建一个 Material Design 风格的按钮。

示例

以下是一些常用的 Vue 材料组件的示例：

md-button

<md-button class="md-raised md-primary">Primary</md-button>
<md-button class="md-raised md-accent">Accent</md-button>
<md-button class="md-raised md-warn">Warn</md-button>

md-card

<md-card>
  <md-card-header>
    <div class="md-title">标题</div>
  </md-card-header>
  <md-card-content>
    <p>内容</p>
  </md-card-content>
  <md-card-actions>
    <md-button>Action 1</md-button>
    <md-button>Action 2</md-button>
  </md-card-actions>
</md-card>

md-dialog

<md-dialog :md-active.sync="dialogActive">
  <md-dialog-title>标题</md-dialog-title>
  <md-dialog-content>
    <p>内容</p>
  </md-dialog-content>
  <md-dialog-actions>
    <md-button class="md-primary" @click.native="dialogActive = false">确定</md-button>
    <md-button @click.native="dialogActive = false">取消</md-button>
  </md-dialog-actions>
</md-dialog>

更多资源

• Vue材料官网
• Vue材料GitHub仓库
• Vue材料示例集
• Material Design规范