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 button documentation with the new template

Browse source
This commit is contained in:
Marcos Moura 2016-11-23 16:52:24 -02:00
parent 8d297c54e0
commit 8746e3523e
5 changed files with 423 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/src/components/ApiTable.vue
View file

@ -2,7 +2,7 @@
<div class="api-table">
<h3 class="md-title">{{ name }}</h3>
<md-tabs class="md-transparent">
<md-tabs :md-dynamic-height="false" class="md-transparent">
<md-tab class="api-tab" md-label="Properties" v-if="$slots.properties">
<slot name="properties"></slot>
</md-tab>

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

@ -1,310 +1,459 @@
<template>
<demo-page label="Components - Button">
<div slot="examples">
<demo-example label="Flat">
<md-button @click="disablePrimaryButton">Default</md-button>
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-warn">Warn</md-button>
<md-button class="md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button class="md-dense">Dense</md-button>
</demo-example>
<page-content page-title="Components - Button">
<docs-component>
<div slot="description">
<p>Buttons communicate the action that will occur when the user touches them.</p>
<ul class="md-body-2">
<li><code>md-primary</code></li>
<li><code>md-accent</code></li>
<li><code>md-warn</code></li>
</ul>
</div>
<demo-example label="Raised">
<md-button class="md-raised" @click="disablePrimaryButton">Default</md-button>
<md-button class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button class="md-raised md-accent">Accent</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button class="md-raised md-dense">Dense</md-button>
</demo-example>
<div slot="api">
<api-table name="md-button">
<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>
<demo-example label="Themed">
<md-button class="md-raised md-primary" @click="disablePrimaryButton" v-md-theme="'indigo'">Indigo</md-button>
<md-button class="md-raised md-primary" :disabled="buttonDisabled" v-md-theme="'teal'">Teal</md-button>
<md-button class="md-raised md-primary" v-md-theme="'green'">Green</md-button>
<md-button class="md-raised md-primary" v-md-theme="'white'">White</md-button>
<md-button class="md-raised md-primary" :disabled="!buttonDisabled" v-md-theme="'brown'">Brown</md-button>
<md-button class="md-raised md-primary md-dense" v-md-theme="'orange'">Orange</md-button>
</demo-example>
<md-table-body>
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the button and prevent his actions</md-table-cell>
</md-table-row>
<demo-example label="Links">
<md-button href="#/components/button" class="md-raised" @click="disablePrimaryButton">Default</md-button>
<md-button href="#/components/button" class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button href="#/components/button" class="md-raised md-accent">Accent</md-button>
<md-button href="#/components/button" class="md-raised md-warn">Warn</md-button>
<md-button href="#/components/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button href="#/components/button" class="md-raised md-dense">Dense</md-button>
</demo-example>
<md-table-row>
<md-table-cell>type</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Apply a type to button - Doesn't apply for links</md-table-cell>
</md-table-row>
<demo-example label="Icons - Flat">
<md-button class="md-icon-button" @click="disablePrimaryButton">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>href</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Create a anchor on the button - In this case the generated tag will be &lt;a&gt;</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-button class="md-icon-button md-primary" :disabled="buttonDisabled">
<md-icon>add</md-icon>
</md-button>
<md-table slot="classes">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-button class="md-icon-button md-accent">
<md-icon>add</md-icon>
</md-button>
<md-table-body>
<md-table-row>
<md-table-cell>md-raised</md-table-cell>
<md-table-cell>Raised button</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-warn">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-icon-button</md-table-cell>
<md-table-cell>Create rounded buttons - Need a &lt;md-icon&gt; inside</md-table-cell>
</md-table-row>
<md-button class="md-icon-button" :disabled="!buttonDisabled">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-dense</md-table-cell>
<md-table-cell>Small dense buttons</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-dense">
<md-icon>add</md-icon>
</md-button>
</demo-example>
<md-table-row>
<md-table-cell>md-fab</md-table-cell>
<md-table-cell>Create an Floating Action Button</md-table-cell>
</md-table-row>
<demo-example label="Icons - Raised">
<md-button class="md-icon-button md-raised" @click="disablePrimaryButton">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-mini</md-table-cell>
<md-table-cell>Small md-fab</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-raised md-primary" :disabled="buttonDisabled">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-fab-top-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top left of his parent</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-raised md-accent">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-fab-top-center</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top center of his parent</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-raised md-warn">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-fab-top-right</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top right of his parent</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-raised" :disabled="!buttonDisabled">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-fab-bottom-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom left of his parent</md-table-cell>
</md-table-row>
<md-button class="md-icon-button md-raised md-dense">
<md-icon>add</md-icon>
</md-button>
</demo-example>
<md-table-row>
<md-table-cell>md-fab-bottom-center</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom center of his parent</md-table-cell>
</md-table-row>
<demo-example label="Floating Action Button" height="360">
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
<md-table-row>
<md-table-cell>md-fab-bottom-right</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom right of his parent</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<md-button class="md-fab md-fab-bottom-left md-mini">
<md-icon>add</md-icon>
</md-button>
<div slot="example">
<example-box card-title="Flat">
<div slot="demo">
<md-button>Default</md-button>
<md-button class="md-primary">Primary</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-warn">Warn</md-button>
<md-button class="md-primary" disabled>Disabled</md-button>
<md-button class="md-dense">Dense</md-button>
</div>
<md-button class="md-fab">
<md-icon>edit</md-icon>
</md-button>
<div slot="code">
<code-block lang="xml">
&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>
</div>
</example-box>
<md-button class="md-fab md-mini">
<md-icon>edit</md-icon>
</md-button>
<example-box card-title="Raised">
<div slot="demo">
<md-button class="md-raised">Default</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button class="md-raised md-accent">Accent</md-button>
<md-button class="md-raised md-warn">Warn</md-button>
<md-button class="md-raised md-primary" disabled>Disabled</md-button>
<md-button class="md-raised md-dense">Dense</md-button>
</div>
<md-button class="md-fab md-primary">
<md-icon>email</md-icon>
</md-button>
<div slot="code">
<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>
</div>
</example-box>
<md-button class="md-fab md-primary md-mini">
<md-icon>email</md-icon>
</md-button>
<example-box card-title="Button vs Link vs Router Link">
<div slot="demo">
<md-button class="md-raised md-primary">Button</md-button>
<md-button href="#/components/button" class="md-raised md-primary">Link</md-button>
<router-link tag="md-button" to="/components/button" class="md-raised md-primary">Router Link</router-link>
</div>
<md-button class="md-fab md-warn">
<md-icon>save</md-icon>
</md-button>
<div slot="code">
<code-block lang="xml">
&lt;md-button class=&quot;md-raised md-primary&quot;&gt;Button&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Link&lt;/md-button&gt;
&lt;router-link tag=&quot;md-button&quot; to=&quot;/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Router Link&lt;/router-link&gt;
</code-block>
</div>
</example-box>
<md-button class="md-fab md-warn md-mini">
<md-icon>save</md-icon>
</md-button>
<example-box card-title="Icons - Flat">
<div slot="demo">
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-fab md-clean">
<md-icon>chat</md-icon>
</md-button>
<md-button class="md-icon-button md-primary">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-fab md-clean md-mini">
<md-icon>chat</md-icon>
</md-button>
<md-button class="md-icon-button md-accent">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-fab" disabled>
<md-icon>message</md-icon>
</md-button>
<md-button class="md-icon-button md-warn">
<md-icon>more_vert</md-icon>
</md-button>
<md-button class="md-fab md-mini" disabled>
<md-icon>message</md-icon>
</md-button>
</demo-example>
</div>
<md-button class="md-icon-button" disabled>
<md-icon>more_vert</md-icon>
</md-button>
<div slot="code">
<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>
<md-button class="md-icon-button md-dense">
<md-icon>more_vert</md-icon>
</md-button>
</div>
<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>
<div slot="code">
<code-block lang="xml">
&lt;md-button class=&quot;md-icon-button&quot;&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
<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>
&lt;md-button class=&quot;md-icon-button md-primary&quot;&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
<demo-example label="Links">
<code-block lang="xml">
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
</code-block>
</demo-example>
&lt;md-button class=&quot;md-icon-button md-accent&quot;&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
<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-warn&quot;&gt;
&lt;md-icon&gt;more_vert&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&quot; disabled&gt;
&lt;md-icon&gt;more_vert&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-dense&quot;&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</div>
</example-box>
&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;
<example-box card-title="Icons - Raised">
<div slot="demo">
<md-button class="md-icon-button md-raised">
<md-icon>add</md-icon>
</md-button>
&lt;md-button class=&quot;md-icon-button&quot; disabled&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
<md-button class="md-icon-button md-raised md-primary">
<md-icon>add</md-icon>
</md-button>
&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>
<md-button class="md-icon-button md-raised md-accent">
<md-icon>add</md-icon>
</md-button>
<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;
<md-button class="md-icon-button md-raised md-warn">
<md-icon>add</md-icon>
</md-button>
&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;
<md-button class="md-icon-button md-raised" disabled>
<md-icon>add</md-icon>
</md-button>
&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;
<md-button class="md-icon-button md-raised md-dense">
<md-icon>add</md-icon>
</md-button>
</div>
&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;
<div slot="code">
<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&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-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-dense&quot;&gt;
&lt;md-icon&gt;add&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</demo-example>
&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;
<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-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-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-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-fab&quot;&gt;
&lt;md-icon&gt;edit&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>
</div>
</example-box>
&lt;md-button class=&quot;md-fab md-mini&quot;&gt;
&lt;md-icon&gt;edit&lt;/md-icon&gt;
&lt;/md-button&gt;
<example-box card-title="Floating Action Button">
<div class="fab-holder" slot="demo">
<div>
<md-button class="md-fab">
<md-icon>edit</md-icon>
</md-button>
&lt;md-button class=&quot;md-fab md-primary&quot;&gt;
&lt;md-icon&gt;email&lt;/md-icon&gt;
&lt;/md-button&gt;
<md-button class="md-fab md-primary">
<md-icon>email</md-icon>
</md-button>
&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;
<md-button class="md-fab md-warn">
<md-icon>save</md-icon>
</md-button>
&lt;md-button class=&quot;md-fab md-warn&quot;&gt;
&lt;md-icon&gt;save&lt;/md-icon&gt;
&lt;/md-button&gt;
<md-button class="md-fab md-clean">
<md-icon>dialpad</md-icon>
</md-button>
&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;
<md-button class="md-fab" disabled>
<md-icon>message</md-icon>
</md-button>
</div>
&lt;md-button class=&quot;md-fab md-clean&quot;&gt;
&lt;md-icon&gt;chat&lt;/md-icon&gt;
&lt;/md-button&gt;
<div>
<md-button class="md-fab md-mini">
<md-icon>edit</md-icon>
</md-button>
&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;
<md-button class="md-fab md-primary md-mini">
<md-icon>email</md-icon>
</md-button>
&lt;md-button class=&quot;md-fab&quot; disabled&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-button&gt;
<md-button class="md-fab md-warn md-mini">
<md-icon>save</md-icon>
</md-button>
&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>
<md-button class="md-fab md-clean md-mini">
<md-icon>dialpad</md-icon>
</md-button>
<div slot="api">
<md-button class="md-fab md-mini" disabled>
<md-icon>message</md-icon>
</md-button>
</div>
</div>
</demo-page>
<md-button class="md-fab md-fab-bottom-left">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-primary md-fab-bottom-center">
<md-icon>dialpad</md-icon>
</md-button>
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
</div>
<div slot="code">
<code-block lang="xml">
&lt;div&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-primary&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-clean&quot;&gt;
&lt;md-icon&gt;dialpad&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;/div&gt;
&lt;div&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 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 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 md-mini&quot;&gt;
&lt;md-icon&gt;dialpad&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;
&lt;/div&gt;
&lt;md-button class=&quot;md-fab md-fab-bottom-left&quot;&gt;
&lt;md-icon&gt;save&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary md-fab-bottom-center&quot;&gt;
&lt;md-icon&gt;dialpad&lt;/md-icon&gt;
&lt;/md-button&gt;
&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;
</code-block>
</div>
</example-box>
<example-box card-title="Themes">
<div slot="demo">
<md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
<md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
<md-button class="md-icon-button md-primary" v-md-theme="'orange'">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
<md-icon>message</md-icon>
</md-button>
<md-button class="md-fab md-primary" v-md-theme="'brown'">
<md-icon>dialpad</md-icon>
</md-button>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-button class=&quot;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-icon-button md-primary&quot; v-md-theme=&quot;&#039;orange&#039;&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; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-button class=&quot;md-fab md-primary&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
&lt;md-icon&gt;dialpad&lt;/md-icon&gt;
&lt;/md-button&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style lang="scss" scoped>
.disabled-button {
margin-left: 8px;
}
.fab-holder {
height: 300px;
}
</style>
<script>
export default {
data() {
return {
buttonDisabled: false
buttonDisabled: true
};
},
methods: {

30
src/components/mdButton/mdButton.scss
View file

@ -145,27 +145,41 @@ $button-icon-size: 40px;
box-shadow: $material-shadow-5dp;
}
&.md-fab-top-right {
position: absolute;
top: 16px;
right: 16px;
}
&.md-fab-top-left {
position: absolute;
top: 16px;
left: 16px;
}
&.md-fab-bottom-right {
&.md-fab-top-center {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
}
&.md-fab-top-right {
position: absolute;
top: 16px;
right: 16px;
bottom: 16px;
}
&.md-fab-bottom-left {
position: absolute;
bottom: 16px;
left: 16px;
}
&.md-fab-bottom-center {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
}
&.md-fab-bottom-right {
position: absolute;
right: 16px;
bottom: 16px;
}

4
src/components/mdButton/mdButton.vue
View file

@ -18,8 +18,8 @@
disabled: isDisabled
},
on: {
click: () => {
this.$emit('click');
click: ($event) => {
this.$emit('click', $event);
}
}
};

9
src/components/mdCard/mdCard.theme
View file

@ -3,9 +3,12 @@
&.md-card {
background-color: #{'BACKGROUND-COLOR-A100'};
.md-icon-button {
.md-icon {
color: #{'BACKGROUND-CONTRAST-0.54'};
.md-card-header,
.md-card-actions {
.md-icon-button {
.md-icon {
color: #{'BACKGROUND-CONTRAST-0.54'};
}
}
}