vue-material/src/docs/pages/Buttons.vue

66 lines
2.1 KiB
Vue
Raw Normal View History

2016-08-31 23:22:36 +00:00
<template>
2016-09-09 19:59:55 +00:00
<div class="page-content">
<md-whiteframe md-elevation="2">
<md-toolbar class="md-dense">
<md-button>Examples</md-button>
<md-button>Code</md-button>
<md-button>API</md-button>
</md-toolbar>
</md-whiteframe>
2016-09-12 05:37:20 +00:00
<div class="main-content" v-md-theme="'indigo'">
2016-09-09 19:59:55 +00:00
<h2 class="title">Buttons</h2>
<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>
<h2 class="title">Links</h2>
<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>
<h2 class="title">FAB</h2>
<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-warn md-mini">
<md-icon>save</md-icon>
</md-button>
</div>
</div>
2016-08-31 23:22:36 +00:00
</template>
<script>
export default {
data() {
return {
buttonDisabled: false
};
},
methods: {
disablePrimaryButton() {
this.buttonDisabled = !this.buttonDisabled;
}
2016-09-09 19:59:55 +00:00
},
mounted() {
this.$root.pageTitle = 'Button';
2016-08-31 23:22:36 +00:00
}
};
</script>