Skip to content

Instantly share code, notes, and snippets.

@acidjazz
Created August 11, 2019 00:30
Show Gist options
  • Save acidjazz/af26f50c56f897207787885bb4a76f01 to your computer and use it in GitHub Desktop.
Save acidjazz/af26f50c56f897207787885bb4a76f01 to your computer and use it in GitHub Desktop.
<template lang="pug">
button.py-2.px-3.rounded.tran-colors-p1.relative.overflow-hidden(
@click="click",
:class="[themes[theme], cursor]")
.flex.items-center.tran-opacity-p5(:class="{'opacity-25': loading, 'opacity-0': success}")
.mdi(v-if="icon",:class="[`mdi-${icon}`, label ? 'mr-2' : '']")
img.w-4.h-4(v-if="image",:src="image",:class="label ? 'mr-2' : ''")
div(v-if="label") {{ label }}
.bg-white-o3.button-loadbar.ani-zi(v-if="loading")
.absolute.inset-0.flex.items-center.justify-center(v-if="success")
.mdi.mdi-24px.mdi-check-bold.ani-zif
</template>
<script>
export default {
props: {
label: {
type: [Boolean,String],
required: false,
default: false,
},
icon: {
type: [String, Boolean],
required: false,
default: false,
},
image: {
type: [Boolean,String],
required: false,
default: false,
},
theme: {
type: String,
required: false,
default: 'white',
},
loading: {
type: Boolean,
required: false,
default: false,
},
success: {
type: Boolean,
required: false,
default: false,
},
},
data () {
return {
themes: {
white: 'text-white bg-white-o1 hover_bg-white-o2 focus_outline-none',
}
}
},
computed: {
cursor () {
return this.loading ? 'cursor-wait' : 'cursor-pointer'
}
},
methods: {
click () { return this.$emit('click') },
},
}
</script>
@acidjazz
Copy link
Author

acidjazz commented Aug 11, 2019

.button-loadbar
  @apply absolute left-0 right-0 bottom-0 h-1 w-1_2 ani-loading

.ani-loading
  animation ani-loading 1s linear 0s infinite

@keyframes ani-loading
  from
    transform translate(-100%, 0px)
  to
    transform translate(200%, 0px)

@acidjazz
Copy link
Author

acidjazz commented Aug 11, 2019

For those who don't want the pug version

<button class="py-2 px-3 rounded tran-colors-p1 relative overflow-hidden" @click="click" :class="[themes[theme], cursor]">
    <div class="flex items-center tran-opacity-p5" :class="{'opacity-25': loading, 'opacity-0': success}">
        <div class="mdi" v-if="icon" :class="[`mdi-${icon}`, label ? 'mr-2' : '']"></div><img class="w-4 h-4" v-if="image" :src="image" :class="label ? 'mr-2' : ''" />
        <div v-if="label">{{ label }}</div>
    </div>
    <div class="bg-white-o3 button-loadbar ani-zi" v-if="loading"></div>
    <div class="absolute inset-0 flex items-center justify-center" v-if="success">
        <div class="mdi mdi-24px mdi-check-bold ani-zif"></div>
    </div>
</button>

@acidjazz
Copy link
Author

PushButton
PushButton2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment