From 842f2e2339a6e5fef9d04ad5984f457c7af2c19e Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 21:00:59 +0100 Subject: [PATCH 01/77] build: update API generator --- packages/docs/build/api.mjs | 111 +++++++++++++++++------------------- 1 file changed, 53 insertions(+), 58 deletions(-) diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs index d0fddefe..01045b9c 100644 --- a/packages/docs/build/api.mjs +++ b/packages/docs/build/api.mjs @@ -18,10 +18,8 @@ const converter = new showdown.Converter({ simpleLineBreaks: true }) /** * Glob patterns to locate .tsx files for documentation. - * Adjust these patterns based on your project structure. */ const GLOB_PATTERNS = [ - // '**/src/components/date-picker/*.tsx', '**/src/**/*.tsx', '../node_modules/@coreui/icons-react/src/**/*.tsx', '../node_modules/@coreui/react-chartjs/src/**/*.tsx', @@ -39,7 +37,6 @@ const GLOBBY_OPTIONS = { /** * Excluded files list (currently unused). - * Can be utilized for additional exclusion patterns if needed. */ const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed @@ -69,6 +66,9 @@ const PRO_COMPONENTS = [ 'CVirtualScroller', ] +/** + * Text replacements for certain components. + */ const TEXT_REPLACEMENTS = { CDatePicker: { description: [{ 'React Calendar': 'React Date Picker' }], @@ -78,6 +78,15 @@ const TEXT_REPLACEMENTS = { description: [{ 'React Calendar': 'React Date Range Picker' }], example: [{ CCalendar: 'CDateRangePicker' }], }, + CFormInput: { + example: [{ CFormControlValidation: 'CFormInput' }, { CFormControlWrapper: 'CFormInput' }], + }, + CFormTextarea: { + example: [ + { CFormControlValidation: 'CFormTextarea' }, + { CFormControlWrapper: 'CFormTextarea' }, + ], + }, } /** @@ -86,7 +95,7 @@ const TEXT_REPLACEMENTS = { * @param {string} text - The text to escape. * @returns {string} - The escaped text. */ -function escapeMarkdown(text) { +const escapeMarkdown = (text) => { if (typeof text !== 'string') return text return text .replaceAll(/(<)/g, String.raw`\$1`) @@ -100,9 +109,8 @@ function escapeMarkdown(text) { * @param {string} file - The absolute file path. * @returns {string} - The relative filename. */ -function getRelativeFilename(file) { - let relativePath - relativePath = file.includes('node_modules') +const getRelativeFilename = (file) => { + let relativePath = file.includes('node_modules') ? path.relative(path.join(__dirname, '..', '..'), file).replace('coreui-', '') : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '') @@ -122,15 +130,15 @@ function getRelativeFilename(file) { * @returns {string[]} An array of split parts, trimmed of whitespace. * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input. */ -function splitOutsideBracesAndParentheses(input) { +const splitOutsideBracesAndParentheses = (input) => { if (input.endsWith('...')) { return [input] } const parts = [] let currentPart = '' - let braceDepth = 0 // Tracks depth of curly braces {} - let parenthesisDepth = 0 // Tracks depth of parentheses () + let braceDepth = 0 + let parenthesisDepth = 0 for (const char of input) { switch (char) { @@ -161,19 +169,17 @@ function splitOutsideBracesAndParentheses(input) { if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) { parts.push(currentPart.trim()) currentPart = '' - continue // Skip adding the '|' to currentPart + continue } break } default: { - // No action needed for other characters break } } currentPart += char } - // After processing all characters, check for unmatched opening braces or parentheses if (braceDepth !== 0) { throw new Error('Unmatched opening curly brace detected.') } @@ -181,7 +187,6 @@ function splitOutsideBracesAndParentheses(input) { throw new Error('Unmatched opening parenthesis detected.') } - // Add the last accumulated part if it's not empty if (currentPart.trim()) { parts.push(currentPart.trim()) } @@ -189,10 +194,18 @@ function splitOutsideBracesAndParentheses(input) { return parts } -function replaceText(componenName, keyName, text) { +/** + * Replaces specified text within component documentation. + * + * @param {string} componenName - The name of the component. + * @param {string} keyName - The key of the text replacement (e.g., 'description', 'example'). + * @param {string} text - The text to be replaced. + * @returns {string} The replaced text. + */ +const replaceText = (componenName, keyName, text) => { const keyNames = Object.keys(TEXT_REPLACEMENTS) - if (keyNames.includes(componenName)) { + if (keyNames.includes(componenName) && TEXT_REPLACEMENTS[componenName][keyName]) { const replacements = TEXT_REPLACEMENTS[componenName][keyName] for (const replacement of replacements) { for (const [key, value] of Object.entries(replacement)) { @@ -210,17 +223,14 @@ function replaceText(componenName, keyName, text) { * Creates an MDX file with the component's API documentation. * * @param {string} file - The absolute path to the component file. - * @param {object} component - The component information extracted by react-docgen-typescript. + * @param {object} component - The component info extracted by react-docgen-typescript. */ -async function createMdx(file, component) { - if (!component) { - return - } +const createMdx = async (file, component) => { + if (!component) return const filename = path.basename(file, '.tsx') const relativeFilename = getRelativeFilename(file) - // Construct import statements let content = `\n\`\`\`jsx\n` const importPathParts = relativeFilename.split('/') if (importPathParts.length > 1) { @@ -230,11 +240,17 @@ async function createMdx(file, component) { content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n` content += `\`\`\`\n\n` - const sortedProps = Object.entries(component.props).sort(([a], [b]) => a.localeCompare(b)) - - // Initialize table headers - for (const [index, [propName, propInfo]] of sortedProps.entries()) { - const isLast = index === sortedProps.length - 1 + const filteredProps = Object.entries(component.props) + .filter(([_, value]) => { + if (!value.parent?.fileName) return true + return ( + !value.parent.fileName.includes('@types/react/index.d.ts') && + !value.parent.fileName.includes('@types/react/ts5.0/index.d.ts') + ) + }) + .sort(([a], [b]) => a.localeCompare(b)) + + for (const [index, [propName, propInfo]] of filteredProps.entries()) { if (index === 0) { content += `
\n` content += ` \n` @@ -248,20 +264,6 @@ async function createMdx(file, component) { content += ` \n` } - // Skip props from React's type definitions - if ( - propInfo.parent?.fileName?.includes('@types/react/index.d.ts') || - propInfo.parent?.fileName?.includes('@types/react/ts5.0/index.d.ts') - ) { - if (isLast) { - content += ` \n` - content += `
\n` - content += `
\n` - } - - continue - } - // Skip props marked to be ignored if (propInfo.tags?.ignore === '') { continue @@ -272,12 +274,11 @@ async function createMdx(file, component) { ? `${propInfo.tags.since}+` : '' const deprecated = propInfo.tags?.deprecated - ? `Deprecated ${propInfo.tags.since}` + ? `Deprecated ${propInfo.tags.deprecated}` : '' const description = propInfo.description ? replaceText(component.displayName, 'description', propInfo.description) : '-' - const type = propInfo.type ? propInfo.type.name.includes('ReactElement') ? 'ReactElement' @@ -285,7 +286,7 @@ async function createMdx(file, component) { : '' const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : `undefined` const example = propInfo.tags?.example - ? replaceText(component.displayName, 'example', propInfo.tags?.example) + ? replaceText(component.displayName, 'example', propInfo.tags.example) : false // Format types as inline code @@ -305,7 +306,8 @@ async function createMdx(file, component) { content += ` \n` content += ` ${converter .makeHtml(description) - .replaceAll(/(.*?)<\/code>/g, '{`$1`}')}\n` + .replaceAll(/(.*?)<\/code>/g, '{`$1`}') + .replaceAll(/{`<(.*?)>`}<\/code>/g, '{`<$1>`}')}\n` if (example) { content += ` \n` @@ -313,19 +315,15 @@ async function createMdx(file, component) { content += ` \n` content += ` \n` - - if (isLast) { - content += ` \n` - content += ` \n` - content += `\n` - } } - // Define the output directory and ensure it exists + content += ` \n` + content += ` \n` + content += `\n` + const outputDir = path.join('content', 'api') const outputPath = path.join(outputDir, `${filename}.api.mdx`) - // Create the directory if it doesn't exist try { await mkdir(outputDir, { recursive: true }) await writeFile(outputPath, content, { encoding: 'utf8' }) @@ -336,19 +334,16 @@ async function createMdx(file, component) { } /** - * Main function to execute the script. + * Main execution function. */ -async function main() { +const main = async () => { try { - // Retrieve all matching files based on the glob patterns const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS) - // Process each file concurrently await Promise.all( files.map(async (file) => { console.log(`Processing file: ${file}`) let components - try { components = parse(file, DOCGEN_OPTIONS) } catch (parseError) { From 818031ab5bd11e71ad0db3e37c8eef355921fd97 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 21:11:34 +0100 Subject: [PATCH 02/77] docs: improve ExampleSnippet component --- packages/docs/gatsby-node.mjs | 23 ++- .../docs/src/components/ExampleSnippet.tsx | 140 ++++++++++++------ packages/docs/src/utils/codesandbox.ts | 6 +- packages/docs/src/utils/projectUtils.ts | 103 ++++++++----- packages/docs/src/utils/stackblitz.ts | 11 +- 5 files changed, 196 insertions(+), 87 deletions(-) diff --git a/packages/docs/gatsby-node.mjs b/packages/docs/gatsby-node.mjs index 64d30826..4497f85a 100644 --- a/packages/docs/gatsby-node.mjs +++ b/packages/docs/gatsby-node.mjs @@ -1,5 +1,26 @@ -import { resolve } from 'node:path' +import { dirname, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' import { createFilePath } from 'gatsby-source-filesystem' +import { glob } from 'glob' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +export const onCreateWebpackConfig = ({ actions }) => { + const { setWebpackConfig } = actions + + // Find all 'examples' directories + const examplePaths = glob.sync(resolve(__dirname, 'content/**/**/examples')) + + // Create Webpack alias + setWebpackConfig({ + resolve: { + alias: { + '@assets': resolve(__dirname, 'content/assets'), + '@example': examplePaths, // Adds all paths to a single alias + }, + }, + }) +} export const onCreateNode = async ({ node, diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx index c7a4ed09..c68a2c16 100644 --- a/packages/docs/src/components/ExampleSnippet.tsx +++ b/packages/docs/src/components/ExampleSnippet.tsx @@ -1,10 +1,8 @@ -import React, { FC, ReactNode, useState } from 'react' +import React, { FC, lazy, ReactNode, Suspense, useEffect, useMemo, useState } from 'react' import { Highlight, Language } from 'prism-react-renderer' - import CIcon from '@coreui/icons-react' import { cibCodesandbox, cilCheckAlt, cilCopy } from '@coreui/icons' import { CNav, CNavLink, CTooltip, useClipboard } from '@coreui/react' - import { openStackBlitzProject } from '../utils/stackblitz' import { openCodeSandboxProject } from '../utils/codesandbox' @@ -16,8 +14,9 @@ interface CodeSnippets { export interface ExampleSnippetProps { children: ReactNode className?: string - code: string | CodeSnippets + code?: string | CodeSnippets codeSandbox?: boolean + component?: string componentName?: string pro?: boolean stackBlitz?: boolean @@ -28,22 +27,62 @@ const ExampleSnippet: FC = ({ className = '', code, codeSandbox = true, + component, componentName, pro = false, stackBlitz = true, }) => { + const [codeJS, setCodeJS] = useState() + const [codeTS, setCodeTS] = useState() const [language, setLanguage] = useState<'js' | 'ts'>('js') const { copy, isCopied } = useClipboard() - // Type Guards to determine the shape of 'code' prop - const isCodeString = typeof code === 'string' - const codeJS = isCodeString ? code : code.js || code.ts - const codeTS = isCodeString ? code : code.ts - const hasJS = Boolean(codeJS) - const hasTS = Boolean(codeTS) + const Preview = useMemo(() => { + if (!component) return null + return lazy(() => + import(`@example/${component}.tsx`) + .then((module) => ({ default: module[component] })) + .catch((error) => { + console.error(`Failed to load Preview component for ${component}:`, error) + return { default: () =>
Preview not available.
} + }), + ) + }, [component]) + + useEffect(() => { + const loadCode = async () => { + if (code) { + if (typeof code === 'string') { + setCodeJS(code) + } else { + setCodeJS(code.js) + setCodeTS(code.ts) + } + } else if (component) { + try { + const tsModule = await import(`!!raw-loader!@example/${component}.tsx`) + setCodeTS(tsModule.default) + setCodeJS(tsModule.default) + } catch (error) { + console.error(`Failed to load TypeScript code for component ${component}:`, error) + } + + try { + const jsModule = await import(`!!raw-loader!@example/${component}.jsx`) + setCodeJS(jsModule.default) + } catch { + // JSX version may not exist + } + } + } + + loadCode() + }, [code, component]) - // Set initial language based on available code snippets - React.useEffect(() => { + const hasJS = codeJS !== undefined && codeJS !== '' + const hasTS = codeTS !== undefined && codeTS !== '' + + useEffect(() => { if (!hasJS && hasTS) { setLanguage('ts') } else { @@ -53,20 +92,35 @@ const ExampleSnippet: FC = ({ const handleCopy = () => { const codeToCopy = language === 'js' ? codeJS : codeTS - if (codeToCopy) { - copy(codeToCopy) - } + if (codeToCopy) copy(codeToCopy) } const prismLanguage: Language = language === 'js' ? 'jsx' : 'tsx' - - // Determine if both languages are available - const showJSTab = hasJS && (isCodeString || code.js !== code.ts) + const showJSTab = hasJS && !(typeof code === 'object' && code?.js === code?.ts) const showTSTab = hasTS + const getProjectName = (): string => { + if (React.isValidElement(children)) { + const childType = (children as React.ReactElement).type + if (typeof childType === 'string') return childType + if (typeof childType === 'function' && childType.name) return childType.name + } + return 'ExampleProject' + } + return (
- {children &&
{children}
} +
+ {children ? ( + children + ) : Preview ? ( + Loading preview...
}> + + + ) : ( +
No component specified.
+ )} +
{showJSTab && ( @@ -88,9 +142,9 @@ const ExampleSnippet: FC = ({ aria-label="Try it on CodeSandbox" onClick={() => openCodeSandboxProject({ - name: React.isValidElement(children) && (children as any).type?.name, + name: component || getProjectName(), language, - code: language === 'js' ? codeJS : codeTS || '', + code: language === 'js' ? codeJS || '' : codeTS || '', componentName, pro, }) @@ -109,9 +163,9 @@ const ExampleSnippet: FC = ({ aria-label="Try it on StackBlitz" onClick={() => openStackBlitzProject({ - name: React.isValidElement(children) && (children as any).type?.name, + name: component || getProjectName(), language, - code: language === 'js' ? codeJS : codeTS || '', + code: language === 'js' ? codeJS || '' : codeTS || '', componentName, pro, }) @@ -148,25 +202,27 @@ const ExampleSnippet: FC = ({
-
- - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-              {tokens.map((line, i) => (
-                

-                  {line.map((token, key) => (
-                    
-                  ))}
-                

-              ))}
-
- )} - -
+ {(hasJS || hasTS) && ( +
+ + {({ className: highlightClass, style, tokens, getLineProps, getTokenProps }) => ( + 
+                {tokens.map((line, i) => (
+                  

+                    {line.map((token, key) => (
+                      
+                    ))}
+                  

+                ))}
+
+ )} + +
+ )} ) } diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts index 19fbb6b2..536115f5 100644 --- a/packages/docs/src/utils/codesandbox.ts +++ b/packages/docs/src/utils/codesandbox.ts @@ -1,5 +1,3 @@ -// openCodeSandboxProject.ts - import { ProjectOptions, generateTitle, @@ -25,7 +23,7 @@ export const openCodeSandboxProject = async (options: CodeSandboxOptions) => { const indexHTML = generateIndexHTML(title) const indexExtension = language === 'ts' ? 'tsx' : 'js' const indexJS = generateIndexJS(name, language, pro, 'codesandbox') - const packageJSON = generatePackageJSON(title, description, language, pro, 'codesandbox') + const packageJSON = generatePackageJSON(title, description, language, pro, code, 'codesandbox') // Define the files structure const files: Record = { @@ -33,7 +31,7 @@ export const openCodeSandboxProject = async (options: CodeSandboxOptions) => { content: indexHTML, }, [`src/${name}.${language}x`]: { - content: code, + content: code.replaceAll('@assets/images/', '@coreui/projects-assets/images/'), }, [`src/index.${indexExtension}`]: { content: indexJS, diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts index be6041fd..807d6835 100644 --- a/packages/docs/src/utils/projectUtils.ts +++ b/packages/docs/src/utils/projectUtils.ts @@ -1,6 +1,3 @@ -// projectUtils.ts - -// Define a unified options interface export interface ProjectOptions { code: string componentName?: string @@ -9,6 +6,25 @@ export interface ProjectOptions { pro: boolean } +export const extractDependencies = (code: string, exclude: string[] = []) => { + const importRegex = /import\s+(?:{[^}]+}|\S+)\s+from\s+['"]([^'"]+)['"]/g + const dependencies = [] + + let match + while ((match = importRegex.exec(code)) !== null) { + const dependency = match[1] + if (dependency.startsWith('@assets/images')) { + dependencies.push('@coreui/projects-assets') + } + + if (!exclude.includes(dependency) && !exclude.some((prefix) => dependency.startsWith(prefix))) { + dependencies.push(dependency) + } + } + + return dependencies +} + // Function to generate title export const generateTitle = (componentName?: string): string => { return componentName ? `${componentName} Example` : 'Project Preview' @@ -23,7 +39,11 @@ export const generateDescription = (componentName?: string): string => { } // Function to generate dependencies -export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record => { +export const getDependencies = ( + language: 'js' | 'ts', + pro: boolean, + code: string, +): Record => { const dependencies: Record = { ...(pro ? { @@ -40,6 +60,12 @@ export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record = {} + const keys = Object.keys(dependencies).sort() + for (const key of keys) { + sortedDependencies[key] = dependencies[key] + } + + return sortedDependencies } // Function to generate scripts @@ -62,16 +94,16 @@ export const getScripts = (): Record => { // Function to generate index.html content export const generateIndexHTML = (title: string): string => { return ` - - - - ${title} - - - -
- - ` + + + + ${title} + + + +
+ + ` } // Function to generate index.js or index.tsx content @@ -89,27 +121,27 @@ export const generateIndexJS = ( const renderMethod = templateType === 'codesandbox' ? `ReactDOM.render( - -
- <${name} /> -
- , - document.getElementById('root') - );` + +
+ <${name} /> +
+ , + document.getElementById('root') +);` : `ReactDOM.createRoot(document.querySelector("#root")).render( - -
- <${name} /> -
- - );` + +
+ <${name} /> +
+ +);` return `import React from 'react'; - ${importReactDOM} - import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css'; - import { ${name} } from './${name}.${language}x'; - - ${renderMethod}` +${importReactDOM} +import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css'; +import { ${name} } from './${name}.${language}x'; + +${renderMethod}` } // Function to generate package.json content @@ -118,6 +150,7 @@ export const generatePackageJSON = ( description: string, language: 'js' | 'ts', pro: boolean, + code: string, templateType: 'codesandbox' | 'stackblitz', ): string => { const indexExtension = language === 'ts' ? 'tsx' : 'js' @@ -128,9 +161,9 @@ export const generatePackageJSON = ( description, main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`, scripts: getScripts(), - dependencies: getDependencies(language, pro), + dependencies: getDependencies(language, pro, code), ...(templateType === 'stackblitz' && { - devDependencies: language === 'ts' ? getDependencies(language, pro) : {}, + devDependencies: language === 'ts' ? getDependencies(language, pro, code) : {}, }), } diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts index 7805132b..ca9e89ba 100644 --- a/packages/docs/src/utils/stackblitz.ts +++ b/packages/docs/src/utils/stackblitz.ts @@ -1,5 +1,3 @@ -// openStackBlitzProject.ts - import sdk, { Project } from '@stackblitz/sdk' import { ProjectOptions, @@ -26,11 +24,14 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => { const indexHTML = generateIndexHTML(title) const indexJS = generateIndexJS(name, language, pro, 'stackblitz') - const packageJSON = generatePackageJSON(title, description, language, pro, 'stackblitz') + const packageJSON = generatePackageJSON(title, description, language, pro, code, 'stackblitz') const files = { 'public/index.html': indexHTML, - [`src/${name}.${language}x`]: code, + [`src/${name}.${language}x`]: code.replaceAll( + '@assets/images/', + '@coreui/projects-assets/images/', + ), [`src/index.js`]: indexJS, // StackBlitz uses 'index.js' regardless of language 'package.json': packageJSON, } @@ -40,7 +41,7 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => { description, template, files, - dependencies: getDependencies(language, pro), + dependencies: getDependencies(language, pro, code), tags: ['coreui', 'react'], } From 32736b3f959a34e9903a9b96076b7293b4749d43 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 22:47:54 +0100 Subject: [PATCH 03/77] docs: update table styles --- packages/docs/src/styles/_table-api.scss | 14 ++++++++------ packages/docs/src/templates/MdxLayout.tsx | 5 +++++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/docs/src/styles/_table-api.scss b/packages/docs/src/styles/_table-api.scss index c537fce8..7018717e 100644 --- a/packages/docs/src/styles/_table-api.scss +++ b/packages/docs/src/styles/_table-api.scss @@ -1,4 +1,5 @@ -.table-api { +.table-api, +.table-docs { .table { margin: 0; } @@ -10,10 +11,6 @@ tr th { padding: 0.75rem 1rem; - - &:nth-child(3) { - width: 50%; - } } tr td { @@ -43,8 +40,13 @@ border-radius: 0; border: 2px solid var(--cui-body-bg); - code[class*=language-], pre[class*=language-] { + code[class*='language-'], + pre[class*='language-'] { white-space: pre-wrap; } } } + +.table-api tr th:nth-child(3) { + width: 50%; +} diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index a0b1c551..b1d55b4c 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -69,6 +69,11 @@ const MdxLayout: FC> = ({ children }) => { JSXDocs: (props: { code: string }) => , ScssDocs: (props: ScssDocsProps) => , pre: (props: CodeBlockProps) => , + table: (props) => ( +
+ + + ), }} > {children} From 46fe535053fd450f96af8e82792f5e08eca47416 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 22:48:23 +0100 Subject: [PATCH 04/77] docs: update class names table styles --- packages/docs/src/components/ClassNamesDocs.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/components/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx index e9017c78..6adc8988 100644 --- a/packages/docs/src/components/ClassNamesDocs.tsx +++ b/packages/docs/src/components/ClassNamesDocs.tsx @@ -106,13 +106,15 @@ const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
+ {sortedClassNames.map((className, index) => ( - + + From 575746868accda641d1e6aad06ce83481defe410 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 22:48:38 +0100 Subject: [PATCH 05/77] docs: update layout --- packages/docs/src/templates/DocsLayout.tsx | 139 +++++++++++++-------- 1 file changed, 84 insertions(+), 55 deletions(-) diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx index 99b256f2..d5ff6d44 100644 --- a/packages/docs/src/templates/DocsLayout.tsx +++ b/packages/docs/src/templates/DocsLayout.tsx @@ -49,6 +49,36 @@ interface OtherFrameworks { } } +interface Fields { + slug: string +} + +interface Node { + id: string + fields: Fields +} + +interface Item { + node: Node +} + +const findShortestSlug = (items: Item[]): string | undefined => { + if (items.length === 0) { + return undefined + } + + let shortestSlug = items[0].node.fields.slug + + for (const item of items) { + const currentSlug = item.node.fields.slug + if (currentSlug.length < shortestSlug.length) { + shortestSlug = currentSlug + } + } + + return shortestSlug +} + const humanize = (text: string): string => { return text .split('-') @@ -57,44 +87,62 @@ const humanize = (text: string): string => { } const DocsNav: FC<{ - route: string locationPathname: string - hasNavAPI: boolean - hasNavStyling: boolean - hasNavAccessibility: boolean -}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => ( - - - - Features - - - {hasNavAPI && ( - - - API - - - )} - {hasNavStyling && ( - - - Styling - - - )} - {hasNavAccessibility && ( + nodes: Item[] +}> = ({ locationPathname, nodes }) => { + const parentPathname = findShortestSlug(nodes) + const hasNavAccessibility = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('accessibility')), + [nodes], + ) + const hasNavAPI = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('api')), + [nodes], + ) + const hasNavStyling = useMemo( + () => nodes.some((edge) => edge.node.fields.slug.includes('styling')), + [nodes], + ) + return ( + - - Accessibility + + Features - )} - -) + {hasNavAPI && ( + + + API + + + )} + {hasNavStyling && ( + + + Styling + + + )} + {hasNavAccessibility && ( + + + Accessibility + + + )} + + ) +} const DocsLayout: FC = ({ children, data, location, pageContext }) => { const frontmatter = pageContext.frontmatter || {} @@ -113,19 +161,6 @@ const DocsLayout: FC = ({ children, data, location, pageContext ) const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), []) const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data]) - const hasNavAccessibility = useMemo( - () => - hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')), - [hasNav, data], - ) - const hasNavAPI = useMemo( - () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')), - [hasNav, data], - ) - const hasNavStyling = useMemo( - () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')), - [hasNav, data], - ) return ( <> @@ -133,13 +168,7 @@ const DocsLayout: FC = ({ children, data, location, pageContext
{hasNav && ( - + )}
{name && name !== title ? ( @@ -183,7 +212,7 @@ const DocsLayout: FC = ({ children, data, location, pageContext )}
- {data.mdx && } + {data?.mdx && }
{children}
 From dea7fc25d6b17ecd4b9d2822ac0210f7f61d17b8 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 15 Dec 2024 23:43:14 +0100 Subject: [PATCH 06/77] docs: prevent layout from moving during loading --- packages/docs/src/components/Ads.tsx | 2 +- packages/docs/src/styles/_ads.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/Ads.tsx b/packages/docs/src/components/Ads.tsx index a873d30a..e7deca2a 100644 --- a/packages/docs/src/components/Ads.tsx +++ b/packages/docs/src/components/Ads.tsx @@ -19,7 +19,7 @@ export const Ads: FC = ({ code, location, placement }) => { } }, [location]) - return
+ return
} Ads.displayName = 'Ads' diff --git a/packages/docs/src/styles/_ads.scss b/packages/docs/src/styles/_ads.scss index 575db8b0..7bcfc4af 100644 --- a/packages/docs/src/styles/_ads.scss +++ b/packages/docs/src/styles/_ads.scss @@ -4,12 +4,16 @@ // Carbon ads // +.carbonads-wrapper { + min-height: 130px; + margin: 2rem 0; +} + #carbonads { position: static; display: block; max-width: 400px; padding: 15px 15px 15px 160px; - margin: 2rem 0; overflow: hidden; @include font-size(.8125rem); line-height: 1.4; From ae3a7a6aad986920a13a0f3b760e4aa5f2416251 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 16 Dec 2024 12:00:02 +0100 Subject: [PATCH 07/77] docs: update content --- packages/docs/content/api/CAccordion.api.mdx | 35 +- .../docs/content/api/CAccordionBody.api.mdx | 18 +- .../docs/content/api/CAccordionButton.api.mdx | 16 +- .../docs/content/api/CAccordionHeader.api.mdx | 17 +- .../docs/content/api/CAccordionItem.api.mdx | 20 +- packages/docs/content/api/CAlert.api.mdx | 24 +- .../docs/content/api/CAlertHeading.api.mdx | 8 +- packages/docs/content/api/CAlertLink.api.mdx | 4 +- packages/docs/content/api/CAvatar.api.mdx | 28 +- packages/docs/content/api/CBackdrop.api.mdx | 8 +- packages/docs/content/api/CBadge.api.mdx | 32 +- packages/docs/content/api/CBreadcrumb.api.mdx | 4 +- .../docs/content/api/CBreadcrumbItem.api.mdx | 16 +- packages/docs/content/api/CButton.api.mdx | 45 +- .../docs/content/api/CButtonGroup.api.mdx | 12 +- .../docs/content/api/CButtonToolbar.api.mdx | 4 +- packages/docs/content/api/CCallout.api.mdx | 8 +- packages/docs/content/api/CCard.api.mdx | 16 +- packages/docs/content/api/CCardBody.api.mdx | 4 +- packages/docs/content/api/CCardFooter.api.mdx | 4 +- packages/docs/content/api/CCardGroup.api.mdx | 4 +- packages/docs/content/api/CCardHeader.api.mdx | 8 +- packages/docs/content/api/CCardImage.api.mdx | 12 +- .../content/api/CCardImageOverlay.api.mdx | 4 +- packages/docs/content/api/CCardLink.api.mdx | 8 +- .../docs/content/api/CCardSubtitle.api.mdx | 8 +- packages/docs/content/api/CCardText.api.mdx | 8 +- packages/docs/content/api/CCardTitle.api.mdx | 8 +- packages/docs/content/api/CCarousel.api.mdx | 48 +- .../docs/content/api/CCarouselCaption.api.mdx | 4 +- .../docs/content/api/CCarouselItem.api.mdx | 8 +- packages/docs/content/api/CChart.api.mdx | 62 +- packages/docs/content/api/CCharts.api.mdx | 58 +- .../docs/content/api/CCloseButton.api.mdx | 18 +- packages/docs/content/api/CCol.api.mdx | 28 +- packages/docs/content/api/CCollapse.api.mdx | 20 +- .../content/api/CConditionalPortal.api.mdx | 8 +- packages/docs/content/api/CContainer.api.mdx | 28 +- packages/docs/content/api/CDropdown.api.mdx | 66 +- .../docs/content/api/CDropdownDivider.api.mdx | 4 +- .../docs/content/api/CDropdownHeader.api.mdx | 8 +- .../docs/content/api/CDropdownItem.api.mdx | 20 +- .../content/api/CDropdownItemPlain.api.mdx | 8 +- .../docs/content/api/CDropdownMenu.api.mdx | 8 +- .../docs/content/api/CDropdownToggle.api.mdx | 60 +- packages/docs/content/api/CFooter.api.mdx | 8 +- packages/docs/content/api/CForm.api.mdx | 8 +- packages/docs/content/api/CFormCheck.api.mdx | 64 +- .../api/CFormControlValidation.api.mdx | 28 +- .../content/api/CFormControlWrapper.api.mdx | 40 +- .../docs/content/api/CFormFeedback.api.mdx | 20 +- .../docs/content/api/CFormFloating.api.mdx | 4 +- packages/docs/content/api/CFormInput.api.mdx | 76 +- packages/docs/content/api/CFormLabel.api.mdx | 8 +- packages/docs/content/api/CFormRange.api.mdx | 36 +- packages/docs/content/api/CFormSelect.api.mdx | 69 +- packages/docs/content/api/CFormSwitch.api.mdx | 32 +- packages/docs/content/api/CFormText.api.mdx | 8 +- .../docs/content/api/CFormTextarea.api.mdx | 64 +- packages/docs/content/api/CHeader.api.mdx | 12 +- .../docs/content/api/CHeaderBrand.api.mdx | 8 +- .../docs/content/api/CHeaderDivider.api.mdx | 4 +- packages/docs/content/api/CHeaderNav.api.mdx | 8 +- packages/docs/content/api/CHeaderText.api.mdx | 4 +- .../docs/content/api/CHeaderToggler.api.mdx | 4 +- packages/docs/content/api/CIcon.api.mdx | 48 +- packages/docs/content/api/CIconSvg.api.mdx | 24 +- packages/docs/content/api/CImage.api.mdx | 20 +- packages/docs/content/api/CInputGroup.api.mdx | 8 +- .../docs/content/api/CInputGroupText.api.mdx | 8 +- packages/docs/content/api/CLink.api.mdx | 20 +- packages/docs/content/api/CListGroup.api.mdx | 16 +- .../docs/content/api/CListGroupItem.api.mdx | 20 +- packages/docs/content/api/CModal.api.mdx | 64 +- packages/docs/content/api/CModalBody.api.mdx | 4 +- .../docs/content/api/CModalContent.api.mdx | 4 +- .../docs/content/api/CModalDialog.api.mdx | 20 +- .../docs/content/api/CModalFooter.api.mdx | 4 +- .../docs/content/api/CModalHeader.api.mdx | 8 +- packages/docs/content/api/CModalTitle.api.mdx | 8 +- packages/docs/content/api/CNav.api.mdx | 16 +- packages/docs/content/api/CNavGroup.api.mdx | 20 +- .../docs/content/api/CNavGroupItems.api.mdx | 8 +- packages/docs/content/api/CNavItem.api.mdx | 20 +- packages/docs/content/api/CNavLink.api.mdx | 20 +- packages/docs/content/api/CNavTitle.api.mdx | 8 +- packages/docs/content/api/CNavbar.api.mdx | 28 +- .../docs/content/api/CNavbarBrand.api.mdx | 12 +- packages/docs/content/api/CNavbarNav.api.mdx | 8 +- packages/docs/content/api/CNavbarText.api.mdx | 4 +- .../docs/content/api/CNavbarToggler.api.mdx | 4 +- packages/docs/content/api/COffcanvas.api.mdx | 44 +- .../docs/content/api/COffcanvasBody.api.mdx | 4 +- .../docs/content/api/COffcanvasHeader.api.mdx | 4 +- .../docs/content/api/COffcanvasTitle.api.mdx | 8 +- packages/docs/content/api/CPagination.api.mdx | 12 +- .../docs/content/api/CPaginationItem.api.mdx | 12 +- .../docs/content/api/CPlaceholder.api.mdx | 44 +- packages/docs/content/api/CPopover.api.mdx | 52 +- packages/docs/content/api/CProgress.api.mdx | 36 +- .../docs/content/api/CProgressBar.api.mdx | 20 +- .../docs/content/api/CProgressStacked.api.mdx | 4 +- packages/docs/content/api/CRow.api.mdx | 28 +- packages/docs/content/api/CSidebar.api.mdx | 48 +- .../docs/content/api/CSidebarBrand.api.mdx | 8 +- .../docs/content/api/CSidebarFooter.api.mdx | 4 +- .../docs/content/api/CSidebarHeader.api.mdx | 4 +- packages/docs/content/api/CSidebarNav.api.mdx | 8 +- .../docs/content/api/CSidebarToggler.api.mdx | 4 +- packages/docs/content/api/CSpinner.api.mdx | 24 +- packages/docs/content/api/CTab.api.mdx | 12 +- packages/docs/content/api/CTabContent.api.mdx | 4 +- packages/docs/content/api/CTabList.api.mdx | 12 +- packages/docs/content/api/CTabPane.api.mdx | 20 +- packages/docs/content/api/CTabPanel.api.mdx | 24 +- packages/docs/content/api/CTable.api.mdx | 87 +- packages/docs/content/api/CTableBody.api.mdx | 8 +- .../docs/content/api/CTableCaption.api.mdx | 10 - .../docs/content/api/CTableDataCell.api.mdx | 16 +- packages/docs/content/api/CTableFoot.api.mdx | 8 +- packages/docs/content/api/CTableHead.api.mdx | 8 +- .../docs/content/api/CTableHeaderCell.api.mdx | 8 +- .../api/CTableResponsiveWrapper.api.mdx | 4 +- packages/docs/content/api/CTableRow.api.mdx | 16 +- packages/docs/content/api/CTabs.api.mdx | 12 +- packages/docs/content/api/CToast.api.mdx | 32 +- packages/docs/content/api/CToastBody.api.mdx | 4 +- packages/docs/content/api/CToastClose.api.mdx | 47 +- .../docs/content/api/CToastHeader.api.mdx | 8 +- packages/docs/content/api/CToaster.api.mdx | 12 +- packages/docs/content/api/CTooltip.api.mdx | 48 +- .../docs/content/api/CWidgetStatsA.api.mdx | 24 +- .../docs/content/api/CWidgetStatsB.api.mdx | 28 +- .../docs/content/api/CWidgetStatsC.api.mdx | 28 +- .../docs/content/api/CWidgetStatsD.api.mdx | 20 +- .../docs/content/api/CWidgetStatsE.api.mdx | 16 +- .../docs/content/api/CWidgetStatsF.api.mdx | 28 +- .../components/accordion/accessibility.mdx | 10 +- .../content/components/accordion/index.mdx | 31 +- .../content/components/accordion/styling.mdx | 15 - packages/docs/content/components/alert.mdx | 262 --- .../docs/content/components/alert/api.mdx | 22 + .../AlertAdditionalContentExample.tsx | 19 + .../alert/examples/AlertDismissingExample.tsx | 16 + .../alert/examples/AlertExample.tsx | 17 + .../alert/examples/AlertIcons1Example.tsx | 33 + .../alert/examples/AlertIcons2Example.tsx | 27 + .../alert/examples/AlertLinkColorExample.tsx | 41 + .../alert/examples/AlertLiveExample.tsx | 16 + .../alert/examples/AlertSolidExample.tsx | 33 + .../docs/content/components/alert/index.mdx | 75 + .../docs/content/components/alert/styling.mdx | 27 + packages/docs/content/components/avatar.mdx | 125 -- .../docs/content/components/avatar/api.mdx | 12 + .../components/avatar/examples/AvatarIcon.tsx | 27 + .../avatar/examples/AvatarImage.tsx | 16 + .../avatar/examples/AvatarLetter.tsx | 16 + .../avatar/examples/AvatarRounded.tsx | 18 + .../avatar/examples/AvatarSizes.tsx | 22 + .../avatar/examples/AvatarSquare.tsx | 18 + .../avatar/examples/AvatarWithStatus.tsx | 15 + .../docs/content/components/avatar/index.mdx | 56 + .../content/components/avatar/styling.mdx | 27 + packages/docs/content/components/badge.mdx | 158 -- .../docs/content/components/badge/api.mdx | 12 + .../badge/examples/Badge2Example.tsx | 10 + .../badge/examples/Badge3Example.tsx | 11 + .../examples/BadgeContextual2Variations.tsx | 16 + .../examples/BadgeContextualVariations.tsx | 16 + .../badge/examples/BadgeExample.tsx | 15 + .../badge/examples/BadgePillExample.tsx | 16 + .../examples/BadgePositioned2Example.tsx | 18 + .../badge/examples/BadgePositionedExample.tsx | 34 + .../docs/content/components/badge/index.mdx | 55 + .../docs/content/components/badge/styling.mdx | 27 + .../docs/content/components/breadcrumb.mdx | 113 -- .../content/components/breadcrumb/api.mdx | 17 + .../examples/BreadcrumbDividers2Example.jsx | 15 + .../examples/BreadcrumbDividers2Example.tsx | 17 + .../examples/BreadcrumbDividers3Example.jsx | 11 + .../examples/BreadcrumbDividers3Example.tsx | 11 + .../examples/BreadcrumbDividersExample.jsx | 11 + .../examples/BreadcrumbDividersExample.tsx | 11 + .../breadcrumb/examples/BreadcrumbExample.tsx | 23 + .../content/components/breadcrumb/index.mdx | 55 + .../content/components/breadcrumb/styling.mdx | 27 + .../docs/content/components/button-group.mdx | 332 ---- .../content/components/button-group/api.mdx | 17 + .../examples/ButtonGroup2Example.tsx | 12 + .../ButtonGroupCheckboxAndRadio2Example.tsx | 33 + .../ButtonGroupCheckboxAndRadioExample.tsx | 27 + .../examples/ButtonGroupExample.tsx | 12 + .../ButtonGroupMixedStylesExample.tsx | 12 + .../examples/ButtonGroupNestingExample.tsx | 29 + .../ButtonGroupOutlinedStylesExample.tsx | 12 + .../examples/ButtonGroupSizingExample.tsx | 26 + .../examples/ButtonGroupVerticalExample.tsx | 108 ++ .../examples/ButtonToolbar2Example.tsx | 68 + .../examples/ButtonToolbarExample.tsx | 23 + .../content/components/button-group/index.mdx | 74 + packages/docs/content/components/button.mdx | 216 --- .../docs/content/components/button/api.mdx | 12 + .../button/examples/ButtonBlock2Example.tsx | 11 + .../button/examples/ButtonBlock3Example.tsx | 11 + .../button/examples/ButtonBlock4Example.tsx | 11 + .../button/examples/ButtonBlockExample.tsx | 11 + .../examples/ButtonComponentsExample.tsx | 14 + .../examples/ButtonDisabled2Example.tsx | 11 + .../button/examples/ButtonDisabledExample.tsx | 13 + .../button/examples/ButtonExample.tsx | 18 + .../button/examples/ButtonGhostExample.tsx | 17 + .../button/examples/ButtonOutlineExample.tsx | 17 + .../examples/ButtonShapePillExample.tsx | 18 + .../examples/ButtonShapeSquareExample.tsx | 18 + .../button/examples/ButtonSizes2Example.tsx | 11 + .../button/examples/ButtonSizes3Example.jsx | 16 + .../button/examples/ButtonSizes3Example.tsx | 16 + .../button/examples/ButtonSizesExample.tsx | 11 + .../docs/content/components/button/index.mdx | 109 ++ .../content/components/button/styling.mdx | 27 + packages/docs/content/components/callout.mdx | 84 - .../docs/content/components/callout/api.mdx | 12 + .../callout/examples/CalloutExample.tsx | 41 + .../docs/content/components/callout/index.mdx | 26 + .../content/components/callout/styling.mdx | 26 + packages/docs/content/components/card.mdx | 1096 ------------ packages/docs/content/components/card/api.mdx | 62 + .../card/examples/CardBodyExample.tsx | 10 + .../components/card/examples/CardExample.tsx | 22 + .../card/examples/CardGrid2Example.tsx | 71 + .../card/examples/CardGrid3Example.tsx | 59 + .../card/examples/CardGrid4Example.tsx | 65 + .../card/examples/CardGridExample.tsx | 80 + .../card/examples/CardGroups2Example.tsx | 58 + .../card/examples/CardGroupsExample.tsx | 50 + .../card/examples/CardHeader2Example.tsx | 19 + .../card/examples/CardHeader3Example.tsx | 20 + .../examples/CardHeaderAndFooterExample.tsx | 28 + .../card/examples/CardHeaderExample.tsx | 19 + .../card/examples/CardImageCapsExample.tsx | 37 + .../examples/CardImageHorizontalExample.tsx | 28 + .../examples/CardImageOverlaysExample.tsx | 20 + .../card/examples/CardImagesExample.tsx | 18 + .../card/examples/CardKitchenSinkExample.tsx | 37 + .../card/examples/CardListGroups2Example.tsx | 15 + .../card/examples/CardListGroups3Example.tsx | 15 + .../card/examples/CardListGroupsExample.tsx | 14 + .../card/examples/CardNavigation2Example.tsx | 37 + .../card/examples/CardNavigationExample.tsx | 37 + .../card/examples/CardSizing2Example.tsx | 29 + .../card/examples/CardSizing3Example.tsx | 16 + .../card/examples/CardSizingExample.tsx | 31 + .../CardStylesBackgroundAndColorExample.tsx | 34 + .../card/examples/CardStylesBorderExample.tsx | 33 + .../examples/CardStylesTopBorderExample.tsx | 36 + .../examples/CardTextAlignmentExample.tsx | 42 + .../card/examples/CardTitleExample.tsx | 19 + .../docs/content/components/card/index.mdx | 206 +++ .../docs/content/components/card/styling.mdx | 27 + packages/docs/content/components/carousel.mdx | 232 --- .../docs/content/components/carousel/api.mdx | 22 + .../examples/CarouselCrossfadeExample.tsx | 22 + .../examples/CarouselDarkVariantExample.tsx | 34 + .../examples/CarouselSlidesOnlyExample.tsx | 22 + .../examples/CarouselWithCaptionsExample.tsx | 34 + .../examples/CarouselWithControlsExample.tsx | 22 + .../CarouselWithIndicatorsExample.tsx | 22 + .../content/components/carousel/index.mdx | 59 + .../content/components/carousel/styling.mdx | 10 + packages/docs/content/components/chart.mdx | 847 ---------- .../docs/content/components/chart/api.mdx | 12 + .../chart/examples/ChartBarExample.jsx | 90 + .../chart/examples/ChartBarExample.tsx | 92 + .../chart/examples/ChartBubbleExample.jsx | 92 + .../chart/examples/ChartBubbleExample.tsx | 94 ++ .../examples/ChartDoughnutAndPieExample.jsx | 50 + .../examples/ChartDoughnutAndPieExample.tsx | 52 + .../chart/examples/ChartLineExample.jsx | 102 ++ .../chart/examples/ChartLineExample.tsx | 104 ++ .../chart/examples/ChartPolarAreaExample.jsx | 71 + .../chart/examples/ChartPolarAreaExample.tsx | 73 + .../chart/examples/ChartRadarExample.jsx | 94 ++ .../chart/examples/ChartRadarExample.tsx | 96 ++ .../chart/examples/ChartScatterExample.jsx | 89 + .../chart/examples/ChartScatterExample.tsx | 91 + .../docs/content/components/chart/index.mdx | 73 + .../content/components/close-button/api.mdx | 12 + .../examples/CloseButtonDarkExample.tsx | 11 + .../examples/CloseButtonDisabledExample.tsx | 6 + .../examples/CloseButtonExample.tsx | 6 + .../index.mdx} | 18 +- packages/docs/content/components/collapse.mdx | 263 --- .../docs/content/components/collapse/api.mdx | 12 + .../collapse/examples/CollapseExample.tsx | 32 + .../examples/CollapseHorizontalExample.tsx | 29 + .../CollapseMultipleTargetsExample.tsx | 50 + .../content/components/collapse/index.mdx | 35 + packages/docs/content/components/dropdown.mdx | 615 ------- .../docs/content/components/dropdown/api.mdx | 42 + .../examples/DropdownCenteredExample.tsx | 23 + .../examples/DropdownDark2Example.tsx | 39 + .../dropdown/examples/DropdownDarkExample.tsx | 23 + .../examples/DropdownDropendExample.tsx | 38 + .../examples/DropdownDropstartExample.tsx | 41 + .../DropdownDropupCenteredExample.tsx | 23 + .../examples/DropdownDropupExample.tsx | 38 + .../examples/DropdownMenuAlignmentExample.tsx | 23 + .../DropdownMenuContentDividersExample.tsx | 14 + .../DropdownMenuContentFormsExample.tsx | 37 + .../DropdownMenuContentHeadersExample.tsx | 12 + .../DropdownMenuContentTextExample.tsx | 11 + .../examples/DropdownMenuItems2Example.tsx | 13 + .../DropdownMenuItemsActiveExample.tsx | 14 + .../DropdownMenuItemsDisabledExample.tsx | 12 + .../examples/DropdownMenuItemsExample.tsx | 23 + .../DropdownResponsiveAlignment2Example.tsx | 25 + .../DropdownResponsiveAlignmentExample.tsx | 23 + .../examples/DropdownSingleButton2Example.tsx | 15 + .../examples/DropdownSingleButton3Example.tsx | 27 + .../examples/DropdownSingleButtonExample.tsx | 15 + .../examples/DropdownSizingLargeExample.tsx | 38 + .../examples/DropdownSizingSmallExample.tsx | 38 + .../examples/DropdownSplitButtonExample.tsx | 29 + .../content/components/dropdown/index.mdx | 186 +++ .../content/components/dropdown/styling.mdx | 40 + packages/docs/content/components/icon.mdx | 2 +- packages/docs/content/components/image.mdx | 58 - .../docs/content/components/image/api.mdx | 12 + .../image/examples/ImageAligning2Example.tsx | 12 + .../image/examples/ImageAligning3Example.tsx | 12 + .../image/examples/ImageAligningExample.tsx | 13 + .../image/examples/ImageResponsiveExample.tsx | 8 + .../image/examples/ImageThumbnailExample.tsx | 8 + .../docs/content/components/image/index.mdx | 35 + .../docs/content/components/list-group.mdx | 345 ---- .../content/components/list-group/api.mdx | 17 + .../examples/ListGroupActiveItemsExample.tsx | 14 + .../ListGroupCheckboxesAndRadios2Example.tsx | 18 + .../ListGroupCheckboxesAndRadios3Example.tsx | 18 + .../ListGroupCheckboxesAndRadiosExample.tsx | 24 + .../ListGroupContextualClasses2Example.tsx | 18 + .../ListGroupContextualClassesExample.tsx | 16 + .../ListGroupCustomContentExample.tsx | 42 + .../ListGroupDisabledItemsExample.tsx | 14 + .../list-group/examples/ListGroupExample.tsx | 14 + .../examples/ListGroupFlushExample.tsx | 14 + .../examples/ListGroupHorizontalExample.jsx | 24 + .../examples/ListGroupHorizontalExample.tsx | 31 + .../ListGroupLinksAndButtons2Example.tsx | 14 + .../ListGroupLinksAndButtonsExample.tsx | 14 + .../examples/ListGroupWithBadgesExample.tsx | 27 + .../content/components/list-group/index.mdx | 93 ++ .../content/components/list-group/styling.mdx | 27 + packages/docs/content/components/modal.mdx | 1375 --------------- .../docs/content/components/modal/api.mdx | 32 + .../modal/examples/ModalFullscreenExample.tsx | 99 ++ .../modal/examples/ModalLiveDemoExample.tsx | 29 + .../examples/ModalOptionalSizesExample.tsx | 54 + .../ModalScrollingLongContent2Example.tsx | 53 + .../ModalScrollingLongContentExample.tsx | 108 ++ .../examples/ModalStaticBackdropExample.tsx | 32 + .../ModalToggleBetweenModalsExample.tsx | 63 + .../ModalTooltipsAndPopoversExample.tsx | 61 + .../ModalVerticallyCenteredExample.tsx | 33 + ...dalVerticallyCenteredScrollableExample.tsx | 53 + .../docs/content/components/modal/index.mdx | 146 ++ .../docs/content/components/modal/styling.mdx | 35 + packages/docs/content/components/navbar.mdx | 1475 ----------------- .../docs/content/components/navbar/api.mdx | 32 + .../navbar/examples/NavbarBrand2Example.tsx | 16 + .../navbar/examples/NavbarBrand3Example.tsx | 23 + .../navbar/examples/NavbarBrandExample.tsx | 22 + .../examples/NavbarColorSchemesExample.tsx | 155 ++ .../examples/NavbarContainers2Example.tsx | 12 + .../examples/NavbarContainersExample.tsx | 14 + .../navbar/examples/NavbarExample.tsx | 63 + .../navbar/examples/NavbarForms2Example.tsx | 18 + .../navbar/examples/NavbarForms3Example.tsx | 15 + .../navbar/examples/NavbarForms4Example.tsx | 17 + .../navbar/examples/NavbarFormsExample.tsx | 17 + .../navbar/examples/NavbarNav2Example.tsx | 40 + .../navbar/examples/NavbarNav3Example.tsx | 58 + .../navbar/examples/NavbarNavExample.tsx | 49 + .../examples/NavbarPlacementExample.tsx | 12 + .../NavbarPlacementFixedBottomExample.tsx | 12 + .../NavbarPlacementFixedTopExample.tsx | 12 + .../NavbarPlacementStickyTopExample.tsx | 12 + ...NavbarResponsiveExternalContentExample.tsx | 25 + .../NavbarResponsiveOffcanvas2Example.tsx | 83 + .../NavbarResponsiveOffcanvasExample.tsx | 83 + .../NavbarResponsiveToggler2Example.tsx | 55 + .../NavbarResponsiveToggler3Example.tsx | 55 + .../NavbarResponsiveTogglerExample.tsx | 55 + .../components/navbar/examples/NavbarText.tsx | 12 + .../docs/content/components/navbar/index.mdx | 154 ++ .../content/components/navbar/styling.mdx | 47 + .../docs/content/components/navs-tabs.mdx | 719 -------- .../docs/content/components/navs-tabs/api.mdx | 32 + .../navs-tabs/examples/Nav2Example.tsx | 13 + .../navs-tabs/examples/NavExample.tsx | 21 + .../examples/NavFillAndJustify2Example.tsx | 21 + .../examples/NavFillAndJustifyExample.tsx | 21 + .../NavHorizontalAlignment2Example.tsx | 21 + .../NavHorizontalAlignmentExample.tsx | 21 + .../navs-tabs/examples/NavPillsExample.tsx | 21 + .../examples/NavPillsWithDropdownExample.tsx | 34 + .../examples/NavTabPanes2Example.tsx | 55 + .../navs-tabs/examples/NavTabPanesExample.tsx | 55 + .../navs-tabs/examples/NavTabsExample.tsx | 21 + .../examples/NavTabsWithDropdownExample.tsx | 34 + .../examples/NavUnderlineBorderExample.tsx | 21 + .../examples/NavUnderlineExample.tsx | 21 + .../navs-tabs/examples/NavVerticalExample.tsx | 21 + .../NavWorkingWithFlexUtilitiesExample.tsx | 13 + .../content/components/navs-tabs/index.mdx | 121 ++ .../content/components/navs-tabs/styling.mdx | 49 + .../docs/content/components/offcanvas.mdx | 467 ------ .../docs/content/components/offcanvas/api.mdx | 27 + ...fcanvasBodyScrollingAndBackdropExample.tsx | 27 + .../OffcanvasBodyScrollingExample.tsx | 33 + .../examples/OffcanvasDarkExample.tsx | 17 + .../offcanvas/examples/OffcanvasExample.tsx | 17 + .../examples/OffcanvasLiveExample.tsx | 30 + .../OffcanvasPlacementBottomExample.tsx | 30 + .../OffcanvasPlacementRightExample.tsx | 30 + .../examples/OffcanvasPlacementTopExample.tsx | 30 + .../examples/OffcanvasResponsiveExample.tsx | 33 + .../OffcanvasStaticBackdropExample.tsx | 27 + .../content/components/offcanvas/index.mdx | 97 ++ .../content/components/offcanvas/styling.mdx | 28 + .../docs/content/components/pagination.mdx | 144 -- .../content/components/pagination/api.mdx | 17 + .../examples/PaginationAlignment2Example.tsx | 14 + .../examples/PaginationAlignmentExample.tsx | 14 + .../PaginationDisabledAndActiveExample.tsx | 18 + .../pagination/examples/PaginationExample.tsx | 14 + .../examples/PaginationSizingLargeExample.tsx | 14 + .../examples/PaginationSizingSmallExample.tsx | 14 + .../PaginationWorkingWithIconsExample.tsx | 18 + .../content/components/pagination/index.mdx | 52 + .../content/components/pagination/styling.mdx | 28 + .../docs/content/components/placeholder.mdx | 145 -- .../content/components/placeholder/api.mdx | 12 + .../examples/Placeholder2Example.tsx | 13 + .../examples/PlaceholderAnimationExample.tsx | 15 + .../examples/PlaceholderColorExample.tsx | 19 + .../examples/PlaceholderExample.tsx | 52 + .../examples/PlaceholderSizingExample.tsx | 13 + .../examples/PlaceholderWidthExample.tsx | 12 + .../content/components/placeholder/index.mdx | 66 + .../components/placeholder/styling.mdx | 10 + packages/docs/content/components/popover.mdx | 214 --- .../docs/content/components/popover/api.mdx | 12 + .../examples/PopoverCustomPopoversExample.jsx | 24 + .../examples/PopoverCustomPopoversExample.tsx | 24 + .../PopoverDisabledElementsExample.tsx | 14 + .../examples/PopoverDismissExample.tsx | 15 + .../examples/PopoverFourDirectionsExample.tsx | 21 + .../popover/examples/PopoverLiveExample.tsx | 16 + .../docs/content/components/popover/index.mdx | 47 + .../content/components/popover/styling.mdx | 27 + .../docs/content/components/progress/api.mdx | 17 + .../ProgressAnimatedStripedExample.tsx | 13 + .../examples/ProgressBackgrounds2Example.tsx | 21 + .../examples/ProgressBackgroundsExample.tsx | 13 + .../progress/examples/ProgressExample.tsx | 14 + .../examples/ProgressHeight2Example.tsx | 15 + .../examples/ProgressHeightExample.tsx | 11 + .../examples/ProgressLabels2Example.tsx | 12 + .../examples/ProgressLabelsExample.tsx | 6 + .../examples/ProgressMultipleBarsExample.tsx | 12 + .../examples/ProgressStripedExample.tsx | 13 + .../{progress.mdx => progress/index.mdx} | 116 +- .../content/components/progress/styling.mdx | 27 + packages/docs/content/components/sidebar.mdx | 305 ---- .../docs/content/components/sidebar/api.mdx | 38 + .../sidebar/examples/SidebarDarkExample.tsx | 60 + .../sidebar/examples/SidebarExample.tsx | 64 + .../sidebar/examples/SidebarNarrowExample.tsx | 29 + .../examples/SidebarUnfoldableExample.tsx | 60 + .../docs/content/components/sidebar/index.mdx | 95 ++ .../content/components/sidebar/styling.mdx | 39 + packages/docs/content/components/spinner.mdx | 193 --- .../docs/content/components/spinner/api.mdx | 12 + .../examples/SpinnerBorderColorsExample.tsx | 17 + .../spinner/examples/SpinnerBorderExample.tsx | 6 + .../examples/SpinnerBorderMarginExample.tsx | 6 + .../SpinnerBorderPlacementFlex2Example.tsx | 11 + .../SpinnerBorderPlacementFlexExample.tsx | 10 + .../SpinnerBorderPlacementFloatsExample.tsx | 10 + ...SpinnerBorderPlacementTextAlignExample.tsx | 10 + .../examples/SpinnerButtons2Example.tsx | 19 + .../examples/SpinnerButtonsExample.tsx | 19 + .../examples/SpinnerGrowColorsExample.tsx | 17 + .../spinner/examples/SpinnerGrowExample.tsx | 6 + .../examples/SpinnerSizeCustomExample.tsx | 11 + .../examples/SpinnerSizeSmallExample.tsx | 11 + .../docs/content/components/spinner/index.mdx | 87 + .../content/components/spinner/styling.mdx | 45 + .../docs/content/components/table/api.mdx | 42 + .../components/{table.mdx => table/index.mdx} | 39 +- .../docs/content/components/table/styling.mdx | 14 + packages/docs/content/components/tabs.mdx | 347 ---- packages/docs/content/components/tabs/api.mdx | 32 + .../components/tabs/examples/TabsExample.tsx | 31 + .../tabs/examples/TabsPillsExample.tsx | 29 + .../examples/TabsUnderlineBorderExample.tsx | 29 + .../tabs/examples/TabsUnderlineExample.tsx | 29 + .../tabs/examples/TabsUnstyledExample.tsx | 31 + .../TabsUnstyledFillAndJustify2Example.tsx | 29 + .../TabsUnstyledFillAndJustifyExample.tsx | 29 + .../docs/content/components/tabs/index.mdx | 123 ++ .../docs/content/components/tabs/styling.mdx | 49 + packages/docs/content/components/toast.mdx | 281 ---- .../docs/content/components/toast/api.mdx | 32 + .../examples/ToastColorSchemesExample.tsx | 13 + .../examples/ToastCustomContent2Example.tsx | 25 + .../examples/ToastCustomContentExample.tsx | 13 + .../toast/examples/ToastExample.tsx | 25 + .../toast/examples/ToastLiveExample.jsx | 35 + .../toast/examples/ToastLiveExample.tsx | 36 + .../toast/examples/ToastStackingExample.tsx | 45 + .../examples/ToastTranslucentExample.tsx | 25 + .../docs/content/components/toast/index.mdx | 66 + .../docs/content/components/toast/styling.mdx | 27 + packages/docs/content/components/tooltip.mdx | 191 --- .../docs/content/components/tooltip/api.mdx | 12 + .../tooltip/examples/TooltipCustomExample.jsx | 18 + .../tooltip/examples/TooltipCustomExample.tsx | 18 + .../examples/TooltipDirectionsExample.tsx | 21 + .../TooltipDisabledElementsExample.tsx | 14 + .../examples/TooltipOnLinksExample.tsx | 28 + .../docs/content/components/tooltip/index.mdx | 39 + .../content/components/tooltip/styling.mdx | 27 + packages/docs/content/components/widgets.mdx | 1468 ---------------- .../docs/content/components/widgets/api.mdx | 38 + .../widgets/examples/WidgetStatsAExample.tsx | 365 ++++ .../widgets/examples/WidgetStatsBExample.tsx | 29 + .../widgets/examples/WidgetStatsCExample.tsx | 31 + .../widgets/examples/WidgetStatsDExample.jsx | 125 ++ .../widgets/examples/WidgetStatsDExample.tsx | 125 ++ .../widgets/examples/WidgetStatsEExample.tsx | 99 ++ .../widgets/examples/WidgetStatsFExample.tsx | 95 ++ .../docs/content/components/widgets/index.mdx | 41 + packages/docs/content/forms/checkbox.mdx | 127 -- packages/docs/content/forms/checkbox/api.mdx | 12 + .../examples/CheckboxDisabledExample.tsx | 11 + .../checkbox/examples/CheckboxExample.tsx | 11 + .../examples/CheckboxIndeterminateExample.tsx | 6 + .../examples/CheckboxInlineExample.tsx | 12 + .../examples/CheckboxReverseExample.tsx | 17 + .../examples/CheckboxStackedExample.tsx | 11 + .../examples/CheckboxToggleButtonsExample.tsx | 29 + ...kboxToggleButtonsOutlinedStylesExample.tsx | 29 + .../examples/CheckboxWithoutLabelsExample.tsx | 6 + .../docs/content/forms/checkbox/index.mdx | 69 + .../docs/content/forms/checkbox/styling.mdx | 10 + .../docs/content/forms/floating-labels.mdx | 159 -- .../content/forms/floating-labels/api.mdx | 12 + .../examples/FloatingLabels2Example.tsx | 14 + .../examples/FloatingLabelsExample.tsx | 22 + .../examples/FloatingLabelsLayoutExample.tsx | 30 + .../examples/FloatingLabelsSelectExample.tsx | 17 + .../FloatingLabelsTextarea2Example.tsx | 13 + .../FloatingLabelsTextareaExample.tsx | 12 + .../FloatingLabelsValidationExample.tsx | 26 + .../content/forms/floating-labels/index.mdx | 63 + .../content/forms/floating-labels/styling.mdx | 10 + packages/docs/content/forms/input-group.mdx | 356 ---- .../docs/content/forms/input-group/api.mdx | 17 + .../InputGroupButtonAddonsExample.tsx | 53 + .../InputGroupButtonsWithDropdownsExample.tsx | 76 + .../InputGroupCheckboxesAndRadiosExample.tsx | 22 + .../InputGroupCustomFileInputExample.tsx | 46 + .../InputGroupCustomSelectExample.tsx | 54 + .../examples/InputGroupExample.tsx | 45 + .../InputGroupMultipleAddonsExample.tsx | 20 + .../InputGroupMultipleInputsExample.tsx | 12 + .../InputGroupSegmentedButtonsExample.tsx | 51 + .../examples/InputGroupSizingExample.tsx | 26 + .../examples/InputGroupWrappingExample.tsx | 11 + .../docs/content/forms/input-group/index.mdx | 76 + .../content/forms/input-group/styling.mdx | 10 + .../examples/InputMaskCreditCardExample.tsx | 10 + .../input-mask/examples/InputMaskExample.tsx | 18 + .../examples/InputMaskPhoneExample.tsx | 10 + .../{input-mask.mdx => input-mask/index.mdx} | 75 +- packages/docs/content/forms/input.mdx | 192 --- packages/docs/content/forms/input/api.mdx | 27 + .../input/examples/FormInputColorExample.tsx | 14 + .../FormInputCustomClassNamesExample.tsx | 22 + .../examples/FormInputDisabledExample.tsx | 22 + .../forms/input/examples/FormInputExample.tsx | 17 + .../input/examples/FormInputFileExample.tsx | 34 + .../examples/FormInputReadonlyExample.tsx | 31 + .../FormInputReadonlyPlainText2Example.tsx | 32 + .../FormInputReadonlyPlainTextExample.tsx | 31 + .../input/examples/FormInputSizingExample.tsx | 12 + packages/docs/content/forms/input/index.mdx | 67 + packages/docs/content/forms/input/styling.mdx | 22 + packages/docs/content/forms/layout.mdx | 290 ---- .../examples/LayoutAutoSizing2Example.tsx | 53 + .../examples/LayoutAutoSizingExample.tsx | 53 + .../examples/LayoutColumnSizingExample.tsx | 18 + .../layout/examples/LayoutFormGridExample.tsx | 15 + .../layout/examples/LayoutGutters2Example.tsx | 45 + .../layout/examples/LayoutGuttersExample.tsx | 15 + .../examples/LayoutHorizontalFormExample.tsx | 61 + ...LayoutHorizontalFormLabelSizingExample.tsx | 43 + .../examples/LayoutInlineFormsExample.tsx | 50 + packages/docs/content/forms/layout/index.mdx | 72 + packages/docs/content/forms/radio.mdx | 103 -- packages/docs/content/forms/radio/api.mdx | 12 + .../radio/examples/RadioDisabledExample.tsx | 24 + .../forms/radio/examples/RadioExample.tsx | 22 + .../radio/examples/RadioInlineExample.tsx | 34 + .../radio/examples/RadioReverseExample.tsx | 18 + .../radio/examples/RadioStackedExample.tsx | 32 + .../examples/RadioToggleButtonsExample.tsx | 43 + ...adioToggleButtonsOutlinedStylesExample.tsx | 26 + .../examples/RadioWithoutLabelsExample.tsx | 6 + packages/docs/content/forms/radio/index.mdx | 63 + packages/docs/content/forms/radio/styling.mdx | 10 + packages/docs/content/forms/range/api.mdx | 12 + .../examples/FormRangeDisabledExample.tsx | 6 + .../forms/range/examples/FormRangeExample.tsx | 6 + .../examples/FormRangeMinAndMaxExample.tsx | 6 + .../range/examples/FormRangeStepsExample.tsx | 6 + .../forms/{range.mdx => range/index.mdx} | 31 +- packages/docs/content/forms/range/styling.mdx | 10 + packages/docs/content/forms/select.mdx | 109 -- packages/docs/content/forms/select/api.mdx | 27 + .../examples/FormSelectDisabledExample.tsx | 16 + .../select/examples/FormSelectExample.tsx | 16 + .../examples/FormSelectSizing2Example.tsx | 13 + .../examples/FormSelectSizing3Example.tsx | 13 + .../examples/FormSelectSizingExample.tsx | 21 + packages/docs/content/forms/select/index.mdx | 51 + .../docs/content/forms/select/styling.mdx | 10 + packages/docs/content/forms/switch.mdx | 59 - packages/docs/content/forms/switch/api.mdx | 12 + .../switch/examples/FormSwitchExample.tsx | 22 + .../examples/FormSwitchReverseExample.tsx | 17 + .../examples/FormSwitchSizingExample.tsx | 16 + packages/docs/content/forms/switch/index.mdx | 35 + .../docs/content/forms/switch/styling.mdx | 10 + packages/docs/content/forms/textarea.mdx | 99 -- packages/docs/content/forms/textarea/api.mdx | 27 + .../examples/FormTextareaDisabledExample.tsx | 13 + .../textarea/examples/FormTextareaExample.tsx | 15 + .../examples/FormTextareaReadonlyExample.tsx | 13 + .../docs/content/forms/textarea/index.mdx | 41 + .../docs/content/forms/textarea/styling.mdx | 18 + packages/docs/content/forms/validation.mdx | 697 -------- .../ValidationBrowserDefaultsExample.tsx | 75 + .../examples/ValidationCustomExample.tsx | 103 ++ .../validation/examples/ValidationExample.jsx | 115 ++ .../validation/examples/ValidationExample.tsx | 115 ++ .../ValidationSupportedElementsExample.tsx | 69 + .../examples/ValidationTooltipsExample.jsx | 112 ++ .../examples/ValidationTooltipsExample.tsx | 112 ++ .../docs/content/forms/validation/index.mdx | 47 + .../docs/content/forms/validation/styling.mdx | 22 + 663 files changed, 18073 insertions(+), 15206 deletions(-) delete mode 100644 packages/docs/content/components/alert.mdx create mode 100644 packages/docs/content/components/alert/api.mdx create mode 100644 packages/docs/content/components/alert/examples/AlertAdditionalContentExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertDismissingExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertIcons1Example.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertIcons2Example.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertLinkColorExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertLiveExample.tsx create mode 100644 packages/docs/content/components/alert/examples/AlertSolidExample.tsx create mode 100644 packages/docs/content/components/alert/index.mdx create mode 100644 packages/docs/content/components/alert/styling.mdx delete mode 100644 packages/docs/content/components/avatar.mdx create mode 100644 packages/docs/content/components/avatar/api.mdx create mode 100644 packages/docs/content/components/avatar/examples/AvatarIcon.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarImage.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarLetter.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarRounded.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarSizes.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarSquare.tsx create mode 100644 packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx create mode 100644 packages/docs/content/components/avatar/index.mdx create mode 100644 packages/docs/content/components/avatar/styling.mdx delete mode 100644 packages/docs/content/components/badge.mdx create mode 100644 packages/docs/content/components/badge/api.mdx create mode 100644 packages/docs/content/components/badge/examples/Badge2Example.tsx create mode 100644 packages/docs/content/components/badge/examples/Badge3Example.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgeExample.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePillExample.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx create mode 100644 packages/docs/content/components/badge/examples/BadgePositionedExample.tsx create mode 100644 packages/docs/content/components/badge/index.mdx create mode 100644 packages/docs/content/components/badge/styling.mdx delete mode 100644 packages/docs/content/components/breadcrumb.mdx create mode 100644 packages/docs/content/components/breadcrumb/api.mdx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx create mode 100644 packages/docs/content/components/breadcrumb/examples/BreadcrumbExample.tsx create mode 100644 packages/docs/content/components/breadcrumb/index.mdx create mode 100644 packages/docs/content/components/breadcrumb/styling.mdx delete mode 100644 packages/docs/content/components/button-group.mdx create mode 100644 packages/docs/content/components/button-group/api.mdx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadio2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupCheckboxAndRadioExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupNestingExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupSizingExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonGroupVerticalExample.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonToolbar2Example.tsx create mode 100644 packages/docs/content/components/button-group/examples/ButtonToolbarExample.tsx create mode 100644 packages/docs/content/components/button-group/index.mdx delete mode 100644 packages/docs/content/components/button.mdx create mode 100644 packages/docs/content/components/button/api.mdx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock3Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlock4Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonBlockExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonComponentsExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonDisabledExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonGhostExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonOutlineExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonShapePillExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonShapeSquareExample.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes2Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes3Example.jsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizes3Example.tsx create mode 100644 packages/docs/content/components/button/examples/ButtonSizesExample.tsx create mode 100644 packages/docs/content/components/button/index.mdx create mode 100644 packages/docs/content/components/button/styling.mdx delete mode 100644 packages/docs/content/components/callout.mdx create mode 100644 packages/docs/content/components/callout/api.mdx create mode 100644 packages/docs/content/components/callout/examples/CalloutExample.tsx create mode 100644 packages/docs/content/components/callout/index.mdx create mode 100644 packages/docs/content/components/callout/styling.mdx delete mode 100644 packages/docs/content/components/card.mdx create mode 100644 packages/docs/content/components/card/api.mdx create mode 100644 packages/docs/content/components/card/examples/CardBodyExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardGrid2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardGrid3Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardGrid4Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardGridExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardGroups2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardGroupsExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardHeader2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardHeader3Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardHeaderAndFooterExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardHeaderExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardImageCapsExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardImagesExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardListGroups2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardListGroups3Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardListGroupsExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardNavigation2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardNavigationExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardSizing2Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardSizing3Example.tsx create mode 100644 packages/docs/content/components/card/examples/CardSizingExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardStylesBackgroundAndColorExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardStylesBorderExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardStylesTopBorderExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardTextAlignmentExample.tsx create mode 100644 packages/docs/content/components/card/examples/CardTitleExample.tsx create mode 100644 packages/docs/content/components/card/index.mdx create mode 100644 packages/docs/content/components/card/styling.mdx delete mode 100644 packages/docs/content/components/carousel.mdx create mode 100644 packages/docs/content/components/carousel/api.mdx create mode 100644 packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx create mode 100644 packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx create mode 100644 packages/docs/content/components/carousel/index.mdx create mode 100644 packages/docs/content/components/carousel/styling.mdx delete mode 100644 packages/docs/content/components/chart.mdx create mode 100644 packages/docs/content/components/chart/api.mdx create mode 100644 packages/docs/content/components/chart/examples/ChartBarExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartBarExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartBubbleExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartBubbleExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartDoughnutAndPieExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartLineExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartLineExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartPolarAreaExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartPolarAreaExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartRadarExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartRadarExample.tsx create mode 100644 packages/docs/content/components/chart/examples/ChartScatterExample.jsx create mode 100644 packages/docs/content/components/chart/examples/ChartScatterExample.tsx create mode 100644 packages/docs/content/components/chart/index.mdx create mode 100644 packages/docs/content/components/close-button/api.mdx create mode 100644 packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx create mode 100644 packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx create mode 100644 packages/docs/content/components/close-button/examples/CloseButtonExample.tsx rename packages/docs/content/components/{close-button.mdx => close-button/index.mdx} (64%) delete mode 100644 packages/docs/content/components/collapse.mdx create mode 100644 packages/docs/content/components/collapse/api.mdx create mode 100644 packages/docs/content/components/collapse/examples/CollapseExample.tsx create mode 100644 packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx create mode 100644 packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx create mode 100644 packages/docs/content/components/collapse/index.mdx delete mode 100644 packages/docs/content/components/dropdown.mdx create mode 100644 packages/docs/content/components/dropdown/api.mdx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownCenteredExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDark2Example.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDarkExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDropendExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDropstartExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDropupCenteredExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownDropupExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuAlignmentExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuContentFormsExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownMenuItemsExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignment2Example.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownResponsiveAlignmentExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSingleButton3Example.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSizingLargeExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSizingSmallExample.tsx create mode 100644 packages/docs/content/components/dropdown/examples/DropdownSplitButtonExample.tsx create mode 100644 packages/docs/content/components/dropdown/index.mdx create mode 100644 packages/docs/content/components/dropdown/styling.mdx delete mode 100644 packages/docs/content/components/image.mdx create mode 100644 packages/docs/content/components/image/api.mdx create mode 100644 packages/docs/content/components/image/examples/ImageAligning2Example.tsx create mode 100644 packages/docs/content/components/image/examples/ImageAligning3Example.tsx create mode 100644 packages/docs/content/components/image/examples/ImageAligningExample.tsx create mode 100644 packages/docs/content/components/image/examples/ImageResponsiveExample.tsx create mode 100644 packages/docs/content/components/image/examples/ImageThumbnailExample.tsx create mode 100644 packages/docs/content/components/image/index.mdx delete mode 100644 packages/docs/content/components/list-group.mdx create mode 100644 packages/docs/content/components/list-group/api.mdx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios2Example.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadios3Example.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupCheckboxesAndRadiosExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupContextualClasses2Example.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupCustomContentExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.jsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupHorizontalExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupLinksAndButtons2Example.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupLinksAndButtonsExample.tsx create mode 100644 packages/docs/content/components/list-group/examples/ListGroupWithBadgesExample.tsx create mode 100644 packages/docs/content/components/list-group/index.mdx create mode 100644 packages/docs/content/components/list-group/styling.mdx delete mode 100644 packages/docs/content/components/modal.mdx create mode 100644 packages/docs/content/components/modal/api.mdx create mode 100644 packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx create mode 100644 packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx create mode 100644 packages/docs/content/components/modal/index.mdx create mode 100644 packages/docs/content/components/modal/styling.mdx delete mode 100644 packages/docs/content/components/navbar.mdx create mode 100644 packages/docs/content/components/navbar/api.mdx create mode 100644 packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarNavExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx create mode 100644 packages/docs/content/components/navbar/examples/NavbarText.tsx create mode 100644 packages/docs/content/components/navbar/index.mdx create mode 100644 packages/docs/content/components/navbar/styling.mdx delete mode 100644 packages/docs/content/components/navs-tabs.mdx create mode 100644 packages/docs/content/components/navs-tabs/api.mdx create mode 100644 packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavFillAndJustify2Example.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignment2Example.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavHorizontalAlignmentExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavPillsWithDropdownExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavTabPanes2Example.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavTabPanesExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavTabsWithDropdownExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx create mode 100644 packages/docs/content/components/navs-tabs/index.mdx create mode 100644 packages/docs/content/components/navs-tabs/styling.mdx delete mode 100644 packages/docs/content/components/offcanvas.mdx create mode 100644 packages/docs/content/components/offcanvas/api.mdx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingAndBackdropExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasBodyScrollingExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasDarkExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasLiveExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasPlacementBottomExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasPlacementRightExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasPlacementTopExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasResponsiveExample.tsx create mode 100644 packages/docs/content/components/offcanvas/examples/OffcanvasStaticBackdropExample.tsx create mode 100644 packages/docs/content/components/offcanvas/index.mdx create mode 100644 packages/docs/content/components/offcanvas/styling.mdx delete mode 100644 packages/docs/content/components/pagination.mdx create mode 100644 packages/docs/content/components/pagination/api.mdx create mode 100644 packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationDisabledAndActiveExample.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationExample.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx create mode 100644 packages/docs/content/components/pagination/examples/PaginationWorkingWithIconsExample.tsx create mode 100644 packages/docs/content/components/pagination/index.mdx create mode 100644 packages/docs/content/components/pagination/styling.mdx delete mode 100644 packages/docs/content/components/placeholder.mdx create mode 100644 packages/docs/content/components/placeholder/api.mdx create mode 100644 packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx create mode 100644 packages/docs/content/components/placeholder/examples/PlaceholderAnimationExample.tsx create mode 100644 packages/docs/content/components/placeholder/examples/PlaceholderColorExample.tsx create mode 100644 packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx create mode 100644 packages/docs/content/components/placeholder/examples/PlaceholderSizingExample.tsx create mode 100644 packages/docs/content/components/placeholder/examples/PlaceholderWidthExample.tsx create mode 100644 packages/docs/content/components/placeholder/index.mdx create mode 100644 packages/docs/content/components/placeholder/styling.mdx delete mode 100644 packages/docs/content/components/popover.mdx create mode 100644 packages/docs/content/components/popover/api.mdx create mode 100644 packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.jsx create mode 100644 packages/docs/content/components/popover/examples/PopoverCustomPopoversExample.tsx create mode 100644 packages/docs/content/components/popover/examples/PopoverDisabledElementsExample.tsx create mode 100644 packages/docs/content/components/popover/examples/PopoverDismissExample.tsx create mode 100644 packages/docs/content/components/popover/examples/PopoverFourDirectionsExample.tsx create mode 100644 packages/docs/content/components/popover/examples/PopoverLiveExample.tsx create mode 100644 packages/docs/content/components/popover/index.mdx create mode 100644 packages/docs/content/components/popover/styling.mdx create mode 100644 packages/docs/content/components/progress/api.mdx create mode 100644 packages/docs/content/components/progress/examples/ProgressAnimatedStripedExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressBackgrounds2Example.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressBackgroundsExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressHeight2Example.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressHeightExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressLabels2Example.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressLabelsExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressMultipleBarsExample.tsx create mode 100644 packages/docs/content/components/progress/examples/ProgressStripedExample.tsx rename packages/docs/content/components/{progress.mdx => progress/index.mdx} (54%) create mode 100644 packages/docs/content/components/progress/styling.mdx delete mode 100644 packages/docs/content/components/sidebar.mdx create mode 100644 packages/docs/content/components/sidebar/api.mdx create mode 100644 packages/docs/content/components/sidebar/examples/SidebarDarkExample.tsx create mode 100644 packages/docs/content/components/sidebar/examples/SidebarExample.tsx create mode 100644 packages/docs/content/components/sidebar/examples/SidebarNarrowExample.tsx create mode 100644 packages/docs/content/components/sidebar/examples/SidebarUnfoldableExample.tsx create mode 100644 packages/docs/content/components/sidebar/index.mdx create mode 100644 packages/docs/content/components/sidebar/styling.mdx delete mode 100644 packages/docs/content/components/spinner.mdx create mode 100644 packages/docs/content/components/spinner/api.mdx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderColorsExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderMarginExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlex2Example.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFlexExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderPlacementFloatsExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerBorderPlacementTextAlignExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerButtons2Example.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerButtonsExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerGrowColorsExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerGrowExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerSizeCustomExample.tsx create mode 100644 packages/docs/content/components/spinner/examples/SpinnerSizeSmallExample.tsx create mode 100644 packages/docs/content/components/spinner/index.mdx create mode 100644 packages/docs/content/components/spinner/styling.mdx create mode 100644 packages/docs/content/components/table/api.mdx rename packages/docs/content/components/{table.mdx => table/index.mdx} (98%) create mode 100644 packages/docs/content/components/table/styling.mdx delete mode 100644 packages/docs/content/components/tabs.mdx create mode 100644 packages/docs/content/components/tabs/api.mdx create mode 100644 packages/docs/content/components/tabs/examples/TabsExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsPillsExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsUnderlineBorderExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsUnderlineExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsUnstyledExample.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustify2Example.tsx create mode 100644 packages/docs/content/components/tabs/examples/TabsUnstyledFillAndJustifyExample.tsx create mode 100644 packages/docs/content/components/tabs/index.mdx create mode 100644 packages/docs/content/components/tabs/styling.mdx delete mode 100644 packages/docs/content/components/toast.mdx create mode 100644 packages/docs/content/components/toast/api.mdx create mode 100644 packages/docs/content/components/toast/examples/ToastColorSchemesExample.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastCustomContent2Example.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastCustomContentExample.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastExample.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastLiveExample.jsx create mode 100644 packages/docs/content/components/toast/examples/ToastLiveExample.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastStackingExample.tsx create mode 100644 packages/docs/content/components/toast/examples/ToastTranslucentExample.tsx create mode 100644 packages/docs/content/components/toast/index.mdx create mode 100644 packages/docs/content/components/toast/styling.mdx delete mode 100644 packages/docs/content/components/tooltip.mdx create mode 100644 packages/docs/content/components/tooltip/api.mdx create mode 100644 packages/docs/content/components/tooltip/examples/TooltipCustomExample.jsx create mode 100644 packages/docs/content/components/tooltip/examples/TooltipCustomExample.tsx create mode 100644 packages/docs/content/components/tooltip/examples/TooltipDirectionsExample.tsx create mode 100644 packages/docs/content/components/tooltip/examples/TooltipDisabledElementsExample.tsx create mode 100644 packages/docs/content/components/tooltip/examples/TooltipOnLinksExample.tsx create mode 100644 packages/docs/content/components/tooltip/index.mdx create mode 100644 packages/docs/content/components/tooltip/styling.mdx delete mode 100644 packages/docs/content/components/widgets.mdx create mode 100644 packages/docs/content/components/widgets/api.mdx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsAExample.tsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsBExample.tsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsCExample.tsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsDExample.jsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsDExample.tsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsEExample.tsx create mode 100644 packages/docs/content/components/widgets/examples/WidgetStatsFExample.tsx create mode 100644 packages/docs/content/components/widgets/index.mdx delete mode 100644 packages/docs/content/forms/checkbox.mdx create mode 100644 packages/docs/content/forms/checkbox/api.mdx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxDisabledExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxIndeterminateExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxInlineExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxReverseExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxStackedExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxToggleButtonsOutlinedStylesExample.tsx create mode 100644 packages/docs/content/forms/checkbox/examples/CheckboxWithoutLabelsExample.tsx create mode 100644 packages/docs/content/forms/checkbox/index.mdx create mode 100644 packages/docs/content/forms/checkbox/styling.mdx delete mode 100644 packages/docs/content/forms/floating-labels.mdx create mode 100644 packages/docs/content/forms/floating-labels/api.mdx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabels2Example.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsLayoutExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsSelectExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextarea2Example.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsTextareaExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/examples/FloatingLabelsValidationExample.tsx create mode 100644 packages/docs/content/forms/floating-labels/index.mdx create mode 100644 packages/docs/content/forms/floating-labels/styling.mdx delete mode 100644 packages/docs/content/forms/input-group.mdx create mode 100644 packages/docs/content/forms/input-group/api.mdx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupButtonAddonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupButtonsWithDropdownsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCheckboxesAndRadiosExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCustomFileInputExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupCustomSelectExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupMultipleAddonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupMultipleInputsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupSegmentedButtonsExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupSizingExample.tsx create mode 100644 packages/docs/content/forms/input-group/examples/InputGroupWrappingExample.tsx create mode 100644 packages/docs/content/forms/input-group/index.mdx create mode 100644 packages/docs/content/forms/input-group/styling.mdx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskCreditCardExample.tsx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskExample.tsx create mode 100644 packages/docs/content/forms/input-mask/examples/InputMaskPhoneExample.tsx rename packages/docs/content/forms/{input-mask.mdx => input-mask/index.mdx} (57%) delete mode 100644 packages/docs/content/forms/input.mdx create mode 100644 packages/docs/content/forms/input/api.mdx create mode 100644 packages/docs/content/forms/input/examples/FormInputColorExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputCustomClassNamesExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputDisabledExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputFileExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyPlainText2Example.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputReadonlyPlainTextExample.tsx create mode 100644 packages/docs/content/forms/input/examples/FormInputSizingExample.tsx create mode 100644 packages/docs/content/forms/input/index.mdx create mode 100644 packages/docs/content/forms/input/styling.mdx delete mode 100644 packages/docs/content/forms/layout.mdx create mode 100644 packages/docs/content/forms/layout/examples/LayoutAutoSizing2Example.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutAutoSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutColumnSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutFormGridExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutGutters2Example.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutGuttersExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutHorizontalFormExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutHorizontalFormLabelSizingExample.tsx create mode 100644 packages/docs/content/forms/layout/examples/LayoutInlineFormsExample.tsx create mode 100644 packages/docs/content/forms/layout/index.mdx delete mode 100644 packages/docs/content/forms/radio.mdx create mode 100644 packages/docs/content/forms/radio/api.mdx create mode 100644 packages/docs/content/forms/radio/examples/RadioDisabledExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioInlineExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioReverseExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioStackedExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioToggleButtonsExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioToggleButtonsOutlinedStylesExample.tsx create mode 100644 packages/docs/content/forms/radio/examples/RadioWithoutLabelsExample.tsx create mode 100644 packages/docs/content/forms/radio/index.mdx create mode 100644 packages/docs/content/forms/radio/styling.mdx create mode 100644 packages/docs/content/forms/range/api.mdx create mode 100644 packages/docs/content/forms/range/examples/FormRangeDisabledExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeMinAndMaxExample.tsx create mode 100644 packages/docs/content/forms/range/examples/FormRangeStepsExample.tsx rename packages/docs/content/forms/{range.mdx => range/index.mdx} (62%) create mode 100644 packages/docs/content/forms/range/styling.mdx delete mode 100644 packages/docs/content/forms/select.mdx create mode 100644 packages/docs/content/forms/select/api.mdx create mode 100644 packages/docs/content/forms/select/examples/FormSelectDisabledExample.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectExample.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizing2Example.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizing3Example.tsx create mode 100644 packages/docs/content/forms/select/examples/FormSelectSizingExample.tsx create mode 100644 packages/docs/content/forms/select/index.mdx create mode 100644 packages/docs/content/forms/select/styling.mdx delete mode 100644 packages/docs/content/forms/switch.mdx create mode 100644 packages/docs/content/forms/switch/api.mdx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchExample.tsx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchReverseExample.tsx create mode 100644 packages/docs/content/forms/switch/examples/FormSwitchSizingExample.tsx create mode 100644 packages/docs/content/forms/switch/index.mdx create mode 100644 packages/docs/content/forms/switch/styling.mdx delete mode 100644 packages/docs/content/forms/textarea.mdx create mode 100644 packages/docs/content/forms/textarea/api.mdx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaDisabledExample.tsx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaExample.tsx create mode 100644 packages/docs/content/forms/textarea/examples/FormTextareaReadonlyExample.tsx create mode 100644 packages/docs/content/forms/textarea/index.mdx create mode 100644 packages/docs/content/forms/textarea/styling.mdx delete mode 100644 packages/docs/content/forms/validation.mdx create mode 100644 packages/docs/content/forms/validation/examples/ValidationBrowserDefaultsExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationCustomExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationExample.jsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationSupportedElementsExample.tsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationTooltipsExample.jsx create mode 100644 packages/docs/content/forms/validation/examples/ValidationTooltipsExample.tsx create mode 100644 packages/docs/content/forms/validation/index.mdx create mode 100644 packages/docs/content/forms/validation/styling.mdx diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx index dfff727c..97e88506 100644 --- a/packages/docs/content/api/CAccordion.api.mdx +++ b/packages/docs/content/api/CAccordion.api.mdx @@ -21,7 +21,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
- + @@ -29,7 +33,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' - + @@ -37,7 +45,10 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' - + @@ -45,11 +56,19 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' - +...`} /> + @@ -57,7 +76,11 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion' - +
customClassNames Class Name Description
{className.className} .{className.value} {`string`}, {`number`}
Determines which accordion item is currently active (expanded) by default.
Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item.
...`} />		 +

Determines which accordion item is currently active (expanded) by default.
+Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item.

+ ...`} /> +
alwaysOpen#{`boolean`}
When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously.
This is ideal for scenarios where users need to view multiple sections at once without collapsing others.
...`} />		 +

When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously.
+This is ideal for scenarios where users need to view multiple sections at once without collapsing others.

+ ...`} /> +
className#{`string`}
Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
...`} />		 +

Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.

+ ...`} /> +
customClassNames#{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}
Allows overriding or extending the default CSS class names used in the component.

