Skip to content

Commit 29b563a

Browse files
tmorehousetmorehouse
authored
docs(tabs): Add information on using the key attribute
1 parent 37db7d4 commit 29b563a

File tree

1 file changed

+33
-29
lines changed

1 file changed

+33
-29
lines changed

‎src/components/tabs/README.md

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Tabs
22

3-
> Create tabbable panes of local content.
3+
> Create tabbable panes of local content. The tabs component is built upon navs and cards internally.
44
55

66
## Basic usage
@@ -21,6 +21,10 @@
2121
<!-- basic.vue -->
2222
```
2323

24+
**Tip:** You should supply each child `<b-tab>` component a unique `key` value if dynamically
25+
adding, removing, showing, or hiding `<b-tab>` components. The `key` attribute is a special
26+
Vue attribute, see https://vuejs.org/v2/api/#key).
27+
2428
## Cards Integration
2529

2630
Tabs support integrating with bootstrap cards. Just add the `card` property to
@@ -31,10 +35,10 @@ header and remove the extra padding introduced by `card-body`.
3135
```html
3236
<b-card no-body>
3337
<b-tabs card>
34-
<b-tab title="Tab 1" active>
38+
<b-tab title="Tab 1" active key="tab-1">
3539
Tab Contents 1
3640
</b-tab>
37-
<b-tab title="Tab 2">
41+
<b-tab title="Tab 2" key="tab-2">
3842
Tab Contents 2
3943
</b-tab>
4044
</b-tabs>
@@ -50,19 +54,19 @@ To disable the `card-body` class, set the `no-body` prop on `<b-tab>` sub compon
5054
```html
5155
<b-card no-body>
5256
<b-tabs card>
53-
<b-tab no-body title="Picture 1" active>
57+
<b-tab no-body title="Picture 1" active key="tab-1">
5458
<b-card-img bottom src="https://picsum.photos/600/200/?image=21" />
5559
<b-card-footer>Picture 1 footer</b-card-footer>
5660
</b-tab>
57-
<b-tab no-body title="Picture 2">
61+
<b-tab no-body title="Picture 2" key="tab-2">
5862
<b-card-img bottom src="https://picsum.photos/600/200/?image=25" />
5963
<b-card-footer>Picture 2 footer</b-card-footer>
6064
</b-tab>
61-
<b-tab no-body title="Picture 3">
65+
<b-tab no-body title="Picture 3" key="tab-3">
6266
<b-card-img bottom src="https://picsum.photos/600/200/?image=26" />
6367
<b-card-footer>Picture 3 footer</b-card-footer>
6468
</b-tab>
65-
<b-tab title="Text">
69+
<b-tab title="Text" key="tab-1">
6670
<h5>This tab does not have the <code>no-body</code> prop set</h5>
6771
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla
6872
tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat
@@ -88,10 +92,10 @@ the pill style variant.
8892
```html
8993
<b-card no-body>
9094
<b-tabs pills card>
91-
<b-tab title="Tab 1" active>
95+
<b-tab title="Tab 1" active key="tab-1">
9296
Tab Contents 1
9397
</b-tab>
94-
<b-tab title="Tab 2">
98+
<b-tab title="Tab 2" key="tab-2">
9599
Tab Contents 2
96100
</b-tab>
97101
</b-tabs>
@@ -107,10 +111,10 @@ Visually move the tab controls to the bottom by setting the prop `end`
107111
```html
108112
<b-card no-body>
109113
<b-tabs pills card end>
110-
<b-tab title="Tab 1" active>
114+
<b-tab title="Tab 1" active key="tab-1">
111115
Tab Contents 1
112116
</b-tab>
113-
<b-tab title="Tab 2">
117+
<b-tab title="Tab 2" key="tab-1">
114118
Tab Contents 2
115119
</b-tab>
116120
</b-tabs>
@@ -138,13 +142,13 @@ Vertical tabs work with or without `card` mode enabled.
138142
```html
139143
<b-card no-body>
140144
<b-tabs pills card vertical>
141-
<b-tab title="Tab 1" active>
145+
<b-tab title="Tab 1" active key="tab-1">
142146
Tab Contents 1
143147
</b-tab>
144-
<b-tab title="Tab 2">
148+
<b-tab title="Tab 2" key="tab-2">
145149
Tab Contents 2
146150
</b-tab>
147-
<b-tab title="Tab 3">
151+
<b-tab title="Tab 3" key="tab-3">
148152
Tab Contents 3
149153
</b-tab>
150154
</b-tabs>
@@ -158,13 +162,13 @@ Visually move the tab controls to the right hand side by setting the `end` prop:
158162
```html
159163
<b-card no-body>
160164
<b-tabs pills card vertical end>
161-
<b-tab title="Tab 1" active>
165+
<b-tab title="Tab 1" active key="tab-1">
162166
Tab Contents 1
163167
</b-tab>
164-
<b-tab title="Tab 2">
168+
<b-tab title="Tab 2" key="tab-2">
165169
Tab Contents 2
166170
</b-tab>
167-
<b-tab title="Tab 3">
171+
<b-tab title="Tab 3" key="tab-3">
168172
Tab Contents 3
169173
</b-tab>
170174
</b-tabs>
@@ -181,13 +185,13 @@ or column classes such as `col-2`, `col-3`, etc.
181185
```html
182186
<b-card no-body>
183187
<b-tabs pills card vertical nav-wrapper-class="w-50">
184-
<b-tab title="Tab 1" active>
188+
<b-tab title="Tab 1" active key="tab-1">
185189
Tab Contents 1
186190
</b-tab>
187-
<b-tab title="Tab 2">
191+
<b-tab title="Tab 2" key="tab-2">
188192
Tab Contents 2
189193
</b-tab>
190-
<b-tab title="Tab 3">
194+
<b-tab title="Tab 3" key="tab-3">
191195
Tab Contents 3
192196
</b-tab>
193197
</b-tabs>
@@ -233,7 +237,7 @@ If you want to add custom content to tab title, like HTML code, icons, or anothe
233237

