2016-11-21 23:22:54 +00:00
< p align = "center" >
2016-12-05 03:57:58 +00:00
< a href = "https://vuematerial.github.io/" target = "_blank" >
2016-12-05 04:44:15 +00:00
< img width = "150" src = "https://vuematerial.github.io/assets/logo-vue-material-default.png" >
2016-11-21 23:22:54 +00:00
< / a >
< / p >
2016-06-17 23:32:39 +00:00
2016-11-21 23:22:54 +00:00
< p align = "center" > Material Design for Vue.js< / p >
< p align = "center" >
< a href = "https://www.npmjs.com/package/vue-material" > < img src = "https://img.shields.io/npm/dt/vue-material.svg" alt = "Downloads" > < / a >
< a href = "https://www.npmjs.com/package/vue-material" > < img src = "https://img.shields.io/npm/v/vue-material.svg" alt = "Version" > < / a >
2016-11-21 23:23:36 +00:00
< a href = "https://www.npmjs.com/package/vue-material" > < img src = "https://img.shields.io/npm/l/vue-material.svg" alt = "License" > < / a > < br >
2016-11-21 23:22:54 +00:00
< / p >
2016-11-22 03:54:37 +00:00
Vue Material is lightweight framework built exactly according to the < a href = "http://material.google.com" target = "_blank" > Material Design< / a > specs.
2016-12-05 03:57:58 +00:00
It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.
2016-11-22 03:54:37 +00:00
Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
2016-10-14 14:25:29 +00:00
2016-10-17 06:33:00 +00:00
## Demo and Documentation
2016-12-05 03:57:58 +00:00
< a href = "https://vuematerial.github.io/" target = "_blank" > Demo< / a >
2016-10-17 06:33:00 +00:00
2016-10-17 02:19:23 +00:00
## Installation
2016-11-21 23:22:54 +00:00
Import Roboto and Material Icons from Google CDN:
2016-10-21 20:25:29 +00:00
``` html
2016-10-24 03:13:27 +00:00
< 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" >
2016-10-21 20:25:29 +00:00
```
2016-10-17 02:19:23 +00:00
Install Vue Material through npm or yarn
``` bash
npm install --save vue-material
yarn add vue-material
```
2016-10-21 20:21:54 +00:00
< small > * Others package managers like JSPM and Bower are not supported yet.< / small >
2016-10-17 02:19:23 +00:00
2016-10-21 20:21:54 +00:00
Import or require Vue and Vue Material in your code:
``` javascript
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
// OR
2016-10-24 04:59:17 +00:00
var Vue = require('vue')
var VueMaterial = require('vue-material')
2016-10-21 20:21:54 +00:00
require('vue-material/dist/vue-material.css')
```
Alternativelly you can < a href = "https://github.com/marcosmoura/vue-material/archive/master.zip" target = "_blank" rel = "noopener" > download< / a > and reference the script and the stylesheet in your HTML:
2016-10-17 02:19:23 +00:00
``` html
< link rel = "stylesheet" href = "path/to/vue-material.css" >
< script src = "path/to/vue-material.js" > < / script >
```
2016-10-21 20:21:54 +00:00
## Usage
2016-10-17 02:19:23 +00:00
Enable Vue Material in your application using ```Vue.use()```. You can always enable individual components:
``` javascript
2016-10-21 20:21:54 +00:00
Vue.use(VueMaterial)
2016-10-17 02:19:23 +00:00
// OR
2016-10-21 20:21:54 +00:00
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)
2016-10-17 02:19:23 +00:00
```
2016-12-05 03:57:58 +00:00
## Browser Support
Vue Material supports the latest version of all Browsers. This means:
* Google Chrome 50+
* Firefox 48+
* Safari 9+
* Opera 40+
* IE 11
* Edge
2016-12-13 04:19:45 +00:00
2016-12-05 03:57:58 +00:00
< small > May work in other browsers but it's untested.< / small >
2016-10-17 06:33:00 +00:00
## Changelog
2016-12-05 03:57:58 +00:00
< a href = "https://vuematerial.github.io/#/changelog" target = "_blank" > Changelog< / a >
2016-10-17 02:19:23 +00:00
2016-11-21 23:22:54 +00:00
## Contributing
2016-07-13 05:00:31 +00:00
2016-11-21 23:22:54 +00:00
Please make sure to read the [Contributing Guide ](https://github.com/marcosmoura/vue-material/blob/master/.github/CONTRIBUTING.md ) before making a pull request.
2016-07-13 05:00:31 +00:00
2016-10-14 14:25:29 +00:00
## Credits and Thanks
2016-10-17 02:19:23 +00:00
* This library aims to delivery components using almost the same API of < a href = "https://material.angularjs.org/latest/" target = "_blank" > Angular Material</ a >
2016-10-25 07:09:44 +00:00
* Thanks a lot to < a href = "https://github.com/elviskang" target = "_blank" > elviskang</ a > for donating the npm package name!
2016-10-17 02:19:23 +00:00
* Thanks to < a href = "https://github.com/yyx990803" target = "_blank" > Evan You</ a > for allowing me to use Vue.js Logo.
2016-10-14 14:25:29 +00:00
2016-10-17 02:19:23 +00:00
## Internal Dependencies
You don't need to include any other library to work with vue-material. The focus of this project is to have a standalone build with no external dependence, but aiming to deliver the best experience without break the compatibility with the Vue.js core.
2016-12-05 04:45:08 +00:00
* < a href = "http://vuejs.org" target = "_blank" > vue</ a >
2016-10-14 14:30:38 +00:00
* < a href = "http://www.jacklmoore.com/autosize/" target = "_blank" > autosize</ a >
* < a href = "https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target = "_blank" > element.scrollintoviewifneeded-polyfill</ a >
* < a href = "https://github.com/lazd/scopedQuerySelectorShim" target = "_blank" > scopedQuerySelectorShim</ a >
2016-10-14 14:42:59 +00:00
## License
MIT
