File tree

151 files changed

+6839
-938
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searcx below for content that may be hidden.

151 files changed

+6839
-938
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
```jsx
3-
import { CAccordion } from '@coreui/src'
3+
import { CAccordion } from '@coreui/react'
44
// or
5-
import CAccordion from '@coreuireact/src/components/accordion/CAccordion'
5+
import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
66
```
77

88
<div className="table-responsive table-api border rounded mb-3">
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
```jsx
3-
import { CAccordionBody } from '@coreui/src'
3+
import { CAccordionBody } from '@coreui/react'
44
// or
5-
import CAccordionBody from '@coreuireact/src/components/accordion/CAccordionBody'
5+
import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
66
```
77

88
<div className="table-responsive table-api border rounded mb-3">
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
```jsx
3-
import { CAccordionButton } from '@coreui/src'
3+
import { CAccordionButton } from '@coreui/react'
44
// or
5-
import CAccordionButton from '@coreuireact/src/components/accordion/CAccordionButton'
5+
import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton'
66
```
77

88
<div className="table-responsive table-api border rounded mb-3">
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
```jsx
3-
import { CAccordionHeader } from '@coreui/src'
3+
import { CAccordionHeader } from '@coreui/react'
44
// or
5-
import CAccordionHeader from '@coreuireact/src/components/accordion/CAccordionHeader'
5+
import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
66
```
77

88
<div className="table-responsive table-api border rounded mb-3">
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

22
```jsx
3-
import { CAccordionItem } from '@coreui/src'
3+
import { CAccordionItem } from '@coreui/react'
44
// or
5-
import CAccordionItem from '@coreuireact/src/components/accordion/CAccordionItem'
5+
import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
66
```
77

88
<div className="table-responsive table-api border rounded mb-3">
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,64 @@ import { CAlert } from '@coreui/react'
55
import CAlert from '@coreui/react/src/components/alert/CAlert'
66
```
77

8-
| Property | Description | Type | Default |
9-
| --- | --- | --- | --- |
10-
| **className** | A string of all className you want applied to the component. | `string` | - |
11-
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | primary |
12-
| **dismissible** | Optionally add a close button to alert and allow it to self dismiss. | `boolean` | - |
13-
| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
14-
| **variant** | Set the alert variant to a solid. | `string` | - |
15-
| **visible** | Toggle the visibility of component. | `boolean` | true |
8+
<div className="table-responsive table-api border rounded mb-3">
9+
<table className="table">
10+
<thead>
11+
<tr>
12+
<th>Property</th>
13+
<th>Default</th>
14+
<th>Type</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr id="calert-className">
19+
<td className="text-primary fw-semibold">className<a href="#calert-className" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
20+
<td>undefined</td>
21+
<td><code>{`string`}</code></td>
22+
</tr>
23+
<tr>
24+
<td colSpan="3">A string of all className you want applied to the component.</td>
25+
</tr>
26+
<tr id="calert-color">
27+
<td className="text-primary fw-semibold">color<a href="#calert-color" aria-label="CAlert color permalink" className="anchor-link after">#</a></td>
28+
<td><code>{`primary`}</code></td>
29+
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
30+
</tr>
31+
<tr>
32+
<td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
33+
</tr>
34+
<tr id="calert-dismissible">
35+
<td className="text-primary fw-semibold">dismissible<a href="#calert-dismissible" aria-label="CAlert dismissible permalink" className="anchor-link after">#</a></td>
36+
<td>undefined</td>
37+
<td><code>{`boolean`}</code></td>
38+
</tr>
39+
<tr>
40+
<td colSpan="3">Optionally add a close button to alert and allow it to self dismiss.</td>
41+
</tr>
42+
<tr id="calert-onClose">
43+
<td className="text-primary fw-semibold">onClose<a href="#calert-onClose" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
44+
<td>undefined</td>
45+
<td><code>{`() => void`}</code></td>
46+
</tr>
47+
<tr>
48+
<td colSpan="3">Callback fired when the component requests to be closed.</td>
49+
</tr>
50+
<tr id="calert-variant">
51+
<td className="text-primary fw-semibold">variant<a href="#calert-variant" aria-label="CAlert variant permalink" className="anchor-link after">#</a></td>
52+
<td>undefined</td>
53+
<td><code>{`string`}</code></td>
54+
</tr>
55+
<tr>
56+
<td colSpan="3">Set the alert variant to a solid.</td>
57+
</tr>
58+
<tr id="calert-visible">
59+
<td className="text-primary fw-semibold">visible<a href="#calert-visible" aria-label="CAlert visible permalink" className="anchor-link after">#</a></td>
60+
<td><code>{`true`}</code></td>
61+
<td><code>{`boolean`}</code></td>
62+
</tr>
63+
<tr>
64+
<td colSpan="3">Toggle the visibility of component.</td>
65+
</tr>
66+
</tbody>
67+
</table>
68+
</div>
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,32 @@ import { CAlertHeading } from '@coreui/react'
55
import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
66
```
77

