Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create bottom-bar documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-23 15:31:52 -02:00
parent edd51ded4c
commit b44764f20a
7 changed files with 383 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/src/components/ExampleBox.vue
View file

@ -17,8 +17,8 @@
</template>
<style lang="scss" scoped>
.example-box + .example-box {
margin-top: 16px;
.example-box {
margin-bottom: 16px;
}
.example-title {

71
docs/src/components/code-block.vue
View file

@ -2,13 +2,13 @@
<div class="code-block" :data-lang="lang">
<div class="code-block-wrapper">
<pre><code :class="lang" ref="block"><slot></slot></code></pre>
<span class="copied" :class="{ 'active': showMessage }">Copied!</span>
</div>
<md-button class="md-icon-button md-dense" ref="copy">
<md-icon>content_copy</md-icon>
</md-button>
<span class="copied" :class="{ 'active': showMessage }">Copied!</span>
</div>
</template>
@ -16,8 +16,9 @@
@import '../../../src/core/stylesheets/variables.scss';
.code-block {
position: relative;
margin: -16px;
overflow: hidden;
position: relative;
border-radius: 2px;
color: #455A64;
font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
@ -37,7 +38,7 @@
&:after {
position: absolute;
top: 20px;
right: 12px;
right: 30px;
transition: $swift-ease-out;
color: rgba(#000, .26);
font-family: $font-roboto;
@ -79,15 +80,14 @@
.code-block-wrapper {
min-width: 100%;
max-height: 550px;
margin: -16px;
padding: 0 16px;
padding: 16px;
overflow: auto;
}
.md-icon-button {
position: absolute;
top: 8px;
right: 0;
right: 20px;
z-index: 2;
opacity: 0;
transition: $swift-ease-out;
@ -96,11 +96,11 @@
.copied {
padding: 8px 16px;
position: absolute;
right: 0;
bottom: 0;
top: 14px;
left: 12px;
background-color: rgba(#000, .87);
border-radius: 2px;
transform: translate3d(0, 36px, 0);
transform: translate3d(0, -48px, 0);
transition: $swift-ease-in-out;
color: #fff;
font-family: $font-roboto;
@ -170,19 +170,46 @@
data: () => ({
showMessage: false
}),
methods: {
enableCopy() {
const clipboard = new Clipboard(this.$refs.copy.$el, {
target: () => this.$refs.block
});
clipboard.on('success', (event) => {
event.clearSelection();
this.showMessage = true;
window.setTimeout(() => {
this.showMessage = false;
}, 2000);
});
},
reindent() {
const block = this.$refs.block;
let lines = block.textContent.split('\n');
let matches;
if (lines[0] === '') {
lines.shift();
}
let indentation = (matches = (/^[\s\t]+/).exec(lines[0])) !== null ? matches[0] : null;
if (indentation) {
lines = lines.map(function(line) {
line = line.replace(indentation, '');
return line.replace(/\t/g, ' ');
});
block.textContent = lines.join('\n').trim();
}
}
},
mounted() {
const clipboard = new Clipboard(this.$refs.copy.$el, {
target: () => this.$refs.block
});
clipboard.on('success', (event) => {
event.clearSelection();
this.showMessage = true;
window.setTimeout(() => {
this.showMessage = false;
}, 2000);
});
this.reindent();
this.enableCopy();
highlight.highlightBlock(this.$refs.block);
}

10
docs/src/pages/components/Avatar.vue
View file

@ -38,7 +38,7 @@
<div slot="example">
<example-box card-title="Default">
<div class="card-holder" slot="demo">
<div class="avatar-holder" slot="demo">
<md-avatar>
<img src="assets/avatar.png" alt="Avatar">
</md-avatar>
@ -86,7 +86,7 @@
</example-box>
<example-box card-title="Large">
<div class="card-holder" slot="demo">
<div class="avatar-holder" slot="demo">
<md-avatar class="md-large">
<img src="assets/avatar-2.jpg" alt="People">
</md-avatar>
@ -136,3 +136,9 @@
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.md-avatar + .md-avatar {
margin-left: 8px;
}
</style>

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

@ -1,220 +1,321 @@
<template>
<demo-page label="Components - Bottom Bar">
<div slot="examples">
<demo-example label="Default">
<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>
</demo-example>
<page-content page-title="Components - Bottom Bar">
<docs-component>
<div slot="description">
<p>Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.</p>
<p>The following classes can be applied to change the color palette:</p>
<ul class="md-body-2">
<li><code>md-accent</code></li>
<li><code>md-warn</code></li>
<li><code>md-transparent</code></li>
</ul>
</div>
<demo-example label="Shifting">
<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 slot="api">
<api-table name="md-bottom-bar">
<md-table slot="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<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>
<md-table-body>
<md-table-row>
<md-table-cell>md-shift</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable the shifting variant</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
<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>
<api-table name="md-bottom-bar-item">
<md-table slot="properties">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Type</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<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>
</demo-example>
<md-table-body>
<md-table-row>
<md-table-cell>md-icon</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Icon name on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> docs</md-table-cell>
</md-table-row>
<demo-example label="Themed">
<div class="phone-viewport">
<md-bottom-bar v-md-theme="'indigo'">
<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>
<md-table-row>
<md-table-cell>md-active</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Set initial selection</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<div class="phone-viewport">
<md-bottom-bar v-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 slot="example">
<example-box card-title="Default">
<div slot="demo">
<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 md-shift v-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 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 md-shift v-md-theme="'brown'">
<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>
</demo-example>
<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>
<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 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">
<demo-example label="Default">
<code-block lang="xml">
&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; 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>
</demo-example>
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;phone-viewport&quot;&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; 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;
<demo-example label="Shifting">
<code-block lang="xml">
&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 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>
&lt;div class=&quot;phone-viewport&quot;&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;/div&gt;
<code-block lang="xml">
&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;
</code-block>
&lt;div class=&quot;phone-viewport&quot;&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;/div&gt;
<code-block lang="xml">
&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;
</code-block>
&lt;div class=&quot;phone-viewport&quot;&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;
&lt;/div&gt;
</code-block>
</div>
</example-box>
<code-block lang="xml">
&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>
</demo-example>
<example-box card-title="Shifting">
<div slot="demo">
<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>
<demo-example label="Themed">
<code-block lang="xml">
&lt;md-bottom-bar v-md-theme=&quot;&#039;indigo&#039;&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 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>
<code-block lang="xml">
&lt;md-bottom-bar v-md-theme=&quot;&#039;orange&#039;&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 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>
<code-block lang="xml">
&lt;md-bottom-bar md-shift v-md-theme=&quot;&#039;green&#039;&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;
</code-block>
<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>
<code-block lang="xml">
&lt;md-bottom-bar md-shift v-md-theme=&quot;&#039;brown&#039;&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;
</code-block>
</demo-example>
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;phone-viewport&quot;&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 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;
<demo-example label="Dynamic Theme">
<code-block lang="xml">
&lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
&lt;md-bottom-bar-item @click=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
</code-block>
&lt;div class=&quot;phone-viewport&quot;&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;/div&gt;
<code-block lang="javascript">
export default {
data() {
return {
playground: {
theme: 'brown'
}
};
},
methods: {
setTheme(theme) {
this.playground.theme = theme;
}
}
};
</code-block>
</demo-example>
</div>
&lt;div class=&quot;phone-viewport&quot;&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;/div&gt;
<div slot="api">
&lt;div class=&quot;phone-viewport&quot;&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;
&lt;/div&gt;
</code-block>
</div>
</example-box>
</div>
</demo-page>
<example-box card-title="Themes">
<div slot="demo">
<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>
</div>
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;phone-viewport&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&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; 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; v-md-theme=&quot;&#039;teal&#039;&quot;&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; 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; v-md-theme=&quot;&#039;green&#039;&quot;&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 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; v-md-theme=&quot;&#039;indigo&#039;&quot;&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 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;
</code-block>
</div>
</example-box>
<example-box card-title="Dynamic Theme Example">
<div slot="demo">
<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>
</div>
<div slot="code">
<code-block lang="xml">
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-bottom-bar md-shift v-md-theme=&quot;playground.theme&quot;&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;blue&#039;)&quot; md-icon=&quot;ondemand_video&quot;&gt;Movies&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;teal&#039;)&quot; md-icon=&quot;music_note&quot;&gt;Music&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;brown&#039;)&quot; md-icon=&quot;books&quot; md-active&gt;Books&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item @click.native=&quot;setTheme(&#039;indigo&#039;)&quot; md-icon=&quot;photo&quot;&gt;Pictures&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
&lt;/div&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
@ -227,7 +328,7 @@ export default {
.phone-viewport {
width: 320px;
height: 480px;
height: 150px;
margin-right: 16px;
display: inline-block;
position: relative;

24
src/components/mdBottomBar/mdBottomBar.theme
View file

@ -11,6 +11,30 @@
color: #{'PRIMARY-COLOR'};
}
}
&.md-accent {
.md-bottom-bar-item {
&.md-active {
color: #{'ACCENT-COLOR'};
}
}
}
&.md-warn {
.md-bottom-bar-item {
&.md-active {
color: #{'WARN-COLOR'};
}
}
}
&.md-transparent {
.md-bottom-bar-item {
&.md-active {
color: #{'BACKGROUND-CONTRAST'};
}
}
}
}
&.md-shift {

2
src/components/mdBottomBar/mdBottomBarItem.vue
View file

@ -38,8 +38,6 @@
});
this.active = !!active;
this.$emit('click');
}
},
mounted() {

6
src/components/mdTable/mdTable.scss
View file

@ -149,6 +149,8 @@
}
&.md-numeric {
text-align: right;
.md-table-cell-container {
justify-content: flex-end;
}
@ -156,14 +158,14 @@
&.md-has-action {
.md-table-cell-container {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.md-table-cell-container {
padding: 0 32px 0 24px;
display: flex;
align-items: center;
}
.md-button {