Skip to content

Commit 042d5d7

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 8921707 commit 042d5d7

File tree

8 files changed

+123
-109
lines changed

8 files changed

+123
-109
lines changed

‎docs/4.0/components/sidebar.md‎

Lines changed: 71 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,79 @@
11
---
2-
title: CSidebar
3-
description:
2+
title: Sidebar
3+
description: Vue Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more.
44
---
55

6-
## Examples
6+
## Supported content
7+
8+
Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
79

8-
<CSidebar class="sidebar-show sidebar-dark sidebar-fixed sidebar-self-hiding-xl">
9-
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
10-
<CSidebarNav>
11-
<CNavLink href="#" active="true">aaa</CNavLink>
12-
<CNavGroup>
13-
<template #togglerContent>
14-
group
15-
</template>
16-
<CNavLink>
17-
<CIconTestIcon/>
18-
g1e1
19-
</CNavLink>
20-
<CNavLink active="true">
21-
<CIconTestIcon/>
22-
g1e2
23-
</CNavLink>
24-
<CNavLink>g1e3</CNavLink>
25-
<CNavGroup>
26-
<template #togglerContent>
27-
group
28-
</template>
29-
<CNavLink>g2e1</CNavLink>
30-
<CNavLink>g2e2</CNavLink>
31-
<CNavLink>g2e3</CNavLink>
32-
<CNavGroup toggler="group-3">
33-
<CNavLink>g3e1</CNavLink>
34-
<CNavLink>g3e2</CNavLink>
35-
<CNavLink>g3e3</CNavLink>
36-
</CNavGroup>
37-
</CNavGroup>
38-
</CNavGroup>
39-
<CNavGroup toggler="group B">
40-
<CNavLink>g-b1e1</CNavLink>
41-
<CNavLink>g-b1e2</CNavLink>
42-
<CNavLink>g-b1e3</CNavLink>
43-
<CNavGroup toggler="group-B-1">
44-
<CNavLink>g-b2e1</CNavLink>
45-
<CNavLink>g-b2e2</CNavLink>
46-
<CNavLink>g-b2e3</CNavLink>
47-
</CNavGroup>
48-
<CNavGroup toggler="group-B-2">
49-
<CNavLink>g-b3e1</CNavLink>
50-
<CNavLink>g-b3e2</CNavLink>
51-
<CNavLink>g-b3e3</CNavLink>
52-
</CNavGroup>
53-
</CNavGroup>
54-
<CNavLink>bbb</CNavLink>
55-
<CCreateNavItem/>
56-
<CNavLink href="#">Lorem ipsum</CNavLink>
57-
<CNavLink href="#">Lorem ipsum</CNavLink>
58-
<CNavLink href="#">Lorem ipsum</CNavLink>
59-
<CNavLink href="#">Lorem ipsum</CNavLink>
60-
<CNavLink href="#">Lorem ipsum</CNavLink>
61-
<CNavLink href="#">Lorem ipsum</CNavLink>
62-
<CNavLink href="#">Lorem ipsum</CNavLink>
63-
<CNavLink href="#">Lorem ipsum</CNavLink>
64-
<CNavLink href="#">Lorem ipsum</CNavLink>
65-
<CNavLink href="#">Lorem ipsum</CNavLink>
66-
</CSidebarNav>
67-
<CSidebarToggler/>
68-
</CSidebar>
10+
- `<CSidebarHeader>` for optional header.
11+
- `<CSidebarBrand>` for your company, product, or project name.
12+
- `<CSidebarNav>` for a full-height and lightweight navigation (including support for dropdowns).
13+
- `<CSidebarFooter>` for optional footer.
14+
- `<CSidebarToggler>` for use with our minimizer plugin.
6915

