Skip to content

Instantly share code, notes, and snippets.

@amfischer
Created May 19, 2017
Embed
What would you like to do?
Vue Tab Example
Vue.component('tabs', {
template: `
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" @click="isSelected(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
data() {
return {
tabs: []
}
},
created() {
this.tabs = this.$children;
},
methods: {
isSelected(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.name == selectedTab.name)
});
}
}
});
Vue.component('tab', {
template: `
<div v-if="isActive"><slot></slot></div>
`,
props: {
name: { required: true },
selected: { default: false }
},
data() {
return {
isActive: false
};
},
computed: {
href() {
return '#' + this.name.toLowerCase().replace(/ /g, '-');
}
},
mounted() {
this.isActive = this.selected;
}
});
new Vue({
el: '#root'
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css">
<style>
body { padding-top: 40px; }
</style>
</head>
<body>
<div id="root" class="container">
<tabs>
<tab name="About us" :selected="true">
<h1>Here is the content for the about us tab</h1>
</tab>
<tab name="About our culture">
<h1>Here is the content for the about our culture tab</h1>
</tab>
<tab name="About our vision">
<h1>Here is the content for the about our vision tab</h1>
</tab>
</tabs>
</div>
<script src="https://unpkg.com/vue@2.3.0"></script>
<script src="main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment