Skip to content

Instantly share code, notes, and snippets.

@JustSteveKing
Last active April 26, 2018 13:35
Show Gist options
  • Save JustSteveKing/535b703f8976cfe24e0310dfe45790cb to your computer and use it in GitHub Desktop.
Save JustSteveKing/535b703f8976cfe24e0310dfe45790cb to your computer and use it in GitHub Desktop.
Component Structure for Buttons
<template>
<button class="btn" :classList="classList">
<template v-if="this.icons">
<slot></slot>
</template>
{{ this.text }}
</button>
</template>
<script>
import mixin from './mixin'
export default {
mixins: {
mixin
}
}
</script>
import Vue from 'vue'
export const OutlineButton = Vue.component('outlined-button', require('./Outline'))
export const ColorButton = Vue.component('colored-button', require('./Color'))
export default {
props: {
text: {
required: true,
type: String
},
disabled: {
type: Boolean,
default: false
},
icons: {
type: Boolean,
default: false
},
theme: {
type: String,
default: 'btn-theme-blue'
},
pill: {
type: Boolean,
default: true
}
},
computed: {
classList () {
return `${this.disabled ? 'btn-disabled' : ''} ${this.theme ?: ''} ${this.pill ? 'btn-rounded' : ''}`
}
}
}
<template>
<button class="btn btn-outlined" :classList="classList">
<template v-if="this.icons">
<slot></slot>
</template>
{{ this.text }}
</button>
</template>
<script>
import mixin from './mixin'
export default {
mixins: {
mixin
}
}
</script>
<template>
<div>
<outlined-button text="oulined button" :icons="true">
<i class="fa fa-cog"></i>
</outlined-button>
<colored-button text="colored button"></colored-button>
</div>
</template>
<script>
import { OutlineButton, ColorButton } from './components/Button'
export default {
data () {}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment