CODEWITHSUNDEEP
javascripthtmlcssvue.js
Geoff_S
Geoff_S

Reputation: 5107

Stacking cards on top of each other in vue

I have a small vue snippet ( the snippet had my original v-for and v-if conditions, but I couldn't get it to read the array so it's just hardcoded now)

Anyway, it produces 3 cards, one on top of the other. I'm trying to figure out if there's anything built into vue where I can have them stacked on top of one another like a deck where you can only see about 20% of the top of each card and then click on one to expand them, like an accordian.

I've tried setting a negative margin on the bottom but it isn't taking effect. Is there a better way to tackle this in vue?

export default{
  data() {
    return { 
      copiedUsers:[
        {copied_user_email: "[email protected]"},
        {copied_user_email: "[email protected]"},
        {copied_user_email: "[email protected]"}
      ]
      
    }
  }
}
.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/[email protected]/dist/vue.js"></script>

<div id='app'>
 <div v-for="(copy, idx) in copiedUsers" :key="copy.id">
   <div 
 class="card" 
 :style="{ 
   top: idx * 10 + 'px', // <-- dynamic top
   left: idx * 6 + 'px' // <-- dynamic left
}">
   </div>
 </div>
</div>

Upvotes: 0

Views: 829

Answers (1)

wittgenstein
wittgenstein

Reputation: 4462

you could work your way with style-binding :style and add based on the indeces a specific range.

here is an example to get the idea:

new Vue({
  el: '#app',
  data: {
  copiedUsers:[
    {copied_user_email: "[email protected]"},
    {copied_user_email: "[email protected]"},
    {copied_user_email: "[email protected]"}
   ]
  }
})
.card {
 position: absolute;
 width: 40px;
 height: 65px;
 background-color: #777;
 border: 1px solid #333;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id='app'>
 <div v-for="(copy, idx) in copiedUsers" :key="copy.id">
   <div 
     class="card" 
     :style="{ 
       top: idx * 10 + 'px', // <-- dynamic top
       left: idx * 6 + 'px' // <-- dynamic left
    }">
   </div>
 </div>
</div>

you can also work with dynamic margins or paddings. To keep it understandable and the template clean, you could create a computed property.

Upvotes: 1

Related Questions