Skip to content

Commit 4e7daab

Browse files
mrholekmrholek
committed
docs: update content
1 parent b0d4418 commit 4e7daab

File tree

1 file changed

+170
-46
lines changed

1 file changed

+170
-46
lines changed

‎packages/docs/content/components/navs-tabs.mdx

Lines changed: 170 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -337,43 +337,65 @@ export const TabPanesExample = () => {
337337
return (
338338
<>
339339
<CNav variant="tabs" role="tablist">
340-
<CNavItem>
340+
<CNavItem role="presentation">
341341
<CNavLink
342-
href="#!"
343342
active={activeKey === 1}
343+
component="button"
344+
role="tab"
345+
aria-controls="home-tab-pane"
346+
aria-selected={activeKey === 1}
344347
onClick={() => setActiveKey(1)}
345348
>
346349
Home
347350
</CNavLink>
348351
</CNavItem>
349-
<CNavItem>
352+
<CNavItem role="presentation">
350353
<CNavLink
351-
href="#!"
352354
active={activeKey === 2}
355+
component="button"
356+
role="tab"
357+
aria-controls="profile-tab-pane"
358+
aria-selected={activeKey === 2}
353359
onClick={() => setActiveKey(2)}
354360
>
355361
Profile
356362
</CNavLink>
357363
</CNavItem>
358-
<CNavItem>
364+
<CNavItem role="presentation">
359365
<CNavLink
360-
href="#!"
361366
active={activeKey === 3}
367+
component="button"
368+
role="tab"
369+
aria-controls="contact-tab-pane"
370+
aria-selected={activeKey === 3}
362371
onClick={() => setActiveKey(3)}
363372
>
364373
Contact
365374
</CNavLink>
366375
</CNavItem>
376+
<CNavItem role="presentation">
377+
<CNavLink
378+
active={activeKey === 4}
379+
component="button"
380+
disabled
381+
role="tab"
382+
aria-controls="disabled-tab-pane"
383+
aria-selected={activeKey === 4}
384+
onClick={() => setActiveKey(4)}
385+
>
386+
Disabled
387+
</CNavLink>
388+
</CNavItem>
367389
</CNav>
368390
<CTabContent>
369-
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
391+
<CTabPane role="tabpanel" aria-labelledby="home-tab-pane" visible={activeKey === 1}>
370392
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
371393
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
372394
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
373395
mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
374396
aliquip quis cardigan american apparel, butcher voluptate nisi qui.
375397
</CTabPane>
376-
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
398+
<CTabPane role="tabpanel" aria-labelledby="profile-tab-pane" visible={activeKey === 2}>
377399
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
378400
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
379401
four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
@@ -383,7 +405,7 @@ export const TabPanesExample = () => {
383405
sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
384406
scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
385407
</CTabPane>
386-
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
408+
<CTabPane role="tabpanel" aria-labelledby="contact-tab-pane" visible={activeKey === 3}>
387409
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
388410
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
389411
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
@@ -392,6 +414,15 @@ export const TabPanesExample = () => {
392414
mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
393415
stumptown. Pitchfork sustainable tofu synth chambray yr.
394416
</CTabPane>
417+
<CTabPane role="tabpanel" aria-labelledby="disabled-tab-pane" visible={activeKey === 3}>
418+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
419+
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
420+
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
421+
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
422+
mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
423+
Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.
424+
Pitchfork sustainable tofu synth chambray yr.
425+
</CTabPane>
395426
</CTabContent>
396427
</>
397428
)
@@ -406,53 +437,84 @@ const [activeKey, setActiveKey] = useState(1)
406437
return (
407438
<>
408439
<CNav variant="tabs" role="tablist">
409-
<CNavItem>
440+
<CNavItem role="presentation">
410441
<CNavLink
411-
href="#!"
412442
active={activeKey === 1}
443+
component="button"
444+
role="tab"
445+
aria-controls="home-tab-pane"
446+
aria-selected={activeKey === 1}
413447
onClick={() => setActiveKey(1)}
414448
>
415449
Home
416450
</CNavLink>
417451
</CNavItem>
418-
<CNavItem>
452+
<CNavItem role="presentation">
419453
<CNavLink
420-
href="#!"
421454
active={activeKey === 2}
455+
component="button"
456+
role="tab"
457+
aria-controls="profile-tab-pane"
458+
aria-selected={activeKey === 2}
422459
onClick={() => setActiveKey(2)}
423460
>
424461
Profile
425462
</CNavLink>
426463
</CNavItem>
427-
<CNavItem>
464+
<CNavItem role="presentation">
428465
<CNavLink
429-
href="#!"
430466
active={activeKey === 3}
467+
component="button"
468+
role="tab"
469+
aria-controls="contact-tab-pane"
470+
aria-selected={activeKey === 3}
431471
onClick={() => setActiveKey(3)}
432472
>
433473
Contact
434474
</CNavLink>
435475
</CNavItem>
476+
<CNavItem role="presentation">
477+
<CNavLink
478+
active={activeKey === 4}
479+
component="button"
480+
disabled
481+
role="tab"
482+
aria-controls="disabled-tab-pane"
483+
aria-selected={activeKey === 4}
484+
onClick={() => setActiveKey(4)}
485+
>
486+
Disabled
487+
</CNavLink>
488+
</CNavItem>
436489
</CNav>
437490
<CTabContent>
438-
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
491+
<CTabPane role="tabpanel" aria-labelledby="home-tab-pane" visible={activeKey === 1}>
439492
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
440493
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
441494
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
442495
mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
443496
aliquip quis cardigan american apparel, butcher voluptate nisi qui.
444497
</CTabPane>
445-
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
498+
<CTabPane role="tabpanel" aria-labelledby="profile-tab-pane" visible={activeKey === 2}>
446499
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
447500
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
448501
four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
449-
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
450-
labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit
451-
sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
452-
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown,
453-
tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
502+
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
503+
assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
504+
magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
505+
sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
506+
scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
507+
</CTabPane>
508+
<CTabPane role="tabpanel" aria-labelledby="contact-tab-pane" visible={activeKey === 3}>
509+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
510+
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
511+
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
512+
helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
513+
Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
514+
mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
515+
stumptown. Pitchfork sustainable tofu synth chambray yr.
454516
</CTabPane>
455-
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
517+
<CTabPane role="tabpanel" aria-labelledby="disabled-tab-pane" visible={activeKey === 3}>
456518
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
457519
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
458520
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
@@ -473,43 +535,65 @@ export const TabPanesPillsExample = () => {
473535
return (
474536
<>
475537
<CNav variant="pills" role="tablist">
476-
<CNavItem>
538+
<CNavItem role="presentation">
477539
<CNavLink
478-
href="#!"
479540
active={activeKey === 1}
541+
component="button"
542+
role="tab"
543+
aria-controls="home-tab-pane"
544+
aria-selected={activeKey === 1}
480545
onClick={() => setActiveKey(1)}
481546
>
482547
Home
483548
</CNavLink>
484549
</CNavItem>
485-
<CNavItem>
550+
<CNavItem role="presentation">
486551
<CNavLink
487-
href="#!"
488552
active={activeKey === 2}
553+
component="button"
554+
role="tab"
555+
aria-controls="profile-tab-pane"
556+
aria-selected={activeKey === 2}
489557
onClick={() => setActiveKey(2)}
490558
>
491559
Profile
492560
</CNavLink>
493561
</CNavItem>
494-
<CNavItem>
562+
<CNavItem role="presentation">
495563
<CNavLink
496-
href="#!"
497564
active={activeKey === 3}
565+
component="button"
566+
role="tab"
567+
aria-controls="contact-tab-pane"
568+
aria-selected={activeKey === 3}
498569
onClick={() => setActiveKey(3)}
499570
>
500571
Contact
501572
</CNavLink>
502573
</CNavItem>
574+
<CNavItem role="presentation">
575+
<CNavLink
576+
active={activeKey === 4}
577+
component="button"
578+
disabled
579+
role="tab"
580+
aria-controls="disabled-tab-pane"
581+
aria-selected={activeKey === 4}
582+
onClick={() => setActiveKey(4)}
583+
>
584+
Disabled
585+
</CNavLink>
586+
</CNavItem>
503587
</CNav>
504588
<CTabContent>
505-
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
589+
<CTabPane role="tabpanel" aria-labelledby="home-tab-pane" visible={activeKey === 1}>
506590
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
507591
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
508592
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
509593
mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
510594
aliquip quis cardigan american apparel, butcher voluptate nisi qui.
511595
</CTabPane>
512-
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
596+
<CTabPane role="tabpanel" aria-labelledby="profile-tab-pane" visible={activeKey === 2}>
513597
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
514598
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
515599
four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
@@ -519,7 +603,7 @@ export const TabPanesPillsExample = () => {
519603
sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
520604
scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
521605
</CTabPane>
522-
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
606+
<CTabPane role="tabpanel" aria-labelledby="contact-tab-pane" visible={activeKey === 3}>
523607
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
524608
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
525609
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
@@ -528,6 +612,15 @@ export const TabPanesPillsExample = () => {
528612
mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
529613
stumptown. Pitchfork sustainable tofu synth chambray yr.
530614
</CTabPane>
615+
<CTabPane role="tabpanel" aria-labelledby="disabled-tab-pane" visible={activeKey === 3}>
616+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
617+
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
618+
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
619+
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
620+
mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog.
621+
Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.
622+
Pitchfork sustainable tofu synth chambray yr.
623+
</CTabPane>
531624
</CTabContent>
532625
</>
533626
)
@@ -542,53 +635,84 @@ const [activeKey, setActiveKey] = useState(1)
542635
return (
543636
<>
544637
<CNav variant="pills" role="tablist">
545-
<CNavItem>
638+
<CNavItem role="presentation">
546639
<CNavLink
547-
href="#!"
548640
active={activeKey === 1}
641+
component="button"
642+
role="tab"
643+
aria-controls="home-tab-pane"
644+
aria-selected={activeKey === 1}
549645
onClick={() => setActiveKey(1)}
550646
>
551647
Home
552648
</CNavLink>
553649
</CNavItem>
554-
<CNavItem>
650+
<CNavItem role="presentation">
555651
<CNavLink
556-
href="#!"
557652
active={activeKey === 2}
653+
component="button"
654+
role="tab"
655+
aria-controls="profile-tab-pane"
656+
aria-selected={activeKey === 2}
558657
onClick={() => setActiveKey(2)}
559658
>
560659
Profile
561660
</CNavLink>
562661
</CNavItem>
563-
<CNavItem>
662+
<CNavItem role="presentation">
564663
<CNavLink
565-
href="#!"
566664
active={activeKey === 3}
665+
component="button"
666+
role="tab"
667+
aria-controls="contact-tab-pane"
668+
aria-selected={activeKey === 3}
567669
onClick={() => setActiveKey(3)}
568670
>
569671
Contact
570672
</CNavLink>
571673
</CNavItem>
674+
<CNavItem role="presentation">
675+
<CNavLink
676+
active={activeKey === 4}
677+
component="button"
678+
disabled
679+
role="tab"
680+
aria-controls="disabled-tab-pane"
681+
aria-selected={activeKey === 4}
682+
onClick={() => setActiveKey(4)}
683+
>
684+
Disabled
685+
</CNavLink>
686+
</CNavItem>
572687
</CNav>
573688
<CTabContent>
574-
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
689+
<CTabPane role="tabpanel" aria-labelledby="home-tab-pane" visible={activeKey === 1}>
575690
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
576691
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
577692
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh
578693
mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan
579694
aliquip quis cardigan american apparel, butcher voluptate nisi qui.
580695
</CTabPane>
581-
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
696+
<CTabPane role="tabpanel" aria-labelledby="profile-tab-pane" visible={activeKey === 2}>
582697
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
583698
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
584699
four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft
585-
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
586-
labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit
587-
sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
588-
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown,
589-
tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
700+
beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
701+
assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero
702+
magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
703+
sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party
704+
scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
705+
</CTabPane>
706+
<CTabPane role="tabpanel" aria-labelledby="contact-tab-pane" visible={activeKey === 3}>
707+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
708+
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
709+
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie
710+
helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
711+
Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro
712+
mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog
713+
stumptown. Pitchfork sustainable tofu synth chambray yr.
590714
</CTabPane>
591-
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
715+
<CTabPane role="tabpanel" aria-labelledby="disabled-tab-pane" visible={activeKey === 3}>
592716
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic
593717
lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
594718
tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.

0 commit comments

Comments
 (0)