Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
The following classes can be applied to change the color palette:
md-accentmd-warnmd-transparent
Recents
Favorites
Nearby
Recents
Favorites
Nearby
Recents
Favorites
Nearby
Recents
Favorites
Nearby
<div class="phone-viewport">
<md-bottom-bar>
<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-accent">
<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-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>
Movies
Music
Books
Pictures
Movies
Music
Books
Pictures
Movies
Music
Books
Pictures
Movies
Music
Books
Pictures
<div class="phone-viewport">
<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 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-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>
Recents
Favorites
Nearby
Recents
Favorites
Nearby
Movies
Music
Books
Pictures
Movies
Music
Books
Pictures
<div class="phone-viewport" v-md-theme="'orange'">
<md-bottom-bar>
<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" 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" 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" v-md-theme="'green'">
<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 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" v-md-theme="'indigo'">
<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 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>
Movies
Music
Books
Pictures
<div class="phone-viewport">
<md-bottom-bar md-shift v-md-theme="playground.theme">
<md-bottom-bar-item @click.native="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item @click.native="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item @click.native="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
<md-bottom-bar-item @click.native="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
</md-bottom-bar>
</div>
export default {
data() {
return {
playground: {
theme: 'brown'
}
};
},
methods: {
setTheme(theme) {
this.playground.theme = theme;
}
}
};