8000 docs: update documentation · v-rr/coreui-react@35aeec9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 35aeec9

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent c955290 commit 35aeec9

File tree

1 file changed

+62
-30
lines changed

1 file changed

+62
-30
lines changed

‎docs/4.0/components/CSidebar.mdx

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,86 @@ route: /components/sidebar
66
---
77

88
import { Playground, Props } from 'docz'
9+
import CIcon from '@coreui/icons-react'
10+
911
import {
12+
CBadge,
1013
CSidebar,
14+
CSidebarBrand,
15+
CSidebarFooter,
16+
CSidebarHeader,
1117
CSidebarNav,
18+
CSidebarToggler,
1219
CNavGroup,
1320
CNavGroupItems,
1421
CNavItem,
15-
CNavLink
22+
CNavLink,
23+
CNavTitle
1624
} from '../../../src/index.ts'
1725

26+
## Supported content
27+
28+
Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
1829

19-
import navigation from './_nav'
30+
- `<CSidebarHeader>` for optional header.
31+
- `<CSidebarBrand>` for your company, product, or project name.
32+
- `<CSidebarNav>` for a full-height and lightweight navigation (including support for dropdowns).
33+
- `<CSidebarFooter>` for optional footer.
34+
- `<CSidebarToggler>` for use with our minimizer plugin.
2035

21-
## Example
36+
## Examples
2237

2338
<Playground>
2439
<CSidebar>
40+
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
2541
<CSidebarNav>
26-
<CNavItem>
27-
<CNavLink href="#">Link 1</CNavLink>
42+
<CNavTitle>Nav Title</CNavTitle>
43+
<CNavItem href="#">
44+
<CIcon customClassName="nav-icon" name="cil-speedometer"/>
45+
Nav item
2846
</CNavItem>
29-
<CNavGroup toggler="Group 1">
30-
<CNavItem>
31-
<CNavLink href="#">Link 2</CNavLink>
32-
</CNavItem>
33-
<CNavItem>
34-
<CNavLink href="#">Link 3</CNavLink>
47+
<CNavItem href="#">
48+
<CIcon customClassName="nav-icon" name="cil-speedometer"/>
49+
With badge
50+
<CBadge color="primary ms-auto">NEW</CBadge>
51+
</CNavItem>
52+
<CNavGroup toggler="Nav dropdown">
53+
<CNavItem href="#">
54+
<CIcon customClassName="nav-icon" name="cil-puzzle"/> Nav dropdown item
3555
</CNavItem>
36-
<CNavItem>
37-
<CNavLink href="#">Link 4</CNavLink>
56+
<CNavItem href="#">
57+
<CIcon customClassName="nav-icon" name="cil-puzzle"/> Nav dropdown item
3858
</CNavItem>
39-
<CNavGroup toggler="Group 2">
40-
<CNavItem>
41-
<CNavLink href="#">Link 5</CNavLink>
42-
</CNavItem>
43-
<CNavItem>
44-
<CNavLink href="#">Link 6</CNavLink>
45-
</CNavItem>
46-
<CNavItem>
47-
<CNavLink href="#">Link 7</CNavLink>
48-
</CNavItem>
49-
</CNavGroup>
5059
</CNavGroup>
51-
<CNavItem>
52-
<CNavLink href="#">Link 17</CNavLink>
53-
</CNavItem>
54-
<CNavItem>
55-
<CNavLink href="#">Link 18</CNavLink>
56-
</CNavItem>
5760
</CSidebarNav>
61+
<CSidebarToggler/>
5862
</CSidebar>
5963
</Playground>
64+
65+
66+
## API
67+
68+
### CSidebar
69+
70+
<Props of={CSidebar} />
71+
72+
### CSidebarBrand
73+
74+
<Props of={CSidebarBrand} />
75+
76+
### CSidebarFooter
77+
78+
<Props of={CSidebarFooter} />
79+
80+
### CSidebarHeader
81+
82+
<Props of={CSidebarHeader} />
83+
84+
### CSidebarNav
85+
86+
<Props of={CSidebarNav} />
87+
88+
### CSidebarToggler
89+
90+
<Props of={CSidebarToggler} />
91+

0 commit comments

Comments
 (0)
0