16+
## Examples
17+
18+
::: demo
19+
<CSidebar>
20+
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
21+
<CSidebarNav>
22+
<li class="nav-title">Nav Title</li>
23+
<CNavItem href="#">
24+
<CIcon customClasses="nav-icon" name="cil-speedometer"/>
25+
Nav item
26+
</CNavItem>
27+
<CNavItem href="#">
28+
<CIcon customClasses="nav-icon" name="cil-speedometer"/>
29+
With badge
30+
<CBadge color="primary ms-auto">NEW</CBadge>
31+
</CNavItem>
32+
<CNavGroup>
33+
<template #togglerContent>
34+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown
35+
</template>
36+
<CNavItem href="#">
37+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown item
38+
</CNavItem>
39+
<CNavItem href="#">
40+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown item
41+
</CNavItem>
42+
</CNavGroup>
43+
</CSidebarNav>
44+
<CSidebarToggler/>
45+
</CSidebar>
46+
:::
7047
```vue
71-
<CSidebar class="sidebar-show">
72-
<CSidebarNav>
73-
<CNavLink>aaa</CNavLink>
74-
<CNavGroup toggler="group">
75-
<CNavLink>g1</CNavLink>
76-
<CNavLink>g2</CNavLink>
77-
<CNavLink>g3</CNavLink>
78-
<CNavGroup toggler="group-2">
79-
<CNavLink>g1</CNavLink>
80-
<CNavLink>g2</CNavLink>
81-
<CNavLink>g3</CNavLink>
82-
</CNavGroup>
83-
</CNavGroup>
84-
<CNavLink>bbb</CNavLink>
85-
<CCreateNavItem items={navigation}/>
86-
<CNavLink>ccc</CNavLink>
87-
</CSidebarNav>
88-
</CSidebar>
48+
<CSidebar>
49+
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
50+
<CSidebarNav>
51+
<li class="nav-title">Nav Title</li>
52+
<CNavItem href="#">
53+
<CIcon customClasses="nav-icon" name="cil-speedometer"/>
54+
Nav item
55+
</CNavItem>
56+
<CNavItem href="#">
57+
<CIcon customClasses="nav-icon" name="cil-speedometer"/>
58+
With badge
59+
<CBadge color="primary ms-auto">NEW</CBadge>
60+
</CNavItem>
61+
<CNavGroup>
62+
<template #togglerContent>
63+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown
64+
</template>
65+
<CNavItem href="#">
66+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown item
67+
</CNavItem>
68+
<CNavItem href="#">
69+
<CIcon customClasses="nav-icon" name="cil-puzzle"/> Nav dropdown item
70+
</CNavItem>
71+
</CNavGroup>
72+
</CSidebarNav>
73+
<CSidebarToggler/>
74+
</CSidebar>
8975
```
9076

91-
## Additional content
77+
## API
78+
79+
!!!include(./docs/api/sidebar/CSidebar.api.md)!!!

‎docs/api/form/CFormFeedback.api.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
### CFormFeedback
2+
3+
#### Props
4+
5+
| Prop name | Description | Type | Values | Default |
6+
| ---------------------- | ------------------------------------------------------------------------------------------------------------ | ------- | ------ | ------- |
7+
| <code>component</code> | Component used for the root node. Either a string to use a HTML element or a component.<br/>`@default` 'div' | string | - | 'div' |
8+
| <code>invalid</code> | Method called immediately after the `value` prop changes. | boolean | - | |
9+
| <code>tooltip</code> | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | - | |
10+
| <code>valid</code> | Set component validation state to valid. | boolean | - | |
11+
12+
---

‎docs/api/grid/CCol.api.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
#### Props
44

