Nuxt/examples/storybook/components/Button.vue

35 lines
581 B
Vue
Raw Normal View History

2018-02-06 02:36:22 +00:00
<template>
<button :style="{color: color, borderColor: color}" :class="{rounded: rounded}" class="wr-button" @click="handleClick"><slot />!</button>
2018-02-06 02:36:22 +00:00
</template>
<script>
export default {
props: {
rounded: {
type: Boolean,
default: false
},
2018-02-06 02:36:22 +00:00
handleClick: {
type: Function,
2018-02-06 02:36:22 +00:00
default: () => () => null
},
color: {
type: String,
2018-02-06 03:06:45 +00:00
default: '#42b983'
2018-02-06 02:36:22 +00:00
}
}
2018-02-06 03:06:45 +00:00
}
2018-02-06 02:36:22 +00:00
</script>
<style>
.rounded {
border-radius: 10px;
}
.wr-button {
border: 3px solid;
padding: 10px 20px;
background-color: white;
outline: none;
}
2018-02-06 11:56:28 +00:00
</style>