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" >
2017-03-24 15:15:57 +00:00
< a href = "https://www.npmjs.com/package/vue-material" >
< img src = "https://img.shields.io/npm/dt/vue-material.svg" alt = "Downloads" >
< / a >
2016-11-21 23:22:54 +00:00
2017-03-24 15:15:57 +00:00
< a href = "https://www.npmjs.com/package/vue-material" >
< img src = "https://img.shields.io/npm/v/vue-material.svg" alt = "Version" >
2017-05-19 16:41:59 +00:00
< / a >
2016-11-21 23:22:54 +00:00
2017-05-07 22:35:07 +00:00
< a href = "https://cdnjs.com/libraries/vue-material" >
2017-05-22 03:36:08 +00:00
< img src = "https://img.shields.io/cdnjs/v/vue-material.svg" alt = "Version" >
2017-03-21 01:24:46 +00:00
< / a >
2016-11-21 23:22:54 +00:00
2017-05-07 22:35:07 +00:00
< a href = "https://cdnjs.com/libraries/vue-material" >
< img src = "https://img.shields.io/cdnjs/v/vue-material.svg" alt = "Version" >
2017-03-24 15:15:57 +00:00
< / a >
2016-11-21 23:22:54 +00:00
2017-03-24 15:15:57 +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 >
2017-01-12 21:30:41 +00:00
2017-03-24 15:15:57 +00:00
< a href = "https://gitter.im/vuematerial" >
< img src = "https://img.shields.io/gitter/room/vuematerial/home.svg" alt = "Gitter Chat" >
< / a >
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
2017-01-30 19:52:52 +00:00
Build powerful and well-designed web apps that 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
2017-01-16 18:14:21 +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
```
2017-01-12 21:33:20 +00:00
## Changelog
< a href = "https://vuematerial.github.io/#/changelog" target = "_blank" > Changelog< / a >
## Questions
The issue list is exclusively for reports, bugs and feature requests. Use the [Gitter Channel ]( https://gitter.im/vuematerial ) instead.
## Contributing
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-12-05 03:57:58 +00:00
## Browser Support
Vue Material supports the latest version of all Browsers. This means:
2017-02-07 23:16:19 +00:00
* Google Chrome 52+
2016-12-05 03:57:58 +00:00
* Firefox 48+
* Safari 9+
2017-02-07 23:16:19 +00:00
* Opera 38+
* Edge 12+
2016-12-05 03:57:58 +00:00
* IE 11
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-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 >
2016-10-14 14:42:59 +00:00
## License
MIT