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

Add initial docs for Bottom Bar

Browse source
This commit is contained in:
Marcos Moura 2016-08-17 09:03:13 -03:00
parent ce9be7ca56
commit 000b9da639
3 changed files with 49 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/docs/config.js
View file

@ -33,7 +33,7 @@ Vue.use(VueMaterial.MdTheme, {
hue: 'A200'
}
},
'bottom-bar': {
'teal': {
primary: 'teal',
accent: 'orange'
}

5
src/docs/core/components/page-container.vue
View file

@ -35,11 +35,6 @@
}
.page-documentation {
display: flex;
flex-flow: column;
background-color: lighten(#2d3234, 10%);
color: #fff;
::-webkit-scrollbar {
box-shadow: inset 1px 1px 0 rgba(#fff, .1);
background-color: rgba(#fff, .05);

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

@ -1,28 +1,60 @@
<template>
<section v-md-theme="'bottom-bar'">
<h2 class="title">Bottom Bar</h2>
<page-container>
<div slot="example">
<code-section title="Bottom Bar">
<div class="cell-phone" v-md-theme="'teal'">
<md-bottom-bar>
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon="favorite" class="md-active">Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
</code-section>
<div class="cell-phone">
<md-bottom-bar>
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon="favorite" class="md-active">Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
<code-section title="Bottom Bar Shifting">
<div class="cell-phone" v-md-theme="'teal'">
<md-bottom-bar md-shift>
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
</code-section>
</div>
<div class="cell-phone">
<md-bottom-bar md-shift>
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
<div slot="documentation">
<code-example>
&lt;!-- Bottom Bar --&gt;
&lt;md-bottom-bar&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; class=&quot;md-active&quot;&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;near_me&quot;&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;!-- Bottom Bar Shifting --&gt;
&lt;md-bottom-bar md-shift&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item class=&quot;md-active&quot; md-icon=&quot;books&quot;&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
</code-example>
</div>
</section>
</page-container>
</template>
<style lang="scss" scoped>
.cell-phone {
background-color: #eee;
border: 1px solid #ccc;
}
</style>
<script>
export default {
ready() {
this.$dispatch('pageTitle', 'Bottom Bar');
}
};
</script>