-
Notifications
You must be signed in to change notification settings - Fork 0
/
tabs.html
92 lines (82 loc) · 1.99 KB
/
tabs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>Tabs Component | Vue 2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<style type="text/css"> body { padding: 40px; } </style>
</head>
<body>
<div id="root">
<tabs>
<tab name="Pictures" :selected="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ducimus, sit. Deserunt vel, voluptate similique, qui veritatis a sapiente. Voluptatibus atque fugiat vero quibusdam voluptas. Illum, excepturi eveniet fuga assumenda.
</tab>
<tab name="Music">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</tab>
<tab name="Videos">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere rem error odio, necessitatibus omnis reprehenderit molestias dolor minima possimus.
</tab>
<tab name="Documents">
</tab>
</tabs>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script type="text/javascript">
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="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tab-details">
<slot></slot>
</div>
</div>
`,
data() {
return { tabs: [] };
},
created() {
this.tabs = this.$children;
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.name == selectedTab.name);
});
}
}
});
Vue.component('tab', {
template: `
<div v-show="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'
})
</script>
</body>
</html>