From 5bebe21c83a5776bb8b2b203938f52fbad9fce22 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:41:21 +0100 Subject: [PATCH] docs: update API --- packages/docs/content/api/CAccordion.api.mdx | 4 +- .../docs/content/api/CAccordionBody.api.mdx | 4 +- .../docs/content/api/CAccordionButton.api.mdx | 4 +- .../docs/content/api/CAccordionHeader.api.mdx | 4 +- .../docs/content/api/CAccordionItem.api.mdx | 4 +- packages/docs/content/api/CAlert.api.mdx | 69 ++++++- .../docs/content/api/CAlertHeading.api.mdx | 33 +++- packages/docs/content/api/CAlertLink.api.mdx | 24 ++- packages/docs/content/api/CAvatar.api.mdx | 78 +++++++- packages/docs/content/api/CBackdrop.api.mdx | 33 +++- packages/docs/content/api/CBadge.api.mdx | 87 +++++++- packages/docs/content/api/CBreadcrumb.api.mdx | 24 ++- .../docs/content/api/CBreadcrumbItem.api.mdx | 51 ++++- packages/docs/content/api/CButton.api.mdx | 114 +++++++++-- .../docs/content/api/CButtonGroup.api.mdx | 42 +++- .../docs/content/api/CButtonToolbar.api.mdx | 24 ++- packages/docs/content/api/CCallout.api.mdx | 33 +++- packages/docs/content/api/CCard.api.mdx | 51 ++++- packages/docs/content/api/CCardBody.api.mdx | 24 ++- packages/docs/content/api/CCardFooter.api.mdx | 24 ++- packages/docs/content/api/CCardGroup.api.mdx | 24 ++- packages/docs/content/api/CCardHeader.api.mdx | 33 +++- packages/docs/content/api/CCardImage.api.mdx | 42 +++- .../content/api/CCardImageOverlay.api.mdx | 24 ++- packages/docs/content/api/CCardLink.api.mdx | 33 +++- .../docs/content/api/CCardSubtitle.api.mdx | 33 +++- packages/docs/content/api/CCardText.api.mdx | 33 +++- packages/docs/content/api/CCardTitle.api.mdx | 33 +++- packages/docs/content/api/CCarousel.api.mdx | 123 ++++++++++-- .../docs/content/api/CCarouselCaption.api.mdx | 24 ++- .../docs/content/api/CCarouselItem.api.mdx | 33 +++- packages/docs/content/api/CChart.api.mdx | 152 ++++++++++++-- packages/docs/content/api/CCharts.api.mdx | 143 ++++++++++++-- .../docs/content/api/CCloseButton.api.mdx | 51 ++++- packages/docs/content/api/CCol.api.mdx | 78 +++++++- packages/docs/content/api/CCollapse.api.mdx | 60 +++++- .../content/api/CConditionalPortal.api.mdx | 33 +++- packages/docs/content/api/CContainer.api.mdx | 78 +++++++- packages/docs/content/api/CDropdown.api.mdx | 150 ++++++++++++-- .../docs/content/api/CDropdownDivider.api.mdx | 24 ++- .../docs/content/api/CDropdownHeader.api.mdx | 33 +++- .../docs/content/api/CDropdownItem.api.mdx | 60 +++++- .../content/api/CDropdownItemPlain.api.mdx | 33 +++- .../docs/content/api/CDropdownMenu.api.mdx | 33 +++- .../docs/content/api/CDropdownToggle.api.mdx | 150 ++++++++++++-- packages/docs/content/api/CFooter.api.mdx | 33 +++- packages/docs/content/api/CForm.api.mdx | 33 +++- packages/docs/content/api/CFormCheck.api.mdx | 159 +++++++++++++-- .../api/CFormControlValidation.api.mdx | 78 +++++++- .../content/api/CFormControlWrapper.api.mdx | 105 ++++++++-- .../docs/content/api/CFormFeedback.api.mdx | 60 +++++- .../docs/content/api/CFormFloating.api.mdx | 24 ++- packages/docs/content/api/CFormInput.api.mdx | 186 ++++++++++++++++-- packages/docs/content/api/CFormLabel.api.mdx | 33 +++- packages/docs/content/api/CFormRange.api.mdx | 96 +++++++-- packages/docs/content/api/CFormSelect.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CFormSwitch.api.mdx | 87 +++++++- packages/docs/content/api/CFormText.api.mdx | 33 +++- .../docs/content/api/CFormTextarea.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CHeader.api.mdx | 42 +++- .../docs/content/api/CHeaderBrand.api.mdx | 33 +++- .../docs/content/api/CHeaderDivider.api.mdx | 24 ++- packages/docs/content/api/CHeaderNav.api.mdx | 33 +++- packages/docs/content/api/CHeaderText.api.mdx | 24 ++- .../docs/content/api/CHeaderToggler.api.mdx | 24 ++- packages/docs/content/api/CIcon.api.mdx | 118 +++++++++-- packages/docs/content/api/CIconSvg.api.mdx | 71 ++++++- packages/docs/content/api/CImage.api.mdx | 60 +++++- packages/docs/content/api/CInputGroup.api.mdx | 33 +++- .../docs/content/api/CInputGroupText.api.mdx | 33 +++- packages/docs/content/api/CLink.api.mdx | 60 +++++- packages/docs/content/api/CListGroup.api.mdx | 51 ++++- .../docs/content/api/CListGroupItem.api.mdx | 60 +++++- packages/docs/content/api/CModal.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CModalBody.api.mdx | 24 ++- .../docs/content/api/CModalContent.api.mdx | 24 ++- .../docs/content/api/CModalDialog.api.mdx | 60 +++++- .../docs/content/api/CModalFooter.api.mdx | 24 ++- .../docs/content/api/CModalHeader.api.mdx | 33 +++- packages/docs/content/api/CModalTitle.api.mdx | 33 +++- packages/docs/content/api/CNav.api.mdx | 51 ++++- packages/docs/content/api/CNavGroup.api.mdx | 60 +++++- .../docs/content/api/CNavGroupItems.api.mdx | 33 +++- packages/docs/content/api/CNavItem.api.mdx | 60 +++++- packages/docs/content/api/CNavLink.api.mdx | 60 +++++- packages/docs/content/api/CNavTitle.api.mdx | 33 +++- packages/docs/content/api/CNavbar.api.mdx | 78 +++++++- .../docs/content/api/CNavbarBrand.api.mdx | 42 +++- packages/docs/content/api/CNavbarNav.api.mdx | 33 +++- packages/docs/content/api/CNavbarText.api.mdx | 24 ++- .../docs/content/api/CNavbarToggler.api.mdx | 24 ++- packages/docs/content/api/COffcanvas.api.mdx | 114 +++++++++-- .../docs/content/api/COffcanvasBody.api.mdx | 24 ++- .../docs/content/api/COffcanvasHeader.api.mdx | 24 ++- .../docs/content/api/COffcanvasTitle.api.mdx | 33 +++- packages/docs/content/api/CPagination.api.mdx | 42 +++- .../docs/content/api/CPaginationItem.api.mdx | 42 +++- .../docs/content/api/CPlaceholder.api.mdx | 114 +++++++++-- packages/docs/content/api/CPopover.api.mdx | 132 +++++++++++-- packages/docs/content/api/CProgress.api.mdx | 96 +++++++-- .../docs/content/api/CProgressBar.api.mdx | 60 +++++- .../docs/content/api/CProgressStacked.api.mdx | 24 ++- packages/docs/content/api/CRow.api.mdx | 78 +++++++- packages/docs/content/api/CSidebar.api.mdx | 123 ++++++++++-- .../docs/content/api/CSidebarBrand.api.mdx | 33 +++- .../docs/content/api/CSidebarFooter.api.mdx | 24 ++- .../docs/content/api/CSidebarHeader.api.mdx | 24 ++- packages/docs/content/api/CSidebarNav.api.mdx | 33 +++- .../docs/content/api/CSidebarToggler.api.mdx | 24 ++- packages/docs/content/api/CSpinner.api.mdx | 69 ++++++- packages/docs/content/api/CTab.api.mdx | 42 +++- packages/docs/content/api/CTabContent.api.mdx | 24 ++- packages/docs/content/api/CTabList.api.mdx | 42 +++- packages/docs/content/api/CTabPane.api.mdx | 60 +++++- packages/docs/content/api/CTabPanel.api.mdx | 69 ++++++- packages/docs/content/api/CTable.api.mdx | 177 +++++++++++++++-- packages/docs/content/api/CTableBody.api.mdx | 33 +++- .../docs/content/api/CTableCaption.api.mdx | 13 ++ .../docs/content/api/CTableDataCell.api.mdx | 51 ++++- packages/docs/content/api/CTableFoot.api.mdx | 33 +++- packages/docs/content/api/CTableHead.api.mdx | 33 +++- .../docs/content/api/CTableHeaderCell.api.mdx | 33 +++- .../api/CTableResponsiveWrapper.api.mdx | 24 ++- packages/docs/content/api/CTableRow.api.mdx | 51 ++++- packages/docs/content/api/CTabs.api.mdx | 42 +++- packages/docs/content/api/CToast.api.mdx | 87 +++++++- packages/docs/content/api/CToastBody.api.mdx | 24 ++- packages/docs/content/api/CToastClose.api.mdx | 114 +++++++++-- .../docs/content/api/CToastHeader.api.mdx | 33 +++- packages/docs/content/api/CToaster.api.mdx | 42 +++- packages/docs/content/api/CTooltip.api.mdx | 123 ++++++++++-- .../docs/content/api/CWidgetStatsA.api.mdx | 69 ++++++- .../docs/content/api/CWidgetStatsB.api.mdx | 78 +++++++- .../docs/content/api/CWidgetStatsC.api.mdx | 78 +++++++- .../docs/content/api/CWidgetStatsD.api.mdx | 60 +++++- .../docs/content/api/CWidgetStatsE.api.mdx | 51 ++++- .../docs/content/api/CWidgetStatsF.api.mdx | 78 +++++++- .../docs/content/api/CoreUIProvider.api.mdx | 7 + 138 files changed, 6789 insertions(+), 905 deletions(-) create mode 100644 packages/docs/content/api/CoreUIProvider.api.mdx diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx index 166e7bb3..dfff727c 100644 --- a/packages/docs/content/api/CAccordion.api.mdx +++ b/packages/docs/content/api/CAccordion.api.mdx @@ -1,8 +1,8 @@ ```jsx -import { CAccordion } from '@coreui/src' +import { CAccordion } from '@coreui/react' // or -import CAccordion from '@coreuireact/src/components/accordion/CAccordion' +import CAccordion from '@coreui/react/src/components/accordion/CAccordion' ```
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx index b283abe6..c280bef1 100644 --- a/packages/docs/content/api/CAccordionBody.api.mdx +++ b/packages/docs/content/api/CAccordionBody.api.mdx @@ -1,8 +1,8 @@ ```jsx -import { CAccordionBody } from '@coreui/src' +import { CAccordionBody } from '@coreui/react' // or -import CAccordionBody from '@coreuireact/src/components/accordion/CAccordionBody' +import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody' ```
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx index 196b70ad..c659fd49 100644 --- a/packages/docs/content/api/CAccordionButton.api.mdx +++ b/packages/docs/content/api/CAccordionButton.api.mdx @@ -1,8 +1,8 @@ ```jsx -import { CAccordionButton } from '@coreui/src' +import { CAccordionButton } from '@coreui/react' // or -import CAccordionButton from '@coreuireact/src/components/accordion/CAccordionButton' +import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton' ```
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx index 871f15f6..c158599b 100644 --- a/packages/docs/content/api/CAccordionHeader.api.mdx +++ b/packages/docs/content/api/CAccordionHeader.api.mdx @@ -1,8 +1,8 @@ ```jsx -import { CAccordionHeader } from '@coreui/src' +import { CAccordionHeader } from '@coreui/react' // or -import CAccordionHeader from '@coreuireact/src/components/accordion/CAccordionHeader' +import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader' ```
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx index 3fece5d6..1eb6b121 100644 --- a/packages/docs/content/api/CAccordionItem.api.mdx +++ b/packages/docs/content/api/CAccordionItem.api.mdx @@ -1,8 +1,8 @@ ```jsx -import { CAccordionItem } from '@coreui/src' +import { CAccordionItem } from '@coreui/react' // or -import CAccordionItem from '@coreuireact/src/components/accordion/CAccordionItem' +import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem' ```
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx index f2ed443c..f2f95bfd 100644 --- a/packages/docs/content/api/CAlert.api.mdx +++ b/packages/docs/content/api/CAlert.api.mdx @@ -5,11 +5,64 @@ import { CAlert } from '@coreui/react' import CAlert from '@coreui/react/src/components/alert/CAlert' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **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 | -| **dismissible** | Optionally add a close button to alert and allow it to self dismiss. | `boolean` | - | -| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - | -| **variant** | Set the alert variant to a solid. | `string` | - | -| **visible** | Toggle the visibility of component. | `boolean` | true | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#{`primary`}{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
dismissible#undefined{`boolean`}
Optionally add a close button to alert and allow it to self dismiss.
onClose#undefined{`() => void`}
Callback fired when the component requests to be closed.
variant#undefined{`string`}
Set the alert variant to a solid.
visible#{`true`}{`boolean`}
Toggle the visibility of component.
+
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index 25150dea..0bb3f9dd 100644 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ b/packages/docs/content/api/CAlertHeading.api.mdx @@ -5,7 +5,32 @@ import { CAlertHeading } from '@coreui/react' import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **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<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h4")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx index 027b3254..bbff921e 100644 --- a/packages/docs/content/api/CAlertLink.api.mdx +++ b/packages/docs/content/api/CAlertLink.api.mdx @@ -5,6 +5,24 @@ import { CAlertLink } from '@coreui/react' import CAlertLink from '@coreui/react/src/components/alert/CAlertLink' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx index 5e6f6399..e0a72315 100644 --- a/packages/docs/content/api/CAvatar.api.mdx +++ b/packages/docs/content/api/CAvatar.api.mdx @@ -5,12 +5,72 @@ import { CAvatar } from '@coreui/react' import CAvatar from '@coreui/react/src/components/avatar/CAvatar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **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` | - | -| **size** | Size the component small, large, or extra large. | `string` | - | -| **src** | The src attribute for the img element. | `string` | - | -| **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` | - | -| **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` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
shape#undefined{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#undefined{`string`}
Size the component small, large, or extra large.
src#undefined{`string`}
The src attribute for the img element.
status#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the status indicator to one of CoreUI’s themed colors.
textColor#undefined{`'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`}
Sets the text color of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx index 0e202b4e..a39d1537 100644 --- a/packages/docs/content/api/CBackdrop.api.mdx +++ b/packages/docs/content/api/CBackdrop.api.mdx @@ -5,7 +5,32 @@ import { CBackdrop } from '@coreui/react' import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | modal-backdrop | -| **visible** | Toggle the visibility of modal component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#{`modal-backdrop`}{`string`}
A string of all className you want applied to the base component.
visible#undefined{`boolean`}
Toggle the visibility of modal component.
+
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index b8231272..67e73873 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -5,13 +5,80 @@ import { CBadge } from '@coreui/react' import CBadge from '@coreui/react/src/components/badge/CBadge' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - | -| **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` | - | -| **size** | Size the component small. | `'sm'` | - | -| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **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` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
position#undefined{`"top-start"`}, {`"top-end"`}, {`"bottom-end"`}, {`"bottom-start"`}
Position badge in one of the corners of a link or button.
shape#undefined{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#undefined{`"sm"`}
Size the component small.
textBgColor#5.0.0+undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
textColor#undefined{`'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`}
Sets the text color of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx index 51e20bf3..c6994e9e 100644 --- a/packages/docs/content/api/CBreadcrumb.api.mdx +++ b/packages/docs/content/api/CBreadcrumb.api.mdx @@ -5,6 +5,24 @@ import { CBreadcrumb } from '@coreui/react' import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx index e3b91512..e48c7a5e 100644 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx @@ -5,9 +5,48 @@ import { CBreadcrumbItem } from '@coreui/react' import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.4.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **href** | The `href` attribute for the inner `` component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#5.4.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the base component.
href#undefined{`string`}
The {`href`} attribute for the inner {`\`} component.
+
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx index 68209926..eabef071 100644 --- a/packages/docs/content/api/CButton.api.mdx +++ b/packages/docs/content/api/CButton.api.mdx @@ -5,16 +5,104 @@ import { CButton } from '@coreui/react' import CButton from '@coreui/react/src/components/button/CButton' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'button')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | button | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - | -| **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` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **type** | Specifies the type of button. Always specify the type attribute for the `
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx index 8ab5082b..df4faa63 100644 --- a/packages/docs/content/api/CCharts.api.mdx +++ b/packages/docs/content/api/CCharts.api.mdx @@ -5,19 +5,130 @@ import { CChartBar } from '@coreui/react-chartjs' import CChartBar from '@coreui/react-chartjs/src/CCharts' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true | -| **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - | -| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - | -| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent) => void` | - | -| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent) => void` | - | -| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent) => void` | - | -| **height** | Height attribute applied to the rendered canvas. | `number` | 150 | -| **id** | ID attribute applied to the rendered canvas. | `string` | - | -| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - | -| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin[]` | - | -| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false | -| **width** | Width attribute applied to the rendered canvas. | `number` | 300 | -| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
customTooltips#{`true`}{`boolean`}
Enables custom html based tooltips instead of standard tooltips.
data#undefined{`ChartData\`}, {`((canvas: HTMLCanvasElement) => ChartData\<...>)`}
The data object that is passed into the Chart.js chart (more info).
fallbackContent#undefined{`React.ReactNode`}
A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
getDatasetAtEvent#undefined{`(dataset: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
getElementAtEvent#undefined{`(element: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
getElementsAtEvent#undefined{`(elements: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
height#{`150`}{`number`}
Height attribute applied to the rendered canvas.
id#undefined{`string`}
ID attribute applied to the rendered canvas.
options#undefined{`_DeepPartialObject\ & ElementChartOptions\ & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}
The options object that is passed into the Chart.js chart.
plugins#undefined{`Plugin\[]`}
The plugins array that is passed into the Chart.js chart (more info)
redraw#{`false`}{`boolean`}
If true, will tear down and redraw chart on all updates.
width#{`300`}{`number`}
Width attribute applied to the rendered canvas.
wrapper#{`true`}{`boolean`}
Put the chart into the wrapper div element.
+
+able> +
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx index c7517889..46f59259 100644 --- a/packages/docs/content/api/CCloseButton.api.mdx +++ b/packages/docs/content/api/CCloseButton.api.mdx @@ -5,9 +5,48 @@ import { CCloseButton } from '@coreui/react' import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Invert the default color. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
dark#undefined{`boolean`}
Invert the default color.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
white#Deprecated undefinedundefined{`boolean`}
Change the default color to white.
+
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx index c0c1566d..a905bd79 100644 --- a/packages/docs/content/api/CCol.api.mdx +++ b/packages/docs/content/api/CCol.api.mdx @@ -5,12 +5,72 @@ import { CCol } from '@coreui/react' import CCol from '@coreui/react/src/components/grid/CCol' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **md** | The number of columns/offset/order on medium devices (\<992px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **sm** | The number of columns/offset/order on small devices (\<768px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
lg#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on large devices (\<1200px).
md#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on medium devices (\<992px).
sm#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on small devices (\<768px).
xl#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on X-Large devices (\<1400px).
xs#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on extra small devices (\<576px).
xxl#undefined{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
The number of columns/offset/order on XX-Large devices (≥1400px).
+
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx index c2b78d28..3fe185f9 100644 --- a/packages/docs/content/api/CCollapse.api.mdx +++ b/packages/docs/content/api/CCollapse.api.mdx @@ -5,10 +5,56 @@ import { CCollapse } from '@coreui/react' import CCollapse from '@coreui/react/src/components/collapse/CCollapse' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **horizontal** | Set horizontal collapsing to transition the width instead of height. | `boolean` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **visible** | Toggle the visibility of component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
horizontal#undefined{`boolean`}
Set horizontal collapsing to transition the width instead of height.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
visible#undefined{`boolean`}
Toggle the visibility of component.
+
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx index 9a90013e..1b24cc9d 100644 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ b/packages/docs/content/api/CConditionalPortal.api.mdx @@ -5,7 +5,32 @@ import { CConditionalPortal } from '@coreui/react' import CConditionalPortal from '@coreui/react/src/components/conditional-portal/CConditionalPortal' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **container** **_4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - | -| **portal** | Render some children into a different part of the DOM | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
container#4.11.0+undefined{`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment | Element)`}
An HTML element or function that returns a single element, with {`document.body`} as the default.
portal#undefined{`boolean`}
Render some children into a different part of the DOM
+
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx index db6dcb4a..23928448 100644 --- a/packages/docs/content/api/CContainer.api.mdx +++ b/packages/docs/content/api/CContainer.api.mdx @@ -5,12 +5,72 @@ import { CContainer } from '@coreui/react' import CContainer from '@coreui/react/src/components/grid/CContainer' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **fluid** | Set container 100% wide, spanning the entire width of the viewport. | `boolean` | - | -| **lg** | Set container 100% wide until large breakpoint. | `boolean` | - | -| **md** | Set container 100% wide until medium breakpoint. | `boolean` | - | -| **sm** | Set container 100% wide until small breakpoint. | `boolean` | - | -| **xl** | Set container 100% wide until X-large breakpoint. | `boolean` | - | -| **xxl** | Set container 100% wide until XX-large breakpoint. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
fluid#undefined{`boolean`}
Set container 100% wide, spanning the entire width of the viewport.
lg#undefined{`boolean`}
Set container 100% wide until large breakpoint.
md#undefined{`boolean`}
Set container 100% wide until medium breakpoint.
sm#undefined{`boolean`}
Set container 100% wide until small breakpoint.
xl#undefined{`boolean`}
Set container 100% wide until X-large breakpoint.
xxl#undefined{`boolean`}
Set container 100% wide until XX-large breakpoint.
+
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 80106e4d..ef5afd8f 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -5,20 +5,136 @@ import { CDropdown } from '@coreui/react' import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Set aligment of dropdown menu. | `'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div | -| **autoClose** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **container** **_4.11.0+_** | Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | -| **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | -| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | -| **onHide** **_4.9.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | -| **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | -| **portal** **_4.8.0+_** | Generates dropdown menu using createPortal. | `boolean` | false | -| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'` | btn-group | -| **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
alignment#undefined{`'start'`}, {`'end'`}, {`{ xs: 'start' | 'end' }`}, {`{ sm: 'start' | 'end' }`}, {`{ md: 'start' | 'end' }`}, {`{ lg: 'start' | 'end' }`}, {`{ xl: 'start' | 'end'}`}, {`{ xxl: 'start' | 'end'}`}
Set aligment of dropdown menu.
as#{`div`}{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
autoClose#{`true`}{`boolean`}, {`"inside"`}, {`"outside"`}
Configure the auto close behavior of the dropdown:
- {`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu.
- {`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- {`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu.
- {`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu.
className#undefined{`string`}
A string of all className you want applied to the base component.
container#4.11.0+undefined{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
dark#undefined{`boolean`}
Sets a darker color scheme to match a dark navbar.
direction#undefined{`"center"`}, {`"dropup"`}, {`"dropup-center"`}, {`"dropend"`}, {`"dropstart"`}
Sets a specified direction and location of the dropdown menu.
offset#{`[0, 2]`}{`[number, number]`}
Offset of the dropdown menu relative to its target.
onHide#4.9.0+undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
placement#{`bottom-start`}{`'auto'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`}
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
popper#{`true`}{`boolean`}
If you want to disable dynamic positioning set this property to {`true`}.
portal#4.8.0+{`false`}{`boolean`}
Generates dropdown menu using createPortal.
variant#{`btn-group`}{`"btn-group"`}, {`"dropdown"`}, {`"input-group"`}, {`"nav-item"`}
Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
visible#{`false`}{`boolean`}
Toggle the visibility of dropdown menu component.
+
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx index 9228a01f..c364ba91 100644 --- a/packages/docs/content/api/CDropdownDivider.api.mdx +++ b/packages/docs/content/api/CDropdownDivider.api.mdx @@ -5,6 +5,24 @@ import { CDropdownDivider } from '@coreui/react' import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx index f8f2f909..727ce4dc 100644 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ b/packages/docs/content/api/CDropdownHeader.api.mdx @@ -5,7 +5,32 @@ import { CDropdownHeader } from '@coreui/react' import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h6")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx index a3aa0617..210289c3 100644 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ b/packages/docs/content/api/CDropdownItem.api.mdx @@ -5,10 +5,56 @@ import { CDropdownItem } from '@coreui/react' import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | a | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#{`a`}{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
href#undefined{`string`}
The href attribute specifies the URL of the page the link goes to.
+
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx index 64737fa7..77b6a09b 100644 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx @@ -5,7 +5,32 @@ import { CDropdownItemPlain } from '@coreui/react' import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx index 05b746f4..659abcb3 100644 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ b/packages/docs/content/api/CDropdownMenu.api.mdx @@ -5,7 +5,32 @@ import { CDropdownMenu } from '@coreui/react' import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index 7a4ecef2..c8e5832f 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -5,20 +5,136 @@ import { CDropdownToggle } from '@coreui/react' import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `ElementType` | - | -| **caret** | Enables pseudo element caret on toggler. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **custom** | Create a custom toggler which accepts any content. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | -| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - | -| **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` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | `boolean` | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | -| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#undefined{`ElementType`}
Component used for the root node. Either a string to use a HTML element or a component.
caret#{`true`}{`boolean`}
Enables pseudo element caret on toggler.
className#undefined{`string`}
A string of all className you want applied to the base component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
custom#undefined{`boolean`}
Create a custom toggler which accepts any content.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
href#undefined{`string`}
The href attribute specifies the URL of the page the link goes to.
If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.
role#undefined{`string`}
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
shape#undefined{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#undefined{`"sm"`}, {`"lg"`}
Size the component small or large.
split#undefined{`boolean`}
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.
trigger#{`click`}{`'hover'`}, {`'focus'`}, {`'click'`}
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
variant#undefined{`"outline"`}, {`"ghost"`}
Set the button variant to an outlined button or a ghost button.
+
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx index b6d11d4b..91d28698 100644 --- a/packages/docs/content/api/CFooter.api.mdx +++ b/packages/docs/content/api/CFooter.api.mdx @@ -5,7 +5,32 @@ import { CFooter } from '@coreui/react' import CFooter from '@coreui/react/src/components/footer/CFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **position** | Place footer in non-static positions. | `'fixed'` \| `'sticky'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
position#undefined{`"fixed"`}, {`"sticky"`}
Place footer in non-static positions.
+
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx index 9759844f..e1fca1e0 100644 --- a/packages/docs/content/api/CForm.api.mdx +++ b/packages/docs/content/api/CForm.api.mdx @@ -5,7 +5,32 @@ import { CForm } from '@coreui/react' import CForm from '@coreui/react/src/components/form/CForm' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **validated** | Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
validated#undefined{`boolean`}
Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component.
+
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx index 43472818..59fcbea7 100644 --- a/packages/docs/content/api/CFormCheck.api.mdx +++ b/packages/docs/content/api/CFormCheck.api.mdx @@ -5,21 +5,144 @@ import { CFormCheck } from '@coreui/react' import CFormCheck from '@coreui/react/src/components/form/CFormCheck' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **button** | Create button-like checkboxes and radio buttons. | `ButtonObject` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **hitArea** | Sets hit area to the full area of the component. | `'full'` | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - | -| **indeterminate** | Input Checkbox indeterminate Property. | `boolean` | - | -| **inline** | Group checkboxes or radios on the same horizontal row. | `boolean` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** | The element represents a caption for a component. | `ReactNode` | - | -| **reverse** | Put checkboxes or radios on the opposite side. | `boolean` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox | -| **valid** | Set component validation state to valid. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
button#undefined{`ButtonObject`}
Create button-like checkboxes and radio buttons.
className#undefined{`string`}
A string of all className you want applied to the component.
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
hitArea#undefined{`"full"`}
Sets hit area to the full area of the component.
id#undefined{`string`}
The id global attribute defines an identifier (ID) that must be unique in the whole document.
indeterminate#undefined{`boolean`}
Input Checkbox indeterminate Property.
inline#undefined{`boolean`}
Group checkboxes or radios on the same horizontal row.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#undefined{`ReactNode`}
The element represents a caption for a component.
reverse#undefined{`boolean`}
Put checkboxes or radios on the opposite side.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
type#{`checkbox`}{`"checkbox"`}, {`"radio"`}
Specifies the type of component.
valid#undefined{`boolean`}
Set component validation state to valid.
+
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx index 371e9918..be49958a 100644 --- a/packages/docs/content/api/CFormControlValidation.api.mdx +++ b/packages/docs/content/api/CFormControlValidation.api.mdx @@ -5,12 +5,72 @@ import { CFormControlValidation } from '@coreui/react' import CFormControlValidation from '@coreui/react/src/components/form/CFormControlValidation' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#undefined{`boolean`}
Set component validation state to invalid.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
valid#undefined{`boolean`}
Set component validation state to valid.
+
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx index 4f412d96..49ab36b1 100644 --- a/packages/docs/content/api/CFormControlWrapper.api.mdx +++ b/packages/docs/content/api/CFormControlWrapper.api.mdx @@ -5,15 +5,96 @@ import { CFormControlWrapper } from '@coreui/react' import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlWrapper' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+undefined{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#4.2.0+undefined{`ReactNode`}
Add a caption for a component.
text#4.2.0+undefined{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
valid#undefined{`boolean`}
Set component validation state to valid.
+
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx index f763006a..0ee22dde 100644 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ b/packages/docs/content/api/CFormFeedback.api.mdx @@ -5,10 +5,56 @@ import { CFormFeedback } from '@coreui/react' import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **invalid** | Method called immediately after the `value` prop changes. | `boolean` | - | -| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
invalid#undefined{`boolean`}
Method called immediately after the {`value`} prop changes.
tooltip#undefined{`boolean`}
If your form layout allows it, you can display validation feedback in a styled tooltip.
valid#undefined{`boolean`}
Set component validation state to valid.
+
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx index 5a7f7d76..0ba29670 100644 --- a/packages/docs/content/api/CFormFloating.api.mdx +++ b/packages/docs/content/api/CFormFloating.api.mdx @@ -5,6 +5,24 @@ import { CFormFloating } from '@coreui/react' import CFormFloating from '@coreui/react/src/components/form/CFormFloating' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx index a48c769f..b69c5cfb 100644 --- a/packages/docs/content/api/CFormInput.api.mdx +++ b/packages/docs/content/api/CFormInput.api.mdx @@ -5,24 +5,168 @@ import { CFormInput } from '@coreui/react' import CFormInput from '@coreui/react/src/components/form/CFormInput' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **delay** | Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. | `number` \| `boolean` | false | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **type** | Specifies the type of component. | `string` | text | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
delay#{`false`}{`number`}, {`boolean`}
Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+undefined{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#4.2.0+undefined{`ReactNode`}
Add a caption for a component.
onChange#undefined{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
plainText#undefined{`boolean`}
Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
readOnly#undefined{`boolean`}
Toggle the readonly state for the component.
size#undefined{`"sm"`}, {`"lg"`}
Size the component small or large.
text#4.2.0+undefined{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
type#{`text`}{`string`}
Specifies the type of component.
valid#undefined{`boolean`}
Set component validation state to valid.
value#undefined{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.
+
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx index 8d6d5ffc..d6d7ab74 100644 --- a/packages/docs/content/api/CFormLabel.api.mdx +++ b/packages/docs/content/api/CFormLabel.api.mdx @@ -5,7 +5,32 @@ import { CFormLabel } from '@coreui/react' import CFormLabel from '@coreui/react/src/components/form/CFormLabel' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **customClassName** | A string of all className you want to be applied to the component, and override standard className value. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
customClassName#undefined{`string`}
A string of all className you want to be applied to the component, and override standard className value.
+
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx index f2b5a83f..65ea10c7 100644 --- a/packages/docs/content/api/CFormRange.api.mdx +++ b/packages/docs/content/api/CFormRange.api.mdx @@ -5,14 +5,88 @@ import { CFormRange } from '@coreui/react' import CFormRange from '@coreui/react/src/components/form/CFormRange' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **max** | Specifies the maximum value for the component. | `number` | - | -| **min** | Specifies the minimum value for the component. | `number` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **step** | Specifies the interval between legal numbers in the component. | `number` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
label#4.2.0+undefined{`ReactNode`}
Add a caption for a component.
max#undefined{`number`}
Specifies the maximum value for the component.
min#undefined{`number`}
Specifies the minimum value for the component.
onChange#undefined{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
readOnly#undefined{`boolean`}
Toggle the readonly state for the component.
step#undefined{`number`}
Specifies the interval between legal numbers in the component.
value#undefined{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.
+
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx index f507ca9f..105db26a 100644 --- a/packages/docs/content/api/CFormSelect.api.mdx +++ b/packages/docs/content/api/CFormSelect.api.mdx @@ -5,21 +5,144 @@ import { CFormSelect } from '@coreui/react' import CFormSelect from '@coreui/react/src/components/form/CFormSelect' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.
Examples:
- `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
- `options={['js', 'html']}` | `Option[]` \| `string[]` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+undefined{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
htmlSize#undefined{`number`}
Specifies the number of visible options in a drop-down list.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#4.2.0+undefined{`ReactNode`}
Add a caption for a component.
onChange#undefined{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
options#undefined{`Option[]`}, {`string[]`}
Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}.
Examples:
- {`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}
- {`options={['js', 'html']}`}
size#undefined{`"sm"`}, {`"lg"`}
Size the component small or large.
text#4.2.0+undefined{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
valid#undefined{`boolean`}
Set component validation state to valid.
value#undefined{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.
+
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx index fa8e1bf0..5c420a83 100644 --- a/packages/docs/content/api/CFormSwitch.api.mdx +++ b/packages/docs/content/api/CFormSwitch.api.mdx @@ -5,13 +5,80 @@ import { CFormSwitch } from '@coreui/react' import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** | The element represents a caption for a component. | `ReactNode` | - | -| **reverse** | Put switch on the opposite side. | `boolean` | - | -| **size** | Size the component large or extra large. Works only with `switch`. | `'lg'` \| `'xl'` | - | -| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox | -| **valid** | Set component validation state to valid. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
id#undefined{`string`}
The id global attribute defines an identifier (ID) that must be unique in the whole document.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#undefined{`ReactNode`}
The element represents a caption for a component.
reverse#undefined{`boolean`}
Put switch on the opposite side.
size#undefined{`"lg"`}, {`"xl"`}
Size the component large or extra large. Works only with {`switch`}.
type#{`checkbox`}{`"checkbox"`}, {`"radio"`}
Specifies the type of component.
valid#undefined{`boolean`}
Set component validation state to valid.
+
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx index 98e40c42..2f666b98 100644 --- a/packages/docs/content/api/CFormText.api.mdx +++ b/packages/docs/content/api/CFormText.api.mdx @@ -5,7 +5,32 @@ import { CFormText } from '@coreui/react' import CFormText from '@coreui/react/src/components/form/CFormText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx index 552a328a..6f831f59 100644 --- a/packages/docs/content/api/CFormTextarea.api.mdx +++ b/packages/docs/content/api/CFormTextarea.api.mdx @@ -5,21 +5,144 @@ import { CFormTextarea } from '@coreui/react' import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
feedback#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+undefined{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+undefined{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#undefined{`boolean`}
Set component validation state to invalid.
label#4.2.0+undefined{`ReactNode`}
Add a caption for a component.
onChange#undefined{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
plainText#undefined{`boolean`}
Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
readOnly#undefined{`boolean`}
Toggle the readonly state for the component.
text#4.2.0+undefined{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+undefined{`boolean`}
Display validation feedback in a styled tooltip.
valid#undefined{`boolean`}
Set component validation state to valid.
value#undefined{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.
+
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx index ae583495..692cee33 100644 --- a/packages/docs/content/api/CHeader.api.mdx +++ b/packages/docs/content/api/CHeader.api.mdx @@ -5,8 +5,40 @@ import { CHeader } from '@coreui/react' import CHeader from '@coreui/react/src/components/header/CHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - | -| **position** | Place header in non-static positions. | `'fixed'` \| `'sticky'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
container#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
Defines optional container wrapping children elements.
position#undefined{`"fixed"`}, {`"sticky"`}
Place header in non-static positions.
+
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx index 7d81e72d..10369861 100644 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ b/packages/docs/content/api/CHeaderBrand.api.mdx @@ -5,7 +5,32 @@ import { CHeaderBrand } from '@coreui/react' import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx index b779fdf3..ba8343d3 100644 --- a/packages/docs/content/api/CHeaderDivider.api.mdx +++ b/packages/docs/content/api/CHeaderDivider.api.mdx @@ -5,6 +5,24 @@ import { CHeaderDivider } from '@coreui/react' import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx index e839f694..c9538fbe 100644 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ b/packages/docs/content/api/CHeaderNav.api.mdx @@ -5,7 +5,32 @@ import { CHeaderNav } from '@coreui/react' import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx index bcae33fa..7b2b049d 100644 --- a/packages/docs/content/api/CHeaderText.api.mdx +++ b/packages/docs/content/api/CHeaderText.api.mdx @@ -5,6 +5,24 @@ import { CHeaderText } from '@coreui/react' import CHeaderText from '@coreui/react/src/components/header/CHeaderText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx index 63b8d754..9ed97ec8 100644 --- a/packages/docs/content/api/CHeaderToggler.api.mdx +++ b/packages/docs/content/api/CHeaderToggler.api.mdx @@ -5,6 +5,24 @@ import { CHeaderToggler } from '@coreui/react' import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx index 83244b3c..922cde27 100644 --- a/packages/docs/content/api/CIcon.api.mdx +++ b/packages/docs/content/api/CIcon.api.mdx @@ -1,20 +1,108 @@ ```jsx -import { CIcon } from '@coreui/icons-react' +import { CIcon } from '@coreui/..' // or -import CIcon from '@coreui/icons-react/src/CIcon' +import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **content** **_Deprecated 3.0+_** | Use `icon={...}` instead of | `string` \| `string[]` | - | -| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - | -| **height** | The height attribute defines the vertical length of an icon. | `number` | - | -| **icon** | Name of the icon placed in React object or SVG content. | `string` \| `string[]` | - | -| **name** **_Deprecated 3.0+_** | Use `icon="..."` instead of | `string` | - | -| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - | -| **title** | Title tag content. | `string` | - | -| **use** | If defined component will be rendered using 'use' tag. | `string` | - | -| **viewBox** | The viewBox attribute defines the position and dimension of an SVG viewport. | `string` | - | -| **width** | The width attribute defines the horizontal length of an icon. | `number` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
content#Deprecated undefinedundefined{`string`}, {`string[]`}
Use {`icon={...}`} instead of
customClassName#undefined{`string`}, {`string[]`}
Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
height#undefined{`number`}
The height attribute defines the vertical length of an icon.
icon#undefined{`string`}, {`string[]`}
Name of the icon placed in React object or SVG content.
name#Deprecated undefinedundefined{`string`}
Use {`icon="..."`} instead of
size#undefined{`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
title#undefined{`string`}
Title tag content.
use#undefined{`string`}
If defined component will be rendered using 'use' tag.
viewBox#undefined{`string`}
The viewBox attribute defines the position and dimension of an SVG viewport.
width#undefined{`number`}
The width attribute defines the horizontal length of an icon.
+
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx index 29a8ed9f..66f86fd5 100644 --- a/packages/docs/content/api/CIconSvg.api.mdx +++ b/packages/docs/content/api/CIconSvg.api.mdx @@ -5,11 +5,66 @@ import { CIconSvg } from '@coreui/icons-react' import CIconSvg from '@coreui/icons-react/src/CIconSvg' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - | -| **height** | The height attribute defines the vertical length of an icon. | `number` | - | -| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - | -| **title** | Title tag content. | `string` | - | -| **width** | The width attribute defines the horizontal length of an icon. | `number` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
customClassName#undefined{`string`}, {`string[]`}
Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
height#undefined{`number`}
The height attribute defines the vertical length of an icon.
size#undefined{`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
title#undefined{`string`}
Title tag content.
width#undefined{`number`}
The width attribute defines the horizontal length of an icon.
+
+/table> +
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx index 1c5a685c..2b619e44 100644 --- a/packages/docs/content/api/CImage.api.mdx +++ b/packages/docs/content/api/CImage.api.mdx @@ -5,10 +5,56 @@ import { CImage } from '@coreui/react' import CImage from '@coreui/react/src/components/image/CImage' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the horizontal aligment. | `'start'` \| `'center'` \| `'end'` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **fluid** | Make image responsive. | `boolean` | - | -| **rounded** | Make image rounded. | `boolean` | - | -| **thumbnail** | Give an image a rounded 1px border appearance. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
align#undefined{`"start"`}, {`"center"`}, {`"end"`}
Set the horizontal aligment.
className#undefined{`string`}
A string of all className you want applied to the component.
fluid#undefined{`boolean`}
Make image responsive.
rounded#undefined{`boolean`}
Make image rounded.
thumbnail#undefined{`boolean`}
Give an image a rounded 1px border appearance.
+
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx index 25adc26c..8e11a1cb 100644 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ b/packages/docs/content/api/CInputGroup.api.mdx @@ -5,7 +5,32 @@ import { CInputGroup } from '@coreui/react' import CInputGroup from '@coreui/react/src/components/form/CInputGroup' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
size#undefined{`"sm"`}, {`"lg"`}
Size the component small or large.
+
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx index b76f7fd8..7333ae46 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -5,7 +5,32 @@ import { CInputGroupText } from '@coreui/react' import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'form')` \| `(ElementType & 'slot')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "form")`}, {`(ElementType & "slot")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx index e2993154..297687c3 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -5,10 +5,56 @@ import { CLink } from '@coreui/react' import CLink from '@coreui/react/src/components/link/CLink' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
Toggle the active state for the component.
Component used for the root node. Either a string to use a HTML element or a component.
A string of all className you want applied to the component.
Toggle the disabled state for the component.
The href attribute specifies the URL of the page the link goes to.
+
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx index b2bbff7e..5ff0ad27 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -5,9 +5,48 @@ import { CListGroup } from '@coreui/react' import CListGroup from '@coreui/react/src/components/list-group/CListGroup' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``). | `boolean` | - | -| **layout** | Specify a layout type. | `'horizontal'` \| `'horizontal-sm'` \| `'horizontal-md'` \| `'horizontal-lg'` \| `'horizontal-xl'` \| `'horizontal-xxl'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
flush#undefined{`boolean`}
Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`\`}).
layout#undefined{`"horizontal"`}, {`"horizontal-sm"`}, {`"horizontal-md"`}, {`"horizontal-lg"`}, {`"horizontal-xl"`}, {`"horizontal-xxl"`}
Specify a layout type.
+
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index b39ab4f1..ae42cde7 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -5,10 +5,56 @@ import { CListGroupItem } from '@coreui/react' import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | li | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#{`li`}{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
+
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx index 1f5a391a..5d55be8e 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -5,21 +5,144 @@ import { CModal } from '@coreui/react' import CModal from '@coreui/react/src/components/modal/CModal' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - | -| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true | -| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true | -| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - | -| **onClosePrevented** | Callback fired when the component requests to be closed. | `() => void` | - | -| **onShow** | Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. | `() => void` | - | -| **portal** | Generates modal using createPortal. | `boolean` | true | -| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | `boolean` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | -| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | `boolean` | true | -| **unmountOnClose** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | `boolean` | true | -| **visible** | Toggle the visibility of modal component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
alignment#undefined{`"top"`}, {`"center"`}
Align the modal in the center or top of the screen.
backdrop#{`true`}{`boolean`}, {`"static"`}
Apply a backdrop on body while modal is open.
className#undefined{`string`}
A string of all className you want applied to the base component.
container#5.3.0+undefined{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
focus#4.10.0+{`true`}{`boolean`}
Puts the focus on the modal when shown.
fullscreen#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Set modal to covers the entire user viewport.
keyboard#{`true`}{`boolean`}
Closes the modal when escape key is pressed.
onClose#undefined{`() => void`}
Callback fired when the component requests to be closed.
onClosePrevented#undefined{`() => void`}
Callback fired when the component requests to be closed.
onShow#undefined{`() => void`}
Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
portal#{`true`}{`boolean`}
Generates modal using createPortal.
scrollable#undefined{`boolean`}
Create a scrollable modal that allows scrolling the modal body.
size#undefined{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.
transition#{`true`}{`boolean`}
Remove animation to create modal that simply appear rather than fade in to view.
unmountOnClose#{`true`}{`boolean`}
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
visible#undefined{`boolean`}
Toggle the visibility of modal component.
+
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx index be05908c..db2858ae 100644 --- a/packages/docs/content/api/CModalBody.api.mdx +++ b/packages/docs/content/api/CModalBody.api.mdx @@ -5,6 +5,24 @@ import { CModalBody } from '@coreui/react' import CModalBody from '@coreui/react/src/components/modal/CModalBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx index 3e4986c5..65bcb134 100644 --- a/packages/docs/content/api/CModalContent.api.mdx +++ b/packages/docs/content/api/CModalContent.api.mdx @@ -5,6 +5,24 @@ import { CModalContent } from '@coreui/react' import CModalContent from '@coreui/react/src/components/modal/CModalContent' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx index 4697259f..aa9ee1e4 100644 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ b/packages/docs/content/api/CModalDialog.api.mdx @@ -5,10 +5,56 @@ import { CModalDialog } from '@coreui/react' import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **scrollable** | Does the modal dialog itself scroll, or does the whole dialog scroll within the window. | `boolean` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
alignment#undefined{`"top"`}, {`"center"`}
Align the modal in the center or top of the screen.
className#undefined{`string`}
A string of all className you want applied to the base component.
fullscreen#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Set modal to covers the entire user viewport.
scrollable#undefined{`boolean`}
Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
size#undefined{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.
+
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx index 3f52a784..25a3d54e 100644 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ b/packages/docs/content/api/CModalFooter.api.mdx @@ -5,6 +5,24 @@ import { CModalFooter } from '@coreui/react' import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx index 9c78e6e8..3bb8fdb8 100644 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ b/packages/docs/content/api/CModalHeader.api.mdx @@ -5,7 +5,32 @@ import { CModalHeader } from '@coreui/react' import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **closeButton** | Add a close button component to the header. | `boolean` | true | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
closeButton#{`true`}{`boolean`}
Add a close button component to the header.
+
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx index c476b185..78393a10 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -5,7 +5,32 @@ import { CModalTitle } from '@coreui/react' import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx index 9bb57841..7a216738 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -5,9 +5,48 @@ import { CNav } from '@coreui/react' import CNav from '@coreui/react/src/components/nav/CNav' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | -| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the base component.
layout#undefined{`"fill"`}, {`"justified"`}
Specify a layout type for component.
variant#undefined{`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
Set the nav variant to tabs or pills.
+
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 31413677..83b3d884 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -5,10 +5,56 @@ import { CNavGroup } from '@coreui/react' import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - | -| **toggler** | Set group toggler label. | `ReactNode` | - | -| **visible** | Show nav group items. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#5.0.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
compact#undefined{`boolean`}
Make nav group more compact by cutting all {`padding`} in half.
toggler#undefined{`ReactNode`}
Set group toggler label.
visible#undefined{`boolean`}
Show nav group items.
+
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 467622bc..3b911547 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -5,7 +5,32 @@ import { CNavGroupItems } from '@coreui/react' import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#5.0.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 426df0b1..5d629503 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -5,10 +5,56 @@ import { CNavItem } from '@coreui/react' import CNavItem from '@coreui/react/src/components/nav/CNavItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#5.0.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
href#undefined{`string`}
The href attribute specifies the URL of the page the link goes to.
+
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx index 6d4c07e2..f3154093 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -5,10 +5,56 @@ import { CNavLink } from '@coreui/react' import CNavLink from '@coreui/react/src/components/nav/CNavLink' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
Toggle the active state for the component.
Component used for the root node. Either a string to use a HTML element or a component.
A string of all className you want applied to the component.
Toggle the disabled state for the component.
The href attribute specifies the URL of the page the link goes to.
+
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx index 74c2c7b6..83abb795 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -5,7 +5,32 @@ import { CNavTitle } from '@coreui/react' import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx index 67a11a51..730f1c1e 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -5,12 +5,72 @@ import { CNavbar } from '@coreui/react' import CNavbar from '@coreui/react/src/components/navbar/CNavbar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'nav')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **colorScheme** | Sets if the color of text should be colored for a light or dark background. | `'dark'` \| `'light'` | - | -| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - | -| **expand** | Defines the responsive breakpoint to determine when content collapses. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **placement** | Place component in non-static positions. | `'fixed-top'` \| `'fixed-bottom'` \| `'sticky-top'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "nav")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
colorScheme#undefined{`"dark"`}, {`"light"`}
Sets if the color of text should be colored for a light or dark background.
container#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
Defines optional container wrapping children elements.
expand#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Defines the responsive breakpoint to determine when content collapses.
placement#undefined{`"fixed-top"`}, {`"fixed-bottom"`}, {`"sticky-top"`}
Place component in non-static positions.
+
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx index ba23022d..03d98309 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -5,8 +5,40 @@ import { CNavbarBrand } from '@coreui/react' import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
href#undefined{`string`}
The href attribute specifies the URL of the page the link goes to.
+
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx index 0d7f3c28..2c46edf3 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -5,7 +5,32 @@ import { CNavbarNav } from '@coreui/react' import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx index 115a93b5..a7c58443 100644 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ b/packages/docs/content/api/CNavbarText.api.mdx @@ -5,6 +5,24 @@ import { CNavbarText } from '@coreui/react' import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx index 23763e4e..ce474a31 100644 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ b/packages/docs/content/api/CNavbarToggler.api.mdx @@ -5,6 +5,24 @@ import { CNavbarToggler } from '@coreui/react' import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx index 5fc4c054..744d2595 100644 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ b/packages/docs/content/api/COffcanvas.api.mdx @@ -5,16 +5,104 @@ import { COffcanvas } from '@coreui/react' import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` \| `'static'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Sets a darker color scheme. | `boolean` | - | -| **keyboard** | Closes the offcanvas when escape key is pressed. | `boolean` | true | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` \| `'top'` \| `'bottom'` | - | -| **portal** | Generates modal using createPortal. | `boolean` | false | -| **responsive** **_4.6.0+_** | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | true | -| **scroll** | Allow body scrolling while offcanvas is open | `boolean` | false | -| **visible** | Toggle the visibility of offcanvas component. | `boolean` | false | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
backdrop#{`true`}{`boolean`}, {`"static"`}
Apply a backdrop on body while offcanvas is open.
className#undefined{`string`}
A string of all className you want applied to the base component.
dark#undefined{`boolean`}
Sets a darker color scheme.
keyboard#{`true`}{`boolean`}
Closes the offcanvas when escape key is pressed.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
placement#undefined{`"start"`}, {`"end"`}, {`"top"`}, {`"bottom"`}
Components placement, there’s no default placement.
portal#{`false`}{`boolean`}
Generates modal using createPortal.
responsive#4.6.0+{`true`}{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
scroll#{`false`}{`boolean`}
Allow body scrolling while offcanvas is open
visible#{`false`}{`boolean`}
Toggle the visibility of offcanvas component.
+
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx index 07838824..63a205df 100644 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ b/packages/docs/content/api/COffcanvasBody.api.mdx @@ -5,6 +5,24 @@ import { COffcanvasBody } from '@coreui/react' import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx index 6edbcc05..5ca4bdd5 100644 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ b/packages/docs/content/api/COffcanvasHeader.api.mdx @@ -5,6 +5,24 @@ import { COffcanvasHeader } from '@coreui/react' import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx index ed737933..5ff8759d 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -5,7 +5,32 @@ import { COffcanvasTitle } from '@coreui/react' import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx index 39f9ea2d..d1870dac 100644 --- a/packages/docs/content/api/CPagination.api.mdx +++ b/packages/docs/content/api/CPagination.api.mdx @@ -5,8 +5,40 @@ import { CPagination } from '@coreui/react' import CPagination from '@coreui/react/src/components/pagination/CPagination' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the alignment of pagination components. | `'start'` \| `'center'` \| `'end'` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
align#undefined{`"start"`}, {`"center"`}, {`"end"`}
Set the alignment of pagination components.
className#undefined{`string`}
A string of all className you want applied to the base component.
size#undefined{`"sm"`}, {`"lg"`}
Size the component small or large.
+
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx index d63d72e4..b8573635 100644 --- a/packages/docs/content/api/CPaginationItem.api.mdx +++ b/packages/docs/content/api/CPaginationItem.api.mdx @@ -5,8 +5,40 @@ import { CPaginationItem } from '@coreui/react' import CPaginationItem from '@coreui/react/src/components/pagination/CPaginationItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass)` \| `(ElementType & FunctionComponent)` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Toggle the active state for the component.
as#undefined{`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`}
Component used for the root node. Either a string to use a HTML element or a component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
+
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx index d7907a96..7247c5cc 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -5,16 +5,104 @@ import { CPlaceholder } from '@coreui/react' import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** | Set animation type to better convey the perception of something being actively loaded. | `'glow'` \| `'wave'` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **lg** | The number of columns on large devices (\<1200px). | `number` | - | -| **md** | The number of columns on medium devices (\<992px). | `number` | - | -| **size** | Size the component extra small, small, or large. | `'xs'` \| `'sm'` \| `'lg'` | - | -| **sm** | The number of columns on small devices (\<768px). | `number` | - | -| **xl** | The number of columns on X-Large devices (\<1400px). | `number` | - | -| **xs** | The number of columns on extra small devices (\<576px). | `number` | - | -| **xxl** | The number of columns on XX-Large devices (≥1400px). | `number` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
animation#undefined{`"glow"`}, {`"wave"`}
Set animation type to better convey the perception of something being actively loaded.
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
lg#undefined{`number`}
The number of columns on large devices (\<1200px).
md#undefined{`number`}
The number of columns on medium devices (\<992px).
size#undefined{`"xs"`}, {`"sm"`}, {`"lg"`}
Size the component extra small, small, or large.
sm#undefined{`number`}
The number of columns on small devices (\<768px).
xl#undefined{`number`}
The number of columns on X-Large devices (\<1400px).
xs#undefined{`number`}
The number of columns on extra small devices (\<576px).
xxl#undefined{`number`}
The number of columns on XX-Large devices (≥1400px).
+
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index c850d297..784e2a0d 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -5,18 +5,120 @@ import { CPopover } from '@coreui/react' import CPopover from '@coreui/react/src/components/popover/CPopover' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **container** **_4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | -| **title** | Title node for your component. | `ReactNode` | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | -| **visible** | Toggle the visibility of popover component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
animation#4.9.0+{`true`}{`boolean`}
Apply a CSS fade transition to the popover.
className#undefined{`string`}
A string of all className you want applied to the component.
container#4.11.0+undefined{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
content#undefined{`ReactNode`}
Content node for your component.
delay#4.9.0+{`0`}{`number`}, {`{ show: number; hide: number; }`}
The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.
fallbackPlacements#4.9.0+{`['top', 'right', 'bottom', 'left']`}{`Placements`}, {`Placements[]`}
Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
offset#{`[0, 8]`}{`[number, number]`}
Offset of the popover relative to its target.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
placement#{`top`}{`"auto"`}, {`"top"`}, {`"bottom"`}, {`"right"`}, {`"left"`}
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
title#undefined{`ReactNode`}
Title node for your component.
trigger#{`click`}{`'hover'`}, {`'focus'`}, {`'click'`}
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
visible#undefined{`boolean`}
Toggle the visibility of popover component.
+
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index e7d61f16..efd6a125 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -5,14 +5,88 @@ import { CProgress } from '@coreui/react' import CProgress from '@coreui/react/src/components/progress/CProgress' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | `number` | - | -| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `` component. | `string` | - | -| **thin** | Makes progress bar thinner. | `boolean` | - | -| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - | -| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | -| **white** | Change the default color to white. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
animated#undefined{`boolean`}
Use to animate the stripes right to left via CSS3 animations.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
height#undefined{`number`}
Sets the height of the component. If you set that value the inner {`\`} will automatically resize accordingly.
progressBarClassName#4.9.0+undefined{`string`}
A string of all className you want applied to the \ component.
thin#undefined{`boolean`}
Makes progress bar thinner.
value#undefined{`number`}
The percent to progress the ProgressBar (out of 100).
variant#undefined{`"striped"`}
Set the progress bar variant to optional striped.
white#undefined{`boolean`}
Change the default color to white.
+
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx index 844d98e8..1e21b9c7 100644 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ b/packages/docs/content/api/CProgressBar.api.mdx @@ -5,10 +5,56 @@ import { CProgressBar } from '@coreui/react' import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **value** | The percent to progress the ProgressBar. | `number` | 0 | -| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
animated#undefined{`boolean`}
Use to animate the stripes right to left via CSS3 animations.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
value#{`0`}{`number`}
The percent to progress the ProgressBar.
variant#undefined{`"striped"`}
Set the progress bar variant to optional striped.
+
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx index 109af3cf..19f2beef 100644 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -5,6 +5,24 @@ import { CProgressStacked } from '@coreui/react' import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx index e0103350..f2e0f907 100644 --- a/packages/docs/content/api/CRow.api.mdx +++ b/packages/docs/content/api/CRow.api.mdx @@ -5,12 +5,72 @@ import { CRow } from '@coreui/react' import CRow from '@coreui/react/src/components/grid/CRow' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **md** | The number of columns/offset/order on medium devices (\<992px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **sm** | The number of columns/offset/order on small devices (\<768px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
lg#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on large devices (\<1200px).
md#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on medium devices (\<992px).
sm#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on small devices (\<768px).
xl#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on X-Large devices (\<1400px).
xs#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on extra small devices (\<576px).
xxl#undefined{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
The number of columns/offset/order on XX-Large devices (≥1400px).
+
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx index 8cd6ab08..e251864c 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -5,17 +5,112 @@ import { CSidebar } from '@coreui/react' import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark'` \| `'light'` | - | -| **narrow** | Make sidebar narrow. | `boolean` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **onVisibleChange** | Event emitted after visibility of component changed. | `(visible: boolean) => void` | - | -| **overlaid** | Set sidebar to overlaid variant. | `boolean` | - | -| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` | - | -| **position** | Place sidebar in non-static positions. | `'fixed'` \| `'sticky'` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | -| **unfoldable** | Expand narrowed sidebar on hover. | `boolean` | - | -| **visible** | Toggle the visibility of sidebar component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
colorScheme#undefined{`'dark'`}, {`'light'`}
Sets if the color of text should be colored for a light or dark dark background.
narrow#undefined{`boolean`}
Make sidebar narrow.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
onVisibleChange#undefined{`(visible: boolean) => void`}
Event emitted after visibility of component changed.
overlaid#undefined{`boolean`}
Set sidebar to overlaid variant.
placement#undefined{`'start'`}, {`'end'`}
Components placement, there’s no default placement.
position#undefined{`"fixed"`}, {`"sticky"`}
Place sidebar in non-static positions.
size#undefined{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.
unfoldable#undefined{`boolean`}
Expand narrowed sidebar on hover.
visible#undefined{`boolean`}
Toggle the visibility of sidebar component.
+
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index bd665b8c..fc56e0d0 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -5,7 +5,32 @@ import { CSidebarBrand } from '@coreui/react' import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#5.0.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx index ec781c61..ac4cc6b1 100644 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ b/packages/docs/content/api/CSidebarFooter.api.mdx @@ -5,6 +5,24 @@ import { CSidebarFooter } from '@coreui/react' import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx index a854177d..fae56074 100644 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ b/packages/docs/content/api/CSidebarHeader.api.mdx @@ -5,6 +5,24 @@ import { CSidebarHeader } from '@coreui/react' import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index 52cc8df7..099b5949 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -5,7 +5,32 @@ import { CSidebarNav } from '@coreui/react' import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#5.0.0+undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx index 0ff604df..f35f392e 100644 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ b/packages/docs/content/api/CSidebarToggler.api.mdx @@ -5,6 +5,24 @@ import { CSidebarToggler } from '@coreui/react' import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
+
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx index 4ff6306f..48fc06f8 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -5,11 +5,64 @@ import { CSpinner } from '@coreui/react' import CSpinner from '@coreui/react/src/components/spinner/CSpinner' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **size** | Size the component small. | `'sm'` | - | -| **variant** | Set the button variant to an outlined button or a ghost button. | `'border'` \| `'grow'` | border | -| **visuallyHiddenLabel** | Set visually hidden label for accessibility purposes. | `string` | Loading... | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
as#undefined{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
size#undefined{`"sm"`}
Size the component small.
variant#{`border`}{`"border"`}, {`"grow"`}
Set the button variant to an outlined button or a ghost button.
visuallyHiddenLabel#{`Loading...`}{`string`}
Set visually hidden label for accessibility purposes.
+
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx index 9a9835e5..6ead7a6c 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -5,8 +5,40 @@ import { CTab } from '@coreui/react' import CTab from '@coreui/react/src/components/tabs/CTab' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **itemKey** | Item key. | `string` \| `number` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
disabled#undefined{`boolean`}
Toggle the disabled state for the component.
itemKey#undefined{`string`}, {`number`}
Item key.
+
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx index 49ebd3b6..76755621 100644 --- a/packages/docs/content/api/CTabContent.api.mdx +++ b/packages/docs/content/api/CTabContent.api.mdx @@ -5,6 +5,24 @@ import { CTabContent } from '@coreui/react' import CTabContent from '@coreui/react/src/components/tabs/CTabContent' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx index 0625b962..59fe0074 100644 --- a/packages/docs/content/api/CTabList.api.mdx +++ b/packages/docs/content/api/CTabList.api.mdx @@ -5,8 +5,40 @@ import { CTabList } from '@coreui/react' import CTabList from '@coreui/react/src/components/tabs/CTabList' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | -| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
layout#undefined{`"fill"`}, {`"justified"`}
Specify a layout type for component.
variant#undefined{`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
Set the nav variant to tabs or pills.
+
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx index e37cc210..96326f15 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -5,10 +5,56 @@ import { CTabPane } from '@coreui/react' import CTabPane from '@coreui/react/src/components/tabs/CTabPane' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **transition** **_5.1.0+_** | Enable fade in and fade out transition. | `boolean` | true | -| **visible** | Toggle the visibility of component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
transition#5.1.0+{`true`}{`boolean`}
Enable fade in and fade out transition.
visible#undefined{`boolean`}
Toggle the visibility of component.
+
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx index 02745245..db4df643 100644 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -5,11 +5,64 @@ import { CTabPanel } from '@coreui/react' import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **itemKey** | Item key. | `string` \| `number` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **transition** | Enable fade in and fade out transition. | `boolean` | true | -| **visible** | Toggle the visibility of component. | `boolean` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
itemKey#undefined{`string`}, {`number`}
Item key.
onHide#undefined{`() => void`}
Callback fired when the component requests to be hidden.
onShow#undefined{`() => void`}
Callback fired when the component requests to be shown.
transition#{`true`}{`boolean`}
Enable fade in and fade out transition.
visible#undefined{`boolean`}
Toggle the visibility of component.
+
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx index 3bb76f86..b1f101b4 100644 --- a/packages/docs/content/api/CTable.api.mdx +++ b/packages/docs/content/api/CTable.api.mdx @@ -5,23 +5,160 @@ import { CTable } from '@coreui/react' import CTable from '@coreui/react/src/components/table/CTable' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the vertical aligment. | `string` | - | -| **borderColor** | Sets the border color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **bordered** | Add borders on all sides of the table and cells. | `boolean` | - | -| **borderless** | Remove borders on all sides of the table and cells. | `boolean` | - | -| **caption** | Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption. | `string` | - | -| **captionTop** **_4.3.0+_** | Set the text of the table caption and the caption on the top of the table. | `string` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **columns** **_4.3.0+_** | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
- _style (Object) - adds styles to the column header (useful for defining widths) | `(string` \| `Column)[]` | - | -| **footer** **_4.3.0+_** | Array of objects or strings, where each element represents one cell in the table footer.

Example items:
`['FooterCell', 'FooterCell', 'FooterCell']`
or
`[{ label: 'FooterCell', _props: { color: 'success' }, ...]` | `(string` \| `FooterItem)[]` | - | -| **hover** | Enable a hover state on table rows within a ``. | `boolean` | - | -| **items** **_4.3.0+_** | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.

Example item:
`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}` | `Item[]` | - | -| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **small** | Make table more compact by cutting all cell `padding` in half. | `boolean` | - | -| **striped** | Add zebra-striping to any table row within the ``. | `boolean` | - | -| **stripedColumns** **_4.3.0+_** | Add zebra-striping to any table column. | `boolean` | - | -| **tableFootProps** **_4.3.0+_** | Properties that will be passed to the table footer component. | `CTableFootProps` | - | -| **tableHeadProps** **_4.3.0+_** | Properties that will be passed to the table head component. | `CTableHeadProps` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
align#undefined{`string`}
Set the vertical aligment.
borderColor#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the border color of the component to one of CoreUI’s themed colors.
bordered#undefined{`boolean`}
Add borders on all sides of the table and cells.
borderless#undefined{`boolean`}
Remove borders on all sides of the table and cells.
caption#undefined{`string`}
Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.
captionTop#4.3.0+undefined{`string`}
Set the text of the table caption and the caption on the top of the table.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
columns#4.3.0+undefined{`(string | Column)[]`}
Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
- _style (Object) - adds styles to the column header (useful for defining widths)
Array of objects or strings, where each element represents one cell in the table footer.

Example items:
{`['FooterCell', 'FooterCell', 'FooterCell']`}
or
{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}
hover#undefined{`boolean`}
Enable a hover state on table rows within a {`\`}.
items#4.3.0+undefined{`Item[]`}
Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.

Example item:
{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}
responsive#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
small#undefined{`boolean`}
Make table more compact by cutting all cell {`padding`} in half.
striped#undefined{`boolean`}
Add zebra-striping to any table row within the {`\`}.
stripedColumns#4.3.0+undefined{`boolean`}
Add zebra-striping to any table column.
tableFootProps#4.3.0+undefined{`CTableFootProps`}
Properties that will be passed to the table footer component.
tableHeadProps#4.3.0+undefined{`CTableHeadProps`}
Properties that will be passed to the table head component.
+
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx index ad8c2c61..8bfc35ea 100644 --- a/packages/docs/content/api/CTableBody.api.mdx +++ b/packages/docs/content/api/CTableBody.api.mdx @@ -5,7 +5,32 @@ import { CTableBody } from '@coreui/react' import CTableBody from '@coreui/react/src/components/table/CTableBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx index 3bebec25..b98bd598 100644 --- a/packages/docs/content/api/CTableCaption.api.mdx +++ b/packages/docs/content/api/CTableCaption.api.mdx @@ -5,3 +5,16 @@ import { CTableCaption } from '@coreui/react' import CTableCaption from '@coreui/react/src/components/table/CTableCaption' ``` +
+ + + + + + + + + + +
PropertyDefaultType
+
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx index 5c5c2c3f..1c8c79ac 100644 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ b/packages/docs/content/api/CTableDataCell.api.mdx @@ -5,9 +5,48 @@ import { CTableDataCell } from '@coreui/react' import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell. | `boolean` | - | -| **align** | Set the vertical aligment. | `string` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Highlight a table row or cell.
align#undefined{`string`}
Set the vertical aligment.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx index 9a363ce4..87e1e2c8 100644 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ b/packages/docs/content/api/CTableFoot.api.mdx @@ -5,7 +5,32 @@ import { CTableFoot } from '@coreui/react' import CTableFoot from '@coreui/react/src/components/table/CTableFoot' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx index f890796d..00b9bca3 100644 --- a/packages/docs/content/api/CTableHead.api.mdx +++ b/packages/docs/content/api/CTableHead.api.mdx @@ -5,7 +5,32 @@ import { CTableHead } from '@coreui/react' import CTableHead from '@coreui/react/src/components/table/CTableHead' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx index ec0ce6e8..1e1c963e 100644 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ b/packages/docs/content/api/CTableHeaderCell.api.mdx @@ -5,7 +5,32 @@ import { CTableHeaderCell } from '@coreui/react' import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx index 70181df4..ff57b8c7 100644 --- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx +++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx @@ -5,6 +5,24 @@ import { CTableResponsiveWrapper } from '@coreui/react' import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableResponsiveWrapper' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
responsive#undefined{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx index 0b0adefc..c45094b8 100644 --- a/packages/docs/content/api/CTableRow.api.mdx +++ b/packages/docs/content/api/CTableRow.api.mdx @@ -5,9 +5,48 @@ import { CTableRow } from '@coreui/react' import CTableRow from '@coreui/react/src/components/table/CTableRow' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell.. | `boolean` | - | -| **align** | Set the vertical aligment. | `string` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
active#undefined{`boolean`}
Highlight a table row or cell..
align#undefined{`string`}
Set the vertical aligment.
className#undefined{`string`}
A string of all className you want applied to the component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
+
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx index 3a31ef16..50d56cae 100644 --- a/packages/docs/content/api/CTabs.api.mdx +++ b/packages/docs/content/api/CTabs.api.mdx @@ -5,8 +5,40 @@ import { CTabs } from '@coreui/react' import CTabs from '@coreui/react/src/components/tabs/CTabs' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **activeItemKey** | The active item key. | `string` \| `number` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **onChange** | The callback is fired when the active tab changes. | `(value: string` \| `number) => void` | - | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
activeItemKey#undefined{`string`}, {`number`}
The active item key.
className#undefined{`string`}
A string of all className you want applied to the base component.
onChange#undefined{`(value: string | number) => void`}
The callback is fired when the active tab changes.
+
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx index ac0aba30..4c623448 100644 --- a/packages/docs/content/api/CToast.api.mdx +++ b/packages/docs/content/api/CToast.api.mdx @@ -5,13 +5,80 @@ import { CToast } from '@coreui/react' import CToast from '@coreui/react/src/components/toast/CToast' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** | Apply a CSS fade transition to the toast. | `boolean` | true | -| **autohide** | Auto hide the toast. | `boolean` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **delay** | Delay hiding the toast (ms). | `number` | 5000 | -| **onClose** | Callback fired when the component requests to be closed. | `(index: number) => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `(index: number) => void` | - | -| **visible** | Toggle the visibility of component. | `boolean` | false | +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultType
animation#{`true`}{`boolean`}
Apply a CSS fade transition to the toast.
autohide#{`true`}{`boolean`}
Auto hide the toast.
className#undefined{`string`}
A string of all className you want applied to the base component.
color#undefined{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
delay#{`5000`}{`number`}
Delay hiding the toast (ms).
onClose#undefined{`(index: number) => void`}
Callback fired when the component requests to be closed.
onShow#undefined{`(index: number) => void`}
Callback fired when the component requests to be shown.
visible#{`false`}{`boolean`}
Toggle the visibility of component.
+
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx index b6ee2bb4..b5c2004f 100644 --- a/packages/docs/content/api/CToastBody.api.mdx +++ b/packages/docs/content/api/CToastBody.api.mdx @@ -5,6 +5,24 @@ import { CToastBody } from '@coreui/react' import CToastBody from '@coreui/react/src/components/toast/CToastBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +
+ + + + + + + + + + + + + + + + + + +
PropertyDefaultType
className#undefined{`string`}
A string of all className you want applied to the base component.
+
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx index 1d5b0ca4..f08ce983 100644 --- a/packages/docs/content/api/CToastClose.api.mdx +++ b/packages/docs/content/api/CToastClose.api.mdx @@ -5,16 +5,104 @@ import { CToastClose } from '@coreui/react' import CToastClose from '@coreui/react/src/components/toast/CToastClose' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass)` \| `(ElementType & FunctionComponent)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Invert the default color. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **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` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **type** | Specifies the type of button. Always specify the type attribute for the `