Skip to content

Instantly share code, notes, and snippets.

@iamparthaonline
Last active March 20, 2022 14:03
Show Gist options
  • Select an option

  • Save iamparthaonline/f5e86038336571bcc635af32c3f87989 to your computer and use it in GitHub Desktop.

Select an option

Save iamparthaonline/f5e86038336571bcc635af32c3f87989 to your computer and use it in GitHub Desktop.
<template>
<div class="vue-floating-btn-container" @click="clickHandler">
<span v-if="label">{{ label }}</span>
<img v-if="icon" :src="icon" />
</div>
</template>
<script>
export default {
name: "FloatingButton",
props: {
label: {
type: String
},
icon: {
type: String
}
},
methods: {
clickHandler() {
this.$emit("click-handler");
}
}
};
</script>
<style lang="scss" scoped>
.vue-floating-btn-container {
cursor: pointer;
background: #1ba26f;
color: #fff;
font-size: 14px;
padding: 9px 16px;
text-transform: uppercase;
img {
height: 24px;
width: 24px;
}
span {
font-size: 14px;
font-weight: 600;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment