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

Add dynamic theme example to bottom bar

Browse source
This commit is contained in:
Marcos Moura 2016-09-20 02:26:25 -03:00
parent a7a17f30ba
commit 3221af9e37
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/docs/pages/BottomBar.vue
View file

@ -84,6 +84,17 @@
</md-bottom-bar>
</div>
</demo-example>
<demo-example label="Dynamic Theme">
<div class="phone-viewport">
<md-bottom-bar md-shift v-md-theme="playground.theme">
<md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
</demo-example>
</div>
<div slot="code">
@ -117,6 +128,18 @@
<script>
export default {
data() {
return {
playground: {
theme: 'brown'
}
};
},
methods: {
setTheme(theme) {
this.playground.theme = theme;
}
},
mounted() {
this.$root.pageTitle = 'Bottom Bar';
}