49 lines
986 B
Vue
49 lines
986 B
Vue
<template>
|
|
<button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '' ">
|
|
<i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
|
|
</button>
|
|
<button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '' ">
|
|
<i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
likeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
},
|
|
dislikeClicked : {
|
|
type : Boolean,
|
|
default : false,
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ms-auto button + button {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.num {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.btn-label-danger.clicked {
|
|
background-color: #e6381a;
|
|
}
|
|
|
|
.btn-label-danger.clicked i,
|
|
.btn-label-danger.clicked span {
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-label-primary.clicked {
|
|
background-color: #5f61e6;
|
|
}
|
|
|
|
.btn-label-primary.clicked i,
|
|
.btn-label-primary.clicked span {
|
|
color : #fff;
|
|
}
|
|
</style> |