Skip to content

Commit 56492de

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 20f8a17 commit 56492de

File tree

3 files changed

+146
-154
lines changed

3 files changed

+146
-154
lines changed

‎docs/4.0/components/CListGroup.mdx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,17 @@ Place CoreUI's checkboxes and radios within list group items and customize as ne
203203
</CListGroup>
204204
</Playground>
205205

206-
TODO: add missing examples from base docs
206+
And if you want `<label>`s as the `.list-group-item` for large hit areas, you can do that, too.
207207

208+
<Playground>
209+
<CListGroup>
210+
<CFormCheck className="list-group-item" hitArea="full" label="Cras justo odio"/>
211+
<CFormCheck className="list-group-item" hitArea="full" label="Dapibus ac facilisis in" defaultChecked/>
212+
<CFormCheck className="list-group-item" hitArea="full" label="Morbi leo risus" defaultChecked/>
213+
<CFormCheck className="list-group-item" hitArea="full" label="orta ac consectetur ac"/>
214+
<CFormCheck className="list-group-item" hitArea="full" label="Vestibulum at eros"/>
215+
</CListGroup>
216+
</Playground>
208217

209218
## API
210219

‎docs/4.0/components/CNav.mdx

Lines changed: 136 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
---
2-
title: React Nav Component
3-
name: Nav
2+
title: React Navs & Tabs Components
3+
name: Navs & Tabs
44
description: Documentation and examples for how to use CoreUI's included React navigation components.
55
menu: Components
6-
route: /components/nav
6+
route: /components/navs-tabs
77
---
88

99
import { Playground, Props } from 'docz'
10+
import { useState } from 'react'
1011

1112
import {
1213
CDropdown,
@@ -18,7 +19,9 @@ import {
1819
CDropdownToggle,
1920
CNav,
2021
CNavItem,
21-
CNavLink
22+
CNavLink,
23+
CTabContent,
24+
CTabPane,
2225
} from '../../../src/index.ts'
2326

2427
## Base nav
@@ -323,6 +326,126 @@ Add dropdown menus with a little extra HTML.
323326
</CNav>
324327
</Playground>
325328

329+
## Tab panes
330+
331+
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
332+
333+
Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
334+
335+
<Playground>
336+
{() => {
337+
const [activeKey, setActiveKey] = useState(1)
338+
return (
339+
<>
340+
<CNav variant="tabs" role="tablist">
341+
<CNavItem>
342+
<CNavLink href="javascript:void(0);" active={activeKey === 1} onClick={() => setActiveKey(1)}>
343+
Home
344+
</CNavLink>
345+
</CNavItem>
346+
<CNavItem>
347+
<CNavLink href="javascript:void(0);" active={activeKey === 2} onClick={() => setActiveKey(2)}>
348+
Profile
349+
</CNavLink>
350+
</CNavItem>
351+
<CNavItem>
352+
<CNavLink href="javascript:void(0);" active={activeKey === 3} onClick={() => setActiveKey(3)}>
353+
Contact
354+
</CNavLink>
355+
</CNavItem>
356+
</CNav>
357+
<CTabContent>
358+
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
359+
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
360+
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
361+
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
362+
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
363+
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
364+
</CTabPane>
365+
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
366+
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
367+
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
368+
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
369+
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
370+
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
371+
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
372+
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
373+
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
374+
accusamus tattooed echo park.
375+
</CTabPane>
376+
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
377+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
378+
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
379+
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
380+
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
381+
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
382+
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
383+
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
384+
</CTabPane>
385+
</CTabContent>
386+
</>
387+
)
388+
}}
389+
</Playground>
390+
391+
The tabs also works with pills.
392+
393+
<Playground>
394+
{() => {
395+
const [activeKey, setActiveKey] = useState(1)
396+
return (
397+
<>
398+
<CNav variant="pills" role="tablist">
399+
<CNavItem>
400+
<CNavLink href="javascript:void(0);" active={activeKey === 1} onClick={() => setActiveKey(1)}>
401+
Home
402+
</CNavLink>
403+
</CNavItem>
404+
<CNavItem>
405+
<CNavLink href="javascript:void(0);" active={activeKey === 2} onClick={() => setActiveKey(2)}>
406+
Profile
407+
</CNavLink>
408+
</CNavItem>
409+
<CNavItem>
410+
<CNavLink href="javascript:void(0);" active={activeKey === 3} onClick={() => setActiveKey(3)}>
411+
Contact
412+
</CNavLink>
413+
</CNavItem>
414+
</CNav>
415+
<CTabContent>
416+
<CTabPane role="tabpanel" aria-labelledby="home-tab" visible={activeKey === 1}>
417+
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
418+
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
419+
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
420+
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
421+
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
422+
</CTabPane>
423+
<CTabPane role="tabpanel" aria-labelledby="profile-tab" visible={activeKey === 2}>
424+
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
425+
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
426+
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
427+
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
428+
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
429+
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
430+
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
431+
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
432+
accusamus tattooed echo park.
433+
</CTabPane>
434+
<CTabPane role="tabpanel" aria-labelledby="contact-tab" visible={activeKey === 3}>
435+
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
436+
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
437+
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
438+
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
439+
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
440+
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
441+
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
442+
</CTabPane>
443+
</CTabContent>
444+
</>
445+
)
446+
}}
447+
</Playground>
448+
326449

327450
## API
328451

@@ -337,3 +460,12 @@ Add dropdown menus with a little extra HTML.
337460
### CNavLink
338461

339462
<Props of={CNavLink} />
463+
464+
### CTabContent
465+
466+
<Props of={CTabContent} />
467+
468+
### CTabPane
469+
470+
<Props of={CTabPane} />
471+

‎docs/4.0/components/CTabs.mdx

Lines changed: 0 additions & 149 deletions
This file was deleted.

0 commit comments

Comments
 (0)