8-
| Property | Description | Type | Default |
9-
| --- | --- | --- | --- |
10-
| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h4')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
11-
| **className** | A string of all className you want applied to the base component. | `string` | - |
8+
<div className="table-responsive table-api border rounded mb-3">
9+
<table className="table">
10+
<thead>
11+
<tr>
12+
<th>Property</th>
13+
<th>Default</th>
14+
<th>Type</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr id="calertheading-as">
19+
<td className="text-primary fw-semibold">as<a href="#calertheading-as" aria-label="CAlertHeading as permalink" className="anchor-link after">#</a></td>
20+
<td>undefined</td>
21+
<td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h4")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
22+
</tr>
23+
<tr>
24+
<td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
25+
</tr>
26+
<tr id="calertheading-className">
27+
<td className="text-primary fw-semibold">className<a href="#calertheading-className" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
28+
<td>undefined</td>
29+
<td><code>{`string`}</code></td>
30+
</tr>
31+
<tr>
32+
<td colSpan="3">A string of all className you want applied to the base component.</td>
33+
</tr>
34+
</tbody>
35+
</table>
36+
</div>
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,24 @@ import { CAlertLink } from '@coreui/react'
55
import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
66
```
77

8-
| Property | Description | Type | Default |
9-
| --- | --- | --- | --- |
10-
| **className** | A string of all className you want applied to the base component. | `string` | - |
8+
<div className="table-responsive table-api border rounded mb-3">
9+
<table className="table">
10+
<thead>
11+
<tr>
12+
<th>Property</th>
13+
<th>Default</th>
14+
<th>Type</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr id="calertlink-className">
19+
<td className="text-primary fw-semibold">className<a href="#calertlink-className" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
20+
<td>undefined</td>
21+
<td><code>{`string`}</code></td>
22+
</tr>
23+
<tr>
24+
<td colSpan="3">A string of all className you want applied to the base component.</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
</div>
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,72 @@ import { CAvatar } from '@coreui/react'
55
import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
66
```
77

