10000 docs: update examples · MartinBilson/coreui-react@1098ea8 · GitHub
[go: up one dir, main page]
Skip to content

Commit 1098ea8

Browse files
mrholekmrholek
committed
docs: update examples
1 parent fb1b219 commit 1098ea8

File tree

8 files changed

+37
-38
lines changed

8 files changed

+37
-38
lines changed

‎packages/docs/content/4.4/api/CChart.api.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
1717
| **height** | Height attribute applied to the rendered canvas. | `number` | 150 |
1818
| **id** | ID attribute applied to the rendered canvas. | `string` | - |
1919
| **options** | The options object that is passed into the Chart.js chart.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/options.html More Info} | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
20-
| **plugins** | The plugins array that is passed into the Chart.js chart (more info)<br/><br/>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | - |
20+
| **plugins** | The plugins array that is passed into the Chart.js chart (more info)<br/><br/>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | [] |
2121
| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
22-
| **type** | Chart.js chart type. | `{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}` | - |
22+
| **type** | Chart.js chart type. | `{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}` | bar |
2323
| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
2424
| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |

‎packages/docs/content/4.4/api/CCharts.api.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,5 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
1919
| **options** | The options object that is passed into the Chart.js chart.<br/><br/>{@link https://www.chartjs.org/docs/latest/general/options.html More Info} | `_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - |
2020
| **plugins** | The plugins array that is passed into the Chart.js chart (more info)<br/><br/>{@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info} | `Plugin<keyof ChartTypeRegistry, AnyObject>[]` | - |
2121
| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false |
22-
| **type** | Chart.js chart type. | `{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}` | - |
2322
| **width** | Width attribute applied to the rendered canvas. | `number` | 300 |
2423
| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true |

‎packages/docs/content/4.4/api/CFormRange.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
1414
| **min** | Specifies the minimum value for the component. | `number` | - |
1515
| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLInputElement>` | - |
1616
| **readOnly** | Toggle the readonly state for the component. | `boolean` | - |
17-
| **steps** | Specifies the interval between legal numbers in the component. | `number` | - |
17+
| **step** | Specifies the interval between legal numbers in the component. | `number` | - |
1818
| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - |

‎packages/docs/content/4.4/components/alert.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ React Alert can also incorporate supplementary components &amp; elements like he
177177

178178
<Example>
179179
<CAlert color="success">
180-
<CAlertHeading tag="h4">Well done!</CAlertHeading>
180+
<CAlertHeading component="h4">Well done!</CAlertHeading>
181181
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
182182
<hr />
183183
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
@@ -186,7 +186,7 @@ React Alert can also incorporate supplementary components &amp; elements like he
186186

187187
```jsx
188188
<CAlert color="success">
189-
<CAlertHeading tag="h4">Well done!</CAlertHeading>
189+
<CAlertHeading component="h4">Well done!</CAlertHeading>
190190
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
191191
<hr />
192192
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>

‎packages/docs/content/4.4/components/table.mdx

Lines changed: 21 additions & 21 deletions
10000
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ You can also put all table components together manually as hitherto.
152152
</CTableRow>
153153
<CTableRow>
154154
<CTableHeaderCell scope="row">3</CTableHeaderCell>
155-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
155+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
156156
<CTableDataCell>@twitter</CTableDataCell>
157157
</CTableRow>
158158
</CTableBody>
@@ -407,7 +407,7 @@ Use `striped` property to add zebra-striping to any react table row within the `
407407
</CTableRow>
408408
<CTableRow>
409409
<CTableHeaderCell scope="row">3</CTableHeaderCell>
410-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
410+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
411411
<CTableDataCell>@twitter</CTableDataCell>
412412
</CTableRow>
413413
</CTableBody>
@@ -449,7 +449,7 @@ Use `stripedColumns` boolean property to add zebra-striping to any table column.
449449
</CTableRow>
450450
<CTableRow>
451451
<CTableHeaderCell scope="row">3</CTableHeaderCell>
452-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
452+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
453453
<CTableDataCell>@twitter</CTableDataCell>
454454
</CTableRow>
455455
</CTableBody>
@@ -489,7 +489,7 @@ These classes can also be added to react table variants:
489489
</CTableRow>
490490
<CTableRow>
491491
<CTableHeaderCell scope="row">3</CTableHeaderCell>
492-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
492+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
493493
<CTableDataCell>@twitter</CTableDataCell>
494494
</CTableRow>
495495
</CTableBody>
@@ -527,7 +527,7 @@ These classes can also be added to react table variants:
527527
</CTableRow>
528528
<CTableRow>
529529
<CTableHeaderCell scope="row">3</CTableHeaderCell>
530-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
530+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
531531
<CTableDataCell>@twitter</CTableDataCell>
532532
</CTableRow>
533533
</CTableBody>
@@ -565,7 +565,7 @@ These classes can also be added to react table variants:
565565
</CTableRow>
566566
<CTableRow>
567567
<CTableHeaderCell scope="row">3</CTableHeaderCell>
568-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
568+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
569569
<CTableDataCell>@twitter</CTableDataCell>
570570
</CTableRow>
571571
</CTableBody>
@@ -603,7 +603,7 @@ These classes can also be added to react table variants:
603603
</CTableRow>
604604
<CTableRow>
605605
<CTableHeaderCell scope="row">3</CTableHeaderCell>
606-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
606+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
607607
<CTableDataCell>@twitter</CTableDataCell>
608608
</CTableRow>
609609
</CTableBody>
@@ -645,7 +645,7 @@ Use `hover` property to enable a hover state on react table rows within a `<CTab
645645
</CTableRow>
646646
<CTableRow>
647647
<CTableHeaderCell scope="row">3</CTableHeaderCell>
648-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
648+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
649649
<CTableDataCell>@twitter</CTableDataCell>
650650
</CTableRow>
651651
</CTableBody>
@@ -683,7 +683,7 @@ Use `hover` property to enable a hover state on react table rows within a `<CTab
683683
</CTableRow>
684684
<CTableRow>
685685
<CTableHeaderCell scope="row">3</CTableHeaderCell>
686-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
686+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
687687
<CTableDataCell>@twitter</CTableDataCell>
688688
</CTableRow>
689689
</CTableBody>
@@ -723,7 +723,7 @@ These hoverable rows can also be combined with the striped variant:
723723
</CTableRow>
724724
<CTableRow>
725725
<CTableHeaderCell scope="row">3</CTableHeaderCell>
726-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
726+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
727727
<CTableDataCell>@twitter</CTableDataCell>
728728
</CTableRow>
729729
</CTableBody>
@@ -867,7 +867,7 @@ return <CTable columns={columns} items={items} />
867867
</CTableRow>
868868
<CTableRow>
869869
<CTableHeaderCell scope="row">3</CTableHeaderCell>
870-
<CTableDataCell colSpan="2" active>
870+
<CTableDataCell colSpan={2} active>
871871
Larry the Bird
872872
</CTableDataCell>
873873
<CTableDataCell>@twitter</CTableDataCell>
@@ -1007,7 +1007,7 @@ Add `bordered` property for borders on all sides of the table and cells.
10071007
</CTableRow>
10081008
<CTableRow>
10091009
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1010-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1010+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
10111011
<CTableDataCell>@twitter</CTableDataCell>
10121012
</CTableRow>
10131013
</CTableBody>
@@ -1047,7 +1047,7 @@ Add `bordered` property for borders on all sides of the table and cells.
10471047
</CTableRow>
10481048
<CTableRow>
10491049
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1050-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1050+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
10511051
<CTableDataCell>@twitter</CTableDataCell>
10521052
</CTableRow>
10531053
</CTableBody>
@@ -1089,7 +1089,7 @@ Add `borderless` property for a react table without borders.
10891089
</CTableRow>
10901090
<CTableRow>
10911091
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1092-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1092+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
10931093
<CTableDataCell>@twitter</CTableDataCell>
10941094
</CTableRow>
10951095
</CTableBody>
@@ -1127,7 +1127,7 @@ Add `borderless` property for a react table without borders.
11271127
</CTableRow>
11281128
<CTableRow>
11291129
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1130-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1130+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
11311131
<CTableDataCell>@twitter</CTableDataCell>
11321132
</CTableRow>
11331133
</CTableBody>
@@ -1169,7 +1169,7 @@ Add `small` property to make any `<CTable>` more compact by cutting all cell `pa
11691169
</CTableRow>
11701170
<CTableRow>
11711171
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1172-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1172+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
11731173
<CTableDataCell>@twitter</CTableDataCell>
11741174
</CTableRow>
11751175
</CTableBody>
@@ -1370,7 +1370,7 @@ Border styles, active styles, and react table component variants are not inherit
13701370
<CTableDataCell>@mdo</CTableDataCell>
13711371
</CTableRow>
13721372
<CTableRow>
1373-
<CTableHeaderCell colSpan="4">
1373+
<CTableHeaderCell colSpan={4}>
13741374
<CTable>
13751375
<CTableHead>
13761376
<CTableRow>
@@ -1401,7 +1401,7 @@ Border styles, active styles, and react table component variants are not inherit
14011401
</CTableRow>
14021402
<CTableRow>
14031403
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1404-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1404+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
14051405
<CTableDataCell>@twitter</CTableDataCell>
14061406
</CTableRow>
14071407
</CTableBody>
@@ -1426,7 +1426,7 @@ Border styles, active styles, and react table component variants are not inherit
14261426
<CTableDataCell>@mdo</CTableDataCell>
14271427
</CTableRow>
14281428
<CTableRow>
1429-
<CTableHeaderCell colSpan="4">
1429+
<CTableHeaderCell colSpan={4}>
14301430
<CTable>
14311431
<CTableHead>
14321432
<CTableRow>
@@ -1457,7 +1457,7 @@ Border styles, active styles, and react table component variants are not inherit
14571457
</CTableRow>
14581458
<CTableRow>
14591459
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1460-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1460+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
14611461
<CTableDataCell>@twitter</CTableDataCell>
14621462
</CTableRow>
14631463
</CTableBody>
@@ -1566,7 +1566,7 @@ return <CTable columns={columns} items={items} tableHeadProps={{ color: 'light'
15661566
</CTableRow>
15671567
<CTableRow>
15681568
<CTableHeaderCell scope="row">3</CTableHeaderCell>
1569-
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
1569+
<CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
15701570
<CTableDataCell>@twitter</CTableDataCell>
15711571
</CTableRow>
15721572
</CTableBody>

‎packages/docs/content/4.4/forms/form-control.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
</div>
2727
<div className="mb-3">
2828
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
29-
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
29+
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
3030
</div>
3131
</CForm>
3232
<CForm>
@@ -35,7 +35,7 @@ import {
3535
</div>
3636
<div className="mb-3">
3737
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
38-
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
38+
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
3939
</div>
4040
</CForm>
4141
</Example>
@@ -48,7 +48,7 @@ import {
4848
</div>
4949
<div className="mb-3">
5050
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
51-
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
51+
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
5252
</div>
5353
</CForm>
5454
```

‎packages/docs/content/4.4/forms/range.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,23 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
3838
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
3939

4040
<Example>
41-
<CFormRange min="0" max="5" label="Example range" defaultValue="3" id="customRange2" />
41+
<CFormRange min={0} max={5} label="Example range" defaultValue="3" id="customRange2" />
4242
</Example>
4343

4444
```jsx
45-
<CFormRange min="0" max="5" label="Example range" defaultValue="3" id="customRange2" />
45+
<CFormRange min={0} max={5} label="Example range" defaultValue="3" id="customRange2" />
4646
```
4747

4848
## Steps
4949

50-
By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
50+
By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step={0.5}`.
5151

5252
<Example>
53-
<CFormRange min="0" max="5" step="0.5" label="Example range" defaultValue="3" id="customRange3" />
53+
<CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" id="customRange3" />
5454
</Example>
5555

5656
```jsx
57-
<CFormRange min="0" max="5" step="0.5" label="Example range" defaultValue="3" id="customRange3" />
57+
<CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" id="customRange3" />
5858
```
5959

6060
## API

‎packages/docs/content/4.4/forms/textarea.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
<CFormTextarea
2626
id="exampleFormControlTextarea1"
2727
label="Example textarea"
28-
rows="3"
28+
rows={3}
2929
text="Must be 8-20 words long."
3030
></CFormTextarea>
3131
</Example>
@@ -35,7 +35,7 @@ import {
3535
<CFormTextarea
3636
id="exampleFormControlTextarea1"
3737
label="Example textarea"
38-
rows="3"
38+
rows={3}
3939
text="Must be 8-20 words long."
4040
></CFormTextarea>
4141
</CForm>
@@ -45,7 +45,7 @@ If you need to add custom classNames to form's components, or need to add some c
4545

4646
```jsx
4747
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
48-
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
48+
<CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
4949
<CFormText component="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>
5050
```
5151

0 commit comments

Comments
 (0)
0