Skip to content

Commit 02c1c3a

Browse files
mrholekmrholek
committed
docs: update content
1 parent 97e58d7 commit 02c1c3a

File tree

1 file changed

+52
-52
lines changed

1 file changed

+52
-52
lines changed

‎packages/docs/components/tabs.md‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,16 @@ If you don’t provide the `variant` prop, the component will default to a basic
7676
<CTab disabled itemKey="disabled">Disabled</CTab>
7777
</CTabList>
7878
<CTabContent>
79-
<CTabPanel className="p-3" itemKey="home">
79+
<CTabPanel class="p-3" itemKey="home">
8080
Home tab content
8181
</CTabPanel>
82-
<CTabPanel className="p-3" itemKey="profile">
82+
<CTabPanel class="p-3" itemKey="profile">
8383
Profile tab content
8484
</CTabPanel>
85-
<CTabPanel className="p-3" itemKey="contact">
85+
<CTabPanel class="p-3" itemKey="contact">
8686
Contact tab content
8787
</CTabPanel>
88-
<CTabPanel className="p-3" itemKey="disabled">
88+
<CTabPanel class="p-3" itemKey="disabled">
8989
Disabled tab content
9090
</CTabPanel>
9191
</CTabContent>
@@ -100,16 +100,16 @@ If you don’t provide the `variant` prop, the component will default to a basic
100100
<CTab disabled itemKey="disabled">Disabled</CTab>
101101
</CTabList>
102102
<CTabContent>
103-
<CTabPanel className="p-3" itemKey="home">
103+
<CTabPanel class="p-3" itemKey="home">
104104
Home tab content
105105
</CTabPanel>
106-
<CTabPanel className="p-3" itemKey="profile">
106+
<CTabPanel class="p-3" itemKey="profile">
107107
Profile tab content
108108
</CTabPanel>
109-
<CTabPanel className="p-3" itemKey="contact">
109+
<CTabPanel class="p-3" itemKey="contact">
110110
Contact tab content
111111
</CTabPanel>
112-
<CTabPanel className="p-3" itemKey="disabled">
112+
<CTabPanel class="p-3" itemKey="disabled">
113113
Disabled tab content
114114
</CTabPanel>
115115
</CTabContent>
@@ -129,16 +129,16 @@ Take that same code, but use `variant="pills"` instead:
129129
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
130130
</CTabList>
131131
<CTabContent>
132-
<CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
132+
<CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
133133
Home tab content
134134
</CTabPanel>
135-
<CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
135+
<CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
136136
Profile tab content
137137
</CTabPanel>
138-
<CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
138+
<CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
139139
Contact tab content
140140
</CTabPanel>
141-
<CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
141+
<CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
142142
Disabled tab content
143143
</CTabPanel>
144144
</CTabContent>
@@ -153,16 +153,16 @@ Take that same code, but use `variant="pills"` instead:
153153
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
154154
</CTabList>
155155
<CTabContent>
156-
<CTabPanel className="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
156+
<CTabPanel class="p-3" aria-labelledby="home-tab-pane" :itemKey="1">
157157
Home tab content
158158
</CTabPanel>
159-
<CTabPanel className="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
159+
<CTabPanel class="p-3" aria-labelledby="profile-tab-pane" :itemKey="2">
160160
Profile tab content
161161
</CTabPanel>
162-
<CTabPanel className="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
162+
<CTabPanel class="p-3" aria-labelledby="contact-tab-pane" :itemKey="3">
163163
Contact tab content
164164
</CTabPanel>
165-
<CTabPanel className="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
165+
<CTabPanel class="p-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
166166
Disabled tab content
167167
</CTabPanel>
168168
</CTabContent>
@@ -182,16 +182,16 @@ Take that same code, but use `variant="underline"` instead:
182182
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
183183
</CTabList>
184184
<CTabContent>
185-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
185+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
186186
Home tab content
187187
</CTabPanel>
188-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
188+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
189189
Profile tab content
190190
</CTabPanel>
191-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
191+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
192192
Contact tab content
193193
</CTabPanel>
194-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
194+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
195195
Disabled tab content
196196
</CTabPanel>
197197
</CTabContent>
@@ -206,16 +206,16 @@ Take that same code, but use `variant="underline"` instead:
206206
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
207207
</CTabList>
208208
<CTabContent>
209-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
209+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
210210
Home tab content
211211
</CTabPanel>
212-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
212+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
213213
Profile tab content
214214
</CTabPanel>
215-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
215+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
216216
Contact tab content
217217
</CTabPanel>
218-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
218+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
219219
Disabled tab content
220220
</CTabPanel>
221221
</CTabContent>
@@ -235,16 +235,16 @@ Take that same code, but use `variant="underline-border"` instead:
235235
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
236236
</CTabList>
237237
<CTabContent>
238-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
238+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
239239
Home tab content
240240
</CTabPanel>
241-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
241+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
242242
Profile tab content
243243
</CTabPanel>
244-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
244+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
245245
Contact tab content
246246
</CTabPanel>
247-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
247+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
248248
Disabled tab content
249249
</CTabPanel>
250250
</CTabContent>
@@ -259,16 +259,16 @@ Take that same code, but use `variant="underline-border"` instead:
259259
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
260260
</CTabList>
261261
<CTabContent>
262-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
262+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
263263
Home tab content
264264
</CTabPanel>
265-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
265+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
266266
Profile tab content
267267
</CTabPanel>
268-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
268+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
269269
Contact tab content
270270
</CTabPanel>
271-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
271+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
272272
Disabled tab content
273273
</CTabPanel>
274274
</CTabContent>
@@ -288,16 +288,16 @@ Force your `<CTabs>`'s contents to extend the full available width one of two mo
288288
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
289289
</CTabList>
290290
<CTabContent>
291-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
291+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
292292
Home tab content
293293
</CTabPanel>
294-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
294+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
295295
Profile tab content
296296
</CTabPanel>
297-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
297+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
298298
Contact tab content
299299
</CTabPanel>
300-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
300+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
301301
Disabled tab content
302302
</CTabPanel>
303303
</CTabContent>
@@ -312,16 +312,16 @@ Force your `<CTabs>`'s contents to extend the full available width one of two mo
312312
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
313313
</CTabList>
314314
<CTabContent>
315-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
315+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
316316
Home tab content
317317
</CTabPanel>
318-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
318+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
319319
Profile tab content
320320
</CTabPanel>
321-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
321+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
322322
Contact tab content
323323
</CTabPanel>
324-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
324+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
325325
Disabled tab content
326326
</CTabPanel>
327327
</CTabContent>
@@ -339,16 +339,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
339339
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
340340
</CTabList>
341341
<CTabContent>
342-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
342+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
343343
Home tab content
344344
</CTabPanel>
345-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
345+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
346346
Profile tab content
347347
</CTabPanel>
348-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
348+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
349349
Contact tab content
350350
</CTabPanel>
351-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
351+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
352352
Disabled tab content
353353
</CTabPanel>
354354
</CTabContent>
@@ -363,16 +363,16 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
363363
<CTab aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
364364
</CTabList>
365365
<CTabContent>
366-
<CTabPanel className="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
366+
<CTabPanel class="py-3" aria-labelledby="home-tab-pane" :itemKey="1">
367367
Home tab content
368368
</CTabPanel>
369-
<CTabPanel className="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
369+
<CTabPanel class="py-3" aria-labelledby="profile-tab-pane" :itemKey="2">
370370
Profile tab content
371371
</CTabPanel>
372-
<CTabPanel className="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
372+
<CTabPanel class="py-3" aria-labelledby="contact-tab-pane" :itemKey="3">
373373
Contact tab content
374374
</CTabPanel>
375-
<CTabPanel className="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
375+
<CTabPanel class="py-3" aria-labelledby="disabled-tab-pane" :itemKey="4">
376376
Disabled tab content
377377
</CTabPanel>
378378
</CTabContent>
@@ -404,16 +404,16 @@ Our Vue Tabs component automatically manages all `role="..."` and `aria-` attrib
404404
<CTab id="disabled-tab" aria-controls="disabled-tab-pane" disabled :itemKey="4">Disabled</CTab>
405405
</CTabList>
406406
<CTabContent>
407-
<CTabPanel id="home-tab-pane" className="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
407+
<CTabPanel id="home-tab-pane" class="p-3" aria-labelledby="home-tab-pane" aria-labelledby="home-tab" :itemKey="1">
408408
Home tab content
409409
</CTabPanel>
410-
<CTabPanel id="profile-tab-pane" className="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
410+
<CTabPanel id="profile-tab-pane" class="p-3" aria-labelledby="profile-tab-pane" aria-labelledby="profile-tab" :itemKey="2">
411411
Profile tab content
412412
</CTabPanel>
413-
<CTabPanel id="contact-tab-pane" className="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
413+
<CTabPanel id="contact-tab-pane" class="p-3" aria-labelledby="contact-tab-pane" aria-labelledby="contact-tab" :itemKey="3">
414414
Contact tab content
415415
</CTabPanel>
416-
<CTabPanel id="disabled-tab-pane" className="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
416+
<CTabPanel id="disabled-tab-pane" class="p-3" aria-labelledby="disabled-tab-pane" aria-labelledby="disabled-tab" :itemKey="4">
417417
Disabled tab content
418418
</CTabPanel>
419419
</CTabContent>

0 commit comments

Comments
 (0)