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

simplify bottom bar examples

Browse source
This commit is contained in:
Marcos Moura 2017-01-09 00:30:21 -02:00
parent 6cb9bdcfd6
commit 50fe4bbfa8
1 changed files with 0 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
docs/src/pages/components/BottomBar.vue
View file

@ -75,30 +75,6 @@
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-accent">
<md-bottom-bar-item href="#/components/bottom-bar" md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item href="#/components/bottom-bar" md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item href="#/components/bottom-bar" md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-warn">
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-transparent">
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
</div>
<div slot="code">
@ -108,24 +84,6 @@
&lt;md-bottom-bar-item md-icon=&quot;favorite&quot; md-active&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;md-bottom-bar class=&quot;md-accent&quot;&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; md-active&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;md-bottom-bar class=&quot;md-warn&quot;&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; md-active&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;md-bottom-bar class=&quot;md-transparent&quot;&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; md-active&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;
</code-block>
</div>
</example-box>
@ -140,33 +98,6 @@
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-accent" 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 md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-warn" 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 md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar class="md-transparent" 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 md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
</div>
<div slot="code">
@ -177,41 +108,12 @@
&lt;md-bottom-bar-item md-icon=&quot;books&quot; md-active&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;
&lt;md-bottom-bar class=&quot;md-accent&quot; 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 md-icon=&quot;books&quot; md-active&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;
&lt;md-bottom-bar class=&quot;md-warn&quot; 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 md-icon=&quot;books&quot; md-active&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;
&lt;md-bottom-bar class=&quot;md-transparent&quot; 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 md-icon=&quot;books&quot; md-active&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-block>
</div>
</example-box>
<example-box card-title="Themes">
<div slot="demo">
<div class="phone-viewport">
<md-bottom-bar md-theme="orange">
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar md-theme="teal">
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
@ -220,15 +122,6 @@
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar md-shift md-theme="green">
<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 md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
<div class="phone-viewport">
<md-bottom-bar md-shift md-theme="indigo">
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
@ -241,14 +134,6 @@
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-theme=&quot;orange&quot;&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; md-active&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;/div&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-theme=&quot;teal&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;history&quot;&gt;Recents&lt;/md-bottom-bar-item&gt;
@ -257,15 +142,6 @@
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-shift md-theme=&quot;green&quot;&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 md-icon=&quot;books&quot; md-active&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;
&lt;/div&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-shift md-theme=&quot;indigo&quot;&gt;
&lt;md-bottom-bar-item md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;