vue-svg-like
Installation
NPM
npm install vue-svg-like
YARN
yarn add vue-svg-like
Usage
<template>
<vue-svg-like
:clicked="clicked"
color="#38b48b"
subColor="#f08300"
:size="5"
:duration="0.5"
@click="onClickLikeButton"
/>
</template>
<script>
import VueSvgLike from 'vue-svg-like'
export default {
components: {
VueSvgLike
},
data () {
return {
clicked: false
}
},
methods: {
onClickButtonLike: function () {
this.clicked = !this.clicked
}
}
}
</script>
Configuration
Property | Type | Description | Default |
---|---|---|---|
color | String | The main color. This color is assigned to the heart. | #f91880 |
subColor | String | The sub color. This color is assigned to the explosion. | #f91880 |
size | Number | Overall size of the button. This represents a multiple of the default size and should be a positive number. | 1 |
duration | Number | Animation duration. This prepresents animation-duration in CSS and should be a positive number. The unit is s. |
1 |
disabled | Boolean | This prevents the user from interacting with the button: it cannot be pressed or focused. | false |