What is vue-material?

vue-material is a lightweight framework built on Google's Material Design. It is a Vue component library that implements Google Pixel Material Design. It provides built-in dynamic themes suitable for all modern web browsers. component, and its API is also simple and clear.

Vue Material is a lightweight framework based on Google's Material Design. Design powerful and beautiful web applications that work on different screens.

vue material is a Vue component library that implements Google Pixel Material Design. It provides components with built-in dynamic themes suitable for all modern web browsers, and its API is also simple. Clearly.

You can dynamically generate and use themes, and only use components according to your own needs. The advantage of UI elements and components is that they can use APIs and others more easily.

It provides a set of reusable components and a series of UI elements, using Vue 2.0 to build applications that support mainstream browsers.

Official website: http://vuematerial.materializecss.cn/#/

Installation method

Introduce Roboto and Google Icons from Google CDN:

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

Install Vue Material through npm or yarn

npm install vue-material
yarn add vue-material

* Other package management, such as JSPM and Bower, are not supported yet.

Or download the script and style from Github and introduce it into HTML: (Download address https://github.com/marcosmoura/vue-material/archive/master.zip)

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

Usage

Enable Vue Material in your application via Vue.use(). You can also enable components individually:

// To import the whole library
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.use(VueMaterial)

// Or to import individual components
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
import 'vue-material/dist/components/mdButton/index.css'
import 'vue-material/dist/components/mdIcon/index.css'
import 'vue-material/dist/components/mdSidenav/index.css'
import 'vue-material/dist/components/mdToolbar/index.css'

Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)

Apply Theme

In order for Vue Material to work properly, you need to configure a default theme. You can also register multiple themes at once.

Single theme

Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})

Multiple themes

Vue.material.theme.registerAll({
  default: {
    primary: 'cyan',
    accent: 'pink'
  },
  indigo: {
    primary: 'indigo',
    accent: 'pink'
  }
})

To apply your theme to each part of the code, you need to use the v-md-theme directive:

<div id="app" v-md-theme="&#39;default&#39;">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>
  <md-button v-md-theme="&#39;indigo&#39;">My Button</md-button>
</div>

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial recommendations: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: Programming Learning Course! !

The above is the detailed content of What is vue-material?. For more information, please follow other related articles on the PHP Chinese website!