5-
| Prop name | Description | Type | Values | Default |
6-
| ---------------- | ------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
7-
| <code>xs</code> | The number of columns/offset/order on extra small devices (<576px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
8-
| <code>sm</code> | The number of columns/offset/order on small devices (<768px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
9-
| <code>md</code> | The number of columns/offset/order on medium devices (<992px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
10-
| <code>lg</code> | The number of columns/offset/order on large devices (<1200px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
11-
| <code>xl</code> | The number of columns/offset/order on X-Large devices (<1400px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
12-
| <code>xxl</code> | The number of columns/offset/order on XX-Large devices (≥1400px). | Object as () => Col\|boolean | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
5+
| Prop name | Description | Type | Values | Default |
6+
| ---------------- | ------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
7+
| <code>xs</code> | The number of columns/offset/order on extra small devices (<576px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
8+
| <code>sm</code> | The number of columns/offset/order on small devices (<768px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
9+
| <code>md</code> | The number of columns/offset/order on medium devices (<992px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
10+
| <code>lg</code> | The number of columns/offset/order on large devices (<1200px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
11+
| <code>xl</code> | The number of columns/offset/order on X-Large devices (<1400px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
12+
| <code>xxl</code> | The number of columns/offset/order on XX-Large devices (≥1400px). | Col | `'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }` | undefined |
1313

1414
---

‎docs/api/nav/CNavGroup.api.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44

55
| Prop name | Description | Type | Values | Default |
66
| -------------------- | --------------------- | ------- | ------ | ------- |
7-
| <code>visible</code> | Show nav group items. | boolean | - | |
7+
| <code>visible</code> | Show nav group items. | boolean | - | false |
8+
9+
#### Events
10+
11+
| Event name | Properties | Description |
12+
| -------------------------- | ---------- | ----------- |
13+
| <code>visibleChange</code> | |
814

915
---

‎docs/api/progress/CProgress.api.md‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22

33
#### Props
44

5-
| Prop name | Description | Type | Values | Default |
6-
| --------------------- | -------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------- | --------- |
7-
| <code>animated</code> | Use to animate the stripes right to left via CSS3 animations. | boolean | - | |
8-
| <code>color</code> | Sets the color context of the component to one of CoreUI’s themed colors.<br/>`@default` 'primary' | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | 'primary' |
9-
| <code>height</code> | Set the height of component. | number | - | undefined |
10-
| <code>value</code> | The percent to progress the ProgressBar.<br/>`@default` 0 | number | - | 0 |
11-
| <code>variant</code> | Set the progress bar variant to optional striped. | string | `'striped'` | 'primary' |
5+
| Prop name | Description | Type | Values | Default |
6+
| ------------------- | ----------- | ------ | ------ | --------- |
7+
| <code>height</code> | | number | - | undefined |
128

139
---

‎docs/api/progress/CProgressBar.api.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
| <code>animated</code> | Use to animate the stripes right to left via CSS3 animations. | boolean | - | |
88
| <code>color</code> | Sets the color context of the component to one of CoreUI’s themed colors.<br/>`@default` 'primary' | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | 'primary' |
99
| <code>value</code> | The percent to progress the ProgressBar.<br/>`@default` 0 | number | - | 0 |
10-
| <code>variant</code> | Set the progress bar variant to optional striped. | string | `'striped'` | 'primary' |
10+
| <code>variant</code> | Set the progress bar variant to optional striped. | string | `'striped'` | undefined |
1111

1212
---

‎docs/api/sidebar/CSidebar.api.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
### CSidebar
22

3+
#### Props
4+
5+
| Prop name | Description | Type | Values | Default |
6+
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------------------------------- | --------- |
7+
| <code>hide</code> | Hide sidebar. | boolean | - | |
8+
| <code>narrow</code> | | boolean | - | |
9+
| <code>overlaid</code> | Set sidebar to overlaid variant. | boolean | - | |
10+
| <code>position</code> | Place sidebar in non-static positions. | string | - | undefined |
11+
| <code>selfHiding</code> | Make any sidebar self hiding across all viewports or pick a maximum breakpoint with which to have a self hiding up to. | boolean\|string | `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | undefined |
12+
| <code>unfoldable</code> | Expand narrowed sidebar on hover. | string | - | undefined |
13+
| <code>visible</code> | Toggle the visibility of sidebar component. | boolean | - | |
14+
315
---

0 commit comments

Comments
 (0)