Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs material design

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Vue can be combined with material design. This makes your app really slick!
It’s a style that Google uses a lot, the style is in many of their products like Gmail or Youtube.

vuejs material design

We’ll create an app that has a sidebar that can open and close.

vuejs material

Create a file called app.js with this data:

Vue.use(VueMaterial);

new Vue({
el: '#app'
, methods: {
toggleLeftSidenav() {
this.$refs.leftSidenav.toggle();
},
toggleRightSidenav() {
this.$refs.rightSidenav.toggle();
},
closeLeftSidenav() {
this.$refs.leftSidenav.close();
}
}
});

Then create an index.html file with this data:

<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">

<link rel='stylesheet prefetch' href='//unpkg.com/[email protected]0.7.1/dist/vue-material.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">
</style></head><body>
<div id="app">
<md-toolbar>
## VUE - Material - sidebar
</md-toolbar>

<div>
<md-button class="md-raised md-primary" @click.native="toggleLeftSidenav">Toggle left</md-button>
</div>

<md-sidenav class="md-left" ref="leftSidenav" >
<md-toolbar>
<div class="md-toolbar-container">
### Sidenav content
</div>
</md-toolbar>

<md-button class="md-raised md-primary" @click.native="closeLeftSidenav">Close</md-button>
</md-sidenav>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//unpkg.com/[email protected]'></script><script src='//unpkg.com/[email protected]'></script>
<script src="app.js"></script>
</body></html>

If you click the toggle button, it will open the sidebar.

vuejs material design


© vuejsexamples.net - Privacy Policy - Cookie Policy