I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded.
The current setup produces three cards stacked on top of each other. I am exploring options within Vue to have these cards displayed like a deck, where only about 20% of the top of each card is visible, and clicking on a card expands it (similar to an accordion).
I have attempted setting negative margins at the bottom, but it does not seem to have the desired effect. Is there a more effective way to approach this layout in Vue?
export default{
data() {
return {
copiedUsers:[
{copied_user_email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e3f2e4e3e2e4f2e5d7faf6fefbb9f4f8fa">[email protected]</a>"},
{copied_user_email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed99889e99989e889fdfad808c8481c38e8280">[email protected]</a>"},
{copied_user_email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9beffee8efeee8fee9a8dbf6faf2f7b5f8f4f6">[email protected]</a>"}
]
}
}
}.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
margin-bottom:-80px;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393b6c4d8c0d8c7c7">[email protected]</a>/dist/vue.js"></script>
<div id='app'>
<div v-for="(copy, idx) in copiedUsers" :key="idx">
<div
class="card"
:style="{
top: idx * 10 + 'px', // <-- dynamic top
left: idx * 6 + 'px' // <-- dynamic left
}">
</div>
</div>
</div>