Skip to content

Commit 4565b0a

Browse files
mrholekmrholek
committed
docs: update content
1 parent 4617f9d commit 4565b0a

File tree

4 files changed

+63
-54
lines changed

4 files changed

+63
-54
lines changed

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -656,7 +656,7 @@ return (
656656

657657
### CSS variables
658658

659-
React cards use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
659+
React navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
660660

661661
On the `.nav` base class:
662662

@@ -670,6 +670,18 @@ On the `.nav-pills` modifier class:
670670

671671
<ScssDocs file="_nav.scss" capture="nav-pills-css-vars"/>
672672

673+
<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
674+
675+
On the `.nav-underline` modifier class:
676+
677+
<ScssDocs file="_nav.scss" capture="nav-underline-css-vars"/>
678+
679+
<small className="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.0.0</small>
680+
681+
On the `.nav-underline-border` modifier class:
682+
683+
<ScssDocs file="_nav.scss" capture="nav-underline-border-css-vars"/>
684+
673685
#### How to use CSS variables
674686

675687
```jsx

‎packages/docs/content/components/progress.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ The striped gradient can also be animated. Add `animated` property to `<CProgres
155155

156156
### CSS variables
157157

158-
React cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
158+
React progress bars use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
159159

160160
<ScssDocs file="_progress.scss" capture="progress-css-vars"/>
161161

‎packages/docs/content/getting-started/introduction.mdx

+10-13
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,31 @@ route: /getting-started/introduction
1010

1111
### Npm
1212

13-
```bash
13+
```bash tab={"label":"CoreUI"}
1414
npm install @coreui/react @coreui/coreui
1515
```
1616

17-
If you use CoreUI PRO version.
18-
19-
```bash
17+
```bash tab={"label":"CoreUI PRO"}
2018
npm install @coreui/react-pro @coreui/coreui-pro
2119
```
2220

2321
### Yarn
2422

25-
```bash
23+
```bash tab={"label":"CoreUI"}
2624
yarn add @coreui/react @coreui/coreui
2725
```
2826

29-
If you use CoreUI PRO version.
30-
31-
```bash
27+
```bash tab={"label":"CoreUI PRO"}
3228
yarn add @coreui/react-pro @coreui/coreui-pro
3329
```
3430

35-
3631
## Using components
3732

38-
```jsx
33+
```jsx tab={"label":"CoreUI"}
3934
import { CAlert } from '@coreui/react';
35+
```
4036

41-
// CoreUI PRO version
37+
```jsx tab={"label":"CoreUI PRO"}
4238
import { CAlert } from '@coreui/react-pro';
4339
```
4440

@@ -50,10 +46,11 @@ React components are styled using the `@coreui/coreui` or `@coreui/coreui-pro` C
5046

5147
###### Basic usage
5248

53-
```js
49+
```js tab={"label":"CoreUI"}
5450
import '@coreui/coreui/dist/css/coreui.min.css'
51+
```
5552

56-
// CoreUI PRO version
53+
```js tab={"label":"CoreUI PRO"}
5754
import '@coreui/coreui-pro/dist/css/coreui.min.css'
5855
```
5956

‎packages/docs/src/data/other_frameworks.json

+39-39
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,138 @@
11
{
22
"accordion": {
3-
"angular": "https://coreui.io/angular/docs/components/accordion",
3+
"angular": "https://coreui.io/angular/docs/components/accordion/",
44
"bootstrap": "https://coreui.io/docs/components/accordion/",
55
"react": "https://coreui.io/react/docs/components/accordion/",
66
"vue": "https://coreui.io/vue/docs/components/accordion.html"
77
},
88
"alert": {
9-
"angular": "https://coreui.io/angular/docs/components/alert",
9+
"angular": "https://coreui.io/angular/docs/components/alert/",
1010
"bootstrap": "https://coreui.io/docs/components/alerts/",
1111
"react": "https://coreui.io/react/docs/components/alert/",
1212
"vue": "https://coreui.io/vue/docs/components/alert.html"
1313
},
1414
"avatar": {
15-
"angular": "https://coreui.io/angular/docs/components/avatar",
15+
"angular": "https://coreui.io/angular/docs/components/avatar/",
1616
"bootstrap": "https://coreui.io/docs/components/avatar/",
1717
"react": "https://coreui.io/react/docs/components/avatar/",
1818
"vue": "https://coreui.io/vue/docs/components/avatar.html"
1919
},
2020
"badge": {
21-
"angular": "https://coreui.io/angular/docs/components/badge",
21+
"angular": "https://coreui.io/angular/docs/components/badge/",
2222
"bootstrap": "https://coreui.io/docs/components/badge/",
2323
"react": "https://coreui.io/react/docs/components/badge/",
2424
"vue": "https://coreui.io/vue/docs/components/badge.html"
2525
},
2626
"breadcrumb": {
27-
"angular": "https://coreui.io/angular/docs/components/breadcrumb",
27+
"angular": "https://coreui.io/angular/docs/components/breadcrumb/",
2828
"bootstrap": "https://coreui.io/docs/components/breadcrumb/",
2929
"react": "https://coreui.io/react/docs/components/breadcrumb/",
3030
"vue": "https://coreui.io/vue/docs/components/breadcrumb.html"
3131
},
3232
"button": {
33-
"angular": "https://coreui.io/angular/docs/components/button",
33+
"angular": "https://coreui.io/angular/docs/components/button/",
3434
"bootstrap": "https://coreui.io/docs/components/buttons/",
3535
"react": "https://coreui.io/react/docs/components/button/",
3636
"vue": "https://coreui.io/vue/docs/components/button.html"
3737
},
3838
"button-group": {
39-
"angular": "https://coreui.io/angular/docs/components/button-group",
39+
"angular": "https://coreui.io/angular/docs/components/button-group/",
4040
"bootstrap": "https://coreui.io/docs/components/button-group/",
4141
"react": "https://coreui.io/react/docs/components/button-group/",
4242
"vue": "https://coreui.io/vue/docs/components/button-group.html"
4343
},
4444
"callout": {
45-
"angular": "https://coreui.io/angular/docs/components/callout",
45+
"angular": "https://coreui.io/angular/docs/components/callout/",
4646
"bootstrap": "https://coreui.io/docs/components/callout/",
4747
"react": "https://coreui.io/react/docs/components/callout/",
4848
"vue": "https://coreui.io/vue/docs/components/callout.html"
4949
},
5050
"card": {
51-
"angular": "https://coreui.io/angular/docs/components/card",
51+
"angular": "https://coreui.io/angular/docs/components/card/",
5252
"bootstrap": "https://coreui.io/docs/components/card/",
5353
"react": "https://coreui.io/react/docs/components/card/",
5454
"vue": "https://coreui.io/vue/docs/components/card.html"
5555
},
5656
"carousel": {
57-
"angular": "https://coreui.io/angular/docs/components/carousel",
57+
"angular": "https://coreui.io/angular/docs/components/carousel/",
5858
"bootstrap": "https://coreui.io/docs/components/carousel/",
5959
"react": "https://coreui.io/react/docs/components/carousel/",
6060
"vue": "https://coreui.io/vue/docs/components/carousel.html"
6161
},
6262
"checkbox": {
63-
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
63+
"angular": "https://coreui.io/angular/docs/forms/checks-radios/",
6464
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
6565
"react": "https://coreui.io/react/docs/forms/checkbox/",
6666
"vue": "https://coreui.io/vue/docs/forms/checkbox.html"
6767
},
6868
"close-button": {
69-
"angular": "https://coreui.io/angular/docs/components/close-button",
69+
"angular": "https://coreui.io/angular/docs/components/close-button/",
7070
"bootstrap": "https://coreui.io/docs/components/close-button/",
7171
"react": "https://coreui.io/react/docs/components/close-button/",
7272
"vue": "https://coreui.io/vue/docs/components/close-button.html"
7373
},
7474
"collapse": {
75-
"angular": "https://coreui.io/angular/docs/components/collapse",
75+
"angular": "https://coreui.io/angular/docs/components/collapse/",
7676
"bootstrap": "https://coreui.io/docs/components/collapse/",
7777
"react": "https://coreui.io/react/docs/components/collapse/",
7878
"vue": "https://coreui.io/vue/docs/components/collapse.html"
7979
},
8080
"dropdown": {
81-
"angular": "https://coreui.io/angular/docs/components/dropdown",
81+
"angular": "https://coreui.io/angular/docs/components/dropdown/",
8282
"bootstrap": "https://coreui.io/docs/components/dropdowns/",
8383
"react": "https://coreui.io/react/docs/components/dropdown/",
8484
"vue": "https://coreui.io/vue/docs/components/dropdown.html"
8585
},
8686
"footer": {
87-
"angular": "https://coreui.io/angular/docs/components/footer",
87+
"angular": "https://coreui.io/angular/docs/components/footer/",
8888
"bootstrap": "https://coreui.io/docs/components/footer/",
8989
"react": "https://coreui.io/react/docs/components/footer/",
9090
"vue": "https://coreui.io/vue/docs/components/footer.html"
9191
},
9292
"header": {
93-
"angular": "https://coreui.io/angular/docs/components/header",
93+
"angular": "https://coreui.io/angular/docs/components/header/",
9494
"bootstrap": "https://coreui.io/docs/components/header/",
9595
"react": "https://coreui.io/react/docs/components/header/",
9696
"vue": "https://coreui.io/vue/docs/components/header.html"
9797
},
9898
"icon": {
99-
"angular": "https://coreui.io/angular/docs/components/icon",
99+
"angular": "https://coreui.io/angular/docs/components/icon/",
100100
"bootstrap": "https://coreui.io/docs/components/icon/",
101101
"react": "https://coreui.io/react/docs/components/icon/",
102102
"vue": "https://coreui.io/vue/docs/components/icon.html"
103103
},
104104
"image": {
105-
"angular": "https://coreui.io/angular/docs/components/image",
105+
"angular": "https://coreui.io/angular/docs/components/image/",
106106
"bootstrap": "https://coreui.io/docs/content/images/",
107107
"react": "https://coreui.io/react/docs/components/image/",
108108
"vue": "https://coreui.io/vue/docs/components/image.html"
109109
},
110110
"input": {
111-
"angular": "https://coreui.io/angular/docs/forms/input",
111+
"angular": "https://coreui.io/angular/docs/forms/input/",
112112
"bootstrap": "https://coreui.io/docs/forms/form-control/",
113113
"react": "https://coreui.io/react/docs/forms/input/",
114114
"vue": "https://coreui.io/vue/docs/forms/input.html"
115115
},
116116
"input-group": {
117-
"angular": "https://coreui.io/angular/docs/forms/input-group",
117+
"angular": "https://coreui.io/angular/docs/forms/input-group/",
118118
"bootstrap": "https://coreui.io/docs/forms/input-group/",
119119
"react": "https://coreui.io/react/docs/forms/input-group/",
120120
"vue": "https://coreui.io/vue/docs/forms/input-group.html"
121121
},
122122
"floating-labels": {
123-
"angular": "https://coreui.io/angular/docs/forms/floating-labels",
123+
"angular": "https://coreui.io/angular/docs/forms/floating-labels/",
124124
"bootstrap": "https://coreui.io/docs/forms/floating-labels/",
125125
"react": "https://coreui.io/react/docs/forms/floating-labels/",
126126
"vue": "https://coreui.io/vue/docs/forms/floating-labels.html"
127127
},
128128
"list-group": {
129-
"angular": "https://coreui.io/angular/docs/components/list-group",
129+
"angular": "https://coreui.io/angular/docs/components/list-group/",
130130
"bootstrap": "https://coreui.io/docs/components/list-group/",
131131
"react": "https://coreui.io/react/docs/components/list-group/",
132132
"vue": "https://coreui.io/vue/docs/components/list-group.html"
133133
},
134134
"modal": {
135-
"angular": "https://coreui.io/angular/docs/components/modal",
135+
"angular": "https://coreui.io/angular/docs/components/modal/",
136136
"bootstrap": "https://coreui.io/docs/components/modal/",
137137
"react": "https://coreui.io/react/docs/components/modal/",
138138
"vue": "https://coreui.io/vue/docs/components/modal.html"
@@ -143,97 +143,97 @@
143143
"vue": "https://coreui.io/vue/docs/components/navbar.html"
144144
},
145145
"navs-tabs": {
146-
"angular": "https://coreui.io/angular/docs/components/nav",
146+
"angular": "https://coreui.io/angular/docs/components/nav/",
147147
"bootstrap": "https://coreui.io/docs/components/navs-tabs/",
148148
"react": "https://coreui.io/react/docs/components/navs-tabs/",
149149
"vue": "https://coreui.io/vue/docs/components/navs-tabs.html"
150150
},
151151
"offcanvas": {
152-
"angular": "https://coreui.io/angular/docs/components/offcanvas",
152+
"angular": "https://coreui.io/angular/docs/components/offcanvas/",
153153
"bootstrap": "https://coreui.io/docs/components/offcanvas/",
154154
"react": "https://coreui.io/react/docs/components/offcanvas/",
155155
"vue": "https://coreui.io/vue/docs/components/offcanvas.html"
156156
},
157157
"pagination": {
158-
"angular": "https://coreui.io/angular/docs/components/pagination",
158+
"angular": "https://coreui.io/angular/docs/components/pagination/",
159159
"bootstrap": "https://coreui.io/docs/components/pagination/",
160160
"react": "https://coreui.io/react/docs/components/pagination/",
161161
"vue": "https://coreui.io/vue/docs/components/pagination.html"
162162
},
163163
"placeholder": {
164-
"angular": "https://coreui.io/angular/docs/components/placeholder",
164+
"angular": "https://coreui.io/angular/docs/components/placeholder/",
165165
"bootstrap": "https://coreui.io/docs/components/placeholders/",
166166
"react": "https://coreui.io/react/docs/components/placeholder/",
167167
"vue": "https://coreui.io/vue/docs/components/placeholder.html"
168168
},
169169
"popover": {
170-
"angular": "https://coreui.io/angular/docs/components/popover",
170+
"angular": "https://coreui.io/angular/docs/components/popover/",
171171
"bootstrap": "https://coreui.io/docs/components/popovers/",
172172
"react": "https://coreui.io/react/docs/components/popover/",
173173
"vue": "https://coreui.io/vue/docs/components/popover.html"
174174
},
175175
"progress": {
176-
"angular": "https://coreui.io/angular/docs/components/progress",
176+
"angular": "https://coreui.io/angular/docs/components/progress/",
177177
"bootstrap": "https://coreui.io/docs/components/progress/",
178178
"react": "https://coreui.io/react/docs/components/progress/",
179179
"vue": "https://coreui.io/vue/docs/components/progress.html"
180180
},
181181
"radio": {
182-
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
182+
"angular": "https://coreui.io/angular/docs/forms/checks-radios/",
183183
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
184184
"react": "https://coreui.io/react/docs/forms/radio/",
185185
"vue": "https://coreui.io/vue/docs/forms/radio.html"
186186
},
187187
"range": {
188-
"angular": "https://coreui.io/angular/docs/forms/range",
188+
"angular": "https://coreui.io/angular/docs/forms/range/",
189189
"bootstrap": "https://coreui.io/docs/forms/range/",
190190
"react": "https://coreui.io/react/docs/forms/range/",
191191
"vue": "https://coreui.io/vue/docs/forms/range.html"
192192
},
193193
"select": {
194-
"angular": "https://coreui.io/angular/docs/forms/select",
194+
"angular": "https://coreui.io/angular/docs/forms/select/",
195195
"bootstrap": "https://coreui.io/docs/forms/select/",
196196
"react": "https://coreui.io/react/docs/forms/select/",
197197
"vue": "https://coreui.io/vue/docs/forms/select.html"
198198
},
199199
"sidebar": {
200-
"angular": "https://coreui.io/angular/docs/components/sidebar",
200+
"angular": "https://coreui.io/angular/docs/components/sidebar/",
201201
"bootstrap": "https://coreui.io/docs/components/sidebar/",
202202
"react": "https://coreui.io/react/docs/components/sidebar/",
203203
"vue": "https://coreui.io/vue/docs/components/sidebar.html"
204204
},
205205
"spinner": {
206-
"angular": "https://coreui.io/angular/docs/components/spinner",
206+
"angular": "https://coreui.io/angular/docs/components/spinner/",
207207
"bootstrap": "https://coreui.io/docs/components/spinners/",
208208
"react": "https://coreui.io/react/docs/components/spinner/",
209209
"vue": "https://coreui.io/vue/docs/components/spinner.html"
210210
},
211211
"switch": {
212-
"angular": "https://coreui.io/angular/docs/forms/checks-radios",
212+
"angular": "https://coreui.io/angular/docs/forms/checks-radios/",
213213
"bootstrap": "https://coreui.io/docs/forms/checks-radios/",
214214
"react": "https://coreui.io/react/docs/forms/switch/",
215215
"vue": "https://coreui.io/vue/docs/forms/switch.html"
216216
},
217217
"table": {
218-
"angular": "https://coreui.io/angular/docs/components/table",
218+
"angular": "https://coreui.io/angular/docs/components/table/",
219219
"bootstrap": "https://coreui.io/docs/content/tables/",
220220
"react": "https://coreui.io/react/docs/components/table/",
221221
"vue": "https://coreui.io/vue/docs/components/table.html"
222222
},
223223
"textarea": {
224-
"angular": "https://coreui.io/angular/docs/forms/form-control",
224+
"angular": "https://coreui.io/angular/docs/forms/form-control/",
225225
"bootstrap": "https://coreui.io/docs/forms/form-control/",
226226
"react": "https://coreui.io/react/docs/forms/textarea/",
227227
"vue": "https://coreui.io/vue/docs/forms/textarea.html"
228228
},
229229
"toast": {
230-
"angular": "https://coreui.io/angular/docs/components/toast",
230+
"angular": "https://coreui.io/angular/docs/components/toast/",
231231
"bootstrap": "https://coreui.io/docs/components/toasts/",
232232
"react": "https://coreui.io/react/docs/components/toast/",
233233
"vue": "https://coreui.io/vue/docs/components/toast.html"
234234
},
235235
"tooltip": {
236-
"angular": "https://coreui.io/angular/docs/components/tooltip",
236+
"angular": "https://coreui.io/angular/docs/components/tooltip/",
237237
"bootstrap": "https://coreui.io/docs/components/tooltips/",
238238
"react": "https://coreui.io/react/docs/components/tooltip/",
239239
"vue": "https://coreui.io/vue/docs/components/tooltip.html"

0 commit comments

Comments
 (0)