Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-29 02:54:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add code example to bottom bar and buttons

Browse source
This commit is contained in:
Marcos Moura 2016-10-14 14:08:19 -03:00
parent da30a66965
commit 70e57f439f
3 changed files with 275 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@
.code-block {
width: 100%;
max-width: 640px;
max-width: 850px;
padding: 4px 32px;
margin: 0;
position: relative;
@ -21,6 +21,10 @@
font-size: 14px;
line-height: 24px;
+ .code-block {
margin-top: 16px;
}
pre {
margin: 0;
white-space: pre-wrap;

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

@ -50,24 +50,24 @@
</demo-example>
<demo-example label="Themed">
<div class="phone-viewport" v-md-theme="'indigo'">
<md-bottom-bar>
<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>
<div class="phone-viewport" v-md-theme="'orange'">
<md-bottom-bar>
<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 class="phone-viewport" v-md-theme="'green'">
<md-bottom-bar md-shift>
<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>
@ -75,8 +75,8 @@
</md-bottom-bar>
</div>
<div class="phone-viewport" v-md-theme="'brown'">
<md-bottom-bar md-shift>
<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>
@ -98,7 +98,117 @@
</div>
<div slot="code">
<h2>Code</h2>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<code-block lang="javascript">
export default {
data() {
return {
playground: {
theme: 'brown'
}
};
},
methods: {
setTheme(theme) {
this.playground.theme = theme;
}
}
};
</code-block>
</demo-example>
</div>
<div slot="api">

152
docs/src/pages/components/Buttons.vue
View file

@ -141,7 +141,157 @@
</div>
<div slot="code">
<h2>Code</h2>
<demo-example label="Flat">
<code-block lang="html">
&lt;md-button&gt;Default&lt;/md-button&gt;
&lt;md-button class=&quot;md-primary&quot;&gt;Primary&lt;/md-button&gt;
&lt;md-button class=&quot;md-accent&quot;&gt;Accent&lt;/md-button&gt;
&lt;md-button class=&quot;md-warn&quot;&gt;Warn&lt;/md-button&gt;
&lt;md-button class=&quot;md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
&lt;md-button class=&quot;md-dense&quot;&gt;Dense&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Raised">
<code-block lang="xml">
&lt;md-button class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Themed">
<code-block lang="xml">
&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;Indigo&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;Teal&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;Green&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;white&#039;&quot;&gt;White&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary&quot; disabled v-md-theme=&quot;&#039;brown&#039;&quot;&gt;Brown&lt;/md-button&gt;
&lt;md-button class=&quot;md-raised md-primary md-dense&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;Orange&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Links">
<code-block lang="xml">
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
&lt;md-button href=&quot;#/button&quot; class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Icons - Flat">
<code-block lang="xml">
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-primary&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-accent&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-warn&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button&quot; disabled&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-dense&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Icons - Raised">
<code-block lang="xml">
&lt;md-button class=&quot;md-icon-button md-raised&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-accent&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised&quot; disabled&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-icon-button md-raised md-dense&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</demo-example>
<demo-example label="Floating Action Button">
<code-block lang="xml">
&lt;md-button class=&quot;md-fab md-fab-bottom-right&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-fab-bottom-left md-mini&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab&quot;&gt;
&lt;md-icon&gt;edit&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-mini&quot;&gt;
&lt;md-icon&gt;edit&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary&quot;&gt;
&lt;md-icon&gt;email&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-mini&quot;&gt;
&lt;md-icon&gt;email&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-warn&quot;&gt;
&lt;md-icon&gt;save&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-warn md-mini&quot;&gt;
&lt;md-icon&gt;save&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-clean&quot;&gt;
&lt;md-icon&gt;chat&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-clean md-mini&quot;&gt;
&lt;md-icon&gt;chat&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab&quot; disabled&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-mini&quot; disabled&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</demo-example>
</div>
<div slot="api">