8-
| Property | Description | Type | Default |
9-
| --- | --- | --- | --- |
10-
| **className** | A string of all className you want applied to the component. | `string` | - |
11-
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
12-
| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
13-
| **size** | Size the component small, large, or extra large. | `string` | - |
14-
| **src** | The src attribute for the img element. | `string` | - |
15-
| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
16-
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - |
8+
<div className="table-responsive table-api border rounded mb-3">
9+
<table className="table">
10+
<thead>
11+
<tr>
12+
<th>Property</th>
13+
<th>Default</th>
14+
<th>Type</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr id="cavatar-className">
19+
<td className="text-primary fw-semibold">className<a href="#cavatar-className" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
20+
<td>undefined</td>
21+
<td><code>{`string`}</code></td>
22+
</tr>
23+
<tr>
24+
<td colSpan="3">A string of all className you want applied to the component.</td>
25+
</tr>
26+
<tr id="cavatar-color">
27+
<td className="text-primary fw-semibold">color<a href="#cavatar-color" aria-label="CAvatar color permalink" className="anchor-link after">#</a></td>
28+
<td>undefined</td>
29+
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
30+
</tr>
31+
<tr>
32+
<td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
33+
</tr>
34+
<tr id="cavatar-shape">
35+
<td className="text-primary fw-semibold">shape<a href="#cavatar-shape" aria-label="CAvatar shape permalink" className="anchor-link after">#</a></td>
36+
<td>undefined</td>
37+
<td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
38+
</tr>
39+
<tr>
40+
<td colSpan="3">Select the shape of the component.</td>
41+
</tr>
42+
<tr id="cavatar-size">
43+
<td className="text-primary fw-semibold">size<a href="#cavatar-size" aria-label="CAvatar size permalink" className="anchor-link after">#</a></td>
44+
<td>undefined</td>
45+
<td><code>{`string`}</code></td>
46+
</tr>
47+
<tr>
48+
<td colSpan="3">Size the component small, large, or extra large.</td>
49+
</tr>
50+
<tr id="cavatar-src">
51+
<td className="text-primary fw-semibold">src<a href="#cavatar-src" aria-label="CAvatar src permalink" className="anchor-link after">#</a></td>
52+
<td>undefined</td>
53+
<td><code>{`string`}</code></td>
54+
</tr>
55+
<tr>
56+
<td colSpan="3">The src attribute for the img element.</td>
57+
</tr>
58+
<tr id="cavatar-status">
59+
<td className="text-primary fw-semibold">status<a href="#cavatar-status" aria-label="CAvatar status permalink" className="anchor-link after">#</a></td>
60+
<td>undefined</td>
61+
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
62+
</tr>
63+
<tr>
64+
<td colSpan="3">Sets the color context of the status indicator to one of CoreUI’s themed colors.</td>
65+
</tr>
66+
<tr id="cavatar-textColor">
67+
<td className="text-primary fw-semibold">textColor<a href="#cavatar-textColor" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
68+
<td>undefined</td>
69+
<td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
70+
</tr>
71+
<tr>
72+
<td colSpan="3">Sets the text color of the component to one of CoreUI’s themed colors.</td>
73+
</tr>
74+
</tbody>
75+
</table>
76+
</div>
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,32 @@ import { CBackdrop } from '@coreui/react'
55
import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
66
```
77

8-
| Property | Description | Type | Default |
9-
| --- | --- | --- | --- |
10-
| **className** | A string of all className you want applied to the base component. | `string` | modal-backdrop |
11-
| **visible** | Toggle the visibility of modal component. | `boolean` | - |
8+
<div className="table-responsive table-api border rounded mb-3">
9+
<table className="table">
10+
<thead>
11+
<tr>
12+
<th>Property</th>
13+
<th>Default</th>
14+
<th>Type</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr id="cbackdrop-className">
19+
<td className="text-primary fw-semibold">className<a href="#cbackdrop-className" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
20+
<td><code>{`modal-backdrop`}</code></td>
21+
<td><code>{`string`}</code></td>
22+
</tr>
23+
<tr>
24+
<td colSpan="3">A string of all className you want applied to the base component.</td>
25+
</tr>
26+
<tr id="cbackdrop-visible">
27+
<td className="text-primary fw-semibold">visible<a href="#cbackdrop-visible" aria-label="CBackdrop visible permalink" className="anchor-link after">#</a></td>
28+
<td>undefined</td>
29+
<td><code>{`boolean`}</code></td>
30+
</tr>
31+
<tr>
32+
<td colSpan="3">Toggle the visibility of modal component.</td>
33+
</tr>
34+
</tbody>
35+
</table>
36+
</div>

0 commit comments

Comments
 (0)