Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-14 18:23:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Explains better how to install and configure vue-material #11

Browse source
This commit is contained in:
Marcos Moura 2016-10-21 18:21:54 -02:00
parent 9fb2a984aa
commit d6950c1afa
2 changed files with 123 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
README.md
View file

@ -14,25 +14,41 @@ Install Vue Material through npm or yarn
npm install --save vue-material
yarn add vue-material
```
<small>* Others package managers like JSPM and Bower are not supported yet.</small>
Or <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:
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 <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:
``` html
<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>
```
## 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 <code>v-md-theme</code> directive:

130
docs/src/pages/GettingStarted.vue
View file

@ -8,18 +8,26 @@
<code>npm install vue-material</code><br>
<code>yarn add vue-material</code>
</p>
<p>- Import or require Vue and Vue Material in your code:</p>
<code-block lang="javascript">
import Vue from &#039;vue&#039;;
import VueMaterial from &#039;vue-material&#039;;
// OR
var Vue = require(&#039;vue&#039;);
var VueMaterial = require(&#039;vue-material&#039;);
</code-block>
<small>* Others package managers like JSPM and Bower are not supported yet.</small>
<md-tabs class="md-transparent">
<md-tab md-label="ES6">
<code-block lang="javascript">
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
</code-block>
</md-tab>
<md-tab md-label="AMD">
<code-block lang="javascript">
var Vue = require(vue')
var VueMaterial = require(vue-material')
require('vue-material/dist/vue-material.css')
</code-block>
</md-tab>
</md-tabs>
<p>Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> from Github and reference the script and the stylesheet in your HTML:</p>
<code-block lang="xml">
&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/vue-material.css&quot;&gt;
@ -29,49 +37,107 @@ var VueMaterial = require(&#039;vue-material&#039;);
<single-page-section label="Usage">
<p>Enable Vue Material in your application using <code>Vue.use()</code>. You can always enable individual components:</p>
<code-block lang="javascript">
Vue.use(VueMaterial);
<md-tabs class="md-transparent">
<md-tab md-label="ES6">
<code-block lang="javascript">
// 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);
</code-block>
// 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)
</code-block>
</md-tab>
<md-tab md-label="AMD">
<code-block lang="javascript">
// 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)
</code-block>
</md-tab>
</md-tabs>
</single-page-section>
<single-page-section label="Apply theme">
<p>To get Vue Material working properly, you'll need to configure and apply a default theme.</p>
<code-block lang="javascript">
<p>To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once.</p>
<md-tabs class="md-transparent">
<md-tab md-label="Single Theme">
<code-block lang="javascript">
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
});
</code-block>
})
</code-block>
</md-tab>
<p>Or you can register multiple themes at once.</p>
<code-block lang="javascript">
<md-tab md-label="Multiple Themes">
<code-block lang="javascript">
Vue.material.theme.registerAll({
default: {
primary: 'cyan',
accent: 'pink'
},
phone: {
indigo: {
primary: 'indigo',
accent: 'pink'
}
});
</code-block>
})
</code-block>
</md-tab>
</md-tabs>
<p>Apply your theme using <code>v-md-theme</code> directive:</p>
<p>Apply your theme on each code part that you want using <code>v-md-theme</code> directive:</p>
<code-block lang="xml">
&lt;div v-md-theme=&quot;&#039;default&#039;&quot;&gt;&lt;/div&gt;
&lt;div v-md-theme=&quot;&#039;phone&#039;&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
&lt;md-toolbar&gt;
&lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
&lt;/md-toolbar&gt;
&lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
&lt;/div&gt;
</code-block>
</single-page-section>
</single-page>
</template>
<style lang="scss" scoped>
.md-tab {
padding: 16px 0;
border-top: 1px solid rgba(#000, .12);
}
</style>