Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-01 12:04:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve docs of buttons

Browse source
This commit is contained in:
Marcos Moura 2016-09-12 03:21:58 -03:00
parent ce42e89a76
commit b31d2cd15f
1 changed files with 53 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/docs/pages/Buttons.vue
View file

@ -8,44 +8,70 @@
</md-toolbar>
</md-whiteframe>
<div class="main-content" v-md-theme="'indigo'">
<h2 class="title">Buttons</h2>
<div class="main-content">
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Buttons</h2>
</md-toolbar>
<md-button @click="disablePrimaryButton">Button</md-button>
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button class="md-primary md-raised">Raised</md-button>
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-warn">Warn</md-button>
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button class="md-raised md-dense md-accent">Dense</md-button>
<section v-md-theme="'indigo'">
<md-button @click="disablePrimaryButton">Button</md-button>
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button class="md-primary md-raised">Raised</md-button>
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-warn">Warn</md-button>
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button class="md-raised md-dense md-accent">Dense</md-button>
</section>
</md-whiteframe>
<h2 class="title">Links</h2>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Links</h2>
</md-toolbar>
<md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
<md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button href="#/button" class="md-primary md-raised">Raised</md-button>
<md-button href="#/button" class="md-accent md-raised">Accent</md-button>
<md-button href="#/button" class="md-warn">Warn</md-button>
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
<section v-md-theme="'indigo'">
<md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
<md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
<md-button href="#/button" class="md-primary md-raised">Raised</md-button>
<md-button href="#/button" class="md-accent md-raised">Accent</md-button>
<md-button href="#/button" class="md-warn">Warn</md-button>
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
<md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
</section>
</md-whiteframe>
<h2 class="title">FAB</h2>
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">FAB</h2>
</md-toolbar>
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
<section v-md-theme="'indigo'">
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
<md-button class="md-fab md-primary">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-fab md-primary">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-fab md-warn md-mini">
<md-icon>save</md-icon>
</md-button>
<md-button class="md-fab md-warn md-mini">
<md-icon>save</md-icon>
</md-button>
</section>
</md-whiteframe>
</div>
</div>
</template>
<style lang="scss" scoped>
.cell-phone {
margin-right: 16px;
display: inline-block;
border: none;
}
</style>
<script>
export default {
data() {