gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move components from reusable to components

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-11 17:53:25 +02:00
parent 7c0862a4aa
commit d85bf9a9f7
42 changed files with 519 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_nav.js
View File

@ -121,6 +121,7 @@ const _nav = [
{
component: 'CNavGroup',
name: 'Buttons',
to: '/buttons',
icon: <CIcon name="cil-cursor" customClassName="nav-icon" />,
items: [
{

0
src/reusable/DocsCallout.js → src/components/DocsCallout.js
View File

6
src/reusable/Example.js → src/components/DocsExample.js
View File

@ -5,7 +5,7 @@ import CIcon from '@coreui/icons-react'
import packageJson from '../../package.json'
const Example = (props) => {
const DocsExample = (props) => {
const { children, href } = props
const _href = `https://coreui.io/react/docs/${packageJson.config.coreui_library_short_version}/${href}`
@ -35,9 +35,9 @@ const Example = (props) => {
)
}
Example.propTypes = {
DocsExample.propTypes = {
children: PropTypes.node,
href: PropTypes.string,
}
export default React.memo(Example)
export default React.memo(DocsExample)

0
src/reusable/DocsLink.js → src/components/DocsLink.js
View File

15
src/components/index.js
View File

@ -4,5 +4,18 @@ import AppFooter from './AppFooter'
import AppHeader from './AppHeader'
import AppHeaderDropdown from './header/AppHeaderDropdown'
import AppSidebar from './AppSidebar'
import DocsCallout from './DocsCallout'
import DocsLink from './DocsLink'
import DocsExample from './DocsExample'
export { AppBreadcrumb, AppContent, AppFooter, AppHeader, AppHeaderDropdown, AppSidebar }
export {
AppBreadcrumb,
AppContent,
AppFooter,
AppHeader,
AppHeaderDropdown,
AppSidebar,
DocsCallout,
DocsLink,
DocsExample,
}

5
src/reusable/index.js
View File

@ -1,5 +0,0 @@
import DocsCallout from './DocsCallout'
import DocsLink from './DocsLink'
import Example from './Example'
export { DocsCallout, DocsLink, Example }

10
src/views/components/base/accordion/Accordion.js
View File

@ -12,7 +12,7 @@ import {
CAccordionHeader,
CAccordionItem,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Accordion = () => {
const [activeKey, setActiveKey] = useState(0)
@ -32,7 +32,7 @@ const Accordion = () => {
<p className="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<Example href="components/accordion">
<DocsExample href="components/accordion">
<CAccordion>
<CAccordionItem>
<CAccordionHeader>
@ -98,7 +98,7 @@ const Accordion = () => {
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard className="mb-4">
@ -111,7 +111,7 @@ const Accordion = () => {
borders, and some rounded corners to render accordions edge-to-edge with their parent
container.
</p>
<Example href="components/accordion#flush">
<DocsExample href="components/accordion#flush">
<CAccordion flush>
<CAccordionItem>
<CAccordionHeader>
@ -177,7 +177,7 @@ const Accordion = () => {
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

6
src/views/components/base/breadcrumbs/Breadcrumbs.js
View File

@ -9,7 +9,7 @@ import {
CRow,
CLink,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Breadcrumbs = () => {
return (
@ -38,7 +38,7 @@ const Breadcrumbs = () => {
</a>
.
</p>
<Example href="components/breadcrumb">
<DocsExample href="components/breadcrumb">
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
@ -66,7 +66,7 @@ const Breadcrumbs = () => {
</CBreadcrumbItem>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
</CBreadcrumb>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

98
src/views/components/base/cards/Cards.js
View File

@ -19,7 +19,7 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Cards = () => {
return (
@ -46,7 +46,7 @@ const Cards = () => {
no fixed width to start, so they&#39;ll naturally fill the full width of its parent
element.
</p>
<Example href="components/card">
<DocsExample href="components/card">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -75,7 +75,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -89,11 +89,11 @@ const Cards = () => {
The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
need a padded section within a card.
</p>
<Example href="components/card/#body">
<DocsExample href="components/card/#body">
<CCard>
<CCardBody>This is some text within a card body.</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -114,7 +114,7 @@ const Cards = () => {
stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
arranged rightly.
</p>
<Example href="components/card/#titles-text-and-links">
<DocsExample href="components/card/#titles-text-and-links">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@ -127,7 +127,7 @@ const Cards = () => {
<CCardLink href="#">Another link</CCardLink>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -142,7 +142,7 @@ const Cards = () => {
<code>.card-text</code>, text can be added to the card. Text within{' '}
<code>.card-text</code> can additionally be styled with the regular HTML tags.
</p>
<Example href="components/card/#images">
<DocsExample href="components/card/#images">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -169,7 +169,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -182,7 +182,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Create lists of content in a card with a flush list group.
</p>
<Example href="components/card/#list-groups">
<DocsExample href="components/card/#list-groups">
<CRow>
<CCol lg={4}>
<CCard>
@ -214,7 +214,7 @@ const Cards = () => {
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -229,7 +229,7 @@ const Cards = () => {
in there. Shown below are image styles, blocks, text styles, and a list group—all
wrapped in a fixed-width card.
</p>
<Example href="components/card/#kitchen-sink">
<DocsExample href="components/card/#kitchen-sink">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -266,7 +266,7 @@ const Cards = () => {
<CCardLink href="#">Another link</CCardLink>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -279,7 +279,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Add an optional header and/or footer within a card.
</p>
<Example href="components/card/#header-and-footer">
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Header</CCardHeader>
<CCardBody>
@ -290,11 +290,11 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
</p>
<Example href="components/card/#header-and-footer">
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader component="h5">Header</CCardHeader>
<CCardBody>
@ -305,8 +305,8 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/#header-and-footer">
</DocsExample>
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Quote</CCardHeader>
<CCardBody>
@ -321,8 +321,8 @@ const Cards = () => {
</blockquote>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/#header-and-footer">
</DocsExample>
<DocsExample href="components/card/#header-and-footer">
<CCard className="text-center">
<CCardHeader>Header</CCardHeader>
<CCardBody>
@ -334,7 +334,7 @@ const Cards = () => {
</CCardBody>
<CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -353,7 +353,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CRow>
<CCol sm={6}>
<CCard>
@ -378,14 +378,14 @@ const Cards = () => {
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
<h3>Using utilities</h3>
<p className="text-medium-emphasis small">
Use some of{' '}
<a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
rapidly set a card&#39;s width.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CCard className="w-75">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@ -404,12 +404,12 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
<strong>Using custom CSS</strong>
<p className="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a width.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@ -419,7 +419,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -435,7 +435,7 @@ const Cards = () => {
<a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
.
</p>
<Example href="components/card/#text-alignment">
<DocsExample href="components/card/#text-alignment">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@ -463,7 +463,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -477,7 +477,7 @@ const Cards = () => {
Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
<code>&lt;CNav&gt;</code> component.
</p>
<Example href="components/card/##navigation">
<DocsExample href="components/card/##navigation">
<CCard className="text-center">
<CCardHeader>
<CNav variant="tabs" className="card-header-tabs">
@ -504,8 +504,8 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/##navigation">
</DocsExample>
<DocsExample href="components/card/##navigation">
<CCard className="text-center">
<CCardHeader>
<CNav variant="pills" className="card-header-pills">
@ -532,7 +532,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -546,7 +546,7 @@ const Cards = () => {
Similar to headers and footers, cards can include top and bottom &#34;image
caps&#34;—images at the top or bottom of a card.
</p>
<Example href="components/card/#image-caps">
<DocsExample href="components/card/#image-caps">
<CRow>
<CCol lg={6}>
<CCard className="mb-3">
@ -613,7 +613,7 @@ const Cards = () => {
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -630,7 +630,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Use <code>color</code> property to change the appearance of a card.
</p>
<Example href="components/card/#background-and-color">
<DocsExample href="components/card/#background-and-color">
<CRow>
{[
{ color: 'primary', textColor: 'white' },
@ -656,7 +656,7 @@ const Cards = () => {
</CCol>
))}
</CRow>
</Example>
</DocsExample>
<h3>Border</h3>
<p className="text-medium-emphasis small">
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
@ -664,7 +664,7 @@ const Cards = () => {
<code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
card&#39;s contents as shown below.
</p>
<Example href="components/card/#border">
<DocsExample href="components/card/#border">
<CRow>
{[
{ color: 'primary', textColor: 'primary' },
@ -690,7 +690,7 @@ const Cards = () => {
</CCol>
))}
</CRow>
</Example>
</DocsExample>
<h3>Top border</h3>
<p className="text-medium-emphasis small">
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
@ -698,7 +698,7 @@ const Cards = () => {
<code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
card&#39;s contents as shown below.
</p>
<Example href="components/card/#top-border">
<DocsExample href="components/card/#top-border">
<CRow>
{[
{ color: 'primary', textColor: 'primary' },
@ -727,7 +727,7 @@ const Cards = () => {
</CCol>
))}
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -742,7 +742,7 @@ const Cards = () => {
height columns. Card groups start off stacked and use <code>display: flex;</code> to
become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
</p>
<Example href="components/card/#card-groups">
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@ -836,11 +836,11 @@ const Cards = () => {
</CCardBody>
</CCard>
</CCardGroup>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
When using card groups with footers, their content will automatically line up.
</p>
<Example href="components/card/#card-groups">
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@ -934,7 +934,7 @@ const Cards = () => {
</CCardFooter>
</CCard>
</CCardGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -952,7 +952,7 @@ const Cards = () => {
cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting
four cards to equal width across multiple rows, from the medium breakpoint up.
</p>
<Example href="components/card/#grid-cards">
<DocsExample href="components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
<CCol xs>
<CCard>
@ -1083,12 +1083,12 @@ const Cards = () => {
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you&#39;ll see the
fourth card wrap.
</p>
<Example href="components/card/#grid-cards">
<DocsExample href="components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
<CCol xs>
<CCard>
@ -1219,7 +1219,7 @@ const Cards = () => {
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

26
src/views/components/base/carousels/Carousels.js
View File

@ -9,7 +9,7 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const slides = [
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@ -36,7 +36,7 @@ const Carousels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">Here’s a carousel with slides</p>
<Example href="components/carousel">
<DocsExample href="components/carousel">
<CCarousel>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -48,7 +48,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -61,7 +61,7 @@ const Carousels = () => {
<p className="text-medium-emphasis small">
Adding in the previous and next controls by <code>controls</code> property.
</p>
<Example href="components/carousel/#with-controls">
<DocsExample href="components/carousel/#with-controls">
<CCarousel controls>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -73,7 +73,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -86,7 +86,7 @@ const Carousels = () => {
<p className="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the controls, too.
</p>
<Example href="components/carousel/#with-indicators">
<DocsExample href="components/carousel/#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -98,7 +98,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -116,7 +116,7 @@ const Carousels = () => {
with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
<code>.d-md-block</code>.
</p>
<Example href="components/carousel/#with-captions">
<DocsExample href="components/carousel/#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -140,7 +140,7 @@ const Carousels = () => {
</CCarouselCaption>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -154,7 +154,7 @@ const Carousels = () => {
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
with a fade transition instead of a slide.
</p>
<Example href="components/carousel/#crossfade">
<DocsExample href="components/carousel/#crossfade">
<CCarousel controls transition="crossfade">
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -166,7 +166,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -182,7 +182,7 @@ const Carousels = () => {
with the <code>filter</code> CSS property. Captions and controls have additional Sass
variables that customize the <code>color</code> and <code>background-color</code>.
</p>
<Example href="components/carousel/#dark-variant">
<DocsExample href="components/carousel/#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />
@ -206,7 +206,7 @@ const Carousels = () => {
</CCarouselCaption>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

10
src/views/components/base/collapses/Collapses.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Collapses = () => {
const [visible, setVisible] = useState(false)
@ -19,7 +19,7 @@ const Collapses = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">You can use a link or a button component.</p>
<Example href="components/collapse">
<DocsExample href="components/collapse">
<CButton
href="#"
onClick={(e) => {
@ -39,7 +39,7 @@ const Collapses = () => {
</CCardBody>
</CCard>
</CCollapse>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -52,7 +52,7 @@ const Collapses = () => {
<p className="text-medium-emphasis small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<Example href="components/collapse#multiple-targets">
<DocsExample href="components/collapse#multiple-targets">
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
<CButton
@ -87,7 +87,7 @@ const Collapses = () => {
</CCollapse>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

6
src/views/components/base/jumbotrons/Jumbotrons.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const Jumbotrons = () => {
return (
@ -29,7 +29,7 @@ const Jumbotrons = () => {
jumbotron look. Then, mix and match with additional component themes and more.
</p>
<CButton color="light" variant="outline">
Example button
DocsExample button
</CButton>
</div>
</CCol>
@ -42,7 +42,7 @@ const Jumbotrons = () => {
adjusted the alignment and sizing of both column&#39;s content for equal-height.
</p>
<CButton color="secondary" variant="outline">
Example button
DocsExample button
</CButton>
</div>
</CCol>

46
src/views/components/base/list-groups/ListGroups.js
View File

@ -10,7 +10,7 @@ import {
CListGroupItem,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const ListGroups = () => {
return (
@ -28,7 +28,7 @@ const ListGroups = () => {
The default list group is an unordered list with items and the proper CSS classes.
Build upon it with the options that follow, or with your CSS as required.
</p>
<Example href="components/list-group">
<DocsExample href="components/list-group">
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -36,7 +36,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -50,7 +50,7 @@ const ListGroups = () => {
Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
show the current active selection.
</p>
<Example href="components/list-group/#active-items">
<DocsExample href="components/list-group/#active-items">
<CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -58,7 +58,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -72,7 +72,7 @@ const ListGroups = () => {
Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
make it appear disabled.
</p>
<Example href="components/list-group/#disabled-items">
<DocsExample href="components/list-group/#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -80,7 +80,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -98,7 +98,7 @@ const ListGroups = () => {
<code>&lt;div&gt;</code>
s) don&#39;tprovide a click or tap affordance.
</p>
<Example href="components/list-group/#links-and-buttons">
<DocsExample href="components/list-group/#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
Cras justo odio
@ -116,7 +116,7 @@ const ListGroups = () => {
Vestibulum at eros
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -130,7 +130,7 @@ const ListGroups = () => {
Add <code>flush</code> boolean property to remove some borders and rounded corners to
render list group items edge-to-edge in a parent container (e.g., cards).
</p>
<Example href="components/list-group/#flush">
<DocsExample href="components/list-group/#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -138,7 +138,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -156,7 +156,7 @@ const ListGroups = () => {
<code>min-width</code>. Currently{' '}
<strong>horizontal list groups cannot be combined with flush list groups.</strong>
</p>
<Example href="components/list-group/#flush">
<DocsExample href="components/list-group/#flush">
{['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
<CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
<CListGroupItem>Cras justo odio</CListGroupItem>
@ -164,7 +164,7 @@ const ListGroups = () => {
<CListGroupItem>Morbi leo risus</CListGroupItem>
</CListGroup>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -177,7 +177,7 @@ const ListGroups = () => {
<p className="text-medium-emphasis small">
Use contextual classes to style list items with a stateful background and color.
</p>
<Example href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
{[
@ -195,14 +195,14 @@ const ListGroups = () => {
</CListGroupItem>
))}
</CListGroup>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
<code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
in the previous example. Also supported is the <code>active</code> state; apply it to
indicate an active selection on a contextual list group item.
</p>
<Example href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#">
Dapibus ac facilisis in
@ -222,7 +222,7 @@ const ListGroups = () => {
</CListGroupItem>
))}
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -235,7 +235,7 @@ const ListGroups = () => {
<p className="text-medium-emphasis small">
Add badges to any list group item to show unread counts, activity, and more.
</p>
<Example href="components/list-group/#with-badges">
<DocsExample href="components/list-group/#with-badges">
<CListGroup>
<CListGroupItem className="d-flex justify-content-between align-items-center">
Cras justo odio
@ -256,7 +256,7 @@ const ListGroups = () => {
</CBadge>
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -270,7 +270,7 @@ const ListGroups = () => {
Add nearly any HTML within, even for linked list groups like the one below, with the
help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p>
<Example href="components/list-group/#custom-content">
<DocsExample href="components/list-group/#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<div className="d-flex w-100 justify-content-between">
@ -306,7 +306,7 @@ const ListGroups = () => {
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -320,7 +320,7 @@ const ListGroups = () => {
Place CoreUI&#39;s checkboxes and radios within list group items and customize as
needed.
</p>
<Example href="components/list-group/#checkboxes-and-radios">
<DocsExample href="components/list-group/#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />
@ -338,7 +338,7 @@ const ListGroups = () => {
<CFormCheck label="Vestibulum at eros" />
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

2
src/views/components/base/navbars/Navbars.js
View File

@ -19,7 +19,7 @@ import {
CDropdown,
CButton,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const CNavbars = () => {
const [visible, setVisible] = useState(false)

50
src/views/components/base/navs/Navs.js
View File

@ -13,7 +13,7 @@ import {
CNavItem,
CNavLink,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Navs = () => {
return (
@ -33,7 +33,7 @@ const Navs = () => {
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@ -52,7 +52,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
@ -60,7 +60,7 @@ const Navs = () => {
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
@ -71,7 +71,7 @@ const Navs = () => {
Disabled
</CNavLink>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -92,7 +92,7 @@ const Navs = () => {
<p className="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<Example href="components/nav#horizontal-alignment">
<DocsExample href="components/nav#horizontal-alignment">
<CNav className="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
@ -111,11 +111,11 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav className="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
@ -134,7 +134,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -149,7 +149,7 @@ const Navs = () => {
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<Example href="components/nav#vertical">
<DocsExample href="components/nav#vertical">
<CNav className="flex-column">
<CNavItem>
<CNavLink href="#" active>
@ -168,7 +168,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -182,7 +182,7 @@ const Navs = () => {
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<Example href="components/nav#tabs">
<DocsExample href="components/nav#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
@ -201,7 +201,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -214,7 +214,7 @@ const Navs = () => {
<p className="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<Example href="components/nav#pills">
<DocsExample href="components/nav#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@ -233,7 +233,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -249,7 +249,7 @@ const Navs = () => {
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
</p>
<Example href="components/nav#fill-and-justify">
<DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
@ -268,13 +268,13 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<Example href="components/nav#fill-and-justify">
<DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
@ -293,7 +293,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -310,7 +310,7 @@ const Navs = () => {
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<Example href="components/nav#working-with-flex-utilities">
<DocsExample href="components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" className="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
@ -321,7 +321,7 @@ const Navs = () => {
Disabled
</CNavLink>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -331,7 +331,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#tabs-with-dropdowns">
<DocsExample href="components/nav#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@ -355,7 +355,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -365,7 +365,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#pills-with-dropdowns">
<DocsExample href="components/nav#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@ -389,7 +389,7 @@ const Navs = () => {
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

30
src/views/components/base/paginations/Paginations.js
View File

@ -8,7 +8,7 @@ import {
CPaginationItem,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Paginations = () => {
return (
@ -36,7 +36,7 @@ const Paginations = () => {
component is used to navigate between a set of search results, an appropriate label
could be <code>aria-label=&#34;Search results pages&#34;</code>.
</p>
<Example href="components/pagination">
<DocsExample href="components/pagination">
<CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -44,7 +44,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -58,7 +58,7 @@ const Paginations = () => {
Looking to use an icon or symbol in place of text for some pagination links? Be sure
to provide proper screen reader support with <code>aria</code> attributes.
</p>
<Example href="components/pagination#working-with-icons">
<DocsExample href="components/pagination#working-with-icons">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
@ -70,7 +70,7 @@ const Paginations = () => {
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -92,7 +92,7 @@ const Paginations = () => {
such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
custom JavaScript to fully disable their functionality.
</p>
<Example href="components/pagination#disabled-and-active-states">
<DocsExample href="components/pagination#disabled-and-active-states">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
@ -104,7 +104,7 @@ const Paginations = () => {
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -118,7 +118,7 @@ const Paginations = () => {
Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="components/pagination#sizing">
<DocsExample href="components/pagination#sizing">
<CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -126,8 +126,8 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="components/pagination#sizing">
</DocsExample>
<DocsExample href="components/pagination#sizing">
<CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -135,7 +135,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -149,7 +149,7 @@ const Paginations = () => {
Change the alignment of pagination components with{' '}
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p>
<Example href="components/pagination#aligment">
<DocsExample href="components/pagination#aligment">
<CPagination className="justify-content-center" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -157,8 +157,8 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="components/pagination#aligment">
</DocsExample>
<DocsExample href="components/pagination#aligment">
<CPagination className="justify-content-end" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -166,7 +166,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

10
src/views/components/base/popovers/Popovers.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Popovers = () => {
return (
@ -14,7 +14,7 @@ const Popovers = () => {
<strong>React Popover</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<Example href="components/popover">
<DocsExample href="components/popover">
<CPopover
title="Popover title"
content="And here’s some amazing content. It’s very engaging. Right?"
@ -24,7 +24,7 @@ const Popovers = () => {
Click to toggle popover
</CButton>
</CPopover>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -38,7 +38,7 @@ const Popovers = () => {
Four options are available: top, right, bottom, and left aligned. Directions are
mirrored when using CoreUI for React in RTL.
</p>
<Example href="components/popover#four-directions">
<DocsExample href="components/popover#four-directions">
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
@ -63,7 +63,7 @@ const Popovers = () => {
>
<CButton color="secondary">Popover on left</CButton>
</CPopover>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

30
src/views/components/base/progress/Progress.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Progress = () => {
return (
@ -22,7 +22,7 @@ const Progress = () => {
</a>
, ensuring you can stack progress bars, animate them, and place text labels over them.
</p>
<Example href="components/progress">
<DocsExample href="components/progress">
<CProgress className="mb-3">
<CProgressBar value={0} />
</CProgress>
@ -38,7 +38,7 @@ const Progress = () => {
<CProgress className="mb-3">
<CProgressBar value={100} />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -52,11 +52,11 @@ const Progress = () => {
Add labels to your progress bars by placing text within the{' '}
<code>&lt;CProgressBar&gt;</code>.
</p>
<Example href="components/progress#labels">
<DocsExample href="components/progress#labels">
<CProgress className="mb-3">
<CProgressBar value={25}>25%</CProgressBar>
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -71,14 +71,14 @@ const Progress = () => {
you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
resize accordingly.
</p>
<Example href="components/progress#height">
<DocsExample href="components/progress#height">
<CProgress height={1} className="mb-3">
<CProgressBar value={25}></CProgressBar>
</CProgress>
<CProgress height={20} className="mb-3">
<CProgressBar value={25}></CProgressBar>
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -91,7 +91,7 @@ const Progress = () => {
<p className="text-medium-emphasis small">
Use <code>color</code> prop to change the appearance of individual progress bars.
</p>
<Example href="components/progress#backgrounds">
<DocsExample href="components/progress#backgrounds">
<CProgress className="mb-3">
<CProgressBar color="success" value={25} />
</CProgress>
@ -104,7 +104,7 @@ const Progress = () => {
<CProgress className="mb-3">
<CProgressBar color="danger" value={100} />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -117,13 +117,13 @@ const Progress = () => {
<p className="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<Example href="components/progress#multiple-bars">
<DocsExample href="components/progress#multiple-bars">
<CProgress className="mb-3">
<CProgressBar value={15} />
<CProgressBar color="success" value={30} />
<CProgressBar color="info" value={20} />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -137,7 +137,7 @@ const Progress = () => {
Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
apply a stripe via CSS gradient over the progress bar&#39;s background color.
</p>
<Example href="components/progress#striped">
<DocsExample href="components/progress#striped">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" value={25} />
</CProgress>
@ -150,7 +150,7 @@ const Progress = () => {
<CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" value={100} />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -165,7 +165,7 @@ const Progress = () => {
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
animations.
</p>
<Example href="components/progress#animated-stripes">
<DocsExample href="components/progress#animated-stripes">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" animated value={25} />
</CProgress>
@ -178,7 +178,7 @@ const Progress = () => {
<CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" animated value={100} />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

30
src/views/components/base/spinners/Spinners.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Accordion = () => {
return (
@ -17,14 +17,14 @@ const Accordion = () => {
<p className="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<Example href="components/spinner">
<DocsExample href="components/spinner">
<CSpinner />
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
You can use any of our text color utilities on the standard spinner.
</p>
<Example href="components/spinner#colors">
<DocsExample href="components/spinner#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
@ -33,7 +33,7 @@ const Accordion = () => {
<CSpinner color="info" />
<CSpinner color="light" />
<CSpinner color="dark" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -47,14 +47,14 @@ const Accordion = () => {
If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
doesn&#39;t technically spin, it does repeatedly grow!
</p>
<Example href="components/spinner#growing-spinner">
<DocsExample href="components/spinner#growing-spinner">
<CSpinner variant="grow" />
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so you can easily
change its appearance. Here it is in blue, along with the supported variants.
</p>
<Example href="components/spinner#growing-spinner">
<DocsExample href="components/spinner#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
@ -63,7 +63,7 @@ const Accordion = () => {
<CSpinner color="info" variant="grow" />
<CSpinner color="light" variant="grow" />
<CSpinner color="dark" variant="grow" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -77,10 +77,10 @@ const Accordion = () => {
Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
be used within other components.
</p>
<Example href="components/spinner#size">
<DocsExample href="components/spinner#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -95,7 +95,7 @@ const Accordion = () => {
place. You may also swap the text out of the spinner element and utilize button text
as needed.
</p>
<Example href="components/spinner#buttons">
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
@ -103,8 +103,8 @@ const Accordion = () => {
<CSpinner component="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</Example>
<Example href="components/spinner#buttons">
</DocsExample>
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
</CButton>
@ -112,7 +112,7 @@ const Accordion = () => {
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
Loading...
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

90
src/views/components/base/tables/Tables.js
View File

@ -13,7 +13,7 @@ import {
CTableHeaderCell,
CTableRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Tables = () => {
return (
@ -31,7 +31,7 @@ const Tables = () => {
Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
tables look in CoreUI.
</p>
<Example href="components/table">
<DocsExample href="components/table">
<CTable>
<CTableHead>
<CTableRow>
@ -61,7 +61,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -74,7 +74,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
Use contextual classes to color tables, table rows or individual cells.
</p>
<Example href="components/table#variants">
<DocsExample href="components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
@ -131,7 +131,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -145,7 +145,7 @@ const Tables = () => {
Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
<code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
@ -175,11 +175,11 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
@ -209,8 +209,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#striped-rows">
</DocsExample>
<DocsExample href="components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
@ -240,7 +240,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -254,7 +254,7 @@ const Tables = () => {
Use <code>hover</code> property to enable a hover state on table rows within a{' '}
<code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#hoverable-rows">
<DocsExample href="components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
@ -284,8 +284,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
@ -315,8 +315,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
@ -346,7 +346,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -356,7 +356,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#active-tables">
<DocsExample href="components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
@ -388,8 +388,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#active-tables">
</DocsExample>
<DocsExample href="components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
@ -421,7 +421,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -434,7 +434,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
Add <code>bordered</code> property for borders on all sides of the table and cells.
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
@ -464,14 +464,14 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities
</a>{' '}
can be added to change colors:
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
@ -501,7 +501,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -514,7 +514,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<Example href="components/table#tables-without-borders">
<DocsExample href="components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
@ -544,8 +544,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#tables-without-borders">
</DocsExample>
<DocsExample href="components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
@ -575,7 +575,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -589,7 +589,7 @@ const Tables = () => {
Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
by cutting all cell <code>padding</code> in half.
</p>
<Example href="components/table#small-tables">
<DocsExample href="components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
@ -619,7 +619,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -635,7 +635,7 @@ const Tables = () => {
<code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
property to re-align where needed.
</p>
<Example href="components/table#vertical-alignment">
<DocsExample href="components/table#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
@ -702,7 +702,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -715,7 +715,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
Border styles, active styles, and table variants are not inherited by nested tables.
</p>
<Example href="components/table#nesting">
<DocsExample href="components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
@ -769,7 +769,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -784,7 +784,7 @@ const Tables = () => {
<code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
<code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<Example href="components/table#table-head">
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
@ -815,8 +815,8 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#table-head">
</DocsExample>
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
@ -846,7 +846,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -856,7 +856,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#table-foot">
<DocsExample href="components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
@ -894,7 +894,7 @@ const Tables = () => {
</CTableRow>
</CTableHead>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -909,7 +909,7 @@ const Tables = () => {
users with screen readers to find a table and understand what it&#39;s about and
decide if they want to read it.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@ -941,12 +941,12 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '}
<code>caption=&#34;top&#34;</code>.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@ -978,7 +978,7 @@ const Tables = () => {
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

10
src/views/components/base/tooltips/Tooltips.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Tooltips = () => {
return (
@ -17,7 +17,7 @@ const Tooltips = () => {
<p className="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="components/tooltip">
<DocsExample href="components/tooltip">
<p className="text-medium-emphasis">
Tight pants next level keffiyeh
<CTooltip content="Tooltip text">
@ -41,12 +41,12 @@ const Tooltips = () => {
</CTooltip>
freegan cred raw denim single-origin coffee viral.
</p>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left. Directions are mirrored when using CoreUI in RTL.
</p>
<Example href="components/tooltip">
<DocsExample href="components/tooltip">
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
@ -71,7 +71,7 @@ const Tooltips = () => {
>
<CButton color="secondary">Tooltip on left</CButton>
</CTooltip>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

54
src/views/components/buttons/button-groups/ButtonGroups.js
View File

@ -18,7 +18,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const ButtonGroups = () => {
return (
@ -36,18 +36,18 @@ const ButtonGroups = () => {
Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
<code>&lt;CButtonGroup&gt;</code>.{' '}
</p>
<Example href="components/button-group">
<DocsExample href="components/button-group">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
<CButton color="primary">Right</CButton>
</CButtonGroup>
</Example>
</DocsExample>
<p>
These classes can also be added to groups of links, as an alternative to the{' '}
<code>&lt;CNav&gt;</code> components.
</p>
<Example href="components/button-group">
<DocsExample href="components/button-group">
<CButtonGroup>
<CButton href="#" color="primary" active>
Active link
@ -59,7 +59,7 @@ const ButtonGroups = () => {
Link
</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -69,13 +69,13 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Mixed styles</span>
</CCardHeader>
<CCardBody>
<Example href="components/button-group#mixed-styles">
<DocsExample href="components/button-group#mixed-styles">
<CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton>
<CButton color="success">Right</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -85,7 +85,7 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<Example href="components/button-group#outlined-styles">
<DocsExample href="components/button-group#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline">
Left
@ -97,7 +97,7 @@ const ButtonGroups = () => {
Right
</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -111,7 +111,7 @@ const ButtonGroups = () => {
Combine button-like checkbox and radio toggle buttons into a seamless looking button
group.
</p>
<Example href="components/button-group#checkbox-and-radio-button-groups">
<DocsExample href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
button
@ -135,8 +135,8 @@ const ButtonGroups = () => {
label="Checkbox 3"
/>
</CButtonGroup>
</Example>
<Example href="components/button-group#checkbox-and-radio-button-groups">
</DocsExample>
<DocsExample href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
type="radio"
@ -166,7 +166,7 @@ const ButtonGroups = () => {
label="Radio 3"
/>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -180,7 +180,7 @@ const ButtonGroups = () => {
Join sets of button groups into button toolbars for more complicated components. Use
utility classes as needed to space out groups, buttons, and more.
</p>
<Example href="components/button-group#button-toolbar">
<DocsExample href="components/button-group#button-toolbar">
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="primary">1</CButton>
@ -197,12 +197,12 @@ const ButtonGroups = () => {
<CButton color="info">8</CButton>
</CButtonGroup>
</CButtonToolbar>
</Example>
</DocsExample>
<p>
Feel free to combine input groups with button groups in your toolbars. Similar to the
example above, you’ll likely need some utilities through to space items correctly.
</p>
<Example href="components/button-group#button-toolbar">
<DocsExample href="components/button-group#button-toolbar">
<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline">
@ -255,7 +255,7 @@ const ButtonGroups = () => {
/>
</CInputGroup>
</CButtonToolbar>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -270,7 +270,7 @@ const ButtonGroups = () => {
<code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
each one when nesting multiple groups.
</p>
<Example href="components/button-group#sizing">
<DocsExample href="components/button-group#sizing">
<CButtonGroup size="lg" role="group" aria-label="Large button group">
<CButton color="dark" variant="outline">
Left
@ -306,7 +306,7 @@ const ButtonGroups = () => {
Right
</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -321,7 +321,7 @@ const ButtonGroups = () => {
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
of buttons.
</p>
<Example href="components/button-group#nesting">
<DocsExample href="components/button-group#nesting">
<CButtonGroup role="group" aria-label="Button group with nested dropdown">
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
@ -336,7 +336,7 @@ const ButtonGroups = () => {
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -350,7 +350,7 @@ const ButtonGroups = () => {
Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
<strong>Split button dropdowns are not supported here.</strong>
</p>
<Example href="components/button-group/#vertical-variation">
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
@ -360,8 +360,8 @@ const ButtonGroups = () => {
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@ -408,8 +408,8 @@ const ButtonGroups = () => {
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck
type="radio"
@ -443,7 +443,7 @@ const ButtonGroups = () => {
label="Radio 3"
/>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

62
src/views/components/buttons/buttons/Buttons.js
View File

@ -1,7 +1,7 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Buttons = () => {
return (
@ -21,7 +21,7 @@ const Buttons = () => {
it. CoreUI buttons are used to initialize operations, both in the background or
foreground of an experience.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -51,7 +51,7 @@ const Buttons = () => {
</CCol>
</CRow>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -64,7 +64,7 @@ const Buttons = () => {
<p className="text-medium-emphasis small">
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -98,7 +98,7 @@ const Buttons = () => {
</CCol>
</CRow>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -119,7 +119,7 @@ const Buttons = () => {
should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<Example href="components/buttons#button-components">
<DocsExample href="components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
@ -129,7 +129,7 @@ const Buttons = () => {
<CButton component="input" type="button" color="primary" value="Input" />
<CButton component="input" type="submit" color="primary" value="Submit" />
<CButton component="input" type="reset" color="primary" value="Reset" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -143,7 +143,7 @@ const Buttons = () => {
If you need a button, but without the strong background colors. Set{' '}
<code>variant=&#34;outline&#34;</code> prop to remove all background colors.
</p>
<Example href="components/buttons#outline-buttons">
<DocsExample href="components/buttons#outline-buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -173,7 +173,7 @@ const Buttons = () => {
</CCol>
</CRow>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -187,7 +187,7 @@ const Buttons = () => {
If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
to remove all background colors.
</p>
<Example href="components/buttons#ghost-buttons">
<DocsExample href="components/buttons#ghost-buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -217,7 +217,7 @@ const Buttons = () => {
</CCol>
</CRow>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -231,22 +231,22 @@ const Buttons = () => {
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="components/buttons#sizes">
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="lg">
Large button
</CButton>
<CButton color="secondary" size="lg">
Large button
</CButton>
</Example>
<Example href="components/buttons#sizes">
</DocsExample>
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="sm">
Small button
</CButton>
<CButton color="secondary" size="sm">
Small button
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -256,7 +256,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#pill-buttons">
<DocsExample href="components/buttons#pill-buttons">
{[
'primary',
'secondary',
@ -271,7 +271,7 @@ const Buttons = () => {
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -281,7 +281,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#square">
<DocsExample href="components/buttons#square">
{[
'primary',
'secondary',
@ -296,7 +296,7 @@ const Buttons = () => {
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -312,14 +312,14 @@ const Buttons = () => {
<code>pointer-events: none</code> applied to, disabling hover and active states from
triggering.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
<CButton color="secondary" size="lg" disabled>
Button
</CButton>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
</p>
@ -330,14 +330,14 @@ const Buttons = () => {
<code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
to assistive technologies.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
<CButton component="a" href="#" color="secondary" size="lg" disabled>
Link
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -350,49 +350,49 @@ const Buttons = () => {
<p className="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using utilities.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div className="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically stacked buttons until
the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
your browser to see them change.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div className="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column width classes. For
example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
horizontally with <code>.mx-auto</code>, too.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div className="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons when horizontal.
Here we&#39;ve taken our previous responsive example and added some flex utilities and
a margin utility on the button to right align the buttons when they&#39;re no longer
stacked.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div className="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" className="me-md-2">
Button
</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

42
src/views/components/buttons/dropdowns/Dropdowns.js
View File

@ -13,7 +13,7 @@ import {
CDropdownToggle,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Dropdowns = () => {
return (
@ -31,7 +31,7 @@ const Dropdowns = () => {
Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
elements:
</p>
<Example href="components/dropdown#single-button">
<DocsExample href="components/dropdown#single-button">
<CDropdown>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
@ -40,11 +40,11 @@ const Dropdowns = () => {
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<Example href="components/dropdown#single-button">
<DocsExample href="components/dropdown#single-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
@ -61,7 +61,7 @@ const Dropdowns = () => {
),
)}
</>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -82,7 +82,7 @@ const Dropdowns = () => {
normal button dropdowns. Those additional changes hold the caret centered in the split
button and implement a more properly sized hit area next to the main button.
</p>
<Example href="components/dropdown#split-button">
<DocsExample href="components/dropdown#split-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
@ -100,7 +100,7 @@ const Dropdowns = () => {
),
)}
</>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -114,7 +114,7 @@ const Dropdowns = () => {
Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons.
</p>
<Example href="components/dropdown#sizing">
<DocsExample href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
@ -140,8 +140,8 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown#sizing">
</DocsExample>
<DocsExample href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
@ -167,7 +167,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -181,7 +181,7 @@ const Dropdowns = () => {
Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
<code>dark</code> property. No changes are required to the dropdown items.
</p>
<Example href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
@ -192,9 +192,9 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
<Example href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown#dark-dropdowns">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<a className="navbar-brand" href="https://coreui.io/react/">
@ -227,7 +227,7 @@ const Dropdowns = () => {
</div>
</div>
</nav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -242,7 +242,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="components/dropdown#dropup">
<DocsExample href="components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@ -264,7 +264,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -279,7 +279,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="components/dropdown#dropright">
<DocsExample href="components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@ -301,7 +301,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -316,7 +316,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="components/dropdown#dropleft">
<DocsExample href="components/dropdown#dropleft">
<CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />
@ -330,7 +330,7 @@ const Dropdowns = () => {
</CDropdown>
<CButton color="secondary">Small split button</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

2
src/views/components/charts/Charts.js
View File

@ -8,7 +8,7 @@ import {
CChartPolarArea,
CChartRadar,
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const Charts = () => {
const random = () => Math.round(Math.random() * 100)

66
src/views/components/forms/checks-radios/ChecksRadios.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const ChecksRadios = () => {
return (
@ -14,10 +14,10 @@ const ChecksRadios = () => {
<strong>React Checkbox</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios">
<DocsExample href="forms/checks-radios">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -32,10 +32,10 @@ const ChecksRadios = () => {
are automatically styled to match with a lighter color to help indicate the
input&#39;s state.
</p>
<Example href="forms/checks-radios#disabled">
<DocsExample href="forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -50,7 +50,7 @@ const ChecksRadios = () => {
are automatically styled to match with a lighter color to help indicate the
input&#39;s state.
</p>
<Example href="forms/checks-radios#radios">
<DocsExample href="forms/checks-radios#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@ -64,7 +64,7 @@ const ChecksRadios = () => {
label="Checked radio"
defaultChecked
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -74,7 +74,7 @@ const ChecksRadios = () => {
<strong>React Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#disabled-1">
<DocsExample href="forms/checks-radios#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@ -90,7 +90,7 @@ const ChecksRadios = () => {
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -105,7 +105,7 @@ const ChecksRadios = () => {
properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
attribute.
</p>
<Example href="forms/checks-radios#switches">
<DocsExample href="forms/checks-radios#switches">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch
label="Checked switch checkbox input"
@ -123,7 +123,7 @@ const ChecksRadios = () => {
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -133,7 +133,7 @@ const ChecksRadios = () => {
<strong>React Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#sizes">
<DocsExample href="forms/checks-radios#sizes">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch
size="lg"
@ -145,7 +145,7 @@ const ChecksRadios = () => {
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -159,11 +159,11 @@ const ChecksRadios = () => {
By default, any number of checkboxes and radios that are immediate sibling will be
vertically stacked and appropriately spaced.
</p>
<Example href="forms/checks-radios#default-stacked">
<DocsExample href="forms/checks-radios#default-stacked">
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</Example>
<Example href="forms/checks-radios#default-stacked">
</DocsExample>
<DocsExample href="forms/checks-radios#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@ -187,7 +187,7 @@ const ChecksRadios = () => {
label="Disabled radio"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -201,7 +201,7 @@ const ChecksRadios = () => {
Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
boolean property to any <code>&lt;CFormCheck&gt;</code>.
</p>
<Example href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@ -211,8 +211,8 @@ const ChecksRadios = () => {
label="3 (disabled)"
disabled
/>
</Example>
<Example href="forms/checks-radios#inline">
</DocsExample>
<DocsExample href="forms/checks-radios#inline">
<CFormCheck
inline
type="radio"
@ -238,7 +238,7 @@ const ChecksRadios = () => {
label="3 (disabled)"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -252,7 +252,7 @@ const ChecksRadios = () => {
Remember to still provide some form of accessible name for assistive technologies (for
instance, using <code>aria-label</code>).
</p>
<Example href="forms/checks-radios#without-labels">
<DocsExample href="forms/checks-radios#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@ -265,7 +265,7 @@ const ChecksRadios = () => {
aria-label="..."
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -280,10 +280,10 @@ const ChecksRadios = () => {
property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
</Example>
<Example href="forms/checks-radios#toggle-buttons">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
button
id="btn-check-2"
@ -291,12 +291,12 @@ const ChecksRadios = () => {
label="Checked"
defaultChecked
/>
</Example>
<Example href="forms/checks-radios#toggle-buttons">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
</Example>
</DocsExample>
<h3>Radio toggle buttons</h3>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
button
buttonColor="secondary"
@ -335,12 +335,12 @@ const ChecksRadios = () => {
autoComplete="off"
label="Radio"
/>
</Example>
</DocsExample>
<h3>Outlined styles</h3>
<p className="text-medium-emphasis small">
Different variants of button, such at the various outlined styles, are supported.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios#toggle-buttons">
<div>
<CFormCheck
button
@ -385,7 +385,7 @@ const ChecksRadios = () => {
label="Radio"
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

26
src/views/components/forms/floating-labels/FloatingLabels.js
View File

@ -11,7 +11,7 @@ import {
CFormTextarea,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const FloatingLabels = () => {
return (
@ -33,7 +33,7 @@ const FloatingLabels = () => {
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating className="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@ -42,12 +42,12 @@ const FloatingLabels = () => {
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating>
<CFormInput
type="email"
@ -57,7 +57,7 @@ const FloatingLabels = () => {
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -71,7 +71,7 @@ const FloatingLabels = () => {
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
<code>&lt;CFormInput&gt;</code>s.
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@ -79,13 +79,13 @@ const FloatingLabels = () => {
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@ -94,7 +94,7 @@ const FloatingLabels = () => {
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -113,7 +113,7 @@ const FloatingLabels = () => {
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@ -123,7 +123,7 @@ const FloatingLabels = () => {
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -137,7 +137,7 @@ const FloatingLabels = () => {
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<Example href="forms/floating-labels#layout">
<DocsExample href="forms/floating-labels#layout">
<CRow xs={{ gutter: 2 }}>
<CCol md>
<CFormFloating>
@ -162,7 +162,7 @@ const FloatingLabels = () => {
</CFormFloating>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

34
src/views/components/forms/form-control/FormControl.js
View File

@ -11,7 +11,7 @@ import {
CFormTextarea,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const FormControl = () => {
return (
@ -25,7 +25,7 @@ const FormControl = () => {
<strong>React Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control">
<DocsExample href="forms/form-control">
<CForm>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
@ -40,7 +40,7 @@ const FormControl = () => {
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -54,7 +54,7 @@ const FormControl = () => {
Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
<code>size=&#34;sm&#34;</code>.
</p>
<Example href="forms/form-control#sizing">
<DocsExample href="forms/form-control#sizing">
<CFormInput
type="text"
size="lg"
@ -74,7 +74,7 @@ const FormControl = () => {
placeholder="Small input"
aria-label="sm input example"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -88,7 +88,7 @@ const FormControl = () => {
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events.
</p>
<Example href="forms/form-control#disabled">
<DocsExample href="forms/form-control#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
@ -104,7 +104,7 @@ const FormControl = () => {
readOnly
/>
<br />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -119,14 +119,14 @@ const FormControl = () => {
the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
but retain the standard cursor.
</p>
<Example href="forms/form-control#readonly">
<DocsExample href="forms/form-control#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -141,7 +141,7 @@ const FormControl = () => {
as plain text, use the <code>plainText</code> boolean property to remove the default
form field styling and preserve the correct margin and padding.
</p>
<Example href="components/accordion">
<DocsExample href="components/accordion">
<CRow className="mb-3">
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
Email
@ -164,8 +164,8 @@ const FormControl = () => {
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
<Example href="components/accordion">
</DocsExample>
<DocsExample href="components/accordion">
<CForm className="row g-3">
<div className="col-auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
@ -191,7 +191,7 @@ const FormControl = () => {
</CButton>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -201,7 +201,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#file-input">
<DocsExample href="forms/form-control#file-input">
<div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
@ -222,7 +222,7 @@ const FormControl = () => {
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -232,7 +232,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#color">
<DocsExample href="forms/form-control#color">
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
@ -240,7 +240,7 @@ const FormControl = () => {
defaultValue="#563d7c"
title="Choose your color"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

46
src/views/components/forms/input-group/InputGroup.js
View File

@ -19,7 +19,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Select = () => {
return (
@ -38,7 +38,7 @@ const Select = () => {
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="forms/input-group">
<DocsExample href="forms/input-group">
<CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
@ -74,7 +74,7 @@ const Select = () => {
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -89,7 +89,7 @@ const Select = () => {
custom form field validation within an input group. You may disable this with{' '}
<code>.flex-nowrap</code>.
</p>
<Example href="forms/input-group#wrapping">
<DocsExample href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
@ -98,7 +98,7 @@ const Select = () => {
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -116,7 +116,7 @@ const Select = () => {
<p className="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<Example href="forms/input-group#sizing">
<DocsExample href="forms/input-group#sizing">
<CInputGroup size="sm" className="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
@ -138,7 +138,7 @@ const Select = () => {
aria-describedby="inputGroup-sizing-lg"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -151,7 +151,7 @@ const Select = () => {
<p className="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text.
</p>
<Example href="forms/input-group#checkboxes-and-radios">
<DocsExample href="forms/input-group#checkboxes-and-radios">
<CInputGroup className="mb-3">
<CInputGroupText>
<CFormCheck
@ -172,7 +172,7 @@ const Select = () => {
</CInputGroupText>
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -187,13 +187,13 @@ const Select = () => {
styles are only available for input groups with a single{' '}
<code>&lt;CFormInput&gt;</code>.
</p>
<Example href="forms/input-group#multiple-inputs">
<DocsExample href="forms/input-group#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" />
<CFormInput aria-label="Last name" />
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -207,7 +207,7 @@ const Select = () => {
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#multiple-addons">
<DocsExample href="forms/input-group#multiple-addons">
<CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@ -218,7 +218,7 @@ const Select = () => {
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -232,7 +232,7 @@ const Select = () => {
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#button-addons">
<DocsExample href="forms/input-group#button-addons">
<CInputGroup className="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@ -274,7 +274,7 @@ const Select = () => {
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -284,7 +284,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#buttons-with-dropdowns">
<DocsExample href="forms/input-group#buttons-with-dropdowns">
<CInputGroup className="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@ -342,7 +342,7 @@ const Select = () => {
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -352,7 +352,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#segmented-buttons">
<DocsExample href="forms/input-group#segmented-buttons">
<CInputGroup className="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@ -385,7 +385,7 @@ const Select = () => {
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -395,7 +395,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-select">
<DocsExample href="forms/input-group#custom-select">
<CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupSelect01">
Options
@ -440,7 +440,7 @@ const Select = () => {
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -450,7 +450,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-file-input">
<DocsExample href="forms/input-group#custom-file-input">
<CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupFile01">
Upload
@ -495,7 +495,7 @@ const Select = () => {
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

38
src/views/components/forms/layout/Layout.js
View File

@ -14,7 +14,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsExample } from 'src/components'
const Layout = () => {
return (
@ -29,7 +29,7 @@ const Layout = () => {
More complex forms can be built using our grid classes. Use these for form layouts
that require multiple columns, varied widths, and additional alignment options.
</p>
<Example href="forms/layout#form-grid">
<DocsExample href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@ -38,7 +38,7 @@ const Layout = () => {
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -52,7 +52,7 @@ const Layout = () => {
By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
, you can have control over the gutter width in as well the inline as block direction.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CRow className="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@ -61,11 +61,11 @@ const Layout = () => {
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CForm className="row g-3">
<CCol md={6}>
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
@ -105,7 +105,7 @@ const Layout = () => {
<CButton type="submit">Sign in</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -127,7 +127,7 @@ const Layout = () => {
alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our
stacked radio inputs label to better align the text baseline.
</p>
<Example href="forms/layout#horizontal-form">
<DocsExample href="forms/layout#horizontal-form">
<CForm>
<CRow className="mb-3">
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
@ -180,7 +180,7 @@ const Layout = () => {
</CRow>
<CButton type="submit">Sign in</CButton>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -195,7 +195,7 @@ const Layout = () => {
your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
</p>
<Example href="forms/layout#horizontal-form-label-sizing">
<DocsExample href="forms/layout#horizontal-form-label-sizing">
<CRow className="mb-3">
<CFormLabel
htmlFor="colFormLabelSm"
@ -236,7 +236,7 @@ const Layout = () => {
/>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -254,7 +254,7 @@ const Layout = () => {
split the rest, with specific column classes like{' '}
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="forms/layout#column-sizing">
<DocsExample href="forms/layout#column-sizing">
<CRow className="g-3">
<CCol sm={7}>
<CFormInput placeholder="City" aria-label="City" />
@ -266,7 +266,7 @@ const Layout = () => {
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -282,7 +282,7 @@ const Layout = () => {
columns only take up as much space as needed. Put another way, the column sizes itself
based on the contents.
</p>
<Example href="forms/layout#auto-sizing">
<DocsExample href="forms/layout#auto-sizing">
<CForm className="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
@ -317,11 +317,11 @@ const Layout = () => {
<CButton type="submit">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
You can then remix that once again with size-specific column classes.
</p>
<Example href="forms/layout#auto-sizing">
<DocsExample href="forms/layout#auto-sizing">
<CForm className="row gx-3 gy-2 align-items-center">
<CCol sm={3}>
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
@ -356,7 +356,7 @@ const Layout = () => {
<CButton type="submit">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -374,7 +374,7 @@ const Layout = () => {
<code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
<code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="forms/layout#inline-forms">
<DocsExample href="forms/layout#inline-forms">
<CForm className="row row-cols-lg-auto g-3 align-items-center">
<CCol xs={12}>
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
@ -403,7 +403,7 @@ const Layout = () => {
<CButton type="submit">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

18
src/views/components/forms/range/Range.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Range = () => {
return (
@ -18,10 +18,10 @@ const Range = () => {
Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<DocsExample href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -35,10 +35,10 @@ const Range = () => {
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events.
</p>
<Example href="forms/range#disabled">
<DocsExample href="forms/range#disabled">
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -53,10 +53,10 @@ const Range = () => {
<code>0</code> and <code>100</code>, respectively. You may specify new values for
those using the <code>min</code> and <code>max</code> attributes.
</p>
<Example href="forms/range#min-and-max">
<DocsExample href="forms/range#min-and-max">
<CFormLabel htmlFor="customRange2">Example range</CFormLabel>
<CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -71,10 +71,10 @@ const Range = () => {
specify a <code>step</code> value. In the example below, we double the number of steps
by using <code>step=&#34;0.5&#34;</code>.
</p>
<Example href="forms/range#steps">
<DocsExample href="forms/range#steps">
<CFormLabel htmlFor="customRange3">Example range</CFormLabel>
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

26
src/views/components/forms/select/Select.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Select = () => {
return (
@ -14,14 +14,14 @@ const Select = () => {
<strong>React Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<DocsExample href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -35,7 +35,7 @@ const Select = () => {
You may also choose from small and large custom selects to match our similarly sized
text inputs.
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
<option>Open this select menu</option>
<option value="1">One</option>
@ -48,29 +48,29 @@ const Select = () => {
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -84,14 +84,14 @@ const Select = () => {
Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
appearance and remove pointer events.
</p>
<Example href="forms/select#disabled">
<DocsExample href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -101,9 +101,9 @@ const Select = () => {
<strong>React Select</strong> <small></small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<DocsExample href="forms/select">
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol> */}

16
src/views/components/forms/validation/Validation.js
View File

@ -16,7 +16,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const CustomStyles = () => {
const [validated, setValidated] = useState(false)
@ -274,7 +274,7 @@ const Validation = () => {
Custom feedback styles apply custom colors, borders, focus styles, and background
icons to better communicate feedback.{' '}
</p>
<Example href="forms/validation">{CustomStyles()}</Example>
<DocsExample href="forms/validation">{CustomStyles()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -294,7 +294,7 @@ const Validation = () => {
While these feedback styles cannot be styled with CSS, you can still customize the
feedback text through JavaScript.
</p>
<Example href="forms/validation#browser-defaults">{BrowserDefaults()}</Example>
<DocsExample href="forms/validation#browser-defaults">{BrowserDefaults()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -315,7 +315,7 @@ const Validation = () => {
attribute allows more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
</p>
<Example href="forms/validation#server-side">
<DocsExample href="forms/validation#server-side">
<CForm className="row g-3 needs-validation">
<CCol md={4}>
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@ -388,7 +388,7 @@ const Validation = () => {
</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -412,7 +412,7 @@ const Validation = () => {
<code>&lt;CFormCheck&gt;</code>s
</li>
</ul>
<Example href="forms/validation#supported-elements">
<DocsExample href="forms/validation#supported-elements">
<CForm validated={true}>
<div className="mb-3">
<CFormLabel htmlFor="validationTextarea" className="form-label">
@ -478,7 +478,7 @@ const Validation = () => {
</CButton>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -495,7 +495,7 @@ const Validation = () => {
our column classes have this already, but your project may require an alternative
setup.
</p>
<Example href="forms/validation#tooltips">{Tooltips()}</Example>
<DocsExample href="forms/validation#tooltips">{Tooltips()}</DocsExample>
</CCardBody>
</CCard>
</CCol>

2
src/views/components/icons/brands/Brands.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const toKebabCase = (str) => {
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()

2
src/views/components/icons/coreui-icons/CoreUIIcons.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { freeSet } from '@coreui/icons'
import { getIconsView } from '../brands/Brands.js'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const CoreUIIcons = () => {
return (

2
src/views/components/icons/flags/Flags.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { getIconsView } from '../brands/Brands.js'
import { flagSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const CoreUIIcons = () => {
return (

18
src/views/components/notifications/alerts/Alerts.js
View File

@ -9,7 +9,7 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Alerts = () => {
return (
@ -32,7 +32,7 @@ const Alerts = () => {
</a>
.
</p>
<Example href="components/alert">
<DocsExample href="components/alert">
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
<CAlert color="success">A simple success alert—check it out!</CAlert>
@ -41,7 +41,7 @@ const Alerts = () => {
<CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -55,7 +55,7 @@ const Alerts = () => {
Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
links inside any alert.
</p>
<Example href="components/alert#link-color">
<DocsExample href="components/alert#link-color">
<CAlert color="primary">
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like.
@ -88,7 +88,7 @@ const Alerts = () => {
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
a click if you like.
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -102,7 +102,7 @@ const Alerts = () => {
Alert can also incorporate supplementary components &amp; elements like heading,
paragraph, and divider.
</p>
<Example href="components/alert#additional-content">
<DocsExample href="components/alert#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
@ -116,7 +116,7 @@ const Alerts = () => {
tidy.
</p>
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -129,7 +129,7 @@ const Alerts = () => {
<p className="text-medium-emphasis small">
Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
</p>
<Example href="components/alert#dismissing">
<DocsExample href="components/alert#dismissing">
<CAlert
color="warning"
dismissible
@ -139,7 +139,7 @@ const Alerts = () => {
>
<strong>Go right ahead</strong> and click that dimiss over there on the right.
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

22
src/views/components/notifications/badges/Badges.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const Badges = () => {
return (
@ -18,7 +18,7 @@ const Badges = () => {
Bootstrap badge scale to suit the size of the parent element by using relative font
sizing and <code>em</code> units.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<h1>
Example heading <CBadge color="secondary">New</CBadge>
</h1>
@ -37,15 +37,15 @@ const Badges = () => {
<h6>
Example heading <CBadge color="secondary">New</CBadge>
</h6>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Remark that depending on how you use them, badges may be complicated for users of
screen readers and related assistive technologies.
@ -54,12 +54,12 @@ const Badges = () => {
Unless the context is clear, consider including additional context with a visually
hidden piece of additional text.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span className="visually-hidden">unread messages</span>
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -73,7 +73,7 @@ const Badges = () => {
Add any of the below-mentioned <code>color</code> props to modify the presentation of
a badge.
</p>
<Example href="components/badge#contextual-variations">
<DocsExample href="components/badge#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
@ -81,7 +81,7 @@ const Badges = () => {
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard className="mb-4">
@ -92,7 +92,7 @@ const Badges = () => {
<p className="text-medium-emphasis small">
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
</p>
<Example href="components/badge#pill-badges">
<DocsExample href="components/badge#pill-badges">
<CBadge color="primary" shape="rounded-pill">
primary
</CBadge>
@ -114,7 +114,7 @@ const Badges = () => {
<CBadge color="dark" shape="rounded-pill">
dark
</CBadge>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

34
src/views/components/notifications/modals/Modals.js
View File

@ -15,7 +15,7 @@ import {
CRow,
CTooltip,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const LiveDemo = () => {
const [visible, setVisible] = useState(false)
@ -476,7 +476,7 @@ const Modals = () => {
include modal headers with dismiss actions whenever possible, or provide another
explicit dismiss action.
</p>
<Example href="components/modal">
<DocsExample href="components/modal">
<CModal
className="show d-block position-static"
backdrop={false}
@ -493,7 +493,7 @@ const Modals = () => {
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -507,7 +507,7 @@ const Modals = () => {
Toggle a working modal demo by clicking the button below. It will slide down and fade
in from the top of the page.
</p>
<Example href="components/modal#live-demo">{LiveDemo()}</Example>
<DocsExample href="components/modal#live-demo">{LiveDemo()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -522,7 +522,7 @@ const Modals = () => {
modal will behave as though the backdrop is static, meaning it will not close when
clicking outside it. Click the button below to try it.
</p>
<Example href="components/modal#static-backdrop">{StaticBackdrop()}</Example>
<DocsExample href="components/modal#static-backdrop">{StaticBackdrop()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -537,16 +537,16 @@ const Modals = () => {
modal will behave as though the backdrop is static, meaning it will not close when
clicking outside it. Click the button below to try it.
</p>
<Example href="components/modal#scrolling-long-content">
<DocsExample href="components/modal#scrolling-long-content">
{ScrollingLongContent()}
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
You can also create a scrollable modal that allows scroll the modal body by adding{' '}
<code>scrollable</code> prop.
</p>
<Example href="components/modal#scrolling-long-content">
<DocsExample href="components/modal#scrolling-long-content">
{ScrollingLongContent2()}
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -560,8 +560,12 @@ const Modals = () => {
Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
vertically center the modal.
</p>
<Example href="components/modal#vertically-centered">{VerticallyCentered()}</Example>
<Example href="components/modal#vertically-centered">{VerticallyCentered2()}</Example>
<DocsExample href="components/modal#vertically-centered">
{VerticallyCentered()}
</DocsExample>
<DocsExample href="components/modal#vertically-centered">
{VerticallyCentered2()}
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -576,7 +580,9 @@ const Modals = () => {
modals as needed. When modals are closed, any tooltips and popovers within are also
automatically dismissed.
</p>
<Example href="components/modal#tooltips-and-popovers">{TooltipsPopovers()}</Example>
<DocsExample href="components/modal#tooltips-and-popovers">
{TooltipsPopovers()}
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -636,7 +642,7 @@ const Modals = () => {
</tr>
</tbody>
</table>
<Example href="components/modal#optional-sizes">{OptionalSizes()}</Example>
<DocsExample href="components/modal#optional-sizes">{OptionalSizes()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -706,7 +712,7 @@ const Modals = () => {
</tr>
</tbody>
</table>
<Example href="components/modal#fullscreen-modal">{FullscreenModal()}</Example>
<DocsExample href="components/modal#fullscreen-modal">{FullscreenModal()}</DocsExample>
</CCardBody>
</CCard>
</CCol>

28
src/views/components/notifications/toasts/Toasts.js
View File

@ -12,7 +12,7 @@ import {
CToastHeader,
CToaster,
} from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
import { DocsCallout, DocsExample } from 'src/components'
const ExampleToast = () => {
const [toast, addToast] = useState(0)
@ -62,7 +62,7 @@ const Toasts = () => {
we require a single element to contain your “toasted” content and strongly encourage a
dismiss button.
</p>
<Example href="components/toast">
<DocsExample href="components/toast">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
@ -81,8 +81,8 @@ const Toasts = () => {
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</Example>
<Example href="components/toast">{ExampleToast()}</Example>
</DocsExample>
<DocsExample href="components/toast">{ExampleToast()}</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -95,7 +95,7 @@ const Toasts = () => {
<p className="text-medium-emphasis small">
Toasts are slightly translucent to blend in with what&#39;s below them.
</p>
<Example href="components/toast#translucent">
<DocsExample href="components/toast#translucent">
<div className="bg-dark p-3">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
@ -116,7 +116,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -130,7 +130,7 @@ const Toasts = () => {
You can stack toasts by wrapping them in a toast container, which will vertically add
some spacing.
</p>
<Example href="components/toast#stacking">
<DocsExample href="components/toast#stacking">
<CToaster>
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
@ -169,7 +169,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</CToaster>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -188,18 +188,18 @@ const Toasts = () => {
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
the layout.
</p>
<Example href="components/toast#custom-content">
<DocsExample href="components/toast#custom-content">
<CToast autohide={false} className="align-items-center">
<div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody>
<CToastClose className="me-2 m-auto" />
</div>
</CToast>
</Example>
</DocsExample>
<p className="text-medium-emphasis small">
Alternatively, you can also add additional controls and components to toasts.
</p>
<Example href="components/toast#custom-content">
<DocsExample href="components/toast#custom-content">
<CToast autohide={false}>
<CToastBody>
Hello, world! This is a toast message.
@ -213,7 +213,7 @@ const Toasts = () => {
</div>
</CToastBody>
</CToast>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@ -232,14 +232,14 @@ const Toasts = () => {
<code>white</code> property to our close button. For a crisp edge, we remove the
default border with <code>.border-0</code>.
</p>
<Example href="components/toast#color-schemes">
<DocsExample href="components/toast#color-schemes">
<CToast autohide={false} color="primary" className="text-white align-items-center">
<div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody>
<CToastClose className="me-2 m-auto" white />
</div>
</CToast>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>

2
src/views/theme/colors/Colors.js
View File

@ -3,7 +3,7 @@ import React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames'
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
import { rgbToHex } from '@coreui/utils'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const ThemeView = () => {
const [color, setColor] = useState('rgb(255, 255, 255)')

2
src/views/theme/typography/Typography.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { CCard, CCardHeader, CCardBody } from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { DocsLink } from 'src/components'
const Typography = () => {
return (