234238
```html
235239
<b-tabs>
236-
<b-tab active>
240+
<b-tab active key="tab-1">
237241
<!-- Add your custom title here-->
238242
<template slot="title">
239243
i'm <i>Custom</i> <strong>Title</strong>
@@ -260,13 +264,13 @@ You may need to accomodate your custom classes for this._
260264
<template>
261265
<b-card no-body>
262266
<b-tabs card v-model="tabIndex">
263-
<b-tab title="Tab 1" :title-link-class="linkClass(0)">
267+
<b-tab title="Tab 1" :title-link-class="linkClass(0)" key="tab-1">
264268
Tab Contents 1
265269
</b-tab>
266-
<b-tab title="Tab 2" :title-link-class="linkClass(1)">
270+
<b-tab title="Tab 2" :title-link-class="linkClass(1)" key="tab-2">
267271
Tab Contents 2
268272
</b-tab>
269-
<b-tab title="Tab 3" :title-link-class="linkClass(2)">
273+
<b-tab title="Tab 3" :title-link-class="linkClass(2)" key="tab-3">
270274
Tab Contents 3
271275
</b-tab>
272276
</b-tabs>
@@ -328,14 +332,14 @@ as it is not possble to use key presses to jump out of a text (or test-like) inp
328332
<!-- Tabs with card integration -->
329333
<b-card no-body>
330334
<b-tabs small card v-model="tabIndex">
331-
<b-tab title="General">
335+
<b-tab title="General" key="tab-1">
332336
I'm the first fading tab
333337
</b-tab>
334-
<b-tab title="Edit profile">
338+
<b-tab title="Edit profile" key="tab-2">
335339
I'm the second tab
336340
<b-card>I'm the card in tab</b-card>
337341
</b-tab>
338-
<b-tab title="Premium Plan" disabled>
342+
<b-tab title="Premium Plan" disabled key="tab-3">
339343
Sibzamini!
340344
</b-tab>
341345
<b-tab title="Info">
@@ -376,8 +380,8 @@ export default {
376380
<div>
377381
<b-card no-body>
378382
<b-tabs card>
379-
<!-- Render Tabs -->
380-
<b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
383+
<!-- Render Tabs, supply a unique `key` to each tab -->
384+
<b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="`dyntab-${i}`">
381385
Tab Contents {{i}}
382386
<b-btn size="sm" variant="danger" class="float-right" @click="()=>closeTab(i)">
383387
Close tab

0 commit comments

Comments
 (0)