Skip to content

Commit 83fde96

Browse files
xidedixxidedix
committed
feat(Tabs): add missing feat tabs 
1 parent bfa24d7 commit 83fde96

File tree

1 file changed

+171
-0
lines changed

1 file changed

+171
-0
lines changed

‎src/views/base/Tabs.vue

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<template>
2+
<div class="animated fadeIn">
3+
<b-row>
4+
<b-col xs="12" lg="6">
5+
<b-card>
6+
<div slot="header">
7+
Tabs
8+
</div>
9+
<b-tabs>
10+
<b-tab title="Home" active>
11+
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
12+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
13+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
14+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
15+
officia deserunt mollit anim id est laborum.
16+
</b-tab>
17+
<b-tab title="Profile" >
18+
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
19+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
20+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
21+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
22+
officia deserunt mollit anim id est laborum.
23+
</b-tab>
24+
<b-tab title="Disabled" disabled>
25+
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
26+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
27+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
28+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
29+
officia deserunt mollit anim id est laborum.
30+
</b-tab>
31+
</b-tabs>
32+
</b-card>
33+
</b-col>
34+
<b-col xs="12" lg="6">
35+
<b-card>
36+
<div slot="header">
37+
Tabs with icons
38+
</div>
39+
<b-tabs>
40+
<b-tab active>
41+
<template slot="title">
42+
<i class="icon-calculator"></i>
43+
</template>
44+
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
45+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
46+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
47+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
48+
officia deserunt mollit anim id est laborum.
49+
</b-tab>
50+
<b-tab>
51+
<template slot="title">
52+
<i class="icon-basket-loaded"></i>
53+
</template>
54+
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
55+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
56+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
57+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
58+
officia deserunt mollit anim id est laborum.
59+
</b-tab>
60+
<b-tab>
61+
<template slot="title">
62+
<i class="icon-pie-chart"></i>
63+
</template>
64+
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
65+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
66+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
67+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
68+
officia deserunt mollit anim id est laborum.
69+
</b-tab>
70+
</b-tabs>
71+
</b-card>
72+
</b-col>
73+
<b-col xs="12" lg="6">
74+
<b-card>
75+
<div slot="header">
76+
Tabs with icons
77+
</div>
78+
<b-tabs v-model="tabIndex[0]">
79+
<b-tab active>
80+
<template slot="title">
81+
<i class="icon-calculator"></i> {{tabs[0]}}
82+
</template>
83+
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
84+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
85+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
86+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
87+
officia deserunt mollit anim id est laborum.
88+
</b-tab>
89+
<b-tab>
90+
<template slot="title">
91+
<i class="icon-basket-loaded"></i> {{tabs[1]}}
92+
</template>
93+
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
94+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
95+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
96+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
97+
officia deserunt mollit anim id est laborum.
98+
</b-tab>
99+
<b-tab>
100+
<template slot="title">
101+
<i class="icon-pie-chart"></i> {{tabs[2]}}
102+
</template>
103+
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
104+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
105+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
106+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
107+
officia deserunt mollit anim id est laborum.
108+
</b-tab>
109+
</b-tabs>
110+
</b-card>
111+
</b-col>
112+
<b-col xs="12" lg="6">
113+
<b-card>
114+
<div slot="header">
115+
Tabs vertical
116+
</div>
117+
<b-card no-body>
118+
<b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
119+
<b-tab active>
120+
<template slot="title">
121+
<i class="icon-calculator"></i> {{tabs[0]}}
122+
</template>
123+
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
124+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
125+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
126+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
127+
officia deserunt mollit anim id est laborum.
128+
</b-tab>
129+
<b-tab>
130+
<template slot="title">
131+
<i class="icon-basket-loaded"></i> {{tabs[1]}}
132+
</template>
133+
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
134+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
135+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
136+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
137+
officia deserunt mollit anim id est laborum.
138+
</b-tab>
139+
<b-tab>
140+
<template slot="title">
141+
<i class="icon-pie-chart"></i> {{tabs[2]}}
142+
</template>
143+
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
144+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
145+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
146+
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
147+
officia deserunt mollit anim id est laborum.
148+
</b-tab>
149+
</b-tabs>
150+
</b-card>
151+
</b-card>
152+
</b-col>
153+
</b-row>
154+
</div>
155+
</template>
156+
157+
<script>
158+
export default {
159+
name: 'tabs',
160+
data () {
161+
return {
162+
tabIndex: [0, 0],
163+
tabs: [
164+
'Calculator',
165+
'Shopping cart',
166+
'Charts'
167+
]
168+
}
169+
}
170+
}
171+
</script>

0 commit comments

Comments
 (0)