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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy