`.
-Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
+
-
+## Reverse
-### Reversed checkboxes
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
-Use the `reverse` prop to position the checkbox on the opposite side of the label.
+
-
+## Without labels
-### Without labels
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-If omitting a label, remember to include `aria-label` for accessibility compliance.
-
-
+
## Checkbox toggle buttons
-Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
+Create button-like checkboxes and radio buttons by using `button` boolean property on the `` component. These toggle buttons can further be grouped in a button group if needed.
-
+
-### Outlined toggle styles
+### Outlined styles
-Use outlined button variants for a lighter, bordered appearance.
+Different variants of button, such at the various outlined styles, are supported.
-
+
-## API reference
+## API
-Refer to the API documentation for detailed descriptions of all the available props and configuration options.
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
- [<CFormCheck />](./api/#cformcheck)
diff --git a/packages/docs/content/forms/floating-labels/bootstrap.mdx b/packages/docs/content/forms/floating-labels/bootstrap.mdx
index 69aaba58..a3da110a 100644
--- a/packages/docs/content/forms/floating-labels/bootstrap.mdx
+++ b/packages/docs/content/forms/floating-labels/bootstrap.mdx
@@ -69,4 +69,4 @@ Use floating labels within the CoreUI Bootstrap grid system by nesting inputs in
Refer to the API documentation for detailed descriptions of all available props and configuration options.
-- [<CFormFloating />](./api/#cformfloating)
+- [<CFormFloating />](../api/#cformfloating)
diff --git a/packages/docs/content/forms/input-group/bootstrap.mdx b/packages/docs/content/forms/input-group/bootstrap.mdx
index f6f62b07..ef626c5f 100644
--- a/packages/docs/content/forms/input-group/bootstrap.mdx
+++ b/packages/docs/content/forms/input-group/bootstrap.mdx
@@ -84,5 +84,5 @@ CoreUI supports enhanced input groups with custom selects and file inputs. Defau
Check out the API documentation for full details on available props.
-- [<CInputGroup />](./api/#cinputgroup)
-- [<CInputGroupText />](./api/#cinputgrouptext)
+- [<CInputGroup />](../api/#cinputgroup)
+- [<CInputGroupText />](../api/#cinputgrouptext)
diff --git a/packages/docs/content/forms/input/bootstrap.mdx b/packages/docs/content/forms/input/bootstrap.mdx
index 47832316..7e843886 100644
--- a/packages/docs/content/forms/input/bootstrap.mdx
+++ b/packages/docs/content/forms/input/bootstrap.mdx
@@ -73,7 +73,7 @@ Color inputs are supported using `type="color"`.
Refer to the API documentation for detailed descriptions of all the props and configuration options.
-- [<CFormInput />](./api/#cforminput)
-- [<CFormFeedback />](./api/#cformfeedback)
-- [<CFormLabel />](./api/#cformlabel)
-- [<CFormText />](./api/#cformtext)
+- [<CFormInput />](../api/#cforminput)
+- [<CFormFeedback />](../api/#cformfeedback)
+- [<CFormLabel />](../api/#cformlabel)
+- [<CFormText />](../api/#cformtext)
diff --git a/packages/docs/content/forms/layout/bootstrap.mdx b/packages/docs/content/forms/layout/bootstrap.mdx
index c402ef9e..419f189b 100644
--- a/packages/docs/content/forms/layout/bootstrap.mdx
+++ b/packages/docs/content/forms/layout/bootstrap.mdx
@@ -72,9 +72,9 @@ Use inline layouts to group form controls in a horizontal row, perfect for compa
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
-- [<CForm />](./api/#cform)
-- [<CRow />](./api/#crow)
-- [<CCol />](./api/#ccol)
-- [<CFormLabel />](./api/#cformlabel)
-- [<CFormCheck />](./api/#cformcheck)
-- [<CFormInput />](./api/#cforminput)
+- [<CForm />](../api/#cform)
+- [<CRow />](../api/#crow)
+- [<CCol />](../api/#ccol)
+- [<CFormLabel />](../api/#cformlabel)
+- [<CFormCheck />](../api/#cformcheck)
+- [<CFormInput />](../api/#cforminput)
diff --git a/packages/docs/content/forms/radio/bootstrap.mdx b/packages/docs/content/forms/radio/bootstrap.mdx
index c1570d75..cda8394c 100644
--- a/packages/docs/content/forms/radio/bootstrap.mdx
+++ b/packages/docs/content/forms/radio/bootstrap.mdx
@@ -56,4 +56,4 @@ You can apply outlined styles to toggle radios using Bootstrap's button variant
Refer to the API documentation below for a complete list of props supported by the React Bootstrap radio component.
-- [<CFormCheck />](./api/#cformcheck)
+- [<CFormCheck />](../api/#cformcheck)
diff --git a/packages/docs/content/forms/range/bootstrap.mdx b/packages/docs/content/forms/range/bootstrap.mdx
index 84e91e1f..124e2b56 100644
--- a/packages/docs/content/forms/range/bootstrap.mdx
+++ b/packages/docs/content/forms/range/bootstrap.mdx
@@ -38,4 +38,4 @@ Set a custom `step` size to control the interval between selectable values.
Refer to the API documentation below for detailed descriptions of all available props.
-- [<CFormRange />](./api/#cformrange)
+- [<CFormRange />](../api/#cformrange)
diff --git a/packages/docs/content/forms/select/bootstrap.mdx b/packages/docs/content/forms/select/bootstrap.mdx
index daa367fa..d6c39a04 100644
--- a/packages/docs/content/forms/select/bootstrap.mdx
+++ b/packages/docs/content/forms/select/bootstrap.mdx
@@ -51,7 +51,7 @@ Add the `disabled` prop to disable user interaction and apply a muted appearance
Refer to the API documentation below for detailed descriptions of all available props and subcomponents.
-- [<CFormSelect />](./api/#cformselect)
-- [<CFormFeedback />](./api/#cformfeedback)
-- [<CFormLabel />](./api/#cformlabel)
-- [<CFormText />](./api/#cformtext)
+- [<CFormSelect />](../api/#cformselect)
+- [<CFormFeedback />](../api/#cformfeedback)
+- [<CFormLabel />](../api/#cformlabel)
+- [<CFormText />](../api/#cformtext)
diff --git a/packages/docs/content/forms/switch/bootstrap.mdx b/packages/docs/content/forms/switch/bootstrap.mdx
index 5391803e..b8839c12 100644
--- a/packages/docs/content/forms/switch/bootstrap.mdx
+++ b/packages/docs/content/forms/switch/bootstrap.mdx
@@ -32,4 +32,4 @@ Add the `reverse` prop to place the switch control after the label.
Refer to the API documentation below for a complete list of available props for the React Bootstrap Switch component.
-- [<CFormSwitch />](./api/#cformswitch)
+- [<CFormSwitch />](../api/#cformswitch)
diff --git a/packages/docs/content/forms/textarea/bootstrap.mdx b/packages/docs/content/forms/textarea/bootstrap.mdx
index 12cc1367..9af3cec1 100644
--- a/packages/docs/content/forms/textarea/bootstrap.mdx
+++ b/packages/docs/content/forms/textarea/bootstrap.mdx
@@ -41,7 +41,7 @@ Use the `readOnly` prop to prevent edits while still allowing text selection and
Refer to the API documentation below for a complete list of available props and subcomponents used to build Bootstrap-style textareas in React.
-- [<CFormTextarea />](./api/#cformtextarea)
-- [<CFormFeedback />](./api/#cformfeedback)
-- [<CFormLabel />](./api/#cformlabel)
-- [<CFormText />](./api/#cformtext)
+- [<CFormTextarea />](../api/#cformtextarea)
+- [<CFormFeedback />](../api/#cformfeedback)
+- [<CFormLabel />](../api/#cformlabel)
+- [<CFormText />](../api/#cformtext)
diff --git a/packages/docs/content/forms/validation/bootstrap.mdx b/packages/docs/content/forms/validation/bootstrap.mdx
index 6464a0ad..2b3ddbfb 100644
--- a/packages/docs/content/forms/validation/bootstrap.mdx
+++ b/packages/docs/content/forms/validation/bootstrap.mdx
@@ -49,9 +49,9 @@ For compact layouts, validation messages can appear as tooltips. Make sure the p
Refer to the API documentation for detailed descriptions of the props and features available:
-- [<CForm />](./api/#cform)
-- [<CFormCheck />](./api/#cformcheck)
-- [<CFormInput />](./api/#cforminput)
-- [<CFormSelect />](./api/#cformselect)
-- [<CFormTextarea />](./api/#cformtextarea)
-- [<CFormFeedback />](./api/#cformfeedback)
+- [<CForm />](../api/#cform)
+- [<CFormCheck />](../api/#cformcheck)
+- [<CFormInput />](../api/#cforminput)
+- [<CFormSelect />](../api/#cformselect)
+- [<CFormTextarea />](../api/#cformtextarea)
+- [<CFormFeedback />](../api/#cformfeedback)
diff --git a/packages/docs/package.json b/packages/docs/package.json
index ce095008..7055ba02 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/react-docs",
- "version": "5.6.0",
+ "version": "5.7.1",
"private": true,
"description": "",
"homepage": "https://coreui.io/react/",
@@ -25,7 +25,7 @@
},
"dependencies": {
"@coreui/chartjs": "^4.1.0",
- "@coreui/coreui": "^5.3.2",
+ "@coreui/coreui": "^5.4.1",
"@coreui/icons": "^3.0.1",
"@coreui/icons-react": "^2.3.0",
"@coreui/react-chartjs": "^3.0.0",
@@ -35,7 +35,7 @@
"@mdx-js/mdx": "^3.1.0",
"@mdx-js/react": "^3.1.0",
"@stackblitz/sdk": "^1.11.0",
- "gatsby": "^5.14.3",
+ "gatsby": "^5.14.5",
"gatsby-plugin-google-tagmanager": "^5.14.0",
"gatsby-plugin-image": "^3.14.0",
"gatsby-plugin-manifest": "^5.14.0",
@@ -53,12 +53,12 @@
"prismjs": "^1.30.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
- "react-docgen-typescript": "^2.2.2",
+ "react-docgen-typescript": "^2.4.0",
"react-dom": "^18.3.1",
"react-imask": "^7.6.1",
"react-markdown": "^10.1.0",
"rimraf": "^6.0.1",
- "sass": "^1.87.0",
+ "sass": "^1.89.2",
"showdown": "^2.1.0"
},
"devDependencies": {
diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
index 26cd82d0..2af0c1a2 100644
--- a/packages/docs/src/components/Seo.tsx
+++ b/packages/docs/src/components/Seo.tsx
@@ -8,9 +8,10 @@ interface SEOProps {
name?: string
image?: string
article?: string
+ pro?: boolean
}
-const SEO = ({ title, description, name, image, article }: SEOProps) => {
+const SEO = ({ title, description, name, image, article, pro }: SEOProps) => {
const { pathname } = useLocation()
const { site } = useStaticQuery(query)
@@ -35,6 +36,122 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
+ const humanize = (text: string): string => {
+ return text
+ .split('-')
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ')
+ }
+
+ const breadcrumbList = (startIndex = 1) => {
+ return seo.url
+ .replace('docs//', 'docs/')
+ .replace(siteUrl, '')
+ .split('/')
+ .filter(Boolean)
+ .map((item, index) => ({
+ '@type': 'ListItem',
+ position: index + startIndex,
+ name: humanize(item),
+ item: `${siteUrl}${item}`,
+ }))
+ }
+
+ const getDynamicDescription = (pathname: string, name?: string): string => {
+ if (pathname.includes('/components/') && pathname.includes('api')) {
+ return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.`
+ }
+
+ if (pathname.includes('/components/') && pathname.includes('bootstrap')) {
+ return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.`
+ }
+
+ if (pathname.includes('/components/') && pathname.includes('styling')) {
+ return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.`
+ }
+
+ if (pathname.includes('/components/')) {
+ return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.`
+ }
+
+ if (pathname.includes('/customize/')) {
+ return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.`
+ }
+
+ if (pathname.includes('/forms/')) {
+ return `Complete guide to CoreUI React ${name} components and implementation.`
+ }
+
+ if (pathname.includes('/layouts/')) {
+ return `Complete guide to CoreUI React ${name} implementation.`
+ }
+
+ if (pathname.includes('/templates/')) {
+ return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.'
+ }
+
+ if (pathname.includes('/migration/')) {
+ return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.'
+ }
+
+ return 'Complete guide to CoreUI for React.js components and implementation.'
+ }
+
+ const schema = [
+ {
+ '@context': 'https://schema.org',
+ '@type': 'BreadcrumbList',
+ itemListElement: [
+ {
+ '@type': 'ListItem',
+ position: 1,
+ name: 'CoreUI',
+ item: 'https://coreui.io',
+ },
+ {
+ '@type': 'ListItem',
+ position: 2,
+ name: 'React',
+ item: 'https://coreui.io/react/',
+ },
+ {
+ '@type': 'ListItem',
+ position: 3,
+ name: 'Documentation',
+ item: siteUrl,
+ },
+ ...breadcrumbList(4),
+ ],
+ },
+ {
+ '@context': 'https://schema.org',
+ '@type': 'TechArticle',
+ headline: `${seo.title} documentation`,
+ description: getDynamicDescription(seo.url, name),
+ author: {
+ '@type': 'Organization',
+ name: 'CoreUI Team',
+ sameAs: 'https://github.com/coreui/',
+ },
+ publisher: {
+ '@type': 'Organization',
+ name: 'CoreUI',
+ logo: {
+ '@type': 'ImageObject',
+ url: 'https://coreui.io/images/brand/coreui-logo.svg',
+ },
+ },
+ datePublished: '2021-01-13',
+ dateModified: new Date().toISOString().split('T')[0],
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': seo.url.replace('docs//', 'docs/'),
+ },
+ version: pro ? '5.17.1' : '5.7.1',
+ proficiencyLevel: 'Beginner',
+ },
+ ]
+
return (
<>
{formattedTitle}
@@ -50,25 +167,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
{seo.title && }
{seo.description && }
{seo.image && }
- {seo.name && (
-
- )}
+ {seo.name && }
)
}
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index 00aa6f11..4fddc174 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
const title = frontmatter?.title || ''
const description = frontmatter?.description || ''
const name = frontmatter?.name || ''
+ const pro = frontmatter?.pro_component || false
return (
<>
-
+
)
}
diff --git a/packages/remark-code-tabs/index.js b/packages/remark-code-tabs/index.js
index bb414d7d..e8b6d6a6 100755
--- a/packages/remark-code-tabs/index.js
+++ b/packages/remark-code-tabs/index.js
@@ -140,7 +140,7 @@ function createTabs(tabNodes, { labels }) {
})
return {
- attributes: [{ name: 'activeItemKey', type: 'mdxJsxAttribute', value: 0 }],
+ attributes: [{ name: 'defaultActiveItemKey', type: 'mdxJsxAttribute', value: 0 }],
children: [
{
attributes: [
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy
{
@@ -7,7 +8,7 @@ export const NavbarBrand3Example = () => {