- {`ACCORDION`}: Base class for the accordion component.
- {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout.

Use this prop to customize the styles of specific parts of the accordion.
+

Allows overriding or extending the default CSS class names used in the component.

+
    +
  • {`ACCORDION`}: Base class for the accordion component.
    • +
  • {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout.
    • +
+

Use this prop to customize the styles of specific parts of the accordion.

+ ...`} />
flush#{`boolean`}
When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container,
creating a seamless and modern look ideal for minimalist designs.
...`} />		 +

When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container,
+creating a seamless and modern look ideal for minimalist designs.

+ ...`} /> +
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx index c280bef1..b6eb9609 100644 --- a/packages/docs/content/api/CAccordionBody.api.mdx +++ b/packages/docs/content/api/CAccordionBody.api.mdx @@ -21,7 +21,10 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod {`string`} - Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
...`} /> + +

Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.

+ ...`} /> + customClassNames# @@ -29,11 +32,20 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod {`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion body component.
Accepts a partial object matching the shape of {`ACCORDION_BODY_CLASS_NAMES`}, which includes:

- {`ACCORDION_COLLAPSE`}: Base class for the collapse container in the accordion body.
- {`ACCORDION_BODY`}: Base class for the main content container inside the accordion body.

Use this prop to customize the styles of specific parts of the accordion body.
+

Allows overriding or extending the default CSS class names used in the accordion body component.
+Accepts a partial object matching the shape of {`ACCORDION_BODY_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_COLLAPSE`}: Base class for the collapse container in the accordion body.
    • +
  • {`ACCORDION_BODY`}: Base class for the main content container inside the accordion body.
    • +
+

Use this prop to customize the styles of specific parts of the accordion body.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx index c659fd49..b9cc8d5a 100644 --- a/packages/docs/content/api/CAccordionButton.api.mdx +++ b/packages/docs/content/api/CAccordionButton.api.mdx @@ -21,7 +21,9 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB {`string`} - Styles the clickable element in the accordion header. + +

Styles the clickable element in the accordion header.

+ customClassNames# @@ -29,10 +31,18 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB {`Partial\<{ ACCORDION_BUTTON: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion button component.
Accepts a partial object matching the shape of {`CLASS_NAMES`}, which includes:

- {`ACCORDION_BUTTON`}: Base class for the accordion button.

Use this prop to customize the styles of the accordion button.
+

Allows overriding or extending the default CSS class names used in the accordion button component.
+Accepts a partial object matching the shape of {`CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_BUTTON`}: Base class for the accordion button.
    • +
+

Use this prop to customize the styles of the accordion button.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx index c158599b..ad7cc0ed 100644 --- a/packages/docs/content/api/CAccordionHeader.api.mdx +++ b/packages/docs/content/api/CAccordionHeader.api.mdx @@ -21,7 +21,9 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customClassNames# @@ -29,11 +31,20 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH {`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion header component.
Accepts a partial object matching the shape of {`ACCORDION_HEADER_CLASS_NAMES`}, which includes:

- {`ACCORDION_HEADER`}: Base class for the accordion header container.
- {`ACCORDION_BUTTON`}: Class applied to the button within the accordion header.

Use this prop to customize the styles of specific parts of the accordion header.
+

Allows overriding or extending the default CSS class names used in the accordion header component.
+Accepts a partial object matching the shape of {`ACCORDION_HEADER_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_HEADER`}: Base class for the accordion header container.
    • +
  • {`ACCORDION_BUTTON`}: Class applied to the button within the accordion header.
    • +
+

Use this prop to customize the styles of specific parts of the accordion header.

+ ...`} /> +...`} /> + diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx index 1eb6b121..49049a00 100644 --- a/packages/docs/content/api/CAccordionItem.api.mdx +++ b/packages/docs/content/api/CAccordionItem.api.mdx @@ -21,7 +21,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customClassNames# @@ -29,10 +31,18 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`Partial\<{ ACCORDION_ITEM: string; }>`} - Allows overriding or extending the default CSS class names used in the accordion item component.
Accepts a partial object matching the shape of {`ACCORDION_ITEM_CLASS_NAMES`}, which includes:

- {`ACCORDION_ITEM`}: Base class for an individual accordion item.

Use this prop to customize the styles of specific parts of the accordion item.
+

Allows overriding or extending the default CSS class names used in the accordion item component.
+Accepts a partial object matching the shape of {`ACCORDION_ITEM_CLASS_NAMES`}, which includes:

+
    +
  • {`ACCORDION_ITEM`}: Base class for an individual accordion item.
    • +
+

Use this prop to customize the styles of specific parts of the accordion item.

+ ...`} /> +...`} /> + itemKey# @@ -40,7 +50,9 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte {`string`}, {`number`} - Item key. + +

Item key.

+ diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx index f2f95bfd..85628676 100644 --- a/packages/docs/content/api/CAlert.api.mdx +++ b/packages/docs/content/api/CAlert.api.mdx @@ -21,7 +21,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ dismissible# @@ -37,7 +41,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`boolean`} - Optionally add a close button to alert and allow it to self dismiss. + +

Optionally add a close button to alert and allow it to self dismiss.

+ onClose# @@ -45,7 +51,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ variant# @@ -53,7 +61,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`string`} - Set the alert variant to a solid. + +

Set the alert variant to a solid.

+ visible# @@ -61,7 +71,9 @@ import CAlert from '@coreui/react/src/components/alert/CAlert' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index 0bb3f9dd..ff38b822 100644 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ b/packages/docs/content/api/CAlertHeading.api.mdx @@ -21,7 +21,9 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' {`string`} - A string of all className you want applied to the base component. + +

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 bbff921e..b7a05875 100644 --- a/packages/docs/content/api/CAlertLink.api.mdx +++ b/packages/docs/content/api/CAlertLink.api.mdx @@ -21,7 +21,9 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink' {`string`} - A string of all className you want applied to the base component. + +

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 e0a72315..92eaeec3 100644 --- a/packages/docs/content/api/CAvatar.api.mdx +++ b/packages/docs/content/api/CAvatar.api.mdx @@ -21,7 +21,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ shape# @@ -37,7 +41,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'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. + +

Select the shape of the component.

+ size# @@ -45,7 +51,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ src# @@ -53,7 +61,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`string`} - The src attribute for the img element. + +

The src attribute for the img element.

+ status# @@ -61,7 +71,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the status indicator to one of CoreUI’s themed colors. + +

Sets the color context of the status indicator to one of CoreUI’s themed colors.

+ textColor# @@ -69,7 +81,9 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar' {`'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. + +

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 a39d1537..468688cc 100644 --- a/packages/docs/content/api/CBackdrop.api.mdx +++ b/packages/docs/content/api/CBackdrop.api.mdx @@ -21,7 +21,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ visible# @@ -29,7 +31,9 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' {`boolean`} - Toggle the visibility of modal component. + +

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 67e73873..68c20286 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -21,7 +21,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ position# @@ -45,7 +51,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`"top-start"`}, {`"top-end"`}, {`"bottom-end"`}, {`"bottom-start"`} - Position badge in one of the corners of a link or button. + +

Position badge in one of the corners of a link or button.

+ shape# @@ -53,7 +61,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'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. + +

Select the shape of the component.

+ size# @@ -61,7 +71,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`"sm"`} - Size the component small. + +

Size the component small.

+ textBgColor#5.0.0+ @@ -69,7 +81,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'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. + +

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# @@ -77,7 +91,9 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' {`'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. + +

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 c6994e9e..2734c4d1 100644 --- a/packages/docs/content/api/CBreadcrumb.api.mdx +++ b/packages/docs/content/api/CBreadcrumb.api.mdx @@ -21,7 +21,9 @@ import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb' {`string`} - A string of all className you want applied to the component. + +

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 e48c7a5e..6da6d355 100644 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx @@ -21,7 +21,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as#5.4.0+ @@ -29,7 +31,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ href# @@ -45,7 +51,9 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb {`string`} - The {`href`} attribute for the inner {`\`} component. + +

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 eabef071..008c290d 100644 --- a/packages/docs/content/api/CButton.api.mdx +++ b/packages/docs/content/api/CButton.api.mdx @@ -21,7 +21,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "button")`}, {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -45,7 +51,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ disabled# @@ -53,7 +61,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -61,7 +71,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ role# @@ -69,7 +81,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`string`} - The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. + +

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

+ shape# @@ -77,7 +91,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`'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. + +

Select the shape of the component.

+ size# @@ -85,7 +101,9 @@ import CButton from '@coreui/react/src/components/button/CButton' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ type# @@ -93,7 +111,10 @@ import CButton from '@coreui/react/src/components/button/CButton' {`"button"`}, {`"submit"`}, {`"reset"`} - Specifies the type of button. Always specify the type attribute for the {`\
-able> - diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx index df4faa63..ef3bafe1 100644 --- a/packages/docs/content/api/CCharts.api.mdx +++ b/packages/docs/content/api/CCharts.api.mdx @@ -21,7 +21,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ customTooltips# @@ -29,7 +31,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - Enables custom html based tooltips instead of standard tooltips. + +

Enables custom html based tooltips instead of standard tooltips.

+ data# @@ -37,7 +41,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`ChartData\`}, {`((canvas: HTMLCanvasElement) => ChartData\<...>)`} - The data object that is passed into the Chart.js chart (more info). + +

The data object that is passed into the Chart.js chart (more info).

+ fallbackContent# @@ -45,7 +51,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`React.ReactNode`} - A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. + +

A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.

+ getDatasetAtEvent# @@ -53,7 +61,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(dataset: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. + +

Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.

+ getElementAtEvent# @@ -61,7 +71,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(element: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. + +

Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.

+ getElementsAtEvent# @@ -69,7 +81,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`(elements: InteractionItem[], event: React.MouseEvent\) => void`} - Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. + +

Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.

+ height# @@ -77,7 +91,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`number`} - Height attribute applied to the rendered canvas. + +

Height attribute applied to the rendered canvas.

+ id# @@ -85,7 +101,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`string`} - ID attribute applied to the rendered canvas. + +

ID attribute applied to the rendered canvas.

+ options# @@ -93,7 +111,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`_DeepPartialObject\ & ElementChartOptions\ & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`} - The options object that is passed into the Chart.js chart. + +

The options object that is passed into the Chart.js chart.

+ plugins# @@ -101,7 +121,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`Plugin\[]`} - The plugins array that is passed into the Chart.js chart (more info) + +

The plugins array that is passed into the Chart.js chart (more info)

+ redraw# @@ -109,7 +131,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - If true, will tear down and redraw chart on all updates. + +

If true, will tear down and redraw chart on all updates.

+ width# @@ -117,7 +141,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`number`} - Width attribute applied to the rendered canvas. + +

Width attribute applied to the rendered canvas.

+ wrapper# @@ -125,10 +151,10 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts' {`boolean`} - Put the chart into the wrapper div element. + +

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 46f59259..fba3e552 100644 --- a/packages/docs/content/api/CCloseButton.api.mdx +++ b/packages/docs/content/api/CCloseButton.api.mdx @@ -21,7 +21,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -29,7 +31,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`boolean`} - Invert the default color. + +

Invert the default color.

+ disabled# @@ -37,15 +41,19 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ - white#Deprecated undefined + white#Deprecated 5.0.0 undefined {`boolean`} - Change the default color to white. + +

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 a905bd79..90cba258 100644 --- a/packages/docs/content/api/CCol.api.mdx +++ b/packages/docs/content/api/CCol.api.mdx @@ -21,7 +21,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ lg# @@ -29,7 +31,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

The number of columns/offset/order on large devices (<1200px).

+ md# @@ -37,7 +41,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

The number of columns/offset/order on medium devices (<992px).

+ sm# @@ -45,7 +51,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

The number of columns/offset/order on small devices (<768px).

+ xl# @@ -53,7 +61,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

The number of columns/offset/order on X-Large devices (<1400px).

+ xs# @@ -61,7 +71,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

The number of columns/offset/order on extra small devices (<576px).

+ xxl# @@ -69,7 +81,9 @@ import CCol from '@coreui/react/src/components/grid/CCol' {`{ '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). + +

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 3fe185f9..997d55fd 100644 --- a/packages/docs/content/api/CCollapse.api.mdx +++ b/packages/docs/content/api/CCollapse.api.mdx @@ -21,7 +21,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ horizontal# @@ -29,7 +31,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`boolean`} - Set horizontal collapsing to transition the width instead of height. + +

Set horizontal collapsing to transition the width instead of height.

+ onHide# @@ -37,7 +41,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -45,7 +51,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ visible# @@ -53,7 +61,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx index 1b24cc9d..18508ee1 100644 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ b/packages/docs/content/api/CConditionalPortal.api.mdx @@ -21,7 +21,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/ {`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment | Element)`} - An HTML element or function that returns a single element, with {`document.body`} as the default. + +

An HTML element or function that returns a single element, with {`document.body`} as the default.

+ portal# @@ -29,7 +31,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/ {`boolean`} - Render some children into a different part of the DOM + +

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 23928448..d98c8ead 100644 --- a/packages/docs/content/api/CContainer.api.mdx +++ b/packages/docs/content/api/CContainer.api.mdx @@ -21,7 +21,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ fluid# @@ -29,7 +31,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide, spanning the entire width of the viewport. + +

Set container 100% wide, spanning the entire width of the viewport.

+ lg# @@ -37,7 +41,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until large breakpoint. + +

Set container 100% wide until large breakpoint.

+ md# @@ -45,7 +51,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until medium breakpoint. + +

Set container 100% wide until medium breakpoint.

+ sm# @@ -53,7 +61,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until small breakpoint. + +

Set container 100% wide until small breakpoint.

+ xl# @@ -61,7 +71,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until X-large breakpoint. + +

Set container 100% wide until X-large breakpoint.

+ xxl# @@ -69,7 +81,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer' {`boolean`} - Set container 100% wide until XX-large breakpoint. + +

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 ef5afd8f..5262dcc9 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -21,7 +21,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`'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. + +

Set aligment of dropdown menu.

+ as# @@ -29,7 +31,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ autoClose# @@ -37,7 +41,15 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`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. + +

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# @@ -45,7 +57,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ container#4.11.0+ @@ -53,7 +67,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`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`}. + +

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# @@ -61,7 +77,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Sets a darker color scheme to match a dark navbar. + +

Sets a darker color scheme to match a dark navbar.

+ direction# @@ -69,7 +87,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`"center"`}, {`"dropup"`}, {`"dropup-center"`}, {`"dropend"`}, {`"dropstart"`} - Sets a specified direction and location of the dropdown menu. + +

Sets a specified direction and location of the dropdown menu.

+ offset# @@ -77,7 +97,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`[number, number]`} - Offset of the dropdown menu relative to its target. + +

Offset of the dropdown menu relative to its target.

+ onHide#4.9.0+ @@ -85,7 +107,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -93,7 +117,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -101,7 +127,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`'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. + +

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# @@ -109,7 +137,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - If you want to disable dynamic positioning set this property to {`true`}. + +

If you want to disable dynamic positioning set this property to {`true`}.

+ portal#4.8.0+ @@ -117,7 +147,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Generates dropdown menu using createPortal. + +

Generates dropdown menu using createPortal.

+ variant# @@ -125,7 +157,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`"btn-group"`}, {`"dropdown"`}, {`"input-group"`}, {`"nav-item"`} - Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. + +

Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.

+ visible# @@ -133,7 +167,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' {`boolean`} - Toggle the visibility of dropdown menu component. + +

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 c364ba91..aaab8e37 100644 --- a/packages/docs/content/api/CDropdownDivider.api.mdx +++ b/packages/docs/content/api/CDropdownDivider.api.mdx @@ -21,7 +21,9 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv {`string`} - A string of all className you want applied to the component. + +

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 727ce4dc..7652f974 100644 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ b/packages/docs/content/api/CDropdownHeader.api.mdx @@ -21,7 +21,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead {`string`} - A string of all className you want applied to the component. + +

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 210289c3..7bc03b89 100644 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ b/packages/docs/content/api/CDropdownItem.api.mdx @@ -21,7 +21,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

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 77b6a09b..074f67b0 100644 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx @@ -21,7 +21,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI {`string`} - A string of all className you want applied to the component. + +

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 659abcb3..cef37751 100644 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ b/packages/docs/content/api/CDropdownMenu.api.mdx @@ -21,7 +21,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' {`string`} - A string of all className you want applied to the base component. + +

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 c8e5832f..cd887421 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -21,7 +21,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`ElementType`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ caret# @@ -37,7 +41,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Enables pseudo element caret on toggler. + +

Enables pseudo element caret on toggler.

+ className# @@ -45,7 +51,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -53,7 +61,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ custom# @@ -61,7 +71,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Create a custom toggler which accepts any content. + +

Create a custom toggler which accepts any content.

+ disabled# @@ -69,7 +81,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -77,7 +91,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ navLink#5.0.0+ @@ -85,7 +101,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`boolean`} - If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button. + +

If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.

+ role# @@ -93,7 +111,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`string`} - The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. + +

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

+ shape# @@ -101,7 +121,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'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. + +

Select the shape of the component.

+ size# @@ -109,7 +131,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ split# @@ -117,7 +141,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`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. + +

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# @@ -125,7 +151,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`'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. + +

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

+ variant# @@ -133,7 +161,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg {`"outline"`}, {`"ghost"`} - Set the button variant to an outlined button or a ghost button. + +

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 91d28698..d58c8223 100644 --- a/packages/docs/content/api/CFooter.api.mdx +++ b/packages/docs/content/api/CFooter.api.mdx @@ -21,7 +21,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ position# @@ -29,7 +31,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter' {`"fixed"`}, {`"sticky"`} - Place footer in non-static positions. + +

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 e1fca1e0..076a0e96 100644 --- a/packages/docs/content/api/CForm.api.mdx +++ b/packages/docs/content/api/CForm.api.mdx @@ -21,7 +21,9 @@ import CForm from '@coreui/react/src/components/form/CForm' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ validated# @@ -29,7 +31,9 @@ import CForm from '@coreui/react/src/components/form/CForm' {`boolean`} - Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component. + +

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 59fcbea7..9427f66f 100644 --- a/packages/docs/content/api/CFormCheck.api.mdx +++ b/packages/docs/content/api/CFormCheck.api.mdx @@ -21,7 +21,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ButtonObject`} - Create button-like checkboxes and radio buttons. + +

Create button-like checkboxes and radio buttons.

+ className# @@ -29,7 +31,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ feedback#4.2.0+ @@ -37,7 +41,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -45,7 +51,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -53,7 +61,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingLabel#4.2.0+ @@ -61,7 +71,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ hitArea# @@ -69,7 +81,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`"full"`} - Sets hit area to the full area of the component. + +

Sets hit area to the full area of the component.

+ id# @@ -77,7 +91,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`string`} - The id global attribute defines an identifier (ID) that must be unique in the whole document. + +

The id global attribute defines an identifier (ID) that must be unique in the whole document.

+ indeterminate# @@ -85,7 +101,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Input Checkbox indeterminate Property. + +

Input Checkbox indeterminate Property.

+ inline# @@ -93,7 +111,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Group checkboxes or radios on the same horizontal row. + +

Group checkboxes or radios on the same horizontal row.

+ invalid# @@ -101,7 +121,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label# @@ -109,7 +131,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`ReactNode`} - The element represents a caption for a component. + +

The element represents a caption for a component.

+ reverse# @@ -117,7 +141,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Put checkboxes or radios on the opposite side. + +

Put checkboxes or radios on the opposite side.

+ tooltipFeedback#4.2.0+ @@ -125,7 +151,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ type# @@ -133,7 +161,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`"checkbox"`}, {`"radio"`} - Specifies the type of component. + +

Specifies the type of component.

+ valid# @@ -141,7 +171,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck' {`boolean`} - Set component validation state to valid. + +

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 be49958a..e2fdfe60 100644 --- a/packages/docs/content/api/CFormControlValidation.api.mdx +++ b/packages/docs/content/api/CFormControlValidation.api.mdx @@ -21,7 +21,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -29,7 +31,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -37,7 +41,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingLabel#4.2.0+ @@ -45,7 +51,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ invalid# @@ -53,7 +61,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ tooltipFeedback#4.2.0+ @@ -61,7 +71,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ valid# @@ -69,7 +81,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr {`boolean`} - Set component validation state to valid. + +

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 49ab36b1..f0a44eaa 100644 --- a/packages/docs/content/api/CFormControlWrapper.api.mdx +++ b/packages/docs/content/api/CFormControlWrapper.api.mdx @@ -21,7 +21,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -29,7 +31,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -37,7 +41,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingClassName#4.5.0+ @@ -45,7 +51,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -53,7 +61,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ invalid# @@ -61,7 +71,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label#4.2.0+ @@ -69,7 +81,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Add a caption for a component. + +

Add a caption for a component.

+ text#4.2.0+ @@ -77,7 +91,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`ReactNode`} - Add helper text to the component. + +

Add helper text to the component.

+ tooltipFeedback#4.2.0+ @@ -85,7 +101,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ valid# @@ -93,7 +111,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW {`boolean`} - Set component validation state to valid. + +

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 0ee22dde..845d95e2 100644 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ b/packages/docs/content/api/CFormFeedback.api.mdx @@ -21,7 +21,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ invalid# @@ -37,7 +41,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes.

+ tooltip# @@ -45,7 +51,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - If your form layout allows it, you can display validation feedback in a styled tooltip. + +

If your form layout allows it, you can display validation feedback in a styled tooltip.

+ valid# @@ -53,7 +61,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' {`boolean`} - Set component validation state to valid. + +

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 0ba29670..c4539363 100644 --- a/packages/docs/content/api/CFormFloating.api.mdx +++ b/packages/docs/content/api/CFormFloating.api.mdx @@ -21,7 +21,9 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating' {`string`} - A string of all className you want applied to the component. + +

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 b69c5cfb..b3ed91a0 100644 --- a/packages/docs/content/api/CFormInput.api.mdx +++ b/packages/docs/content/api/CFormInput.api.mdx @@ -21,7 +21,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ delay# @@ -29,7 +31,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`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. + +

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# @@ -37,7 +41,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ feedback#4.2.0+ @@ -45,7 +51,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -53,7 +61,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -61,7 +71,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingClassName#4.5.0+ @@ -69,7 +81,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -77,7 +91,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ invalid# @@ -85,7 +101,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label#4.2.0+ @@ -93,7 +111,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Add a caption for a component. + +

Add a caption for a component.

+ onChange# @@ -101,7 +121,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes.

+ plainText# @@ -109,7 +131,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`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`}. + +

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# @@ -117,7 +141,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the component.

+ size# @@ -125,7 +151,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ text#4.2.0+ @@ -133,7 +161,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the component.

+ tooltipFeedback#4.2.0+ @@ -141,7 +171,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ type# @@ -149,7 +181,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`} - Specifies the type of component. + +

Specifies the type of component.

+ valid# @@ -157,7 +191,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`boolean`} - Set component validation state to valid. + +

Set component validation state to valid.

+ value# @@ -165,7 +201,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of component.

+ diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx index d6d7ab74..fe2e2470 100644 --- a/packages/docs/content/api/CFormLabel.api.mdx +++ b/packages/docs/content/api/CFormLabel.api.mdx @@ -21,7 +21,9 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ customClassName# @@ -29,7 +31,9 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel' {`string`} - A string of all className you want to be applied to the component, and override standard className value. + +

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 65ea10c7..b16951cb 100644 --- a/packages/docs/content/api/CFormRange.api.mdx +++ b/packages/docs/content/api/CFormRange.api.mdx @@ -21,7 +21,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -29,7 +31,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ label#4.2.0+ @@ -37,7 +41,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`ReactNode`} - Add a caption for a component. + +

Add a caption for a component.

+ max# @@ -45,7 +51,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the maximum value for the component. + +

Specifies the maximum value for the component.

+ min# @@ -53,7 +61,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the minimum value for the component. + +

Specifies the minimum value for the component.

+ onChange# @@ -61,7 +71,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes.

+ readOnly# @@ -69,7 +81,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the component.

+ step# @@ -77,7 +91,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`number`} - Specifies the interval between legal numbers in the component. + +

Specifies the interval between legal numbers in the component.

+ value# @@ -85,7 +101,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of component.

+ diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx index 105db26a..45a1295f 100644 --- a/packages/docs/content/api/CFormSelect.api.mdx +++ b/packages/docs/content/api/CFormSelect.api.mdx @@ -21,7 +21,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ feedback#4.2.0+ @@ -29,7 +31,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -37,7 +41,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -45,7 +51,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingClassName#4.5.0+ @@ -53,7 +61,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -61,7 +71,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ htmlSize# @@ -69,7 +81,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`number`} - Specifies the number of visible options in a drop-down list. + +

Specifies the number of visible options in a drop-down list.

+ invalid# @@ -77,7 +91,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label#4.2.0+ @@ -85,7 +101,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Add a caption for a component. + +

Add a caption for a component.

+ onChange# @@ -93,7 +111,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes.

+ options# @@ -101,7 +121,14 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`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']}`} + +

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# @@ -109,7 +136,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ text#4.2.0+ @@ -117,7 +146,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the component.

+ tooltipFeedback#4.2.0+ @@ -125,7 +156,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ valid# @@ -133,7 +166,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`boolean`} - Set component validation state to valid. + +

Set component validation state to valid.

+ value# @@ -141,7 +176,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of component.

+ diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx index 5c420a83..3dfe443d 100644 --- a/packages/docs/content/api/CFormSwitch.api.mdx +++ b/packages/docs/content/api/CFormSwitch.api.mdx @@ -21,7 +21,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ id# @@ -29,7 +31,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`string`} - The id global attribute defines an identifier (ID) that must be unique in the whole document. + +

The id global attribute defines an identifier (ID) that must be unique in the whole document.

+ invalid# @@ -37,7 +41,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label# @@ -45,7 +51,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`ReactNode`} - The element represents a caption for a component. + +

The element represents a caption for a component.

+ reverse# @@ -53,7 +61,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`boolean`} - Put switch on the opposite side. + +

Put switch on the opposite side.

+ size# @@ -61,7 +71,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`"lg"`}, {`"xl"`} - Size the component large or extra large. Works only with {`switch`}. + +

Size the component large or extra large. Works only with {`switch`}.

+ type# @@ -69,7 +81,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`"checkbox"`}, {`"radio"`} - Specifies the type of component. + +

Specifies the type of component.

+ valid# @@ -77,7 +91,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' {`boolean`} - Set component validation state to valid. + +

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 2f666b98..25e307a4 100644 --- a/packages/docs/content/api/CFormText.api.mdx +++ b/packages/docs/content/api/CFormText.api.mdx @@ -21,7 +21,9 @@ import CFormText from '@coreui/react/src/components/form/CFormText' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CFormText from '@coreui/react/src/components/form/CFormText' {`string`} - A string of all className you want applied to the component. + +

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 6f831f59..010175d7 100644 --- a/packages/docs/content/api/CFormTextarea.api.mdx +++ b/packages/docs/content/api/CFormTextarea.api.mdx @@ -21,7 +21,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -29,7 +31,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ feedback#4.2.0+ @@ -37,7 +41,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackInvalid#4.2.0+ @@ -45,7 +51,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable feedback. + +

Provide valuable, actionable feedback.

+ feedbackValid#4.2.0+ @@ -53,7 +61,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ floatingClassName#4.5.0+ @@ -61,7 +71,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`} - A string of all className you want applied to the floating label wrapper. + +

A string of all className you want applied to the floating label wrapper.

+ floatingLabel#4.2.0+ @@ -69,7 +81,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}. + +

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

+ invalid# @@ -77,7 +91,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Set component validation state to invalid. + +

Set component validation state to invalid.

+ label#4.2.0+ @@ -85,7 +101,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Add a caption for a component. + +

Add a caption for a component.

+ onChange# @@ -93,7 +111,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ChangeEventHandler\`} - Method called immediately after the {`value`} prop changes. + +

Method called immediately after the {`value`} prop changes.

+ plainText# @@ -101,7 +121,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`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`}. + +

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# @@ -109,7 +131,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Toggle the readonly state for the component. + +

Toggle the readonly state for the component.

+ text#4.2.0+ @@ -117,7 +141,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`ReactNode`} - Add helper text to the component. + +

Add helper text to the component.

+ tooltipFeedback#4.2.0+ @@ -125,7 +151,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Display validation feedback in a styled tooltip. + +

Display validation feedback in a styled tooltip.

+ valid# @@ -133,7 +161,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`boolean`} - Set component validation state to valid. + +

Set component validation state to valid.

+ value# @@ -141,7 +171,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' {`string`}, {`number`}, {`string[]`} - The {`value`} attribute of component. + +

The {`value`} attribute of component.

+ diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx index 692cee33..7670d5b2 100644 --- a/packages/docs/content/api/CHeader.api.mdx +++ b/packages/docs/content/api/CHeader.api.mdx @@ -21,7 +21,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ container# @@ -29,7 +31,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`} - Defines optional container wrapping children elements. + +

Defines optional container wrapping children elements.

+ position# @@ -37,7 +41,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader' {`"fixed"`}, {`"sticky"`} - Place header in non-static positions. + +

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 10369861..bd517329 100644 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ b/packages/docs/content/api/CHeaderBrand.api.mdx @@ -21,7 +21,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' {`string`} - A string of all className you want applied to the component. + +

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 ba8343d3..6916f36a 100644 --- a/packages/docs/content/api/CHeaderDivider.api.mdx +++ b/packages/docs/content/api/CHeaderDivider.api.mdx @@ -21,7 +21,9 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider' {`string`} - A string of all className you want applied to the component. + +

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 c9538fbe..e7592905 100644 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ b/packages/docs/content/api/CHeaderNav.api.mdx @@ -21,7 +21,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' {`string`} - A string of all className you want applied to the component. + +

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 7b2b049d..51fa4f6d 100644 --- a/packages/docs/content/api/CHeaderText.api.mdx +++ b/packages/docs/content/api/CHeaderText.api.mdx @@ -21,7 +21,9 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText' {`string`} - A string of all className you want applied to the base component. + +

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 9ed97ec8..b6318096 100644 --- a/packages/docs/content/api/CHeaderToggler.api.mdx +++ b/packages/docs/content/api/CHeaderToggler.api.mdx @@ -21,7 +21,9 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler' {`string`} - A string of all className you want applied to the base component. + +

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 922cde27..3b6f21b5 100644 --- a/packages/docs/content/api/CIcon.api.mdx +++ b/packages/docs/content/api/CIcon.api.mdx @@ -21,15 +21,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ - content#Deprecated undefined + content#Deprecated 3.0 undefined {`string`}, {`string[]`} - Use {`icon={...}`} instead of + +

Use {`icon={...}`} instead of

+ customClassName# @@ -37,7 +41,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`}, {`string[]`} - Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + +

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

+ height# @@ -45,7 +51,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`number`} - The height attribute defines the vertical length of an icon. + +

The height attribute defines the vertical length of an icon.

+ icon# @@ -53,15 +61,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`}, {`string[]`} - Name of the icon placed in React object or SVG content. + +

Name of the icon placed in React object or SVG content.

+ - name#Deprecated undefined + name#Deprecated 3.0 undefined {`string`} - Use {`icon="..."`} instead of + +

Use {`icon="..."`} instead of

+ size# @@ -69,7 +81,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`"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'. + +

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

+ title# @@ -77,7 +91,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - Title tag content. + +

Title tag content.

+ use# @@ -85,7 +101,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - If defined component will be rendered using 'use' tag. + +

If defined component will be rendered using 'use' tag.

+ viewBox# @@ -93,7 +111,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`string`} - The viewBox attribute defines the position and dimension of an SVG viewport. + +

The viewBox attribute defines the position and dimension of an SVG viewport.

+ width# @@ -101,7 +121,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' {`number`} - The width attribute defines the horizontal length of an icon. + +

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 66f86fd5..6b19c7ea 100644 --- a/packages/docs/content/api/CIconSvg.api.mdx +++ b/packages/docs/content/api/CIconSvg.api.mdx @@ -21,7 +21,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ customClassName# @@ -29,7 +31,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`}, {`string[]`} - Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + +

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

+ height# @@ -37,7 +41,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`number`} - The height attribute defines the vertical length of an icon. + +

The height attribute defines the vertical length of an icon.

+ size# @@ -45,7 +51,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`"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'. + +

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

+ title# @@ -53,7 +61,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`string`} - Title tag content. + +

Title tag content.

+ width# @@ -61,7 +71,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg' {`number`} - The width attribute defines the horizontal length of an icon. + +

The width attribute defines the horizontal length of an icon.

+ diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx index 2b619e44..ea5c6c03 100644 --- a/packages/docs/content/api/CImage.api.mdx +++ b/packages/docs/content/api/CImage.api.mdx @@ -21,7 +21,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`"start"`}, {`"center"`}, {`"end"`} - Set the horizontal aligment. + +

Set the horizontal aligment.

+ className# @@ -29,7 +31,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ fluid# @@ -37,7 +41,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Make image responsive. + +

Make image responsive.

+ rounded# @@ -45,7 +51,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Make image rounded. + +

Make image rounded.

+ thumbnail# @@ -53,7 +61,9 @@ import CImage from '@coreui/react/src/components/image/CImage' {`boolean`} - Give an image a rounded 1px border appearance. + +

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 8e11a1cb..2e7fc300 100644 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ b/packages/docs/content/api/CInputGroup.api.mdx @@ -21,7 +21,9 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ size# @@ -29,7 +31,9 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

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 7333ae46..5064e0c8 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -21,7 +21,9 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' {`string`} - A string of all className you want applied to the component. + +

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 297687c3..621c917b 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -21,7 +21,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CLink from '@coreui/react/src/components/link/CLink' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

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 5ff0ad27..a43d46e4 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -21,7 +21,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ flush# @@ -37,7 +41,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`boolean`} - Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`\`}). + +

Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {``}).

+ layout# @@ -45,7 +51,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' {`"horizontal"`}, {`"horizontal-sm"`}, {`"horizontal-md"`}, {`"horizontal-lg"`}, {`"horizontal-xl"`}, {`"horizontal-xxl"`} - Specify a layout type. + +

Specify a layout type.

+ diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index ae42cde7..84b91e1d 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -21,7 +21,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ disabled# @@ -53,7 +61,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt {`boolean`} - Toggle the disabled state for the component. + +

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 5d55be8e..0e9608a9 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -21,7 +21,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`"top"`}, {`"center"`} - Align the modal in the center or top of the screen. + +

Align the modal in the center or top of the screen.

+ backdrop# @@ -29,7 +31,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`}, {`"static"`} - Apply a backdrop on body while modal is open. + +

Apply a backdrop on body while modal is open.

+ className# @@ -37,7 +41,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ container#5.3.0+ @@ -45,7 +51,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`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`}. + +

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+ @@ -53,7 +61,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Puts the focus on the modal when shown. + +

Puts the focus on the modal when shown.

+ fullscreen# @@ -61,7 +71,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Set modal to covers the entire user viewport. + +

Set modal to covers the entire user viewport.

+ keyboard# @@ -69,7 +81,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Closes the modal when escape key is pressed. + +

Closes the modal when escape key is pressed.

+ onClose# @@ -77,7 +91,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onClosePrevented# @@ -85,7 +101,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onShow# @@ -93,7 +111,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`() => 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. + +

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# @@ -101,7 +121,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Generates modal using createPortal. + +

Generates modal using createPortal.

+ scrollable# @@ -109,7 +131,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Create a scrollable modal that allows scrolling the modal body. + +

Create a scrollable modal that allows scrolling the modal body.

+ size# @@ -117,7 +141,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ transition# @@ -125,7 +151,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Remove animation to create modal that simply appear rather than fade in to view. + +

Remove animation to create modal that simply appear rather than fade in to view.

+ unmountOnClose# @@ -133,7 +161,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. + +

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

+ visible# @@ -141,7 +171,9 @@ import CModal from '@coreui/react/src/components/modal/CModal' {`boolean`} - Toggle the visibility of modal component. + +

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 db2858ae..42c701f2 100644 --- a/packages/docs/content/api/CModalBody.api.mdx +++ b/packages/docs/content/api/CModalBody.api.mdx @@ -21,7 +21,9 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody' {`string`} - A string of all className you want applied to the base component. + +

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 65bcb134..9b19d13b 100644 --- a/packages/docs/content/api/CModalContent.api.mdx +++ b/packages/docs/content/api/CModalContent.api.mdx @@ -21,7 +21,9 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent' {`string`} - A string of all className you want applied to the base component. + +

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 aa9ee1e4..768c38ca 100644 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ b/packages/docs/content/api/CModalDialog.api.mdx @@ -21,7 +21,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`"top"`}, {`"center"`} - Align the modal in the center or top of the screen. + +

Align the modal in the center or top of the screen.

+ className# @@ -29,7 +31,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ fullscreen# @@ -37,7 +41,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Set modal to covers the entire user viewport. + +

Set modal to covers the entire user viewport.

+ scrollable# @@ -45,7 +51,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`boolean`} - Does the modal dialog itself scroll, or does the whole dialog scroll within the window. + +

Does the modal dialog itself scroll, or does the whole dialog scroll within the window.

+ size# @@ -53,7 +61,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

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 25a3d54e..f413e986 100644 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ b/packages/docs/content/api/CModalFooter.api.mdx @@ -21,7 +21,9 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' {`string`} - A string of all className you want applied to the base component. + +

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 3bb8fdb8..ca5db296 100644 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ b/packages/docs/content/api/CModalHeader.api.mdx @@ -21,7 +21,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ closeButton# @@ -29,7 +31,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' {`boolean`} - Add a close button component to the header. + +

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 78393a10..7876d479 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -21,7 +21,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' {`string`} - A string of all className you want applied to the base component. + +

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 7a216738..2d6cafd2 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -21,7 +21,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ layout# @@ -37,7 +41,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`"fill"`}, {`"justified"`} - Specify a layout type for component. + +

Specify a layout type for component.

+ variant# @@ -45,7 +51,9 @@ import CNav from '@coreui/react/src/components/nav/CNav' {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`} - Set the nav variant to tabs or pills. + +

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 83b3d884..0e0714d6 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -21,7 +21,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ compact# @@ -37,7 +41,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`boolean`} - Make nav group more compact by cutting all {`padding`} in half. + +

Make nav group more compact by cutting all {`padding`} in half.

+ toggler# @@ -45,7 +51,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`ReactNode`} - Set group toggler label. + +

Set group toggler label.

+ visible# @@ -53,7 +61,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' {`boolean`} - Show nav group items. + +

Show nav group items.

+ diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 3b911547..3b0df119 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -21,7 +21,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' {`string`} - A string of all className you want applied to the component. + +

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 5d629503..4e260edb 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -21,7 +21,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as#5.0.0+ @@ -29,7 +31,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

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 f3154093..7e3c45c9 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -21,7 +21,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ disabled# @@ -45,7 +51,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -53,7 +61,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

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 83abb795..bab5f5f9 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -21,7 +21,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' {`string`} - A string of all className you want applied to the component. + +

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 730f1c1e..1aaa1c87 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -21,7 +21,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ colorScheme# @@ -45,7 +51,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`"dark"`}, {`"light"`} - Sets if the color of text should be colored for a light or dark background. + +

Sets if the color of text should be colored for a light or dark background.

+ container# @@ -53,7 +61,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`} - Defines optional container wrapping children elements. + +

Defines optional container wrapping children elements.

+ expand# @@ -61,7 +71,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Defines the responsive breakpoint to determine when content collapses. + +

Defines the responsive breakpoint to determine when content collapses.

+ placement# @@ -69,7 +81,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' {`"fixed-top"`}, {`"fixed-bottom"`}, {`"sticky-top"`} - Place component in non-static positions. + +

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 03d98309..cbb61ccf 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -21,7 +21,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ href# @@ -37,7 +41,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

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 2c46edf3..577e403a 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -21,7 +21,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' {`string`} - A string of all className you want applied to the component. + +

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 a7c58443..158f710f 100644 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ b/packages/docs/content/api/CNavbarText.api.mdx @@ -21,7 +21,9 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' {`string`} - A string of all className you want applied to the base component. + +

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 ce474a31..38e4b19a 100644 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ b/packages/docs/content/api/CNavbarToggler.api.mdx @@ -21,7 +21,9 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' {`string`} - A string of all className you want applied to the base component. + +

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 744d2595..2b50ddc3 100644 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ b/packages/docs/content/api/COffcanvas.api.mdx @@ -21,7 +21,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`}, {`"static"`} - Apply a backdrop on body while offcanvas is open. + +

Apply a backdrop on body while offcanvas is open.

+ className# @@ -29,7 +31,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -37,7 +41,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Sets a darker color scheme. + +

Sets a darker color scheme.

+ keyboard# @@ -45,7 +51,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Closes the offcanvas when escape key is pressed. + +

Closes the offcanvas when escape key is pressed.

+ onHide# @@ -53,7 +61,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -61,7 +71,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -69,7 +81,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`"start"`}, {`"end"`}, {`"top"`}, {`"bottom"`} - Components placement, there’s no default placement. + +

Components placement, there’s no default placement.

+ portal# @@ -77,7 +91,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Generates modal using createPortal. + +

Generates modal using createPortal.

+ responsive#4.6.0+ @@ -85,7 +101,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`} - Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. + +

Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.

+ scroll# @@ -93,7 +111,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Allow body scrolling while offcanvas is open + +

Allow body scrolling while offcanvas is open

+ visible# @@ -101,7 +121,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' {`boolean`} - Toggle the visibility of offcanvas component. + +

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 63a205df..a68dc896 100644 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ b/packages/docs/content/api/COffcanvasBody.api.mdx @@ -21,7 +21,9 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod {`string`} - A string of all className you want applied to the base component. + +

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 5ca4bdd5..a505a208 100644 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ b/packages/docs/content/api/COffcanvasHeader.api.mdx @@ -21,7 +21,9 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH {`string`} - A string of all className you want applied to the base component. + +

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 5ff8759d..06c1ac6a 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -21,7 +21,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi {`string`} - A string of all className you want applied to the component. + +

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 d1870dac..a0dfe5af 100644 --- a/packages/docs/content/api/CPagination.api.mdx +++ b/packages/docs/content/api/CPagination.api.mdx @@ -21,7 +21,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`"start"`}, {`"center"`}, {`"end"`} - Set the alignment of pagination components. + +

Set the alignment of pagination components.

+ className# @@ -29,7 +31,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ size# @@ -37,7 +41,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

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 b8573635..71479d0a 100644 --- a/packages/docs/content/api/CPaginationItem.api.mdx +++ b/packages/docs/content/api/CPaginationItem.api.mdx @@ -21,7 +21,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ disabled# @@ -37,7 +41,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination {`boolean`} - Toggle the disabled state for the component. + +

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 7247c5cc..7ad82151 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -21,7 +21,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`"glow"`}, {`"wave"`} - Set animation type to better convey the perception of something being actively loaded. + +

Set animation type to better convey the perception of something being actively loaded.

+ as# @@ -29,7 +31,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ lg# @@ -53,7 +61,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on large devices (\<1200px). + +

The number of columns on large devices (<1200px).

+ md# @@ -61,7 +71,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on medium devices (\<992px). + +

The number of columns on medium devices (<992px).

+ size# @@ -69,7 +81,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`"xs"`}, {`"sm"`}, {`"lg"`} - Size the component extra small, small, or large. + +

Size the component extra small, small, or large.

+ sm# @@ -77,7 +91,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on small devices (\<768px). + +

The number of columns on small devices (<768px).

+ xl# @@ -85,7 +101,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on X-Large devices (\<1400px). + +

The number of columns on X-Large devices (<1400px).

+ xs# @@ -93,7 +111,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on extra small devices (\<576px). + +

The number of columns on extra small devices (<576px).

+ xxl# @@ -101,7 +121,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' {`number`} - The number of columns on XX-Large devices (≥1400px). + +

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 784e2a0d..bfc98bd5 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -21,7 +21,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`boolean`} - Apply a CSS fade transition to the popover. + +

Apply a CSS fade transition to the popover.

+ className# @@ -29,7 +31,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ container#4.11.0+ @@ -37,7 +41,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`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`}. + +

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# @@ -45,7 +51,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`ReactNode`} - Content node for your component. + +

Content node for your component.

+ delay#4.9.0+ @@ -53,7 +61,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`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 }`}. + +

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+ @@ -61,7 +71,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`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. + +

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# @@ -69,7 +81,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`[number, number]`} - Offset of the popover relative to its target. + +

Offset of the popover relative to its target.

+ onHide# @@ -77,7 +91,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -85,7 +101,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ placement# @@ -93,7 +111,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`"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. + +

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# @@ -101,7 +121,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`ReactNode`} - Title node for your component. + +

Title node for your component.

+ trigger# @@ -109,7 +131,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`'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. + +

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

+ visible# @@ -117,7 +141,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' {`boolean`} - Toggle the visibility of popover component. + +

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 efd6a125..07b83230 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -21,7 +21,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Use to animate the stripes right to left via CSS3 animations. + +

Use to animate the stripes right to left via CSS3 animations.

+ className# @@ -29,7 +31,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ height# @@ -45,7 +51,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`number`} - Sets the height of the component. If you set that value the inner {`\`} will automatically resize accordingly. + +

Sets the height of the component. If you set that value the inner {``} will automatically resize accordingly.

+ progressBarClassName#4.9.0+ @@ -53,7 +61,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`string`} - A string of all className you want applied to the \ component. + +

A string of all className you want applied to the component.

+ thin# @@ -61,7 +71,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Makes progress bar thinner. + +

Makes progress bar thinner.

+ value# @@ -69,7 +81,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`number`} - The percent to progress the ProgressBar (out of 100). + +

The percent to progress the ProgressBar (out of 100).

+ variant# @@ -77,7 +91,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`"striped"`} - Set the progress bar variant to optional striped. + +

Set the progress bar variant to optional striped.

+ white# @@ -85,7 +101,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress' {`boolean`} - Change the default color to white. + +

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 1e21b9c7..56197cb6 100644 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ b/packages/docs/content/api/CProgressBar.api.mdx @@ -21,7 +21,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`boolean`} - Use to animate the stripes right to left via CSS3 animations. + +

Use to animate the stripes right to left via CSS3 animations.

+ className# @@ -29,7 +31,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ value# @@ -45,7 +51,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`number`} - The percent to progress the ProgressBar. + +

The percent to progress the ProgressBar.

+ variant# @@ -53,7 +61,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' {`"striped"`} - Set the progress bar variant to optional 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 19f2beef..ce482129 100644 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -21,7 +21,9 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta {`string`} - A string of all className you want applied to the component. + +

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 f2e0f907..f8f3b137 100644 --- a/packages/docs/content/api/CRow.api.mdx +++ b/packages/docs/content/api/CRow.api.mdx @@ -21,7 +21,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ lg# @@ -29,7 +31,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on large devices (\<1200px). + +

The number of columns/offset/order on large devices (<1200px).

+ md# @@ -37,7 +41,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on medium devices (\<992px). + +

The number of columns/offset/order on medium devices (<992px).

+ sm# @@ -45,7 +51,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on small devices (\<768px). + +

The number of columns/offset/order on small devices (<768px).

+ xl# @@ -53,7 +61,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on X-Large devices (\<1400px). + +

The number of columns/offset/order on X-Large devices (<1400px).

+ xs# @@ -61,7 +71,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on extra small devices (\<576px). + +

The number of columns/offset/order on extra small devices (<576px).

+ xxl# @@ -69,7 +81,9 @@ import CRow from '@coreui/react/src/components/grid/CRow' {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`} - The number of columns/offset/order on XX-Large devices (≥1400px). + +

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 e251864c..7d7dd7d4 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -21,7 +21,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ colorScheme# @@ -29,7 +31,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`'dark'`}, {`'light'`} - Sets if the color of text should be colored for a light or dark dark background. + +

Sets if the color of text should be colored for a light or dark dark background.

+ narrow# @@ -37,7 +41,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Make sidebar narrow. + +

Make sidebar narrow.

+ onHide# @@ -45,7 +51,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -53,7 +61,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ onVisibleChange# @@ -61,7 +71,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`(visible: boolean) => void`} - Event emitted after visibility of component changed. + +

Event emitted after visibility of component changed.

+ overlaid# @@ -69,7 +81,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Set sidebar to overlaid variant. + +

Set sidebar to overlaid variant.

+ placement# @@ -77,7 +91,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`'start'`}, {`'end'`} - Components placement, there’s no default placement. + +

Components placement, there’s no default placement.

+ position# @@ -85,7 +101,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`"fixed"`}, {`"sticky"`} - Place sidebar in non-static positions. + +

Place sidebar in non-static positions.

+ size# @@ -93,7 +111,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`"sm"`}, {`"lg"`}, {`"xl"`} - Size the component small, large, or extra large. + +

Size the component small, large, or extra large.

+ unfoldable# @@ -101,7 +121,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Expand narrowed sidebar on hover. + +

Expand narrowed sidebar on hover.

+ visible# @@ -109,7 +131,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' {`boolean`} - Toggle the visibility of sidebar component. + +

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 fc56e0d0..55a39332 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -21,7 +21,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' {`string`} - A string of all className you want applied to the component. + +

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 ac4cc6b1..d3f357b2 100644 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ b/packages/docs/content/api/CSidebarFooter.api.mdx @@ -21,7 +21,9 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' {`string`} - A string of all className you want applied to the component. + +

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 fae56074..ea6eaf7f 100644 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ b/packages/docs/content/api/CSidebarHeader.api.mdx @@ -21,7 +21,9 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' {`string`} - A string of all className you want applied to the component. + +

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 099b5949..dbc289a6 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -21,7 +21,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' {`string`} - A string of all className you want applied to the component. + +

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 f35f392e..4c39a565 100644 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ b/packages/docs/content/api/CSidebarToggler.api.mdx @@ -21,7 +21,9 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle {`string`} - A string of all className you want applied to the component. + +

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 48fc06f8..c072502a 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -21,7 +21,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`(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. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -29,7 +31,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -37,7 +41,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ size# @@ -45,7 +51,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`"sm"`} - Size the component small. + +

Size the component small.

+ variant# @@ -53,7 +61,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`"border"`}, {`"grow"`} - Set the button variant to an outlined button or a ghost button. + +

Set the button variant to an outlined button or a ghost button.

+ visuallyHiddenLabel# @@ -61,7 +71,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' {`string`} - Set visually hidden label for accessibility purposes. + +

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 6ead7a6c..1d298ded 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -21,7 +21,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ disabled# @@ -29,7 +31,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ itemKey# @@ -37,7 +41,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab' {`string`}, {`number`} - Item key. + +

Item key.

+ diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx index 76755621..c57cbae0 100644 --- a/packages/docs/content/api/CTabContent.api.mdx +++ b/packages/docs/content/api/CTabContent.api.mdx @@ -21,7 +21,9 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent' {`string`} - A string of all className you want applied to the base component. + +

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 59fe0074..176e4fb7 100644 --- a/packages/docs/content/api/CTabList.api.mdx +++ b/packages/docs/content/api/CTabList.api.mdx @@ -21,7 +21,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ layout# @@ -29,7 +31,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`"fill"`}, {`"justified"`} - Specify a layout type for component. + +

Specify a layout type for component.

+ variant# @@ -37,7 +41,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`} - Set the nav variant to tabs or pills. + +

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 96326f15..4d401d33 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -21,7 +21,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ onHide# @@ -29,7 +31,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -37,7 +41,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ transition#5.1.0+ @@ -45,7 +51,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`boolean`} - Enable fade in and fade out transition. + +

