diff --git a/README.md b/README.md index 69727eff..467a62fb 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index a4d781c9..e456a603 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.6.0", + "version": "5.7.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 46a8d37c..e51bf9e0 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/parser": "^8.31.1", - "eslint": "^9.25.1", - "eslint-config-prettier": "^10.1.2", - "eslint-plugin-prettier": "^5.2.6", + "@typescript-eslint/parser": "^8.32.1", + "eslint": "^9.27.0", + "eslint-config-prettier": "^10.1.5", + "eslint-plugin-prettier": "^5.4.0", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-unicorn": "^59.0.0", - "globals": "^16.0.0", + "eslint-plugin-unicorn": "^59.0.1", + "globals": "^16.1.0", "lerna": "^8.2.2", "npm-run-all": "^4.1.5", "prettier": "^3.5.3", - "typescript-eslint": "^8.31.1" + "typescript-eslint": "^8.32.1" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 83407ad9..c98015a2 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.6.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 7ab67b3c..6952b2c9 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.6.0", + "version": "5.7.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.3.2", + "@coreui/coreui": "^5.4.0", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -54,8 +54,8 @@ "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", "@types/prop-types": "15.7.14", - "@types/react": "^19.1.2", - "@types/react-dom": "^19.1.2", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "@types/react-transition-group": "^4.4.12", "classnames": "^2.5.1", "cross-env": "^7.0.3", @@ -64,8 +64,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.40.1", - "ts-jest": "^29.3.2", + "rollup": "^4.41.0", + "ts-jest": "^29.3.4", "tslib": "^2.8.1", "typescript": "^5.8.3" }, diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx index f8f5e17a..a12115d5 100644 --- a/packages/coreui-react/src/components/button/CButton.tsx +++ b/packages/coreui-react/src/components/button/CButton.tsx @@ -66,7 +66,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> >( ( { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest }, - ref, + ref ) => { return ( {...(!rest.href && { type: type })} className={classNames( 'btn', + variant && color ? `btn-${variant}-${color}` : `btn-${variant}`, { [`btn-${color}`]: color && !variant, - [`btn-${variant}-${color}`]: color && variant, [`btn-${size}`]: size, }, shape, - className, + className )} {...rest} ref={ref} @@ -88,7 +88,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> {children} ) - }, + } ) CButton.propTypes = { diff --git a/packages/coreui-react/src/components/nav/CNav.tsx b/packages/coreui-react/src/components/nav/CNav.tsx index 233994af..f056fbf7 100644 --- a/packages/coreui-react/src/components/nav/CNav.tsx +++ b/packages/coreui-react/src/components/nav/CNav.tsx @@ -21,7 +21,7 @@ export interface CNavProps /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef< @@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR { /** * Set the nav variant to tabs or pills. */ - variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' + variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border' } export const CTabList = forwardRef( @@ -39,7 +39,7 @@ export const CTabList = forwardRef( const target = event.target as HTMLElement // eslint-disable-next-line unicorn/prefer-spread const items: HTMLElement[] = Array.from( - tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'), + tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)') ) let nextActiveElement @@ -51,7 +51,7 @@ export const CTabList = forwardRef( items, target, event.key === 'ArrowDown' || event.key === 'ArrowRight', - true, + true ) } @@ -65,11 +65,12 @@ export const CTabList = forwardRef(
( {children}
) - }, + } ) CTabList.propTypes = { children: PropTypes.node, className: PropTypes.string, layout: PropTypes.oneOf(['fill', 'justified']), - variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']), + variant: PropTypes.oneOf([ + 'enclosed', + 'enclosed-pills', + 'pills', + 'tabs', + 'underline', + 'underline-border', + ]), } CTabList.displayName = 'CTabList' diff --git a/packages/docs/content/components/accordion/bootstrap.mdx b/packages/docs/content/components/accordion/bootstrap.mdx index fbbb1568..59c789e9 100644 --- a/packages/docs/content/components/accordion/bootstrap.mdx +++ b/packages/docs/content/components/accordion/bootstrap.mdx @@ -28,7 +28,7 @@ Use the `alwaysOpen` property to keep multiple accordion items expanded at the s Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React. -- [<CAccordion />](./api/#caccordion) -- [<CAccordionBody />](./api/#caccordionbody) -- [<CAccordionHeader />](./api/#caccordionheader) -- [<CAccordionItem />](./api/#caccordionitem) \ No newline at end of file +- [<CAccordion />](../api/#caccordion) +- [<CAccordionBody />](../api/#caccordionbody) +- [<CAccordionHeader />](../api/#caccordionheader) +- [<CAccordionItem />](../api/#caccordionitem) \ No newline at end of file diff --git a/packages/docs/content/components/alert/bootstrap.mdx b/packages/docs/content/components/alert/bootstrap.mdx index 654cdc5d..225a0735 100644 --- a/packages/docs/content/components/alert/bootstrap.mdx +++ b/packages/docs/content/components/alert/bootstrap.mdx @@ -65,6 +65,6 @@ Use the `dismissible` prop to allow users to close the alert. This will complete Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component. -- [<CAlert />](./api/#calert) -- [<CAlertHeading />](./api/#calertheading) -- [<CAlertLink />](./api/#calertlink) +- [<CAlert />](../api/#calert) +- [<CAlertHeading />](../api/#calertheading) +- [<CAlertLink />](../api/#calertlink) diff --git a/packages/docs/content/components/avatar/bootstrap.mdx b/packages/docs/content/components/avatar/bootstrap.mdx index 58878383..4dfa9db8 100644 --- a/packages/docs/content/components/avatar/bootstrap.mdx +++ b/packages/docs/content/components/avatar/bootstrap.mdx @@ -52,4 +52,4 @@ Add a small status indicator (e.g. online, offline) to avatars using the `status Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component. -- [<CAvatar />](./api/#cavatar) +- [<CAvatar />](../api/#cavatar) diff --git a/packages/docs/content/components/avatar/examples/AvatarImage.tsx b/packages/docs/content/components/avatar/examples/AvatarImage.tsx index a2b1422c..266a306e 100644 --- a/packages/docs/content/components/avatar/examples/AvatarImage.tsx +++ b/packages/docs/content/components/avatar/examples/AvatarImage.tsx @@ -1,12 +1,13 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CAvatar } from '@coreui/react' export const AvatarImage = () => { return ( <> - - - + + + ) } diff --git a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx index 8e44dab0..ce8141fa 100644 --- a/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx +++ b/packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CAvatar } from '@coreui/react' export const AvatarWithStatus = () => { return ( <> - + CUI diff --git a/packages/docs/content/components/badge/bootstrap.mdx b/packages/docs/content/components/badge/bootstrap.mdx index 40e90ad2..26481218 100644 --- a/packages/docs/content/components/badge/bootstrap.mdx +++ b/packages/docs/content/components/badge/bootstrap.mdx @@ -50,4 +50,4 @@ To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors B See below for the full API reference for all available props for the Bootstrap-styled React Badge component. -- [<CBadge />](./api/#cbadge) +- [<CBadge />](../api/#cbadge) diff --git a/packages/docs/content/components/breadcrumb/bootstrap.mdx b/packages/docs/content/components/breadcrumb/bootstrap.mdx index fa2f149f..56b1f06d 100644 --- a/packages/docs/content/components/breadcrumb/bootstrap.mdx +++ b/packages/docs/content/components/breadcrumb/bootstrap.mdx @@ -53,5 +53,5 @@ For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Patte Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component. -- [<CBreadcrumb />](./api/#cbreadcrumb) -- [<CBreadcrumbItem />](./api/#cbreadcrumbitem) +- [<CBreadcrumb />](../api/#cbreadcrumb) +- [<CBreadcrumbItem />](../api/#cbreadcrumbitem) diff --git a/packages/docs/content/components/button-group/bootstrap.mdx b/packages/docs/content/components/button-group/bootstrap.mdx index e30d8ad4..71728df0 100644 --- a/packages/docs/content/components/button-group/bootstrap.mdx +++ b/packages/docs/content/components/button-group/bootstrap.mdx @@ -74,5 +74,5 @@ Stack buttons vertically using the vertical variation of React Bootstrap Button Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars. -- [<CButtonGroup />](./api/#cbuttongroup) +- [<CButtonGroup />](../api/#cbuttongroup) - [<CButtonToolbar />]() diff --git a/packages/docs/content/components/button/bootstrap.mdx b/packages/docs/content/components/button/bootstrap.mdx index 19413621..12bb09e1 100644 --- a/packages/docs/content/components/button/bootstrap.mdx +++ b/packages/docs/content/components/button/bootstrap.mdx @@ -100,4 +100,4 @@ Use flex utilities and margin helpers to align buttons horizontally when they're See the full API reference for all available props in the Bootstrap-styled React Button component. -- [<CButton />](./api/#cbutton) +- [<CButton />](../api/#cbutton) diff --git a/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx new file mode 100644 index 00000000..d99be5d5 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonGhostBaseClassExample = () => { + return ( + <> + Base ghost button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx new file mode 100644 index 00000000..2c5de0e3 --- /dev/null +++ b/packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { CButton } from '@coreui/react' + +export const ButtonOutlineBaseClassExample = () => { + return ( + <> + Base outline button + Active state + Disabled state + + ) +} diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx index 4d615ebb..87cb6205 100644 --- a/packages/docs/content/components/button/index.mdx +++ b/packages/docs/content/components/button/index.mdx @@ -28,21 +28,41 @@ If you're using `` component as `` elements that are used to trigger ## Outline buttons -If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors. +### Base outline style - +The `variant="outline` property provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis. -## Ghost buttons + -If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors. +These React buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions. - +### Themed outline variants + +If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors. + + + +These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually. Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +## Ghost buttons + +### Base ghost style + +Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state. + +They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars. + + + +To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color. + + + ## Sizes Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes. diff --git a/packages/docs/content/components/card/bootstrap.mdx b/packages/docs/content/components/card/bootstrap.mdx index 68fe5775..9233bcfe 100644 --- a/packages/docs/content/components/card/bootstrap.mdx +++ b/packages/docs/content/components/card/bootstrap.mdx @@ -156,14 +156,14 @@ Use `` and grid props to control the layout of multiple cards in a respons ## API reference -- [<CCard />](./api/#ccard) -- [<CCardBody />](./api/#ccardbody) -- [<CCardFooter />](./api/#ccardfooter) -- [<CCardGroup />](./api/#ccardgroup) -- [<CCardHeader />](./api/#ccardheader) -- [<CCardImage />](./api/#ccardimage) -- [<CCardImageOverlay />](./api/#ccardimageoverlay) -- [<CCardLink />](./api/#ccardlink) -- [<CCardSubtitle />](./api/#ccardsubtitle) -- [<CCardText />](./api/#ccardtext) -- [<CCardTitle />](./api/#ccardtitle) +- [<CCard />](../api/#ccard) +- [<CCardBody />](../api/#ccardbody) +- [<CCardFooter />](../api/#ccardfooter) +- [<CCardGroup />](../api/#ccardgroup) +- [<CCardHeader />](../api/#ccardheader) +- [<CCardImage />](../api/#ccardimage) +- [<CCardImageOverlay />](../api/#ccardimageoverlay) +- [<CCardLink />](../api/#ccardlink) +- [<CCardSubtitle />](../api/#ccardsubtitle) +- [<CCardText />](../api/#ccardtext) +- [<CCardTitle />](../api/#ccardtitle) diff --git a/packages/docs/content/components/card/examples/CardExample.tsx b/packages/docs/content/components/card/examples/CardExample.tsx index 9b020f0b..251ecfc7 100644 --- a/packages/docs/content/components/card/examples/CardExample.tsx +++ b/packages/docs/content/components/card/examples/CardExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid2Example.tsx b/packages/docs/content/components/card/examples/CardGrid2Example.tsx index 72c67b0d..d933064b 100644 --- a/packages/docs/content/components/card/examples/CardGrid2Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGrid2Example = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGrid2Example = () => { - + Card title @@ -45,7 +46,7 @@ export const CardGrid2Example = () => { - + Card title @@ -60,7 +61,7 @@ export const CardGrid2Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid3Example.tsx b/packages/docs/content/components/card/examples/CardGrid3Example.tsx index 856ea8a8..9c870870 100644 --- a/packages/docs/content/components/card/examples/CardGrid3Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid3Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react' export const CardGrid3Example = () => { @@ -6,7 +7,7 @@ export const CardGrid3Example = () => { - + Card title @@ -18,7 +19,7 @@ export const CardGrid3Example = () => { - + Card title @@ -29,7 +30,7 @@ export const CardGrid3Example = () => { - + Card title @@ -42,7 +43,7 @@ export const CardGrid3Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGrid4Example.tsx b/packages/docs/content/components/card/examples/CardGrid4Example.tsx index 375971c3..82b2d95a 100644 --- a/packages/docs/content/components/card/examples/CardGrid4Example.tsx +++ b/packages/docs/content/components/card/examples/CardGrid4Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGrid4Example = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGrid4Example = () => { - + Card title @@ -44,7 +45,7 @@ export const CardGrid4Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGridExample.tsx b/packages/docs/content/components/card/examples/CardGridExample.tsx index 907d469c..2da390d9 100644 --- a/packages/docs/content/components/card/examples/CardGridExample.tsx +++ b/packages/docs/content/components/card/examples/CardGridExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -15,7 +16,7 @@ export const CardGridExample = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGridExample = () => { - + Card title @@ -45,7 +46,7 @@ export const CardGridExample = () => { - + Card title @@ -60,7 +61,7 @@ export const CardGridExample = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGroups2Example.tsx b/packages/docs/content/components/card/examples/CardGroups2Example.tsx index a8c409fd..86030f1f 100644 --- a/packages/docs/content/components/card/examples/CardGroups2Example.tsx +++ b/packages/docs/content/components/card/examples/CardGroups2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -13,7 +14,7 @@ export const CardGroups2Example = () => { return ( - + Card title @@ -26,7 +27,7 @@ export const CardGroups2Example = () => { - + Card title @@ -38,7 +39,7 @@ export const CardGroups2Example = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardGroupsExample.tsx b/packages/docs/content/components/card/examples/CardGroupsExample.tsx index ee85d872..ff4ab1cb 100644 --- a/packages/docs/content/components/card/examples/CardGroupsExample.tsx +++ b/packages/docs/content/components/card/examples/CardGroupsExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardGroupsExample = () => { return ( - + Card title @@ -18,7 +19,7 @@ export const CardGroupsExample = () => { - + Card title @@ -30,7 +31,7 @@ export const CardGroupsExample = () => { - + Card title diff --git a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx index d9a1f4c0..1cdd37d4 100644 --- a/packages/docs/content/components/card/examples/CardImageCapsExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageCapsExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react' export const CardImageCapsExample = () => { return ( <> - + Card title @@ -28,7 +29,7 @@ export const CardImageCapsExample = () => { Last updated 3 mins ago - + ) diff --git a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx index 285676e4..e7f7b5c5 100644 --- a/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react' export const CardImageHorizontalExample = () => { @@ -6,7 +7,7 @@ export const CardImageHorizontalExample = () => { - + diff --git a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx index 112ab6b1..b6c08a89 100644 --- a/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx +++ b/packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react' export const CardImageOverlaysExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/card/examples/CardImagesExample.tsx b/packages/docs/content/components/card/examples/CardImagesExample.tsx index f7fb175b..e83a37be 100644 --- a/packages/docs/content/components/card/examples/CardImagesExample.tsx +++ b/packages/docs/content/components/card/examples/CardImagesExample.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react' export const CardImagesExample = () => { return ( - + Some quick example text to build on the card title and make up the bulk of the card's diff --git a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx index ed743d00..fcdadebe 100644 --- a/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx +++ b/packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCard, CCardBody, @@ -13,7 +14,7 @@ import { export const CardKitchenSinkExample = () => { return ( - + Card title diff --git a/packages/docs/content/components/carousel/bootstrap.mdx b/packages/docs/content/components/carousel/bootstrap.mdx index d54b2e89..f3e5167c 100644 --- a/packages/docs/content/components/carousel/bootstrap.mdx +++ b/packages/docs/content/components/carousel/bootstrap.mdx @@ -54,6 +54,6 @@ Use the `dark` prop on `` to enable dark-themed controls, indicators, Refer to the API documentation below for all supported props of the React Bootstrap Carousel component: -- [<CCarousel />](./api/#ccarousel) -- [<CCarouselCaption />](./api/#ccarouselcaption) -- [<CCarouselItem />](./api/#ccarouselitem) +- [<CCarousel />](../api/#ccarousel) +- [<CCarouselCaption />](../api/#ccarouselcaption) +- [<CCarouselItem />](../api/#ccarouselitem) diff --git a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx index d32858d4..0aea6c9f 100644 --- a/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselCrossfadeExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselCrossfadeExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx index 80a19310..9740419a 100644 --- a/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselDarkVariantExample.tsx @@ -1,25 +1,26 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react' export const CarouselDarkVariantExample = () => { return ( - +
First slide label

Some representative placeholder content for the first slide.

 - +
Second slide label

Some representative placeholder content for the first slide.

 - +
Third slide label

Some representative placeholder content for the first slide.

diff --git a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx index 209df164..08c7d60c 100644 --- a/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselSlidesOnlyExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselSlidesOnlyExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx index b85838ba..0f3cf051 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithCaptionsExample.tsx @@ -1,25 +1,26 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselCaption, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithCaptionsExample = () => { return ( - +
First slide label

Some representative placeholder content for the first slide.

 - +
Second slide label

Some representative placeholder content for the first slide.

 - +
Third slide label

Some representative placeholder content for the first slide.

diff --git a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx index 7ca2b380..1448b578 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithControlsExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithControlsExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx index 20bd7fbc..5c3e0ee4 100644 --- a/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx +++ b/packages/docs/content/components/carousel/examples/CarouselWithIndicatorsExample.tsx @@ -1,17 +1,18 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CCarousel, CCarouselItem, CImage } from '@coreui/react' export const CarouselWithIndicatorsExample = () => { return ( - + - + - + ) diff --git a/packages/docs/content/components/close-button/bootstrap.mdx b/packages/docs/content/components/close-button/bootstrap.mdx index b55614a4..d2cfa23f 100644 --- a/packages/docs/content/components/close-button/bootstrap.mdx +++ b/packages/docs/content/components/close-button/bootstrap.mdx @@ -28,4 +28,4 @@ Use the `dark` prop to apply a dark version of the close button. This inverts th Check the API documentation below for the full list of props available in the React Bootstrap Close Button component: -- [<CCloseButton />](./api/#cclosebutton) +- [<CCloseButton />](../api/#cclosebutton) diff --git a/packages/docs/content/components/collapse/bootstrap.mdx b/packages/docs/content/components/collapse/bootstrap.mdx index 7f9c47a7..4857187e 100644 --- a/packages/docs/content/components/collapse/bootstrap.mdx +++ b/packages/docs/content/components/collapse/bootstrap.mdx @@ -34,4 +34,4 @@ React Bootstrap Collapse supports multiple targets toggled by a single trigger. Check the API documentation below to explore all available props for the React Bootstrap Collapse component: -- [<CCollapse />](./api/#ccollapse) +- [<CCollapse />](../api/#ccollapse) diff --git a/packages/docs/content/components/dropdown/bootstrap.mdx b/packages/docs/content/components/dropdown/bootstrap.mdx index 5bc1c569..e4714bca 100644 --- a/packages/docs/content/components/dropdown/bootstrap.mdx +++ b/packages/docs/content/components/dropdown/bootstrap.mdx @@ -134,10 +134,10 @@ Left-align from a breakpoint with `alignment="md:start"`: Refer to the API below for full details on available components and props in the React Bootstrap Dropdown: -- [<CDropdown />](./api/#cdropdown) -- [<CDropdownDivider />](./api/#cdropdowndivider) -- [<CDropdownHeader />](./api/#cdropdownheader) -- [<CDropdownItem />](./api/#cdropdownitem) -- [<CDropdownItemPlain />](./api/#cdropdownitemplain) -- [<CDropdownMenu />](./api/#cdropdownmenu) -- [<CDropdownToggle />](./api/#cdropdowntoggle) +- [<CDropdown />](../api/#cdropdown) +- [<CDropdownDivider />](../api/#cdropdowndivider) +- [<CDropdownHeader />](../api/#cdropdownheader) +- [<CDropdownItem />](../api/#cdropdownitem) +- [<CDropdownItemPlain />](../api/#cdropdownitemplain) +- [<CDropdownMenu />](../api/#cdropdownmenu) +- [<CDropdownToggle />](../api/#cdropdowntoggle) diff --git a/packages/docs/content/components/image/bootstrap.mdx b/packages/docs/content/components/image/bootstrap.mdx index 4a3324d3..e9d09fec 100644 --- a/packages/docs/content/components/image/bootstrap.mdx +++ b/packages/docs/content/components/image/bootstrap.mdx @@ -32,4 +32,4 @@ Use the `align` prop to control image alignment within the container. This allow Explore all available props and customization options for the React Bootstrap Image component below: -- [<CImage />](./api/#cimage) +- [<CImage />](../api/#cimage) diff --git a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx index 938fbe5d..7ba739a7 100644 --- a/packages/docs/content/components/image/examples/ImageAligning2Example.tsx +++ b/packages/docs/content/components/image/examples/ImageAligning2Example.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligning2Example = () => { return (
- +
) } diff --git a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx index 4018bf18..200fc959 100644 --- a/packages/docs/content/components/image/examples/ImageAligning3Example.tsx +++ b/packages/docs/content/components/image/examples/ImageAligning3Example.tsx @@ -1,10 +1,11 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligning3Example = () => { return (
- +
) } diff --git a/packages/docs/content/components/image/examples/ImageAligningExample.tsx b/packages/docs/content/components/image/examples/ImageAligningExample.tsx index 3270a817..3e0ce6bd 100644 --- a/packages/docs/content/components/image/examples/ImageAligningExample.tsx +++ b/packages/docs/content/components/image/examples/ImageAligningExample.tsx @@ -1,11 +1,12 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageAligningExample = () => { return (
- - + +
) } diff --git a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx index 9d239b0e..1d8cb4b5 100644 --- a/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx +++ b/packages/docs/content/components/image/examples/ImageResponsiveExample.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageResponsiveExample = () => { - return + return } diff --git a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx index a34dfe6b..1e40391b 100644 --- a/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx +++ b/packages/docs/content/components/image/examples/ImageThumbnailExample.tsx @@ -1,6 +1,7 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CImage } from '@coreui/react' export const ImageThumbnailExample = () => { - return + return } diff --git a/packages/docs/content/components/list-group/bootstrap.mdx b/packages/docs/content/components/list-group/bootstrap.mdx index e8ff0700..7632d5be 100644 --- a/packages/docs/content/components/list-group/bootstrap.mdx +++ b/packages/docs/content/components/list-group/bootstrap.mdx @@ -78,5 +78,5 @@ Embed checkboxes or radio buttons inside list items for interactive list selecti Explore the full API for the React Bootstrap List Group components: -- [<CListGroup />](./api/#clistgroup) -- [<CListGroupItem />](./api/#clistgroupitem) +- [<CListGroup />](../api/#clistgroup) +- [<CListGroupItem />](../api/#clistgroupitem) diff --git a/packages/docs/content/components/modal/bootstrap.mdx b/packages/docs/content/components/modal/bootstrap.mdx index 2c2781a6..b3a122c4 100644 --- a/packages/docs/content/components/modal/bootstrap.mdx +++ b/packages/docs/content/components/modal/bootstrap.mdx @@ -128,8 +128,8 @@ Use the `fullscreen` prop to make modals expand to full viewport width/height. Y Explore the API for the React Bootstrap Modal component and its related parts: -- [<CModal />](./api/#cmodal) -- [<CModalBody />](./api/#cmodalbody) -- [<CModalFooter />](./api/#cmodalfooter) -- [<CModalHeader />](./api/#cmodalheader) -- [<CModalTitle />](./api/#cmodaltitle) \ No newline at end of file +- [<CModal />](../api/#cmodal) +- [<CModalBody />](../api/#cmodalbody) +- [<CModalFooter />](../api/#cmodalfooter) +- [<CModalHeader />](../api/#cmodalheader) +- [<CModalTitle />](../api/#cmodaltitle) \ No newline at end of file diff --git a/packages/docs/content/components/navbar/bootstrap.mdx b/packages/docs/content/components/navbar/bootstrap.mdx index 5b699291..7d383817 100644 --- a/packages/docs/content/components/navbar/bootstrap.mdx +++ b/packages/docs/content/components/navbar/bootstrap.mdx @@ -98,8 +98,8 @@ Turn the responsive navbar into an offcanvas drawer with `expand="*"` or `expand Explore the full API for React Bootstrap Navbar components: -- [<CNavbar />](./api/#cnavbar) -- [<CNavbarBrand />](./api/#cnavbarbrand) -- [<CNavbarNav />](./api/#cnavbarnav) -- [<CNavbarText />](./api/#cnavbartext) -- [<CNavbarToggler />](./api/#cnavbartoggler) +- [<CNavbar />](../api/#cnavbar) +- [<CNavbarBrand />](../api/#cnavbarbrand) +- [<CNavbarNav />](../api/#cnavbarnav) +- [<CNavbarText />](../api/#cnavbartext) +- [<CNavbarToggler />](../api/#cnavbartoggler) diff --git a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx index 28c8adae..9ebf13c2 100644 --- a/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx +++ b/packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' export const NavbarBrand2Example = () => { @@ -7,7 +8,7 @@ export const NavbarBrand2Example = () => { CoreUI Signet { @@ -7,7 +8,7 @@ export const NavbarBrand3Example = () => { CoreUI Signet` and ``. These co Explore the full list of props and components used in React Bootstrap Navs and Tabs: -- [<CNav />](./api/#cnav) -- [<CNavItem />](./api/#cnavitem) -- [<CNavLink />](./api/#cnavlink) -- [<CTabContent />](./api/#ctabcontent) -- [<CTabPane />](./api/#ctabpane) +- [<CNav />](../api/#cnav) +- [<CNavItem />](../api/#cnavitem) +- [<CNavLink />](../api/#cnavlink) +- [<CTabContent />](../api/#ctabcontent) +- [<CTabPane />](../api/#ctabpane) diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx new file mode 100644 index 00000000..33cbf837 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx new file mode 100644 index 00000000..e49457f8 --- /dev/null +++ b/packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { CNav, CNavItem, CNavLink } from '@coreui/react' + +export const NavEnclosedPillsExample = () => { + return ( + + + Active + + + Link + + + Link + + + Disabled + + + ) +} diff --git a/packages/docs/content/components/navs-tabs/index.mdx b/packages/docs/content/components/navs-tabs/index.mdx index 5b07eb17..439f05eb 100644 --- a/packages/docs/content/components/navs-tabs/index.mdx +++ b/packages/docs/content/components/navs-tabs/index.mdx @@ -64,6 +64,19 @@ Take that same code, but use `variant="underline-border"` instead: +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. diff --git a/packages/docs/content/components/offcanvas/bootstrap.mdx b/packages/docs/content/components/offcanvas/bootstrap.mdx index 8072f51b..3cedb03e 100644 --- a/packages/docs/content/components/offcanvas/bootstrap.mdx +++ b/packages/docs/content/components/offcanvas/bootstrap.mdx @@ -85,7 +85,7 @@ React Bootstrap Offcanvas behaves like a modal. Use `aria-labelledby` to link th Review the full API for the React Bootstrap Offcanvas component and its parts: -- [<COffcanvas />](./api/#coffcanvas) -- [<COffcanvasBody />](./api/#coffcanvasbody) -- [<COffcanvasHeader />](./api/#coffcanvasheader) -- [<COffcanvasTitle />](./api/#coffcanvastitle) +- [<COffcanvas />](../api/#coffcanvas) +- [<COffcanvasBody />](../api/#coffcanvasbody) +- [<COffcanvasHeader />](../api/#coffcanvasheader) +- [<COffcanvasTitle />](../api/#coffcanvastitle) diff --git a/packages/docs/content/components/pagination/bootstrap.mdx b/packages/docs/content/components/pagination/bootstrap.mdx index babd91d7..4ff40cf1 100644 --- a/packages/docs/content/components/pagination/bootstrap.mdx +++ b/packages/docs/content/components/pagination/bootstrap.mdx @@ -44,5 +44,5 @@ Change pagination alignment using the `align` prop: `"start"`, `"center"`, or `" Here’s the API reference for the React Bootstrap Pagination component: -- [<CPagination />](./api/#cpagination) -- [<CPaginationItem />](./api/#cpaginationitem) +- [<CPagination />](../api/#cpagination) +- [<CPaginationItem />](../api/#cpaginationitem) diff --git a/packages/docs/content/components/placeholder/bootstrap.mdx b/packages/docs/content/components/placeholder/bootstrap.mdx index 1dec30f0..cb90d762 100644 --- a/packages/docs/content/components/placeholder/bootstrap.mdx +++ b/packages/docs/content/components/placeholder/bootstrap.mdx @@ -60,4 +60,4 @@ Make React Bootstrap Placeholder elements feel dynamic by using `animation="glow Review the available props for the React Bootstrap Placeholder component: -- [<CPlaceholder />](./api/#cplaceholder) +- [<CPlaceholder />](../api/#cplaceholder) diff --git a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx index 5739ef91..0cd78f22 100644 --- a/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx +++ b/packages/docs/content/components/placeholder/examples/PlaceholderExample.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { withPrefix } from 'gatsby' import { CButton, CCard, @@ -13,7 +14,7 @@ export const PlaceholderExample = () => { return ( <> - + Card title diff --git a/packages/docs/content/components/popover/bootstrap.mdx b/packages/docs/content/components/popover/bootstrap.mdx index 71f52e1b..dc5b0616 100644 --- a/packages/docs/content/components/popover/bootstrap.mdx +++ b/packages/docs/content/components/popover/bootstrap.mdx @@ -46,4 +46,4 @@ HTML elements with the `disabled` attribute cannot trigger popovers. Wrap them i Explore the full API for the React Bootstrap Popover component: -- [<CPopover />](./api/#cpopover) +- [<CPopover />](../api/#cpopover) diff --git a/packages/docs/content/components/progress/bootstrap.mdx b/packages/docs/content/components/progress/bootstrap.mdx index 0124944e..acac97d1 100644 --- a/packages/docs/content/components/progress/bootstrap.mdx +++ b/packages/docs/content/components/progress/bootstrap.mdx @@ -96,5 +96,5 @@ Make stripes animated using the `animated` prop. Explore the full API for the React Bootstrap Progress component: -- [<CProgress />](./api/#cprogress) -- [<CProgressBar />](./api/#cprogressbar) +- [<CProgress />](../api/#cprogress) +- [<CProgressBar />](../api/#cprogressbar) diff --git a/packages/docs/content/components/sidebar/bootstrap.mdx b/packages/docs/content/components/sidebar/bootstrap.mdx index 8ad00442..0a3f246e 100644 --- a/packages/docs/content/components/sidebar/bootstrap.mdx +++ b/packages/docs/content/components/sidebar/bootstrap.mdx @@ -73,9 +73,9 @@ By default, the React Bootstrap Sidebar appears on the left. Use the `placement` Explore the available props for the React Bootstrap Sidebar component and its subcomponents: -- [<CSidebar />](./api/#csidebar) -- [<CSidebarBrand />](./api/#csidebarbrand) -- [<CSidebarFooter />](./api/#csidebarfooter) -- [<CSidebarHeader />](./api/#csidebarheader) -- [<CSidebarNav />](./api/#csidebarnav) -- [<CSidebarToggler />](./api/#csidebartoggler) +- [<CSidebar />](../api/#csidebar) +- [<CSidebarBrand />](../api/#csidebarbrand) +- [<CSidebarFooter />](../api/#csidebarfooter) +- [<CSidebarHeader />](../api/#csidebarheader) +- [<CSidebarNav />](../api/#csidebarnav) +- [<CSidebarToggler />](../api/#csidebartoggler) diff --git a/packages/docs/content/components/spinner/bootstrap.mdx b/packages/docs/content/components/spinner/bootstrap.mdx index 6036d218..ec121699 100644 --- a/packages/docs/content/components/spinner/bootstrap.mdx +++ b/packages/docs/content/components/spinner/bootstrap.mdx @@ -79,4 +79,4 @@ Each spinner includes `role="status"` and a visually hidden `` with `"Load Explore the full API for the React Bootstrap Spinner component: -- [<CSpinner />](./api/#cspinner) +- [<CSpinner />](../api/#cspinner) diff --git a/packages/docs/content/components/table/bootstrap.mdx b/packages/docs/content/components/table/bootstrap.mdx index 8c798354..a1edf2a3 100644 --- a/packages/docs/content/components/table/bootstrap.mdx +++ b/packages/docs/content/components/table/bootstrap.mdx @@ -1631,10 +1631,10 @@ Responsive tables allow tables to be scrolled horizontally with ease. Make any t Explore all available props and component options in the API reference below. -- [<CTable />](./api/#ctable) -- [<CTableBody />](./api/#ctablebody) -- [<CTableDataCell />](./api/#ctabledatacell) -- [<CTableFoot />](./api/#ctablefoot) -- [<CTableHead />](./api/#ctablehead) -- [<CTableHeaderCell />](./api/#ctableheadercell) -- [<CTableRow />](./api/#ctablerow) +- [<CTable />](../api/#ctable) +- [<CTableBody />](../api/#ctablebody) +- [<CTableDataCell />](../api/#ctabledatacell) +- [<CTableFoot />](../api/#ctablefoot) +- [<CTableHead />](../api/#ctablehead) +- [<CTableHeaderCell />](../api/#ctableheadercell) +- [<CTableRow />](../api/#ctablerow) diff --git a/packages/docs/content/components/tabs/bootstrap.mdx b/packages/docs/content/components/tabs/bootstrap.mdx index 3ceea915..520e47c5 100644 --- a/packages/docs/content/components/tabs/bootstrap.mdx +++ b/packages/docs/content/components/tabs/bootstrap.mdx @@ -61,8 +61,8 @@ CoreUI's Tabs component automatically manages `aria-` and `role="..."` attribute Refer to the API documentation for detailed descriptions of all available props and usage patterns. -- [<CTabs />](./api/#ctabs) -- [<CTabList />](./api/#ctablist) -- [<CTab />](./api/#ctab) -- [<CTabContent />](./api/#ctabcontent) -- [<CTabPanel />](./api/#ctabpanel) +- [<CTabs />](../api/#ctabs) +- [<CTabList />](../api/#ctablist) +- [<CTab />](../api/#ctab) +- [<CTabContent />](../api/#ctabcontent) +- [<CTabPanel />](../api/#ctabpanel) diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx new file mode 100644 index 00000000..0c7b4a18 --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx new file mode 100644 index 00000000..8fc0d82b --- /dev/null +++ b/packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react' + +export const TabsEnclosedPillsExample = () => { + return ( + + + Home + Profile + Contact + + Disabled + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + + ) +} diff --git a/packages/docs/content/components/tabs/index.mdx b/packages/docs/content/components/tabs/index.mdx index 00e61733..c493eb5d 100644 --- a/packages/docs/content/components/tabs/index.mdx +++ b/packages/docs/content/components/tabs/index.mdx @@ -10,7 +10,7 @@ since: 5.1.0 The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface. - + ## Available styles @@ -20,35 +20,47 @@ Change the style of ``'s component with modifiers and utilities. Mix and If you don’t provide the `variant` prop, the component will default to a basic style. - + ### Pills Take that same code, but use `variant="pills"` instead: - + ### Underline Take that same code, but use `variant="underline"` instead: - + ### Underline border Take that same code, but use `variant="underline-border"` instead: - + + +### Enclosed + +Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling. + + + +### Enclosed pills + +Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines. + + ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. - + For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. - + Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `` component, with a clear example: @@ -68,7 +80,7 @@ This is useful when you need to synchronize the tab state with your application > 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead. - + ## Accessibility diff --git a/packages/docs/content/components/toast/bootstrap.mdx b/packages/docs/content/components/toast/bootstrap.mdx index 0fefa08d..e529d4db 100644 --- a/packages/docs/content/components/toast/bootstrap.mdx +++ b/packages/docs/content/components/toast/bootstrap.mdx @@ -46,8 +46,8 @@ Use CoreUI’s utility classes and props like `color`, `text-white`, and `border Refer to the API documentation for detailed descriptions of all the available props and components used to build Bootstrap-style toasts in React. -- [<CToast />](./api/#ctoast) -- [<CToastHeader />](./api/#ctoastheader) -- [<CToastBody />](./api/#ctoastbody) -- [<CToastClose />](./api/#ctoastclose) -- [<CToaster />](./api/#ctoaster) +- [<CToast />](../api/#ctoast) +- [<CToastHeader />](../api/#ctoastheader) +- [<CToastBody />](../api/#ctoastbody) +- [<CToastClose />](../api/#ctoastclose) +- [<CToaster />](../api/#ctoaster) diff --git a/packages/docs/content/components/tooltip/bootstrap.mdx b/packages/docs/content/components/tooltip/bootstrap.mdx index d06b1ef9..a6dc62e0 100644 --- a/packages/docs/content/components/tooltip/bootstrap.mdx +++ b/packages/docs/content/components/tooltip/bootstrap.mdx @@ -38,4 +38,4 @@ Because disabled elements do not trigger events, wrap them in a `` or ` pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy