tab mamanger

by joplomacedo

HTML

<div id="app">
  <h2>Tabs:</h2>
  <ul class="grid">
    <li class="grid__item" v-for="tab in tabs">
		<tab-card-component :tab="tab"></tab-card-component>
    </li>
  </ul>
</div>

CSS

* {
	box-sizing: border-box;
}


body {
  background: #eee;
  color: #222;
  padding: 20px;
  font-family: system-ui;
}



.grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: -.4em;
	margin-left: -.4em;
}

.grid__item {
	flex: 0 0 33.3333%;
	padding: .4em;
}

.tab_card {
	box-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: 3px;
	padding: 2em;
	background-color: #fff;
	min-height: 100%;
	  line-height: 1.3;
}

.tab_card__title {
	font-weight: 700;
	margin-bottom: .2em;
}

.tab_card__meta_desc {
	color: #555;
}

Vue

const tabCardComponent = {
	template: `
	<div class="tab_card">
		<p class="tab_card__title">{{tab.title}}</p>
		<p class="tab_card__meta_desc">{{tab.meta_desc}}</p>
	</div>
	`,
	props: ['tab'],
	
	data () {
		return {
		
		}
	},
	
	methods: {
	
	}
}

const app = new Vue({
  el: "#app",
  components: {
  	tabCardComponent
  },
  data: {
    tabs: [
      { 
	  	title: "Learn JavaScript", 
	  	meta_desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aliquid, rem veritatis reprehenderit velit nihil!"
	  },
	  
      { 
	  	title: "Learn Vue", 
	  	meta_desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aliquid, rem veritatis reprehenderit velit nihil!'
	  },
	  
      { 
	  	title: "Play around in JSFiddle", 
	  	meta_desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aliquid, rem veritatis reprehenderit velit nihil!"
	  },
	  
      { 
	  	title: "Play around in JSFiddle", 
	  	meta_desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi aliquid, rem veritatis reprehenderit velit nihil!"
	  }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})