diff --git a/README.md b/README.md index 2585356..9db1b8c 100644 --- a/README.md +++ b/README.md @@ -14,25 +14,41 @@ Install Vue Material through npm or yarn npm install --save vue-material yarn add vue-material ``` +* Others package managers like JSPM and Bower are not supported yet. -Or download and reference the script and the stylesheet in your HTML: +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 + +var Vue = require(vue') +var VueMaterial = require(vue-material') +require('vue-material/dist/vue-material.css') +``` + +Alternativelly you can download and reference the script and the stylesheet in your HTML: ``` html ``` +## Usage + Enable Vue Material in your application using ```Vue.use()```. You can always enable individual components: ``` javascript -Vue.use(VueMaterial); +Vue.use(VueMaterial) // OR -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); +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) ``` To get Vue Material working properly, you'll need to configure and apply a default theme. @@ -41,7 +57,7 @@ To get Vue Material working properly, you'll need to configure and apply a defau Vue.material.theme.register('default', { primary: 'cyan', accent: 'pink' -}); +}) ``` Or you can register multiple themes at once. @@ -56,7 +72,7 @@ Vue.material.theme.registerAll({ primary: 'indigo', accent: 'pink' } -}); +}) ``` Apply your theme using v-md-theme directive: diff --git a/docs/src/pages/GettingStarted.vue b/docs/src/pages/GettingStarted.vue index ac30b1d..05d1cfe 100644 --- a/docs/src/pages/GettingStarted.vue +++ b/docs/src/pages/GettingStarted.vue @@ -8,18 +8,26 @@ npm install vue-material
yarn add vue-material

-

- Import or require Vue and Vue Material in your code:

- -import Vue from 'vue'; -import VueMaterial from 'vue-material'; - -// OR - -var Vue = require('vue'); -var VueMaterial = require('vue-material'); - * Others package managers like JSPM and Bower are not supported yet. + + + +import Vue from 'vue' +import VueMaterial from 'vue-material' +import 'vue-material/dist/vue-material.css' + + + + + +var Vue = require(vue') +var VueMaterial = require(vue-material') +require('vue-material/dist/vue-material.css') + + + +

Or download from Github and reference the script and the stylesheet in your HTML:

<link rel="stylesheet" href="path/to/vue-material.css"> @@ -29,49 +37,107 @@ var VueMaterial = require('vue-material');

Enable Vue Material in your application using Vue.use(). You can always enable individual components:

- -Vue.use(VueMaterial); + + + +// To import the whole library +import Vue from 'vue' +import VueMaterial from 'vue-material' +import 'vue-material/dist/vue-material.css' -// OR +Vue.use(VueMaterial) -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); - +// 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) + + + + + +// To import the whole library +var Vue = require('vue') +var VueMaterial = require('vue-material') +require('vue-material/dist/vue-material.css') + +Vue.use(VueMaterial) + +// Or to import individual components +var Vue = require('vue') +var VueMaterial = require('vue-material') +require('vue-material/dist/components/mdCore/index.css') //Required to boot vue material +require('vue-material/dist/components/mdButton/index.css') +require('vue-material/dist/components/mdIcon/index.css') +require('vue-material/dist/components/mdSidenav/index.css') +require('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) + + +
-

To get Vue Material working properly, you'll need to configure and apply a default theme.

- +

To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once.

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

Or you can register multiple themes at once.

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

Apply your theme using v-md-theme directive:

+

Apply your theme on each code part that you want using v-md-theme directive:

-<div v-md-theme="'default'"></div> -<div v-md-theme="'phone'"></div> +<div id="app" v-md-theme="'default'"> + <md-toolbar> + <div class="md-title">My App</div> + </md-toolbar> + + <md-button v-md-theme="'indigo'">My Button</md-button> +</div>
+ +