Skip to content

Commit d082935

Browse files
mosinvemosinve
authored
Tabs refactoring (bootstrap-vue#182)
[Tabs] Docs + Improvements
1 parent 4e79514 commit d082935

File tree

11 files changed

+263
-92
lines changed

11 files changed

+263
-92
lines changed

‎docs/components/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@ export default {
2424
'popover': require('./popover').default,
2525
'progress': require('./progress').default,
2626
'table': require('./table').default,
27+
'tabs': require('./tabs').default,
2728
'tooltip': require('./tooltip').default
2829
};

‎docs/components/tabs/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Tabs
2+
3+
**Basic usage**
4+
5+
```html
6+
<b-tabs>
7+
<b-tab title="first" active>
8+
I'm the first fading tab
9+
</b-tab>
10+
<b-tab title="second" >
11+
I'm the second tab content
12+
</b-tab>
13+
<b-tab title="disabled" disabled>
14+
<b-card>I'm the card in tab</b-card>
15+
</b-tab>
16+
</b-tabs>
17+
```
18+
19+
**Cards Integration**
20+
21+
Tabs support integrating with cards. Just add `card` prop!
22+
23+
Note that you should add `no-block` prop on `<b-card>` element in order to decorate header.
24+
25+
```html
26+
<b-card no-block>
27+
<b-tabs ref="tabs" v-model="tabIndex" card>
28+
<b-tab title="Tab 1" active>
29+
Tab Contents
30+
</b-tab>
31+
</b-tabs>
32+
</b-card>
33+
```
34+
35+
**Pills variant**
36+
37+
Just add `nav-style="pills"` property to tabs component.
38+
39+
**Fade**
40+
41+
Fade is enabled by default when changing tabs. It can disabled with `no-fade` prop.
42+

‎docs/components/tabs/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import meta from './meta.json';
2+
import readme from './README.md';
3+
4+
export default {meta, readme};

‎docs/components/tabs/meta.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"title": "Tabs",
3+
"new": true,
4+
"component": "bTabs",
5+
"components": [
6+
"bTab"
7+
],
8+
"jsfiddle": "3xwmm1qt"
9+
}

‎docs/nuxt/pages/play.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,11 @@ methods: {
217217
},
218218
methods: {
219219
log(tag, args) {
220+
// We have to ignore props mutation warning due to vue bug when we have two instances
221+
if (String(args[0]).indexOf('Avoid mutating a prop directly') !== -1) {
222+
return;
223+
}
224+
220225
const argsArr = [tag];
221226
for (let i = 0; i < args.length; i++) {
222227
argsArr.push(args[i]);
@@ -227,7 +232,7 @@ methods: {
227232
if (this.messages.length > 10) {
228233
this.messages.splice(10);
229234
}
230-
this.messages.unshift([argsArr.shift(), argsArr.map(JSON.stringify).join(' ')]);
235+
this.messages.unshift([argsArr.shift(), argsArr.map(String).join(' ')]);
231236
},
232237
run() {
233238
// Commit latest changes

‎examples/tabs/demo.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#app {
2+
padding: 20px;
3+
height: 400px;
4+
}

‎examples/tabs/demo.details

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
---
3+
name: Tabs - BootstrapVue
4+
description: https://bootstrap-vue.github.io/docs/components/tabs
5+
authors:
6+
- Vitaly Mosin
7+
- Pooya Parsa
8+
resources:
9+
- https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css
10+
- https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css
11+
- https://unpkg.com/vue@latest/dist/vue.min.js
12+
- https://unpkg.com/tether@latest/dist/js/tether.min.js
13+
- https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js
14+
js_wrap: l
15+
...
16+
*/

‎examples/tabs/demo.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div id="app">
2+
3+
<!-- Tabs with card integration -->
4+
<b-card no-block>
5+
<b-tabs small card ref="tabs" v-model="tabIndex">
6+
<b-tab title="General">
7+
I'm the first fading tab
8+
</b-tab>
9+
<b-tab title="Edit profile">
10+
I'm the second tab
11+
<b-card>I'm the card in tab</b-card>
12+
</b-tab>
13+
<b-tab title="Premium Plan" disabled>
14+
Sibzamini!
15+
</b-tab>
16+
</b-tabs>
17+
18+
</b-card>
19+
20+
<!-- Control buttons-->
21+
<div class="text-center">
22+
<b-button-group class="mt-2">
23+
<b-btn @click="$refs.tabs.previousTab()">Previous</b-btn>
24+
<b-btn @click="$refs.tabs.nextTab()">Next</b-btn>
25+
</b-button-group>
26+
<br>
27+
<span class="text-muted">Current Tab: {{tabIndex}}</span>
28+
</div>
29+
30+
</div>

‎examples/tabs/demo.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
window.app = new Vue({
2+
el: '#app',
3+
tabIndex: null /* Binding to model is optional */
4+
});

‎lib/components/tab.vue

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,51 @@
11
<template>
2-
<div role="tabpanel" class="tab-pane" :class="{active: active, disabled: disabled, fade: fade, in: animate, show: active}">
3-
<slot></slot>
4-
</div>
2+
<transition enterToClass="show" leaveClass="show" @after-enter="afterEnter" mode="out-in">
3+
<div role="tabpanel" class="tab-pane"
4+
:class="[{fade, disabled, active: localActive}]"
5+
v-if="localActive || !lazy" v-show="localActive || lazy"
6+
ref="panel"
7+
>
8+
<slot></slot>
9+
</div>
10+
</transition>
511
</template>
612

713
<script>
8-
export default {
9-
replace: true,
10-
data() {
11-
return {
12-
fade: this.$parent.fade,
13-
animate: false,
14-
active: false
15-
};
16-
},
17-
props: {
18-
id: {
19-
type: String,
20-
default: ''
14+
export default {
15+
methods: {
16+
afterEnter(el) {
17+
el.classList.add('show');
18+
}
2119
},
22-
title: {
23-
type: String,
24-
default: ''
20+
data() {
21+
return {
22+
fade: false,
23+
localActive: false,
24+
lazy: true
25+
};
2526
},
26-
disabled: {
27-
type: Boolean,
28-
default: false
27+
props: {
28+
id: {
29+
type: String,
30+
default: ''
31+
},
32+
title: {
33+
type: String,
34+
default: ''
35+
},
36+
disabled: {
37+
type: Boolean,
38+
default: false
39+
},
40+
active: {
41+
type: Boolean,
42+
default: false
43+
},
44+
href: {
45+
type: String,
46+
default: '#'
47+
}
2948
}
30-
},
31-
mounted() {
32-
const items = this.$parent.items;
33-
items.push({id: this.id, title: this.title, active: this.active, disabled: this.disabled});
34-
}
35-
};
49+
};
3650
3751
</script>

0 commit comments

Comments
 (0)