I am a beginner delving into the world of vue (specifically, vue 2) and aiming to grasp the concept of utilizing slots in the most effective manner. Below is the code I'm working with:
<template>
<div>
<button class="btn {{ In this section, I aim to be able to switch between btn-one and btn-three}}">
<slot></slot>
</button>
</div>
</template>
<style scoped>
.btn {
margin: 20px 0px;
height: 50px;
text-align: center;
width: 250px;
cursor: pointer;
}
/*
========================
BUTTON ONE
========================
*/
.btn-one {
background-color: #FF6766;
color: #FFF;
transition: all 0.3s;
position: relative;
}
.btn-one span {
transition: all 0.3s;
}
.btn-one::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
transform: scale(0.1, 1);
}
.btn-one:hover span {
letter-spacing: 2px;
}
.btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.btn-one::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
/*
========================
BUTTON THREE
========================
*/
.btn-three {
color: #FFF;
transition: all 0.5s;
position: relative;
background-color: #66A182;;
}
.btn-three::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(255,255,255,0.1);
transition: all 0.3s;
}
.btn-three:hover::before {
opacity: 0 ;
transform: scale(0.5,0.5);
}
.btn-three::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid rgba(255,255,255,0.5);
transform: scale(1.2,1.2);
}
.btn-three:hover::after {
opacity: 1;
transform: scale(1,1);
}
</style>
My objective now is to implement it as follows:
<template>
<div class="page-margins">
<h1>Testing out the slot functionality</h1>
<BaseButton>
<div class="position">
<span class="button-span">DOWNLOAD</span>
<span class="material-icons">file_download</span>
</div>
</BaseButton>
<BaseButton>
<div class="position">
<span class="button-span">CANCEL</span>
<span class="material-icons">close</span>
</div>
</BaseButton>
</div>
</template>
<script>
import BaseButton from '../components/BaseButton.vue'
export default {
components: {
BaseButton
}
}
</script>
<style scoped>
.page-margins{
margin: 100px 50px;;
}
.material-icons{
font-size: 25px;
letter-spacing: normal;
display: inline-block;
white-space: nowrap;
}
.position {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
Therefore, my question is: How can I modify from using btn-one to btn-three since currently both buttons appear red when I wish to use btn-three for the second button...
I appreciate your assistance.