Enable fade in and fade out transition.

+ visible# @@ -53,7 +61,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx index db4df643..f8f092dd 100644 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -21,7 +21,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ itemKey# @@ -29,7 +31,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`string`}, {`number`} - Item key. + +

Item key.

+ onHide# @@ -37,7 +41,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`() => void`} - Callback fired when the component requests to be hidden. + +

Callback fired when the component requests to be hidden.

+ onShow# @@ -45,7 +51,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`() => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ transition# @@ -53,7 +61,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`boolean`} - Enable fade in and fade out transition. + +

Enable fade in and fade out transition.

+ visible# @@ -61,7 +71,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx index b1f101b4..e8d0598b 100644 --- a/packages/docs/content/api/CTable.api.mdx +++ b/packages/docs/content/api/CTable.api.mdx @@ -21,7 +21,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ borderColor# @@ -29,7 +31,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the border color of the component to one of CoreUI’s themed colors. + +

Sets the border color of the component to one of CoreUI’s themed colors.

+ bordered# @@ -37,7 +41,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add borders on all sides of the table and cells. + +

Add borders on all sides of the table and cells.

+ borderless# @@ -45,7 +51,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Remove borders on all sides of the table and cells. + +

Remove borders on all sides of the table and cells.

+ caption# @@ -53,7 +61,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption. + +

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+ @@ -61,7 +71,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - Set the text of the table caption and the caption on the top of the table. + +

Set the text of the table caption and the caption on the top of the table.

+ className# @@ -69,7 +81,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -77,7 +91,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ columns#4.3.0+ @@ -85,7 +101,18 @@ import CTable from '@coreui/react/src/components/table/CTable' {`(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) + +

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)
    • +
+ footer#4.3.0+ @@ -93,7 +120,13 @@ import CTable from '@coreui/react/src/components/table/CTable' {`(string | FooterItem)[]`} - 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' }, ...]`} + +

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# @@ -101,7 +134,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Enable a hover state on table rows within a {`\`}. + +

Enable a hover state on table rows within a {``}.

+ items#4.3.0+ @@ -109,7 +144,11 @@ import CTable from '@coreui/react/src/components/table/CTable' {`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'}}}`} + +

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# @@ -117,7 +156,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`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. + +

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

+ small# @@ -125,7 +166,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Make table more compact by cutting all cell {`padding`} in half. + +

Make table more compact by cutting all cell {`padding`} in half.

+ striped# @@ -133,7 +176,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add zebra-striping to any table row within the {`\`}. + +

Add zebra-striping to any table row within the {``}.

+ stripedColumns#4.3.0+ @@ -141,7 +186,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`boolean`} - Add zebra-striping to any table column. + +

Add zebra-striping to any table column.

+ tableFootProps#4.3.0+ @@ -149,7 +196,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`CTableFootProps`} - Properties that will be passed to the table footer component. + +

Properties that will be passed to the table footer component.

+ tableHeadProps#4.3.0+ @@ -157,7 +206,9 @@ import CTable from '@coreui/react/src/components/table/CTable' {`CTableHeadProps`} - Properties that will be passed to the table head component. + +

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 8bfc35ea..fa015ba9 100644 --- a/packages/docs/content/api/CTableBody.api.mdx +++ b/packages/docs/content/api/CTableBody.api.mdx @@ -21,7 +21,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 b98bd598..73372f90 100644 --- a/packages/docs/content/api/CTableCaption.api.mdx +++ b/packages/docs/content/api/CTableCaption.api.mdx @@ -5,16 +5,6 @@ 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 1c8c79ac..5c133fbd 100644 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ b/packages/docs/content/api/CTableDataCell.api.mdx @@ -21,7 +21,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`boolean`} - Highlight a table row or cell. + +

Highlight a table row or cell.

+ align# @@ -29,7 +31,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ className# @@ -37,7 +41,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 87e1e2c8..005b256f 100644 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ b/packages/docs/content/api/CTableFoot.api.mdx @@ -21,7 +21,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 00b9bca3..2d4fdffb 100644 --- a/packages/docs/content/api/CTableHead.api.mdx +++ b/packages/docs/content/api/CTableHead.api.mdx @@ -21,7 +21,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 1e1c963e..8e4a1175 100644 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ b/packages/docs/content/api/CTableHeaderCell.api.mdx @@ -21,7 +21,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -29,7 +31,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 ff57b8c7..34bfbfeb 100644 --- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx +++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx @@ -21,7 +21,9 @@ import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableRe {`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. + +

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 c45094b8..7bd30762 100644 --- a/packages/docs/content/api/CTableRow.api.mdx +++ b/packages/docs/content/api/CTableRow.api.mdx @@ -21,7 +21,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`boolean`} - Highlight a table row or cell.. + +

Highlight a table row or cell..

+ align# @@ -29,7 +31,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`string`} - Set the vertical aligment. + +

Set the vertical aligment.

+ className# @@ -37,7 +41,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`string`} - A string of all className you want applied to the component. + +

A string of all className you want applied to the component.

+ color# @@ -45,7 +51,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

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 50d56cae..edade324 100644 --- a/packages/docs/content/api/CTabs.api.mdx +++ b/packages/docs/content/api/CTabs.api.mdx @@ -21,7 +21,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`string`}, {`number`} - The active item key. + +

The active item key.

+ className# @@ -29,7 +31,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ onChange# @@ -37,7 +41,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' {`(value: string | number) => void`} - The callback is fired when the active tab changes. + +

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 4c623448..ab94a25f 100644 --- a/packages/docs/content/api/CToast.api.mdx +++ b/packages/docs/content/api/CToast.api.mdx @@ -21,7 +21,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Apply a CSS fade transition to the toast. + +

Apply a CSS fade transition to the toast.

+ autohide# @@ -29,7 +31,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Auto hide the toast. + +

Auto hide the toast.

+ className# @@ -37,7 +41,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ color# @@ -45,7 +51,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} - Sets the color context of the component to one of CoreUI’s themed colors. + +

Sets the color context of the component to one of CoreUI’s themed colors.

+ delay# @@ -53,7 +61,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`number`} - Delay hiding the toast (ms). + +

Delay hiding the toast (ms).

+ onClose# @@ -61,7 +71,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`(index: number) => void`} - Callback fired when the component requests to be closed. + +

Callback fired when the component requests to be closed.

+ onShow# @@ -69,7 +81,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`(index: number) => void`} - Callback fired when the component requests to be shown. + +

Callback fired when the component requests to be shown.

+ visible# @@ -77,7 +91,9 @@ import CToast from '@coreui/react/src/components/toast/CToast' {`boolean`} - Toggle the visibility of component. + +

Toggle the visibility of component.

+ diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx index b5c2004f..22ec20e3 100644 --- a/packages/docs/content/api/CToastBody.api.mdx +++ b/packages/docs/content/api/CToastBody.api.mdx @@ -21,7 +21,9 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody' {`string`} - A string of all className you want applied to the base component. + +

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 f08ce983..6b7e855e 100644 --- a/packages/docs/content/api/CToastClose.api.mdx +++ b/packages/docs/content/api/CToastClose.api.mdx @@ -21,7 +21,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Toggle the active state for the component. + +

Toggle the active state for the component.

+ as# @@ -29,7 +31,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`} - Component used for the root node. Either a string to use a HTML element or a component. + +

Component used for the root node. Either a string to use a HTML element or a component.

+ className# @@ -37,7 +41,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`string`} - A string of all className you want applied to the base component. + +

A string of all className you want applied to the base component.

+ dark# @@ -45,7 +51,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Invert the default color. + +

Invert the default color.

+ disabled# @@ -53,7 +61,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`boolean`} - Toggle the disabled state for the component. + +

Toggle the disabled state for the component.

+ href# @@ -61,7 +71,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`string`} - The href attribute specifies the URL of the page the link goes to. + +

The href attribute specifies the URL of the page the link goes to.

+ shape# @@ -69,7 +81,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`'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. + +

Select the shape of the component.

+ size# @@ -77,7 +91,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`"sm"`}, {`"lg"`} - Size the component small or large. + +

Size the component small or large.

+ type# @@ -85,7 +101,10 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose' {`"button"`}, {`"submit"`}, {`"reset"`} - Specifies the type of button. Always specify the type attribute for the {`\ - -
-

React Modal body text goes here.

-
-
- - -
- - - - -```jsx - - - React Modal title - - -

React Modal body text goes here.

- - - Close - Save changes - - -``` - -### Live demo - -Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. - -export const LiveDemoExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="LiveDemoExampleLabel" - > - - Modal title - - -

Woohoo, you're reading this text in a modal!

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="LiveDemoExampleLabel" - > - - Modal title - - -

Woohoo, you're reading this text in a modal!

- - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -### Static backdrop - -If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it. - -export const StaticBackdropExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch static backdrop modal - setVisible(false)} - aria-labelledby="StaticBackdropExampleLabel" - > - - Modal title - - - I will not close if you click outside me. Don't even try to press escape key. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Launch static backdrop modal - setVisible(false)} - aria-labelledby="StaticBackdropExampleLabel" - > - - Modal title - - - I will not close if you click outside me. Don't even try to press escape key. - - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -### Scrolling long content - -When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. - -export const ScrollingLongContentExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="ScrollingLongContentExampleLabel" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="ScrollingLongContentExampleLabel" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop. - -export const ScrollingLongContentExample2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="ScrollingLongContentExampleLabel2" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="ScrollingLongContentExampleLabel2" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

- - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -### Vertically centered - -Add `alignment="center` to `` to vertically center the React modal. - -export const VerticallyCenteredExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Vertically centered modal - setVisible(false)} - aria-labelledby="VerticallyCenteredExample" - > - - Modal title - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Vertically centered modal - setVisible(false)} - aria-labelledby="VerticallyCenteredExample" - > - - Modal title - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, - egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -export const VerticallyCenteredScrollableExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Vertically centered scrollable modal - setVisible(false)} - aria-labelledby="VerticallyCenteredScrollableExample2" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Vertically centered scrollable modal - setVisible(false)} - aria-labelledby="VerticallyCenteredScrollableExample2" - > - - Modal title - - -

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

-

- Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

-

- Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus - vel augue laoreet rutrum faucibus dolor auctor. -

- - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -### Tooltips and popovers - -`` and `` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed. - -export const TooltipsAndPopoversExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="TooltipsAndPopoverExample" - > - - Modal title - - -
Popover in a modal
-

- This - - button - triggers a popover on click. -

-
-
Tooltips in a modal
-

- - This link - {' '} - and - - that link - have tooltips on hover. -

- - - setVisible(false)}> - Close - - Save changes - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - setVisible(!visible)}>Launch demo modal - setVisible(false)} - aria-labelledby="TooltipsAndPopoverExample" - > - - Modal title - - -
Popover in a modal
-

- This - - button - triggers a popover on click. -

-
-
Tooltips in a modal
-

- - This link - {' '} - and - - that link - have tooltips on hover. -

- - - setVisible(false)}> - Close - - Save changes - - - -) -``` - -### Toggle between modals - -Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals. - -export const ToggleBetweenModalsExample = () => { - const [visible, setVisible] = useState(false) - const [visible2, setVisible2] = useState(false) - return ( - <> - setVisible(!visible)}>Open first modal - setVisible(false)} - aria-labelledby="ToggleBetweenModalsExample1" - > - - Modal 1 title - - -

Show a second modal and hide this one with the button below.

- - - { - setVisible(false) - setVisible2(true) - }} - > - Open second modal - - - - { - setVisible(true) - setVisible2(false) - }} - aria-labelledby="ToggleBetweenModalsExample2" - > - - Modal 2 title - - -

Hide this modal and show the first with the button below.

- - - { - setVisible(true) - setVisible2(false) - }} - > - Back to first - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -const [visible2, setVisible2] = useState(false) -return ( - <> - setVisible(!visible)}>Open first modal - setVisible(false)} - aria-labelledby="ToggleBetweenModalsExample1" - > - - Modal 1 title - - -

Show a second modal and hide this one with the button below.

- - - { - setVisible(false) - setVisible2(true) - }} - > - Open second modal - - - - { - setVisible(true) - setVisible2(false) - }} - aria-labelledby="ToggleBetweenModalsExample2" - > - - Modal 2 title - - -

Hide this modal and show the first with the button below.

- - - { - setVisible(true) - setVisible2(false) - }} - > - Back to first - - - - -) -``` - -### Change animation - -The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation. - -If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`. - -### Remove animation - -For modals that simply appear rather than fade into view, set `transition` to `false`. - -```jsx -... -``` - -### Accessibility - -Be sure to add `aria-labelledby="..."`, referencing the modal title, to `` Additionally, you may give a description of your modal dialog with `aria-describedby` on ``. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it. - -## Optional sizes - -Modals have three optional sizes, available via modifier classes to be placed on a ``. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. - -| Size | Property size | Modal max-width | -| ----------- | ------------- | --------------- | -| Small | `'sm'` | `300px` | -| Default | None | `500px` | -| Large | `'lg'` | `800px` | -| Extra large | `'xl'` | `1140px` | - -export const OptionalSizesExample = () => { - const [visibleXL, setVisibleXL] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - return ( - <> - setVisibleXL(!visibleXL)}>Extra large modal - setVisibleLg(!visibleLg)}>Large modal - setVisibleSm(!visibleSm)}>Small modal - setVisibleXL(false)} - aria-labelledby="OptionalSizesExample1" - > - - Extra large modal - - ... - - setVisibleLg(false)} - aria-labelledby="OptionalSizesExample2" - > - - Large modal - - ... - - setVisibleSm(false)} - aria-labelledby="OptionalSizesExample3" - > - - Small modal - - ... - - - ) -} - - - - - -```jsx -const [visibleXL, setVisibleXL] = useState(false) -const [visibleLg, setVisibleLg] = useState(false) -const [visibleSm, setVisibleSm] = useState(false) -return ( - <> - setVisibleXL(!visibleXL)}>Extra large modal - setVisibleLg(!visibleLg)}>Large modal - setVisibleSm(!visibleSm)}>Small modal - setVisibleXL(false)} - aria-labelledby="OptionalSizesExample1" - > - - Extra large modal - - ... - - setVisibleLg(false)} - aria-labelledby="OptionalSizesExample2" - > - - Large modal - - ... - - setVisibleSm(false)} - aria-labelledby="OptionalSizesExample3" - > - - Small modal - - ... - - -) -``` - -## Fullscreen Modal - -Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`. - -| Fullscrean | Availability | -| ---------- | -------------- | -| `true` | Always | -| `'sm'` | Below `576px` | -| `'md'` | Below `768px` | -| `'lg'` | Below `992px` | -| `'xl'` | Below `1200px` | -| `'xxl'` | Below `1400px` | - -export const FullscreenExample = () => { - const [visible, setVisible] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - const [visibleMd, setVisibleMd] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleXL, setVisibleXL] = useState(false) - const [visibleXXL, setVisibleXXL] = useState(false) - return ( - <> - setVisible(!visible)}>Full screen - setVisibleSm(!visibleSm)}>Full screen below sm - setVisibleMd(!visibleMd)}>Full screen below md - setVisibleLg(!visibleLg)}>Full screen below lg - setVisibleXL(!visibleXL)}>Full screen below xl - setVisibleXXL(!visibleXXL)}>Full screen below xxl - setVisible(false)} - aria-labelledby="FullscreenExample1" - > - - Full screen - - ... - - setVisibleSm(false)} - aria-labelledby="FullscreenExample2" - > - - Full screen below sm - - ... - - setVisibleMd(false)} - aria-labelledby="FullscreenExample3" - > - - Full screen below md - - ... - - setVisibleLg(false)} - aria-labelledby="FullscreenExample4" - > - - Full screen below lg - - ... - - setVisibleXL(false)} - aria-labelledby="FullscreenExample5" - > - - Full screen below xl - - ... - - setVisibleXXL(false)} - aria-labelledby="FullscreenExample6" - > - - Full screen below xxl - - ... - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -const [visibleSm, setVisibleSm] = useState(false) -const [visibleMd, setVisibleMd] = useState(false) -const [visibleLg, setVisibleLg] = useState(false) -const [visibleXL, setVisibleXL] = useState(false) -const [visibleXXL, setVisibleXXL] = useState(false) -return ( - <> - setVisible(!visible)}>Full screen - setVisibleSm(!visibleSm)}>Full screen below sm - setVisibleMd(!visibleMd)}>Full screen below md - setVisibleLg(!visibleLg)}>Full screen below lg - setVisibleXL(!visibleXL)}>Full screen below xl - setVisibleXXL(!visibleXXL)}>Full screen below xxl - setVisible(false)} - aria-labelledby="FullscreenExample1" - > - - Full screen - - ... - - setVisibleSm(false)} - aria-labelledby="FullscreenExample2" - > - - Full screen below sm - - ... - - setVisibleMd(false)} - aria-labelledby="FullscreenExample3" - > - - Full screen below md - - ... - - setVisibleLg(false)} - aria-labelledby="FullscreenExample4" - > - - Full screen below lg - - ... - - setVisibleXL(false)} - aria-labelledby="FullscreenExample5" - > - - Full screen below xl - - ... - - setVisibleXXL(false)} - aria-labelledby="FullscreenExample6" - > - - Full screen below xxl - - ... - - -) -``` - -## Customizing - -### CSS variables - -React modals use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - - - - - -#### How to use CSS variables - -```jsx -const vars = { - '--my-css-var': 10, - '--my-another-css-var': 'red', -} -return ... -``` - -### SASS variables - - - -### SASS loops - -[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. - - - -## API - -### CModal - -`markdown:CModal.api.mdx` - -### CModalBody - -`markdown:CModalBody.api.mdx` - -### CModalFooter - -`markdown:CModalFooter.api.mdx` - -### CModalHeader - -`markdown:CModalHeader.api.mdx` - -### CModalTitle - -`markdown:CModalTitle.api.mdx` diff --git a/packages/docs/content/components/modal/api.mdx b/packages/docs/content/components/modal/api.mdx new file mode 100644 index 00000000..294226af --- /dev/null +++ b/packages/docs/content/components/modal/api.mdx @@ -0,0 +1,32 @@ +--- +title: React Modal Component API +name: Modal API +description: Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization. +route: /components/modal/ +--- + +import CModalAPI from '../../api/CModal.api.mdx' +import CModalBodyAPI from '../../api/CModalBody.api.mdx' +import CModalFooterAPI from '../../api/CModalFooter.api.mdx' +import CModalHeaderAPI from '../../api/CModalHeader.api.mdx' +import CModalTitleAPI from '../../api/CModalTitle.api.mdx' + +## CModal + + + +## CModalBody + + + +## CModalFooter + + + +## CModalHeader + + + +## CModalTitle + + diff --git a/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx new file mode 100644 index 00000000..267c0797 --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalFullscreenExample.tsx @@ -0,0 +1,99 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalFullscreenExample = () => { + const [visible, setVisible] = useState(false) + const [visibleSm, setVisibleSm] = useState(false) + const [visibleMd, setVisibleMd] = useState(false) + const [visibleLg, setVisibleLg] = useState(false) + const [visibleXL, setVisibleXL] = useState(false) + const [visibleXXL, setVisibleXXL] = useState(false) + return ( + <> + setVisible(!visible)}> + Full screen + + setVisibleSm(!visibleSm)}> + Full screen below sm + + setVisibleMd(!visibleMd)}> + Full screen below md + + setVisibleLg(!visibleLg)}> + Full screen below lg + + setVisibleXL(!visibleXL)}> + Full screen below xl + + setVisibleXXL(!visibleXXL)}> + Full screen below xxl + + setVisible(false)} + aria-labelledby="FullscreenExample1" + > + + Full screen + + ... + + setVisibleSm(false)} + aria-labelledby="FullscreenExample2" + > + + Full screen below sm + + ... + + setVisibleMd(false)} + aria-labelledby="FullscreenExample3" + > + + Full screen below md + + ... + + setVisibleLg(false)} + aria-labelledby="FullscreenExample4" + > + + Full screen below lg + + ... + + setVisibleXL(false)} + aria-labelledby="FullscreenExample5" + > + + Full screen below xl + + ... + + setVisibleXXL(false)} + aria-labelledby="FullscreenExample6" + > + + Full screen below xxl + + ... + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx new file mode 100644 index 00000000..3bd28d2f --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalLiveDemoExample.tsx @@ -0,0 +1,29 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalLiveDemoExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Launch demo modal + + setVisible(false)} + aria-labelledby="LiveDemoExampleLabel" + > + + Modal title + + Woohoo, you're reading this text in a modal! + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx new file mode 100644 index 00000000..a082c37a --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalOptionalSizesExample.tsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalOptionalSizesExample = () => { + const [visibleXL, setVisibleXL] = useState(false) + const [visibleLg, setVisibleLg] = useState(false) + const [visibleSm, setVisibleSm] = useState(false) + return ( + <> + setVisibleXL(!visibleXL)}> + Extra large modal + + setVisibleLg(!visibleLg)}> + Large modal + + setVisibleSm(!visibleSm)}> + Small modal + + setVisibleXL(false)} + aria-labelledby="OptionalSizesExample1" + > + + Extra large modal + + ... + + setVisibleLg(false)} + aria-labelledby="OptionalSizesExample2" + > + + Large modal + + ... + + setVisibleSm(false)} + aria-labelledby="OptionalSizesExample3" + > + + Small modal + + ... + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx new file mode 100644 index 00000000..0e4d9a95 --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContent2Example.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalScrollingLongContent2Example = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Vertically centered scrollable modal + + setVisible(false)} + aria-labelledby="VerticallyCenteredScrollableExample2" + > + + Modal title + + +

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+ + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx new file mode 100644 index 00000000..33ab2119 --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalScrollingLongContentExample.tsx @@ -0,0 +1,108 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalScrollingLongContentExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Launch demo modal + + setVisible(false)} + aria-labelledby="ScrollingLongContentExampleLabel" + > + + Modal title + + +

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+ + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx new file mode 100644 index 00000000..859b1d89 --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalStaticBackdropExample.tsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalStaticBackdropExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Launch static backdrop modal + + setVisible(false)} + aria-labelledby="StaticBackdropExampleLabel" + > + + Modal title + + + I will not close if you click outside me. Don't even try to press escape key. + + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx new file mode 100644 index 00000000..ba6af0ff --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalToggleBetweenModalsExample.tsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalToggleBetweenModalsExample = () => { + const [visible, setVisible] = useState(false) + const [visible2, setVisible2] = useState(false) + return ( + <> + setVisible(!visible)}> + Open first modal + + setVisible(false)} + aria-labelledby="ToggleBetweenModalsExample1" + > + + Modal 1 title + + +

Show a second modal and hide this one with the button below.

+ + + { + setVisible(false) + setVisible2(true) + }} + > + Open second modal + + + + { + setVisible(true) + setVisible2(false) + }} + aria-labelledby="ToggleBetweenModalsExample2" + > + + Modal 2 title + + +

Hide this modal and show the first with the button below.

+ + + { + setVisible(true) + setVisible2(false) + }} + > + Back to first + + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx new file mode 100644 index 00000000..46d73846 --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalTooltipsAndPopoversExample.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react' +import { + CButton, + CModal, + CModalBody, + CModalFooter, + CModalHeader, + CModalTitle, + CLink, + CPopover, + CTooltip, +} from '@coreui/react' + +export const ModalTooltipsAndPopoversExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Launch demo modal + + setVisible(false)} + aria-labelledby="TooltipsAndPopoverExample" + > + + Modal title + + +
Popover in a modal
+

+ This + + button + {' '} + triggers a popover on click. +

+
+
Tooltips in a modal
+

+ + This link + {' '} + and + + that link + {' '} + have tooltips on hover. +

+ + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx new file mode 100644 index 00000000..f2f43f4e --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredExample.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalVerticallyCenteredExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Vertically centered modal + + setVisible(false)} + aria-labelledby="VerticallyCenteredExample" + > + + Modal title + + + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx new file mode 100644 index 00000000..0cc92aea --- /dev/null +++ b/packages/docs/content/components/modal/examples/ModalVerticallyCenteredScrollableExample.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react' +import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle } from '@coreui/react' + +export const ModalVerticallyCenteredScrollableExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}> + Vertically centered scrollable modal + + setVisible(false)} + aria-labelledby="VerticallyCenteredScrollableExample2" + > + + Modal title + + +

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+

+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

+

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

+

+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

+ + + setVisible(false)}> + Close + + Save changes + + + + ) +} diff --git a/packages/docs/content/components/modal/index.mdx b/packages/docs/content/components/modal/index.mdx new file mode 100644 index 00000000..3ff5a3b0 --- /dev/null +++ b/packages/docs/content/components/modal/index.mdx @@ -0,0 +1,146 @@ +--- +title: React Modal Component +name: Modal +description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial. +route: /components/modal/ +other_frameworks: modal +--- + +## How to use React Modal Component? + +### Static modal component example + +Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. + + +
+
+
+
+
React Modal title
+ +
+
+

React Modal body text goes here.

+
+
+ + +
+
+
+
+ +```jsx + + + React Modal title + + +

React Modal body text goes here.

+ + + Close + Save changes + + +``` + +### Live demo + +Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. + + + +### Static backdrop + +If you set a `backdrop` to `static`, your React modal component will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it. + + + +### Scrolling long content + +When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. + + + +You can also create a scrollable react modal component that allows scroll the modal body by adding `scrollable` prop. + + + +### Vertically centered + +Add `alignment="center` to `` to vertically center the React modal. + + + + + +### Tooltips and popovers + +`` and `` can be placed within react modals as needed. When modal components are closed, any tooltips and popovers within are also automatically dismissed. + + + +### Toggle between modals + +Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals. + + + +### Change animation + +The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation. + +If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`. + +### Remove animation + +For modals that simply appear rather than fade into view, set `transition` to `false`. + +```jsx +... +``` + +### Accessibility + +Be sure to add `aria-labelledby="..."`, referencing the modal title, to `` Additionally, you may give a description of your modal dialog with `aria-describedby` on ``. Note that you don’t need to add `role="dialog`, `aria-hidden="true"`, and `aria-modal="true"` since we already add it. + +## Optional sizes + +Modals have three optional sizes, available via modifier classes to be placed on a ``. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. + + +| Size | Property size | Modal max-width | +| ----------- | ------------- | --------------- | +| Small | `'sm'` | `300px` | +| Default | None | `500px` | +| Large | `'lg'` | `800px` | +| Extra large | `'xl'` | `1140px` | + + + +## Fullscreen Modal + +Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`. + +| Fullscrean | Availability | +| ---------- | -------------- | +| `true` | Always | +| `'sm'` | Below `576px` | +| `'md'` | Below `768px` | +| `'lg'` | Below `992px` | +| `'xl'` | Below `1200px` | +| `'xxl'` | Below `1400px` | + + + +## API + +Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. + +- [<CModal />](./api/#cmodal) +- [<CModalBody />](./api/#cmodalbody) +- [<CModalFooter />](./api/#cmodalfooter) +- [<CModalHeader />](./api/#cmodalheader) +- [<CModalTitle />](./api/#cmodaltitle) diff --git a/packages/docs/content/components/modal/styling.mdx b/packages/docs/content/components/modal/styling.mdx new file mode 100644 index 00000000..41200c16 --- /dev/null +++ b/packages/docs/content/components/modal/styling.mdx @@ -0,0 +1,35 @@ +--- +title: React Modal Component Styling +name: Modal Styling +description: Learn how to customize the React Modal component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design. +route: /components/modal/ +--- + +### CSS variables + +React Modal supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles. + + + + + +#### How to use CSS variables + +```jsx +const customVars = { + '--cui-modal-color': '#555', + '--cui-modal-bg': '#efefef', +} + +return {/* Modal content */} +``` + +### SASS variables + + + +### SASS loops + +[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. + + diff --git a/packages/docs/content/components/navbar.mdx b/packages/docs/content/components/navbar.mdx deleted file mode 100644 index 3cf2d2cf..00000000 --- a/packages/docs/content/components/navbar.mdx +++ /dev/null @@ -1,1475 +0,0 @@ ---- -title: React Navbar Component -name: Navbar -description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more. -menu: Components -route: /components/navbar -other_frameworks: navbar ---- - -import { useState } from 'react' -import { - CButton, - CContainer, - CCloseButton, - CCollapse, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownItemPlain, - CDropdownMenu, - CDropdownToggle, - CForm, - CFormInput, - CInputGroup, - CInputGroupText, - CNav, - CNavItem, - CNavLink, - CNavbar, - CNavbarBrand, - CNavbarNav, - CNavbarText, - CNavbarToggler, - COffcanvas, - COffcanvasBody, - COffcanvasHeader, - COffcanvasTitle, -} from '@coreui/react/src/index' - -import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg' - -## Supported content - -`` come with built-in support for a handful of sub-components. Choose from the following as needed: - -- `` for your company, product, or project name. -- `` for a full-height and lightweight navigation (including support for dropdowns). -- `` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. -- Flex and spacing utilities for any form controls and actions. -- `` for adding vertically centered strings of text. -- `` for grouping and hiding navbar contents by a parent breakpoint. - -Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. - -## Basic usage - -export const BasicUsageExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -### Brand - -The `` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. - -```jsx preview - - - Navbar - - -
- - - Navbar - - -``` - -Adding images to the `` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. - -```jsx preview - - - - - - - -``` - -```jsx preview - - - - CoreUI - - - -``` - -### Nav - -`` navigation is based on ``. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned. - -export const NavExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Features - - - Pricing - - - - Disabled - - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Features - - - Pricing - - - - Disabled - - - - - - - -) -``` - -And because we use classes for our navs, you can avoid the list-based approach entirely if you like. - -export const NavExample2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - Home - - Features - Pricing - - Disabled - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - Home - - Features - Pricing - - Disabled - - - - - - -) -``` - -You can also use dropdowns in your navbar. Please note that `` component requires `variant="nav-item"`. - -export const NavDropdownExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Features - - - Pricing - - - Dropdown link - - Action - Another action - - Something else here - - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Features - - - Pricing - - - Dropdown link - - Action - Another action - - Something else here - - - - - - - -) -``` - -### Forms - -Place various form controls and components within a navbar: - -```jsx preview - - - - - - Search - - - - -``` - -Immediate child elements of `` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/docs/utilities/flex/) as needed to adjust this behavior. - -```jsx preview - - - Navbar - - - - Search - - - - -``` - -Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `` element as the container and save some HTML. - -```jsx preview - - - - @ - - - - -``` - -Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. - -```jsx preview - - - - Main button - - - Smaller button - - - -``` - -### Text - -Navbars may contain bits of text with the help of ``. This class adjusts vertical alignment and horizontal spacing for strings of text. - -```jsx preview - - - Navbar text with an inline element - - -``` - -## Color schemes - -Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities. - -export const ColorSchemesExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - -
- - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - -
- - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -## Containers - -Although it's not required, you can wrap a `` in a `` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `` to only center the contents of a [fixed or static top navbar](#placement). - -```jsx preview - - - - Navbar - - - -``` - -Use any of the responsive containers to change how wide the content in your navbar is presented. - -```jsx preview - - - Navbar - - -``` - -## Placement - -Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. - -Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**. - -```jsx preview - - - Default - - -``` - -```jsx preview - - - Fixed top - - -``` - -```jsx preview - - - Fixed bottom - - -``` - -```jsx preview - - - Sticky top - - -``` - -## Responsive behaviors - -Navbars can use ``, ``, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. - -For navbars that never collapse, add the `expand` boolean property on the ``. For navbars that always collapse, don't add any property. - -### Toggler - -Navbar togglers are left-aligned by default, but should they follow a sibling element like a ``, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles. - -With no `` shown at the smallest breakpoint: - -export const ResponsiveBehaviorsExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - setVisible(!visible)} - /> - - Hidden brand - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - setVisible(!visible)} - /> - - Hidden brand - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -With a brand name shown on the left and toggler on the right: - -export const ResponsiveBehaviorsExample2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - Navbar - setVisible(!visible)} - /> - - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -With a toggler on the left and brand name on the right: - -export const ResponsiveBehaviorsExample3 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - - - setVisible(!visible)} - /> - Navbar - - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - - - setVisible(!visible)} - /> - Navbar - - - - - Home - - - - Link - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -### External content - -Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the ``. - -export const ExternalContentExample = () => { - const [visible, setVisible] = useState(false) - return ( - <> - -
-
Collapsed content
- Toggleable via the navbar brand. -
- - - - setVisible(!visible)} - /> - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - <> - -
-
Collapsed content
- Toggleable via the navbar brand. -
- - - - setVisible(!visible)} - /> - - - -) -``` - -### Offcanvas - -Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar. - -In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely. - -export const OffcanvasExample = () => { - const [visible, setVisible] = useState(false) - return ( - - - Offcanvas navbar - setVisible(!visible)} - /> - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - - - Offcanvas navbar - setVisible(!visible)} - /> - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property. - -export const OffcanvasExample2 = () => { - const [visible, setVisible] = useState(false) - return ( - - - Offcanvas navbar - setVisible(!visible)} - /> - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - - ) -} - - - - - -```jsx -const [visible, setVisible] = useState(false) -return ( - - Offcanvas navbar - - setVisible(!visible)} - /> - setVisible(false)}> - - Offcanvas - setVisible(false)} /> - - - - - - Home - - - - Link - - - Dropdown button - - Action - Another action - - Something else here - - - - - Disabled - - - - - - - Search - - - - - - -) -``` - -## Customizing - -### CSS variables - -React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - - - -Some additional CSS variables are also present on `.navbar-nav`: - - - -Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors. - - - -#### How to use CSS variables - -```jsx -const vars = { - '--my-css-var': 10, - '--my-another-css-var': "red" -} -return ... -``` - -### SASS variables - -Variables for all navbars: - - - -Variables for the [dark navbar](#color-schemes): - - - -### SASS loops - -[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. - - - -## API - -### CNavbar - -`markdown:CNavbar.api.mdx` - -### CNavbarBrand - -`markdown:CNavbarBrand.api.mdx` - -### CNavbarNav - -`markdown:CNavbarNav.api.mdx` - -### CNavbarText - -`markdown:CNavbarText.api.mdx` - -### CNavbarToggler - -`markdown:CNavbarToggler.api.mdx` diff --git a/packages/docs/content/components/navbar/api.mdx b/packages/docs/content/components/navbar/api.mdx new file mode 100644 index 00000000..5170c089 --- /dev/null +++ b/packages/docs/content/components/navbar/api.mdx @@ -0,0 +1,32 @@ +--- +title: React Navbar Component API +name: Navbar API +description: Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization. +route: /components/navbar/ +--- + +import CNavbarAPI from '../../api/CNavbar.api.mdx' +import CNavbarBrandAPI from '../../api/CNavbarBrand.api.mdx' +import CNavbarNavAPI from '../../api/CNavbarNav.api.mdx' +import CNavbarTextAPI from '../../api/CNavbarText.api.mdx' +import CNavbarTogglerAPI from '../../api/CNavbarToggler.api.mdx' + +## CNavbar + + + +## CNavbarBrand + + + +## CNavbarNav + + + +## CNavbarText + + + +## CNavbarToggler + + diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx new file mode 100644 index 00000000..dc5a13de --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +import CoreUISignetImg from '@assets/images/brand/coreui-signet.svg' + +export const NavbarBrand2Example = () => { + return ( + + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx new file mode 100644 index 00000000..70c6b9fa --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +import CoreUISignetImg from '@assets/images/brand/coreui-signet.svg' + +export const NavbarBrand3Example = () => { + return ( + + + + {' '} + CoreUI + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx new file mode 100644 index 00000000..a351cf18 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarBrandExample.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarBrandExample = () => { + return ( + <> + {/* As a link */} + + + Navbar + + + + {/* As a heading */} + + + Navbar + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx new file mode 100644 index 00000000..6c53aca8 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarColorSchemesExample.tsx @@ -0,0 +1,155 @@ +import React, { useState } from 'react' +import { + CButton, + CCollapse, + CContainer, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarColorSchemesExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + +
+ + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + +
+ + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx new file mode 100644 index 00000000..ed6e3978 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarContainers2Example = () => { + return ( + + + Navbar + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx new file mode 100644 index 00000000..dbe22b98 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarContainersExample = () => { + return ( + + + + Navbar + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarExample.tsx b/packages/docs/content/components/navbar/examples/NavbarExample.tsx new file mode 100644 index 00000000..2376135f --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarExample.tsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react' +import { + CButton, + CCollapse, + CContainer, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarExample = () => { + const [visible, setVisible] = useState(false) + return ( + + + Navbar + setVisible(!visible)} /> + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx new file mode 100644 index 00000000..727ff2af --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarForms2Example.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { CButton, CContainer, CForm, CFormInput, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarForms2Example = () => { + return ( + + + Navbar + + + + Search + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx new file mode 100644 index 00000000..55bbf35f --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react' + +export const NavbarForms3Example = () => { + return ( + + + + @ + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx new file mode 100644 index 00000000..cf58e561 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { CButton, CForm, CNavbar } from '@coreui/react' + +export const NavbarForms4Example = () => { + return ( + + + + Main button + + + Smaller button + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx new file mode 100644 index 00000000..2b1e28c6 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react' + +export const NavbarFormsExample = () => { + return ( + + + + + + Search + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx new file mode 100644 index 00000000..55711a87 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarNav2Example.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react' +import { + CCollapse, + CContainer, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavLink, +} from '@coreui/react' + +export const NavbarNav2Example = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + Navbar + setVisible(!visible)} + /> + + + + Home + + Features + Pricing + + Disabled + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx new file mode 100644 index 00000000..680917b9 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarNav3Example.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react' +import { + CCollapse, + CContainer, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarNav3Example = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Features + + + Pricing + + + Dropdown link + + Action + Another action + + Something else here + + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx new file mode 100644 index 00000000..2fecb2ae --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarNavExample.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react' +import { + CCollapse, + CContainer, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarNavExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Features + + + Pricing + + + + Disabled + + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx new file mode 100644 index 00000000..7c40977e --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarPlacementExample = () => { + return ( + + + Default + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx new file mode 100644 index 00000000..a7d302f1 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarPlacementFixedBottomExample = () => { + return ( + + + Fixed bottom + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx new file mode 100644 index 00000000..38ad1b61 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarPlacementFixedTopExample = () => { + return ( + + + Fixed top + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx new file mode 100644 index 00000000..470ac1a2 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' + +export const NavbarPlacementStickyTopExample = () => { + return ( + + + Sticky top + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx new file mode 100644 index 00000000..98e6b7eb --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveExternalContentExample.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react' +import { CCollapse, CContainer, CNavbar, CNavbarToggler } from '@coreui/react' + +export const NavbarResponsiveExternalContentExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + +
+
Collapsed content
+ Toggleable via the navbar brand. +
+ + + + setVisible(!visible)} + /> + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx new file mode 100644 index 00000000..89300d73 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvas2Example.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react' +import { + CButton, + CCloseButton, + CContainer, + CDropdown, + CDropdownItem, + CDropdownDivider, + CDropdownMenu, + CDropdownToggle, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, + COffcanvas, + COffcanvasBody, + COffcanvasHeader, + COffcanvasTitle, +} from '@coreui/react' + +export const NavbarResponsiveOffcanvas2Example = () => { + const [visible, setVisible] = useState(false) + return ( + + + Offcanvas navbar + setVisible(!visible)} + /> + setVisible(false)} + > + + Offcanvas + setVisible(false)} /> + + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx new file mode 100644 index 00000000..5017ef5b --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveOffcanvasExample.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react' +import { + CButton, + CCloseButton, + CContainer, + CDropdown, + CDropdownItem, + CDropdownDivider, + CDropdownMenu, + CDropdownToggle, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, + COffcanvas, + COffcanvasBody, + COffcanvasHeader, + COffcanvasTitle, +} from '@coreui/react' + +export const NavbarResponsiveOffcanvasExample = () => { + const [visible, setVisible] = useState(false) + return ( + + + Offcanvas navbar + setVisible(!visible)} + /> + setVisible(false)} + > + + Offcanvas + setVisible(false)} /> + + + + + + Home + + + + Link + + + Dropdown button + + Action + Another action + + Something else here + + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx new file mode 100644 index 00000000..21d7c752 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler2Example.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react' +import { + CButton, + CCollapse, + CContainer, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarResponsiveToggler2Example = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + Navbar + setVisible(!visible)} + /> + + + + + Home + + + + Link + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx new file mode 100644 index 00000000..df353538 --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveToggler3Example.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react' +import { + CButton, + CCollapse, + CContainer, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarResponsiveToggler3Example = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + setVisible(!visible)} + /> + Navbar + + + + + Home + + + + Link + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx new file mode 100644 index 00000000..21abfd2a --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarResponsiveTogglerExample.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react' +import { + CButton, + CCollapse, + CContainer, + CForm, + CFormInput, + CNavbar, + CNavbarBrand, + CNavbarNav, + CNavbarToggler, + CNavItem, + CNavLink, +} from '@coreui/react' + +export const NavbarResponsiveTogglerExample = () => { + const [visible, setVisible] = useState(false) + return ( + <> + + + setVisible(!visible)} + /> + + Hidden brand + + + + Home + + + + Link + + + + Disabled + + + + + + + Search + + + + + + + ) +} diff --git a/packages/docs/content/components/navbar/examples/NavbarText.tsx b/packages/docs/content/components/navbar/examples/NavbarText.tsx new file mode 100644 index 00000000..b015c47a --- /dev/null +++ b/packages/docs/content/components/navbar/examples/NavbarText.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CContainer, CNavbar, CNavbarText } from '@coreui/react' + +export const NavbarText = () => { + return ( + + + Navbar text with an inline element + + + ) +} diff --git a/packages/docs/content/components/navbar/index.mdx b/packages/docs/content/components/navbar/index.mdx new file mode 100644 index 00000000..6356d37c --- /dev/null +++ b/packages/docs/content/components/navbar/index.mdx @@ -0,0 +1,154 @@ +--- +title: React Navbar Component +name: Navbar +description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more. +route: /components/navbar/ +other_frameworks: navbar +--- + +## Supported content + +`` come with built-in support for a handful of sub-components. Choose from the following as needed: + +- `` for your company, product, or project name. +- `` for a full-height and lightweight navigation (including support for dropdowns). +- `` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. +- Flex and spacing utilities for any form controls and actions. +- `` for adding vertically centered strings of text. +- `` for grouping and hiding navbar contents by a parent breakpoint. + +Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. + +## Basic usage + + + +### Brand + +The `` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. + + + +Adding images to the `` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate. + + + + + +### Nav + +`` navigation is based on ``. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned. + + + +And because we use classes for our navs, you can avoid the list-based approach entirely if you like. + + + +You can also use dropdowns in your navbar. Please note that `` component requires `variant="nav-item"`. + + + +### Forms + +Place various form controls and components within a navbar: + + + +Immediate child elements of `` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/) as needed to adjust this behavior. + + + +Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `` element as the container and save some HTML. + + + +Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. + + + +### Text + +Navbars may contain bits of text with the help of ``. This class adjusts vertical alignment and horizontal spacing for strings of text. + + + +## Color schemes + +Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Set `colorScheme="light"` for use with light background colors, or `colorScheme="dark"` for dark background colors. Then, customize with `.bg-*` utilities. + + + +## Containers + +Although it's not required, you can wrap a `` in a `` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `` to only center the contents of a [fixed or static top navbar](#placement). + + + +Use any of the responsive containers to change how wide the content in your navbar is presented. + + + +## Placement + +Use our `placement` properly to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. + +Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**. + + + + + + + + + +## Responsive behaviors + +Navbars can use ``, ``, and `expand="{sm|md|lg|xl|xxl}"` property to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. + +For navbars that never collapse, add the `expand` boolean property on the ``. For navbars that always collapse, don't add any property. + +### Toggler + +Navbar togglers are left-aligned by default, but should they follow a sibling element like a ``, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles. + +With no `` shown at the smallest breakpoint: + + + +With a brand name shown on the left and toggler on the right: + + + +With a toggler on the left and brand name on the right: + + + +### External content + +Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the ``. + + + +### Offcanvas + +Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar. + +In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely. + + + +To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property. + + + +## API + +Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. + +- [<CNavbar />](./api/#cnavbar) +- [<CNavbarBrand />](./api/#cnavbarbrand) +- [<CNavbarNav />](./api/#cnavbarnav) +- [<CNavbarText />](./api/#cnavbartext) +- [<CNavbarToggler />](./api/#cnavbartoggler) \ No newline at end of file diff --git a/packages/docs/content/components/navbar/styling.mdx b/packages/docs/content/components/navbar/styling.mdx new file mode 100644 index 00000000..f3f41df9 --- /dev/null +++ b/packages/docs/content/components/navbar/styling.mdx @@ -0,0 +1,47 @@ +--- +title: React Navbar Component Styling +name: Navbar Styling +description: Learn how to customize the React Navbar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design. +route: /components/navbar/ +--- + +### CSS variables + +React navbars use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + + + +Some additional CSS variables are also present on `.navbar-nav`: + + + +Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors. + + + +#### How to use CSS variables + +```jsx +const customVars = { + '--cui-navbar-color': '#24e484', + '--cui-navbar-hover-color': '1a1a1a', +} + +return {/* Navbar content */} +``` + +### SASS variables + +Variables for all navbars: + + + +Variables for the [dark navbar](#color-schemes): + + + +### SASS loops + +[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. + + diff --git a/packages/docs/content/components/navs-tabs.mdx b/packages/docs/content/components/navs-tabs.mdx deleted file mode 100644 index 86f52b5c..00000000 --- a/packages/docs/content/components/navs-tabs.mdx +++ /dev/null @@ -1,719 +0,0 @@ ---- -title: React Navs & Tabs Components -name: Navs & Tabs -description: Documentation and examples for how to use CoreUI's included React navigation components. -menu: Components -route: /components/navs-tabs -other_frameworks: navs-tabs ---- - -import { useState } from 'react' - -import { - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownItemPlain, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, - CTabContent, - CTabPane, -} from '@coreui/react/src/index' - -## Base nav - -Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. - -The base `` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. - -```jsx preview - - - - Active - - - - Link - - - Link - - - - Disabled - - - -``` - -Classes are used throughout, so your markup can be super flexible. Use `