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

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-05-24 17:13:09 +02:00
parent 2d75b27573
commit 9adc776392
56 changed files with 626 additions and 1098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -12,10 +12,10 @@ const loading = (
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
// Pages
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
class App extends Component {
render() {

4
src/components/AppHeader.js
View File

@ -31,7 +31,6 @@ const AppHeader = () => {
<CHeaderBrand className="mx-auto d-md-none" to="/">
<CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav className="d-none d-md-flex me-auto">
<CNavItem>
<CNavLink to="/dashboard" component={NavLink} activeClassName="active">
@ -45,7 +44,6 @@ const AppHeader = () => {
<CNavLink>Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav>
<CNavItem>
<CNavLink>
@ -63,7 +61,7 @@ const AppHeader = () => {
</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav>
<CHeaderNav className="ms-3">
<AppHeaderDropdown />
</CHeaderNav>
</CContainer>

13
src/reusable/DocsLink.js
View File

@ -1,16 +1,17 @@
import PropTypes from 'prop-types'
import React from 'react'
import { CLink } from '@coreui/react'
const DocsLink = (props) => {
const { name, text, ...rest } = props
const { href, name, text, ...rest } = props
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
const _href = name ? `https://coreui.io/react/docs/components/${name}` : href
return (
<div className="float-end">
<CLink
{...rest}
href={href}
href={_href}
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
@ -21,4 +22,10 @@ const DocsLink = (props) => {
)
}
DocsLink.propTypes = {
href: PropTypes.string,
name: PropTypes.string,
text: PropTypes.string,
}
export default React.memo(DocsLink)

15
src/reusable/Example.js
View File

@ -1,21 +1,23 @@
import PropTypes from 'prop-types'
import React from 'react'
import { CLink, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
import CIcon from '@coreui/icons-react'
const Example = (props) => {
const { children, href, ...rest } = props
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
const { children, href } = props
return (
<div className="example">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
<CIcon name="cil-media-play" className="me-2" />
Preview
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href={href} target="_blank">
<CIcon name="cil-code" className="me-2" />
Code
</CNavLink>
</CNavItem>
@ -29,4 +31,9 @@ const Example = (props) => {
)
}
Example.propTypes = {
children: PropTypes.node,
href: PropTypes.string,
}
export default React.memo(Example)

59
src/views/examples/base/accordion/Accordion.js → src/views/components/base/accordion/Accordion.js
View File

@ -12,7 +12,7 @@ import {
CAccordionHeader,
CAccordionItem,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Accordion = () => {
const [activeKey, setActiveKey] = useState(0)
@ -20,7 +20,10 @@ const Accordion = () => {
return (
<CRow>
<CCol>
<CCol xs={12}>
<DocsCallout name="Accordion" href="components/accordion" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Accordion</strong>
@ -29,7 +32,7 @@ const Accordion = () => {
<p className="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
<Example href="components/accordion">
<CAccordion>
<CAccordionItem>
<CAccordionHeader>
@ -42,13 +45,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey === 1}>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It is hidden by
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
@ -63,13 +66,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey === 2}>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
@ -84,13 +87,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey === 3}>
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It is hidden by
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
@ -108,7 +111,7 @@ const Accordion = () => {
borders, and some rounded corners to render accordions edge-to-edge with their parent
container.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
<Example href="components/accordion#flush">
<CAccordion flush>
<CAccordionItem>
<CAccordionHeader>
@ -121,13 +124,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 1}>
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It is hidden by
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
@ -142,13 +145,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 2}>
<CAccordionBody>
<strong>This is the second item's accordion body.</strong> It is hidden by
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
@ -163,13 +166,13 @@ const Accordion = () => {
</CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 3}>
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It is hidden by
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as
the showing and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
custom CSS or overriding our default variables. It&#39;s also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>

9
src/views/examples/base/breadcrumbs/Breadcrumbs.js → src/views/components/base/breadcrumbs/Breadcrumbs.js
View File

@ -9,12 +9,15 @@ import {
CRow,
CLink,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Breadcrumbs = () => {
return (
<CRow>
<CCol>
<CCol xs={12}>
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Breadcrumb</strong>
@ -35,7 +38,7 @@ const Breadcrumbs = () => {
</a>
.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/breadcrumb">
<Example href="components/breadcrumb">
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>

101
src/views/examples/base/cards/Cards.js → src/views/components/base/cards/Cards.js
View File

@ -19,11 +19,14 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Cards = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Card" href="components/card" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -36,14 +39,14 @@ const Cards = () => {
alignment and mix well with other CoreUI components. Cards have no top, left, and
right margins by default, so use{' '}
<a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
They have no fixed width to start, so they'll fill the full width of its parent.
They have no fixed width to start, so they&#39;ll fill the full width of its parent.
</p>
<p className="text-medium-emphasis small">
Below is an example of a basic card with mixed content and a fixed width. Cards have
no fixed width to start, so they'll naturally fill the full width of its parent
no fixed width to start, so they&#39;ll naturally fill the full width of its parent
element.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card">
<Example href="components/card">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -67,7 +70,7 @@ const Cards = () => {
<CCardTitle>Card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of the
card's content.
card&#39;s content.
</CCardText>
<CButton href="#">Go somewhere</CButton>
</CCardBody>
@ -86,7 +89,7 @@ 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="https://coreui.io/react/docs/4.0/components/card/#body">
<Example href="components/card/#body">
<CCard>
<CCardBody>This is some text within a card body.</CCardBody>
</CCard>
@ -111,14 +114,14 @@ const Cards = () => {
stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
arranged rightly.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#titles-text-and-links">
<Example href="components/card/#titles-text-and-links">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of the
card's content.
card&#39;s content.
</CCardText>
<CCardLink href="#">Card link</CCardLink>
<CCardLink href="#">Another link</CCardLink>
@ -139,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="https://coreui.io/react/docs/4.0/components/card/#images">
<Example href="components/card/#images">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -162,7 +165,7 @@ const Cards = () => {
<CCardBody>
<CCardText>
Some quick example text to build on the card title and make up the bulk of the
card's content.
card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
@ -179,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="https://coreui.io/react/docs/4.0/components/card/#list-groups">
<Example href="components/card/#list-groups">
<CRow>
<CCol lg={4}>
<CCard>
@ -226,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="https://coreui.io/react/docs/4.0/components/card/#kitchen-sink">
<Example href="components/card/#kitchen-sink">
<CCard style={{ width: '18rem' }}>
<CCardImage
component="svg"
@ -250,7 +253,7 @@ const Cards = () => {
<CCardTitle>Card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of the
card's content.
card&#39;s content.
</CCardText>
</CCardBody>
<CListGroup flush>
@ -276,7 +279,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Add an optional header and/or footer within a card.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
<Example href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Header</CCardHeader>
<CCardBody>
@ -289,9 +292,9 @@ const Cards = () => {
</CCard>
</Example>
<p className="text-medium-emphasis small">
Card headers can be styled by adding ex. <code>component="h5"</code>.
Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
<Example href="components/card/#header-and-footer">
<CCard>
<CCardHeader component="h5">Header</CCardHeader>
<CCardBody>
@ -303,7 +306,7 @@ const Cards = () => {
</CCardBody>
</CCard>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
<Example href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Quote</CCardHeader>
<CCardBody>
@ -319,7 +322,7 @@ const Cards = () => {
</CCardBody>
</CCard>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
<Example href="components/card/#header-and-footer">
<CCard className="text-center">
<CCardHeader>Header</CCardHeader>
<CCardBody>
@ -342,15 +345,15 @@ const Cards = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Cards assume no specific <code>width</code> to start, so they'll be 100% wide unless
otherwise stated. You can adjust this as required with custom CSS, grid classes, grid
Sass mixins, or services.
Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide
unless otherwise stated. You can adjust this as required with custom CSS, grid
classes, grid Sass mixins, or services.
</p>
<h3>Using grid markup</h3>
<p className="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
<Example href="components/card/#sizing">
<CRow>
<CCol sm="6">
<CCard>
@ -380,9 +383,9 @@ const Cards = () => {
<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's width.
rapidly set a card&#39;s width.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
<Example href="components/card/#sizing">
<CCard className="w-75">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@ -406,7 +409,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a width.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
<Example href="components/card/#sizing">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@ -432,7 +435,7 @@ const Cards = () => {
<a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#text-alignment">
<Example href="components/card/#text-alignment">
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@ -474,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="https://coreui.io/react/docs/4.0/components/card/##navigation">
<Example href="components/card/##navigation">
<CCard className="text-center">
<CCardHeader>
<CNav variant="tabs" className="card-header-tabs">
@ -502,7 +505,7 @@ const Cards = () => {
</CCardBody>
</CCard>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/card/##navigation">
<Example href="components/card/##navigation">
<CCard className="text-center">
<CCardHeader>
<CNav variant="pills" className="card-header-pills">
@ -540,10 +543,10 @@ const Cards = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Similar to headers and footers, cards can include top and bottom "image caps"—images
at the top or bottom of a card.
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="https://coreui.io/react/docs/4.0/components/card/#image-caps">
<Example href="components/card/#image-caps">
<CRow>
<CCol lg={6}>
<CCard className="mb-3">
@ -627,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="https://coreui.io/react/docs/4.0/components/card/#background-and-color">
<Example href="components/card/#background-and-color">
<CRow>
{[
{ color: 'primary', textColor: 'white' },
@ -646,7 +649,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
the card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
@ -659,9 +662,9 @@ const Cards = () => {
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
just the <code>border-color</code> of a card. Note that you can set{' '}
<code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
card's contents as shown below.
card&#39;s contents as shown below.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#border">
<Example href="components/card/#border">
<CRow>
{[
{ color: 'primary', textColor: 'primary' },
@ -680,7 +683,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
the card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
@ -693,9 +696,9 @@ const Cards = () => {
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
just the <code>border-color</code> of a card. Note that you can set{' '}
<code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
card's contents as shown below.
card&#39;s contents as shown below.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#top-border">
<Example href="components/card/#top-border">
<CRow>
{[
{ color: 'primary', textColor: 'primary' },
@ -717,7 +720,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of
the card's content.
the card&#39;s content.
</CCardText>
</CCardBody>
</CCard>
@ -739,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="https://coreui.io/react/docs/4.0/components/card/#card-groups">
<Example href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@ -837,7 +840,7 @@ const Cards = () => {
<p className="text-medium-emphasis small">
When using card groups with footers, their content will automatically line up.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups">
<Example href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@ -943,13 +946,13 @@ const Cards = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Use the <code>CRow</code> component and set{' '}
<code>&#123;xs|sm|md|lg|xl|xxl}=&#123;&#123; cols: * &#125;&#125;</code> property to
control how many grid columns (wrapped around your cards) you show per row. For
example, here's <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the 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.
<code>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: * &#125;&#125;</code> property
to control how many grid columns (wrapped around your cards) you show per row. For
example, here&#39;s <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the
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="https://coreui.io/react/docs/4.0/components/card/#grid-cards">
<Example href="components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
<CCol xs>
<CCard>
@ -1082,10 +1085,10 @@ const Cards = () => {
</CRow>
</Example>
<p className="text-medium-emphasis small">
Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you'll see the
Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you&#39;ll see the
fourth card wrap.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#grid-cards">
<Example href="components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
<CCol xs>
<CCard>

25
src/views/examples/base/carousels/Carousels.js → src/views/components/base/carousels/Carousels.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React from 'react'
import {
CCard,
CCardBody,
@ -9,7 +9,7 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
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',
@ -24,10 +24,11 @@ const slidesLight = [
]
const Carousels = () => {
const [activeIndex] = useState(1)
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Carousel" href="components/carousel" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -35,7 +36,7 @@ const Carousels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">Here’s a carousel with slides</p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel">
<Example href="components/carousel">
<CCarousel>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -60,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="https://coreui.io/react/docs/4.0/components/carousel/#with-controls">
<Example href="components/carousel/#with-controls">
<CCarousel controls>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -85,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="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators">
<Example href="components/carousel/#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -115,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="https://coreui.io/react/docs/4.0/components/carousel/#with-captions">
<Example href="components/carousel/#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -150,10 +151,10 @@ const Carousels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>transition="crossfade"</code> to your carousel to animate slides with a fade
transition instead of a slide.
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
with a fade transition instead of a slide.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#crossfade">
<Example href="components/carousel/#crossfade">
<CCarousel controls transition="crossfade">
<CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -181,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="https://coreui.io/react/docs/4.0/components/carousel/#dark-variant">
<Example href="components/carousel/#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />

9
src/views/examples/base/collapses/Collapses.js → 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 { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Collapses = () => {
const [visible, setVisible] = useState(false)
@ -9,6 +9,9 @@ const Collapses = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Collapse" href="components/collapse" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -16,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="https://coreui.io/react/docs/4.0/components/collapse">
<Example href="components/collapse">
<CButton
href="#"
onClick={(e) => {
@ -49,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="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets">
<Example href="components/collapse#multiple-targets">
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
<CButton

0
src/views/examples/base/index.js → src/views/components/base/index.js
View File

4
src/views/examples/base/jumbotrons/Jumbotrons.js → src/views/components/base/jumbotrons/Jumbotrons.js
View File

@ -38,8 +38,8 @@ const Jumbotrons = () => {
<h2>Add borders</h2>
<p>
Or, keep it light and add a border for some added definition to the boundaries of
your content. Be sure to look under the hood at the source HTML here as we've
adjusted the alignment and sizing of both column's content for equal-height.
your content. Be sure to look under the hood at the source HTML here as we&#39;ve
adjusted the alignment and sizing of both column&#39;s content for equal-height.
</p>
<CButton color="secondary" variant="outline">
Example button

48
src/views/examples/base/list-groups/ListGroups.js → src/views/components/base/list-groups/ListGroups.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React from 'react'
import {
CBadge,
CCard,
@ -10,11 +10,14 @@ import {
CListGroupItem,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const ListGroups = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="List Group" href="components/list-group" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -25,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="https://coreui.io/react/docs/4.0/components/list-group">
<Example href="components/list-group">
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -47,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="https://coreui.io/react/docs/4.0/components/list-group/#active-items">
<Example href="components/list-group/#active-items">
<CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -69,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="https://coreui.io/react/docs/4.0/components/list-group/#disabled-items">
<Example href="components/list-group/#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -90,12 +93,12 @@ const ListGroups = () => {
<p className="text-medium-emphasis small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
<em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
<code>component="a|button"</code>. We separate these pseudo-classes to ensure list
groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
<code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
<code>&lt;div&gt;</code>
s) don't provide a click or tap affordance.
s) don&#39;tprovide a click or tap affordance.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#links-and-buttons">
<Example href="components/list-group/#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
Cras justo odio
@ -127,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="https://coreui.io/react/docs/4.0/components/list-group/#flush">
<Example href="components/list-group/#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -146,14 +149,14 @@ const ListGroups = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>layout="horizontal"</code> to change the layout of list group items from
vertical to horizontal across all breakpoints. Alternatively, choose a responsive
variant <code>.layout="horizontal-&#123;sm | md | lg | xl | xxl&#125;"</code> to make
a list group horizontal starting at that breakpoint's <code>min-width</code>.
Currently{' '}
Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
to make a list group horizontal starting at that breakpoint&#39;s{' '}
<code>min-width</code>. Currently{' '}
<strong>horizontal list groups cannot be combined with flush list groups.</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#flush">
<Example 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>
@ -174,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="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes">
<Example href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
{[
@ -199,7 +202,7 @@ const ListGroups = () => {
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="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes">
<Example href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#">
Dapibus ac facilisis in
@ -232,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="https://coreui.io/react/docs/4.0/components/list-group/#with-badges">
<Example href="components/list-group/#with-badges">
<CListGroup>
<CListGroupItem className="d-flex justify-content-between align-items-center">
Cras justo odio
@ -267,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="https://coreui.io/react/docs/4.0/components/list-group/#custom-content">
<Example href="components/list-group/#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<div className="d-flex w-100 justify-content-between">
@ -314,9 +317,10 @@ const ListGroups = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Place CoreUI's checkboxes and radios within list group items and customize as needed.
Place CoreUI&#39;s checkboxes and radios within list group items and customize as
needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#checkboxes-and-radios">
<Example href="components/list-group/#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />

0
src/views/examples/base/navbars/Navbars.js → src/views/components/base/navbars/Navbars.js
View File

49
src/views/examples/base/navs/Navs.js → src/views/components/base/navs/Navs.js
View File

@ -13,11 +13,14 @@ import {
CNavItem,
CNavLink,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Navs = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Nav" href="components/nav" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -30,7 +33,7 @@ const Navs = () => {
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<Example href="components/nav#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@ -57,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="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<Example href="components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
@ -89,7 +92,7 @@ const Navs = () => {
<p className="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#horizontal-alignment">
<Example href="components/nav#horizontal-alignment">
<CNav className="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
@ -112,7 +115,7 @@ const Navs = () => {
<p className="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<Example href="components/nav#base-nav">
<CNav className="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
@ -146,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="https://coreui.io/react/docs/4.0/components/nav#vertical">
<Example href="components/nav#vertical">
<CNav className="flex-column">
<CNavItem>
<CNavLink href="#" active>
@ -176,10 +179,10 @@ const Navs = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant="tabs"</code> class to
generate a tabbed interface
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs">
<Example href="components/nav#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
@ -209,9 +212,9 @@ const Navs = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Take that same HTML, but use <code>variant="pills"</code> instead:
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#pills">
<Example href="components/nav#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@ -241,12 +244,12 @@ const Navs = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Force your <code>.nav</code>'s contents to extend the full available width one of two
modifier classes. To proportionately fill all available space with your{' '}
<code>.nav-item</code>s, use <code>layout="fill"</code>. Notice that all horizontal
space is occupied, but not every nav item has the same width.
Force your <code>.nav</code>&#39;s contents to extend the full available width one of
two modifier classes. To proportionately fill all available space with your{' '}
<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="https://coreui.io/react/docs/4.0/components/nav#fill-and-justify">
<Example href="components/nav#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
@ -267,11 +270,11 @@ const Navs = () => {
</CNav>
</Example>
<p className="text-medium-emphasis small">
For equal-width elements, use <code>layout="justified"</code>. All horizontal space
will be occupied by nav links, but unlike the .nav-fill above, every nav item will be
the same width.
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="https://coreui.io/react/docs/4.0/components/nav#fill-and-justify">
<Example href="components/nav#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
@ -307,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="https://coreui.io/react/docs/4.0/components/nav#working-with-flex-utilities">
<Example href="components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" className="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
@ -328,7 +331,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs-with-dropdowns">
<Example href="components/nav#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@ -362,7 +365,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/nav#pills-with-dropdowns">
<Example href="components/nav#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>

33
src/views/examples/base/paginations/Paginations.js → src/views/components/base/paginations/Paginations.js
View File

@ -8,11 +8,14 @@ import {
CPaginationItem,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Paginations = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Pagination" href="components/pagination" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -27,13 +30,13 @@ const Paginations = () => {
screen readers and other assistive technologies.
</p>
<p className="text-medium-emphasis small">
In addition, as pages likely have more than one such navigation section, it's
In addition, as pages likely have more than one such navigation section, it&#39;s
advisable to provide a descriptive <code>aria-label</code> for the{' '}
<code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
component is used to navigate between a set of search results, an appropriate label
could be <code>aria-label="Search results pages"</code>.
could be <code>aria-label=&#34;Search results pages&#34;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination">
<Example href="components/pagination">
<CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -55,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="https://coreui.io/react/docs/4.0/components/pagination#working-with-icons">
<Example href="components/pagination#working-with-icons">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
@ -85,11 +88,11 @@ const Paginations = () => {
<p className="text-medium-emphasis small">
While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '}
<em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
property is not yet standardized and doesn't account for keyboard navigation. As such,
we always add <code>tabindex="-1"</code> on disabled links and use custom JavaScript
to fully disable their functionality.
property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
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="https://coreui.io/react/docs/4.0/components/pagination#disabled-and-active-states">
<Example href="components/pagination#disabled-and-active-states">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
@ -112,10 +115,10 @@ const Paginations = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Fancy larger or smaller pagination? Add <code>size="lg"</code> or{' '}
<code>size="sm"</code> for additional sizes.
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="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<Example href="components/pagination#sizing">
<CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -124,7 +127,7 @@ const Paginations = () => {
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<Example href="components/pagination#sizing">
<CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -146,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="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<Example href="components/pagination#aligment">
<CPagination className="justify-content-center" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@ -155,7 +158,7 @@ const Paginations = () => {
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<Example href="components/pagination#aligment">
<CPagination className="justify-content-end" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>

9
src/views/examples/base/popovers/Popovers.js → src/views/components/base/popovers/Popovers.js
View File

@ -1,17 +1,20 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Popovers = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Popover" href="components/popover" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Popover</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/popover">
<Example href="components/popover">
<CPopover
title="Popover title"
content="And here’s some amazing content. It’s very engaging. Right?"
@ -35,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="https://coreui.io/react/docs/4.0/components/popover#four-directions">
<Example href="components/popover#four-directions">
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"

25
src/views/examples/base/progress/Progress.js → src/views/components/base/progress/Progress.js
View File

@ -1,10 +1,13 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Progress = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Progress" href="components/progress" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -13,13 +16,13 @@ const Progress = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Progress components are built with two HTML elements, some CSS to set the width, and a
few attributes. We don't use{' '}
few attributes. We don&#39;tuse{' '}
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
the HTML5 <code>&lt;progress&gt;</code> element
</a>
, ensuring you can stack progress bars, animate them, and place text labels over them.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress">
<Example href="components/progress">
<CProgress className="mb-3">
<CProgressBar value={0} />
</CProgress>
@ -49,7 +52,7 @@ const Progress = () => {
Add labels to your progress bars by placing text within the{' '}
<code>&lt;CProgressBar&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#labels">
<Example href="components/progress#labels">
<CProgress className="mb-3">
<CProgressBar value={25}>25%</CProgressBar>
</CProgress>
@ -68,7 +71,7 @@ const Progress = () => {
you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
resize accordingly.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#height">
<Example href="components/progress#height">
<CProgress height={1} className="mb-3">
<CProgressBar value={25}></CProgressBar>
</CProgress>
@ -88,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="https://coreui.io/react/docs/4.0/components/progress#backgrounds">
<Example href="components/progress#backgrounds">
<CProgress className="mb-3">
<CProgressBar color="success" value={25} />
</CProgress>
@ -114,7 +117,7 @@ const Progress = () => {
<p className="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars">
<Example href="components/progress#multiple-bars">
<CProgress className="mb-3">
<CProgressBar value={15} />
<CProgressBar color="success" value={30} />
@ -131,10 +134,10 @@ const Progress = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>variant="striped"</code> to any <code>&lt;CProgressBar&gt;</code> to apply a
stripe via CSS gradient over the progress bar's background color.
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="https://coreui.io/react/docs/4.0/components/progress#striped">
<Example href="components/progress#striped">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" value={25} />
</CProgress>
@ -162,7 +165,7 @@ const Progress = () => {
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
animations.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes">
<Example href="components/progress#animated-stripes">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" animated value={25} />
</CProgress>

32
src/views/examples/base/spinners/Spinners.js → src/views/components/base/spinners/Spinners.js
View File

@ -1,13 +1,13 @@
import React, { useState } from 'react'
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Accordion = () => {
const [activeKey, setActiveKey] = useState(0)
const [activeKey2, setActiveKey2] = useState(0)
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Spinner" href="components/spinner" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -17,14 +17,14 @@ const Accordion = () => {
<p className="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner">
<Example href="components/spinner">
<CSpinner />
</Example>
<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="https://coreui.io/react/docs/4.0/components/spinner#colors">
<Example href="components/spinner#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
@ -44,17 +44,17 @@ const Accordion = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't
technically spin, it does repeatedly grow!
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="https://coreui.io/react/docs/4.0/components/spinner#growing-spinner">
<Example href="components/spinner#growing-spinner">
<CSpinner variant="grow" />
</Example>
<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="https://coreui.io/react/docs/4.0/components/spinner#growing-spinner">
<Example href="components/spinner#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
@ -74,10 +74,10 @@ const Accordion = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>size="sm"</code> property to make a smaller spinner that can quickly be used
within other components.
Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
be used within other components.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#size">
<Example href="components/spinner#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</Example>
@ -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="https://coreui.io/react/docs/4.0/components/spinner#buttons">
<Example href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
@ -104,7 +104,7 @@ const Accordion = () => {
Loading...
</CButton>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#buttons">
<Example href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
</CButton>

65
src/views/examples/base/tables/Tables.js → src/views/components/base/tables/Tables.js
View File

@ -13,11 +13,14 @@ import {
CTableHeaderCell,
CTableRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Tables = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Table" href="components/table" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -25,10 +28,10 @@ const Tables = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Using the most basic table CoreUI, here's how <code>&lt;CTable&gt;</code>-based tables
look in CoreUI.
Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
tables look in CoreUI.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table">
<Example href="components/table">
<CTable>
<CTableHead>
<CTableRow>
@ -71,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="https://coreui.io/react/docs/4.0/components/table#variants">
<Example href="components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
@ -142,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="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<Example href="components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
@ -176,7 +179,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<Example href="components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
@ -207,7 +210,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<Example href="components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
@ -251,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="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<Example href="components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
@ -282,7 +285,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<Example href="components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
@ -313,7 +316,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<Example href="components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
@ -353,7 +356,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
<Example href="components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
@ -386,7 +389,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
<Example href="components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
@ -431,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="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
<Example href="components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
@ -468,7 +471,7 @@ const Tables = () => {
</a>{' '}
can be added to change colors:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
<Example href="components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
@ -511,7 +514,7 @@ const Tables = () => {
<p className="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
<Example href="components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
@ -542,7 +545,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
<Example href="components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
@ -586,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="https://coreui.io/react/docs/4.0/components/table#small-tables">
<Example href="components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
@ -632,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="https://coreui.io/react/docs/4.0/components/table#vertical-alignment">
<Example href="components/table#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
@ -712,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="https://coreui.io/react/docs/4.0/components/table#nesting">
<Example href="components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
@ -777,11 +780,11 @@ const Tables = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Similar to tables and dark tables, use the modifier prop <code>color="light"</code> or{' '}
<code>color="dark"</code> to make <code>&lt;CTableHead&gt;</code>s appear light or
dark gray.
Similar to tables and dark tables, use the modifier prop{' '}
<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="https://coreui.io/react/docs/4.0/components/table#table-head">
<Example href="components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
@ -813,7 +816,7 @@ const Tables = () => {
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
<Example href="components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
@ -853,7 +856,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-foot">
<Example href="components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
@ -903,10 +906,10 @@ const Tables = () => {
<CCardBody>
<p className="text-medium-emphasis small">
A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps
users with screen readers to find a table and understand what it's about and decide if
they want to read it.
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="https://coreui.io/react/docs/4.0/components/table#captions">
<Example href="components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@ -941,9 +944,9 @@ const Tables = () => {
</Example>
<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="top"</code>.
<code>caption=&#34;top&#34;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
<Example href="components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>

34
src/views/examples/base/tooltips/Tooltips.js → src/views/components/base/tooltips/Tooltips.js
View File

@ -1,25 +1,13 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Tooltips = () => {
const placements = [
'top-start',
'top',
'top-end',
'bottom-start',
'bottom',
'bottom-end',
'right-start',
'right',
'right-end',
'left-start',
'left',
'left-end',
]
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Tooltip" href="components/tooltip" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -29,21 +17,21 @@ const Tooltips = () => {
<p className="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/tooltip">
<Example href="components/tooltip">
<p className="text-medium-emphasis">
Tight pants next level keffiyeh
<CTooltip content="Tooltip text">
<CLink> you probably </CLink>
</CTooltip>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
apparel
haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
american apparel
<CTooltip content="Tooltip text">
<CLink> have a </CLink>
</CTooltip>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan
chambray. A really ironic artisan
thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
cleanse vegan chambray. A really ironic artisan
<CTooltip content="Tooltip text">
<CLink> whatever keytar </CLink>
</CTooltip>
@ -58,7 +46,7 @@ const Tooltips = () => {
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="https://coreui.io/react/docs/4.0/components/tooltip">
<Example href="components/tooltip">
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"

35
src/views/examples/buttons/button-groups/ButtonGroups.js → src/views/components/buttons/button-groups/ButtonGroups.js
View File

@ -18,11 +18,14 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const ButtonGroups = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Button Group" href="components/button-group" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -33,7 +36,7 @@ const ButtonGroups = () => {
Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
<code>&lt;CButtonGroup&gt;</code>.{' '}
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
<Example href="components/button-group">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
@ -44,7 +47,7 @@ const ButtonGroups = () => {
These classes can also be added to groups of links, as an alternative to the{' '}
<code>&lt;CNav&gt;</code> components.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
<Example href="components/button-group">
<CButtonGroup>
<CButton href="#" color="primary" active>
Active link
@ -66,7 +69,7 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Mixed styles</span>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#mixed-styles">
<Example 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>
@ -82,7 +85,7 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#outlined-styles">
<Example href="components/button-group#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline">
Left
@ -108,7 +111,7 @@ const ButtonGroups = () => {
Combine button-like checkbox and radio toggle buttons into a seamless looking button
group.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
<Example href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
button
@ -133,7 +136,7 @@ const ButtonGroups = () => {
/>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
<Example href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
type="radio"
@ -177,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="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
<Example 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>
@ -199,7 +202,7 @@ const ButtonGroups = () => {
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="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
<Example 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">
@ -264,10 +267,10 @@ const ButtonGroups = () => {
<CCardBody>
<p>
Alternatively, of implementing button sizing classes to each button in a group, set{' '}
<code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>'s, including each
one when nesting multiple groups.
<code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
each one when nesting multiple groups.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#sizing">
<Example href="components/button-group#sizing">
<CButtonGroup size="lg" role="group" aria-label="Large button group">
<CButton color="dark" variant="outline">
Left
@ -318,7 +321,7 @@ const ButtonGroups = () => {
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
of buttons.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#nesting">
<Example 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>
@ -347,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="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<Example 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>
@ -358,7 +361,7 @@ const ButtonGroups = () => {
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<Example 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>
@ -406,7 +409,7 @@ const ButtonGroups = () => {
</CDropdown>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<Example href="components/button-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck
type="radio"

66
src/views/examples/buttons/buttons/Buttons.js → src/views/components/buttons/buttons/Buttons.js
View File

@ -1,11 +1,14 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Buttons = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Button" href="components/buttons" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -18,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="https://coreui.io/react/docs/4.0/components/buttons">
<Example 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">
@ -61,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="https://coreui.io/react/docs/4.0/components/buttons">
<Example 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">
@ -111,12 +114,12 @@ const Buttons = () => {
elements (though some browsers may apply a slightly different rendering).
</p>
<p className="text-medium-emphasis small">
If you're using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
If you&#39;re using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
elements that are used to trigger functionality ex. collapsing content, these links
should be given a <code>role="button"</code> to adequately communicate their meaning
to assistive technologies such as screen readers.
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="https://coreui.io/react/docs/4.0/components/buttons#button-components">
<Example href="components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
@ -138,9 +141,9 @@ const Buttons = () => {
<CCardBody>
<p className="text-medium-emphasis small">
If you need a button, but without the strong background colors. Set{' '}
<code>variant="outline"</code> prop to remove all background colors.
<code>variant=&#34;outline&#34;</code> prop to remove all background colors.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#outline-buttons">
<Example 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">
@ -181,10 +184,10 @@ const Buttons = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you need a ghost variant of button, set <code>variant="ghost"</code> prop to remove
all background colors.
If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
to remove all background colors.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#ghost-buttons">
<Example 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">
@ -225,10 +228,10 @@ const Buttons = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for
additional sizes.
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
<Example href="components/buttons#sizes">
<CButton color="primary" size="lg">
Large button
</CButton>
@ -236,7 +239,7 @@ const Buttons = () => {
Large button
</CButton>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
<Example href="components/buttons#sizes">
<CButton color="primary" size="sm">
Small button
</CButton>
@ -253,7 +256,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#pill-buttons">
<Example href="components/buttons#pill-buttons">
{[
'primary',
'secondary',
@ -278,7 +281,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#square">
<Example href="components/buttons#square">
{[
'primary',
'secondary',
@ -309,7 +312,7 @@ const Buttons = () => {
<code>pointer-events: none</code> applied to, disabling hover and active states from
triggering.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
<Example href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
@ -321,12 +324,13 @@ const Buttons = () => {
Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
</p>
<p className="text-medium-emphasis small">
<code>&lt;a&gt;</code>s don't support the <code>disabled</code> attribute, so CoreUI
has to add <code>.disabled</code> className to make buttons look inactive. CoreUI also
has to add to the disabled button component <code>aria-disabled="true"</code>{' '}
attribute to show the state of the component to assistive technologies.
<code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
CoreUI also has to add to the disabled button component{' '}
<code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
to assistive technologies.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
<Example href="components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
@ -346,7 +350,7 @@ const Buttons = () => {
<p className="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using utilities.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<Example href="components/buttons#block-buttons">
<div className="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@ -358,7 +362,7 @@ const Buttons = () => {
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
your browser to see them change.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<Example href="components/buttons#block-buttons">
<div className="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@ -366,10 +370,10 @@ const Buttons = () => {
</Example>
<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 "block button", use <code>.col-6</code>. Center it
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="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<Example 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>
@ -377,11 +381,11 @@ const Buttons = () => {
</Example>
<p className="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons when horizontal.
Here we'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're no longer
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="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<Example 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

47
src/views/examples/buttons/dropdowns/Dropdowns.js → src/views/components/buttons/dropdowns/Dropdowns.js
View File

@ -13,11 +13,14 @@ import {
CDropdownToggle,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Dropdowns = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Dropdown" href="components/dropdown" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -25,9 +28,10 @@ const Dropdowns = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Here's how you can put them to work with either <code>&lt;button&gt;</code> elements:
Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
elements:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<Example href="components/dropdown#single-button">
<CDropdown>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
@ -40,7 +44,7 @@ const Dropdowns = () => {
<p className="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<Example href="components/dropdown#single-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
@ -74,11 +78,11 @@ const Dropdowns = () => {
</p>
<p className="text-medium-emphasis small">
We use this extra class to reduce the horizontal <code>padding</code> on either side
of the caret by 25% and remove the <code>margin-left</code> that's attached for 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.
of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
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="https://coreui.io/react/docs/4.0/components/dropdown#split-button">
<Example href="components/dropdown#split-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
@ -110,7 +114,7 @@ const Dropdowns = () => {
Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
<Example href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
@ -137,7 +141,7 @@ const Dropdowns = () => {
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
<Example href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
@ -177,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="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<Example href="components/dropdown#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
@ -190,10 +194,10 @@ const Dropdowns = () => {
</CDropdown>
</Example>
<p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<Example href="components/dropdown#dark-dropdowns">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<a className="navbar-brand" href="#">
<a className="navbar-brand" href="https://coreui.io/react/">
Navbar
</a>
<button
@ -234,10 +238,11 @@ const Dropdowns = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Trigger dropdown menus above elements by adding <code>direction="dropup"</code> to the{' '}
<code>&lt;CDropdown&gt;</code> component.
Trigger dropdown menus above elements by adding{' '}
<code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup">
<Example href="components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@ -271,9 +276,10 @@ const Dropdowns = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Trigger dropdown menus at the right of the elements by adding{' '}
<code>direction="dropend"</code> to the <code>&lt;CDropdown&gt;</code> component.
<code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright">
<Example href="components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@ -307,9 +313,10 @@ const Dropdowns = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Trigger dropdown menus at the left of the elements by adding{' '}
<code>direction="dropstart"</code> to the <code>&lt;CDropdown&gt;</code> component.
<code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft">
<Example href="components/dropdown#dropleft">
<CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />

0
src/views/examples/buttons/index.js → src/views/components/buttons/index.js
View File

27
src/views/examples/charts/Charts.js → src/views/components/charts/Charts.js
View File

@ -1,6 +1,13 @@
import React from 'react'
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
import { CChart } from '@coreui/react-chartjs'
import {
CChartBar,
CChartDoughnut,
CChartLine,
CChartPie,
CChartPolarArea,
CChartRadar,
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
const Charts = () => {
@ -15,8 +22,7 @@ const Charts = () => {
<DocsLink href="http://www.chartjs.org" />
</CCardHeader>
<CCardBody>
<CChart
type="bar"
<CChartBar
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
@ -36,8 +42,7 @@ const Charts = () => {
<CCard className="mb-4">
<CCardHeader>Line Chart</CCardHeader>
<CCardBody>
<CChart
type="line"
<CChartLine
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
@ -67,8 +72,7 @@ const Charts = () => {
<CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody>
<CChart
type="doughnut"
<CChartDoughnut
data={{
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
@ -86,8 +90,7 @@ const Charts = () => {
<CCard className="mb-4">
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody>
<CChart
type="pie"
<CChartPie
data={{
labels: ['Red', 'Green', 'Yellow'],
datasets: [
@ -106,8 +109,7 @@ const Charts = () => {
<CCard className="mb-4">
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody>
<CChart
type="polarArea"
<CChartPolarArea
data={{
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [
@ -125,8 +127,7 @@ const Charts = () => {
<CCard className="mb-4">
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody>
<CChart
type="radar"
<CChartRadar
data={{
labels: [
'Eating',

45
src/views/examples/forms/checks-radios/ChecksRadios.js → src/views/components/forms/checks-radios/ChecksRadios.js
View File

@ -1,17 +1,20 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const ChecksRadios = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Checkbox</strong>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios">
<Example href="forms/checks-radios">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
</Example>
@ -26,10 +29,10 @@ const ChecksRadios = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
are automatically styled to match with a lighter color to help indicate the input's
state.
are automatically styled to match with a lighter color to help indicate the
input&#39;s state.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled">
<Example href="forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
</Example>
@ -44,10 +47,10 @@ const ChecksRadios = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
are automatically styled to match with a lighter color to help indicate the input's
state.
are automatically styled to match with a lighter color to help indicate the
input&#39;s state.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios">
<Example href="forms/checks-radios#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@ -71,7 +74,7 @@ const ChecksRadios = () => {
<strong>React Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled-1">
<Example href="forms/checks-radios#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@ -102,7 +105,7 @@ const ChecksRadios = () => {
properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
attribute.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches">
<Example href="forms/checks-radios#switches">
<CFormCheck
switch
label="Default switch checkbox input"
@ -137,7 +140,7 @@ const ChecksRadios = () => {
<strong>React Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#sizes">
<Example href="forms/checks-radios#sizes">
<CFormCheck
switch
label="Default switch checkbox input"
@ -169,11 +172,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="https://coreui.io/react/docs/4.0/forms/checks-radios#default-stacked">
<Example href="forms/checks-radios#default-stacked">
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#default-stacked">
<Example href="forms/checks-radios#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@ -211,7 +214,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="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
<Example href="forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@ -222,7 +225,7 @@ const ChecksRadios = () => {
disabled
/>
</Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
<Example href="forms/checks-radios#inline">
<CFormCheck
inline
type="radio"
@ -262,7 +265,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="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels">
<Example href="forms/checks-radios#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@ -290,10 +293,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="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
</Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
button
id="btn-check-2"
@ -302,11 +305,11 @@ const ChecksRadios = () => {
defaultChecked
/>
</Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
</Example>
<h3>Radio toggle buttons</h3>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
button
buttonColor="secondary"
@ -350,7 +353,7 @@ const ChecksRadios = () => {
<p className="text-medium-emphasis small">
Different variants of button, such at the various outlined styles, are supported.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<Example href="forms/checks-radios#toggle-buttons">
<div>
<CFormCheck
button

34
src/views/examples/forms/floating-labels/FloatingLabels.js → src/views/components/forms/floating-labels/FloatingLabels.js
View File

@ -10,11 +10,14 @@ import {
CFormSelect,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const FloatingLabels = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Floating Label" href="forms/floating-label" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -30,7 +33,7 @@ const FloatingLabels = () => {
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
(e.g., <code>~</code>).
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels">
<Example href="forms/floating-labels">
<CFormFloating className="mb-3">
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@ -41,10 +44,10 @@ const FloatingLabels = () => {
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
When there's a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>s
will automatically adjust to their floated position.
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="https://coreui.io/react/docs/4.0/forms/floating-labels">
<Example href="forms/floating-labels">
<CFormFloating>
<CFormControl
type="email"
@ -65,10 +68,10 @@ const FloatingLabels = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
By default, <code>&lt;CFormControl component="textarea"&gt;</code>s will be the same
height as <code>&lt;CFormControl&gt;</code>s.
By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be
the same height as <code>&lt;CFormControl&gt;</code>s.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas">
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
@ -79,11 +82,12 @@ const FloatingLabels = () => {
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormControl component="textarea"&gt;</code>,
do not use the <code>rows</code> attribute. Instead, set an explicit{' '}
<code>height</code> (either inline or via custom CSS).
To set a custom height on your{' '}
<code>&lt;CFormControl component=&#34;textarea&#34;&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="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas">
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
@ -106,13 +110,13 @@ const FloatingLabels = () => {
<p className="text-medium-emphasis small">
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '}
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
<code>&lt;CFormControl&gt;</code>s, they'll always show the{' '}
<code>&lt;CFormControl&gt;</code>s, they&#39;ll always show the{' '}
<code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#selects">
<Example href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@ -136,7 +140,7 @@ const FloatingLabels = () => {
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#layout">
<Example href="forms/floating-labels#layout">
<CRow xs={{ gutter: 2 }}>
<CCol md>
<CFormFloating>

29
src/views/examples/forms/form-control/FormControl.js → src/views/components/forms/form-control/FormControl.js
View File

@ -10,18 +10,21 @@ import {
CFormLabel,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const FormControl = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Form Control" href="forms/form-control" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control">
<Example href="forms/form-control">
<CForm>
<div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
@ -51,10 +54,10 @@ const FormControl = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Set heights using <code>size</code> property like <code>size="lg"</code> and{' '}
<code>size="sm"</code>.
Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
<code>size=&#34;sm&#34;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing">
<Example href="forms/form-control#sizing">
<CFormControl
type="text"
size="lg"
@ -88,7 +91,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="https://coreui.io/react/docs/4.0/forms/form-control#disabled">
<Example href="forms/form-control#disabled">
<CFormControl
type="text"
placeholder="Disabled input"
@ -116,10 +119,10 @@ const FormControl = () => {
<CCardBody>
<p className="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
the input's value. Read-only inputs appear lighter (just like disabled inputs), but
retain the standard cursor.
the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
but retain the standard cursor.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly">
<Example href="forms/form-control#readonly">
<CFormControl
type="text"
placeholder="Readonly input here..."
@ -141,7 +144,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="https://coreui.io/react/docs/4.0/components/accordion">
<Example href="components/accordion">
<CRow className="mb-3">
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
Email
@ -165,7 +168,7 @@ const FormControl = () => {
</div>
</CRow>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
<Example href="components/accordion">
<CForm className="row g-3">
<div className="col-auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
@ -201,7 +204,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#file-input">
<Example href="forms/form-control#file-input">
<div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormControl type="file" id="formFile" />
@ -232,7 +235,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#color">
<Example href="forms/form-control#color">
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormControl
type="color"

35
src/views/examples/forms/input-group/InputGroup.js → src/views/components/forms/input-group/InputGroup.js
View File

@ -18,11 +18,14 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Select = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Input Group" href="forms/input-group" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -34,7 +37,7 @@ const Select = () => {
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group">
<Example href="forms/input-group">
<CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormControl
@ -45,8 +48,8 @@ const Select = () => {
</CInputGroup>
<CInputGroup className="mb-3">
<CFormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2"
/>
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
@ -85,7 +88,7 @@ const Select = () => {
custom form field validation within an input group. You may disable this with{' '}
<code>.flex-nowrap</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#wrapping">
<Example href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormControl
@ -110,9 +113,9 @@ const Select = () => {
size classes on each element.
</p>
<p className="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn't supported.</strong>
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#sizing">
<Example href="forms/input-group#sizing">
<CInputGroup size="sm" className="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormControl
@ -145,9 +148,9 @@ const Select = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Place any checkbox or radio option within an input group's addon instead of text.
Place any checkbox or radio option within an input group&#39;s addon instead of text.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#checkboxes-and-radios">
<Example href="forms/input-group#checkboxes-and-radios">
<CInputGroup className="mb-3">
<CInputGroupText>
<CFormCheck
@ -183,7 +186,7 @@ const Select = () => {
styles are only available for input groups with a single{' '}
<code>&lt;CFormControl&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-inputs">
<Example href="forms/input-group#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormControl aria-label="First name" />
@ -203,7 +206,7 @@ const Select = () => {
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-addons">
<Example href="forms/input-group#multiple-addons">
<CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@ -228,7 +231,7 @@ const Select = () => {
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#button-addons">
<Example href="forms/input-group#button-addons">
<CInputGroup className="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@ -280,7 +283,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#buttons-with-dropdowns">
<Example href="forms/input-group#buttons-with-dropdowns">
<CInputGroup className="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@ -348,7 +351,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#segmented-buttons">
<Example href="forms/input-group#segmented-buttons">
<CInputGroup className="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@ -391,7 +394,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#custom-select">
<Example href="forms/input-group#custom-select">
<CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupSelect01">
Options
@ -446,7 +449,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#custom-file-input">
<Example href="forms/input-group#custom-file-input">
<CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupFile01">
Upload

40
src/views/examples/forms/layout/Layout.js → src/views/components/forms/layout/Layout.js
View File

@ -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="https://coreui.io/react/docs/4.0/forms/layout#form-grid">
<Example href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormControl placeholder="First name" aria-label="First name" />
@ -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="https://coreui.io/react/docs/4.0/forms/layout#gutters">
<Example href="forms/layout#gutters">
<CRow className="g-3">
<CCol xs>
<CFormControl placeholder="First name" aria-label="First name" />
@ -65,7 +65,7 @@ const Layout = () => {
<p className="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
<Example href="forms/layout#gutters">
<CForm className="row g-3">
<CCol md="6">
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
@ -119,15 +119,15 @@ const Layout = () => {
Create horizontal forms with the grid by adding the <code>.row</code> class to form
groups and using the <code>.col-*-*</code> classes to specify the width of your labels
and controls. Be sure to add <code>.col-form-label</code> to your{' '}
<code>&lt;CFormLabel&gt;</code>s as well so they're vertically centered with their
<code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their
associated form controls.
</p>
<p className="text-medium-emphasis small">
At times, you maybe need to use margin or padding utilities to create that perfect
alignment you need. For example, we've removed the <code>padding-top</code> on our
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="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form">
<Example href="forms/layout#horizontal-form">
<CForm>
<CRow className="mb-3">
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
@ -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="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form-label-sizing">
<Example href="forms/layout#horizontal-form-label-sizing">
<CRow className="mb-3">
<CFormLabel
htmlFor="colFormLabelSm"
@ -248,12 +248,13 @@ const Layout = () => {
<CCardBody>
<p className="text-medium-emphasis small">
As shown in the previous examples, our grid system allows you to place any number of{' '}
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They'll split the
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the
available width equally between them. You may also pick a subset of your columns to
take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally
split the rest, with specific column classes like <code>&lt;CCol sm="7"&gt;</code>.
split the rest, with specific column classes like{' '}
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing">
<Example href="forms/layout#column-sizing">
<CRow className="g-3">
<CCol sm="7">
<CFormControl placeholder="City" aria-label="City" />
@ -277,11 +278,11 @@ const Layout = () => {
<CCardBody>
<p className="text-medium-emphasis small">
The example below uses a flexbox utility to vertically center the contents and changes{' '}
<code>&lt;CCol&gt;</code> to <code>&lt;CCol xs="auto"&gt;</code> so that your columns
only take up as much space as needed. Put another way, the column sizes itself based
on the contents.
<code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your
columns only take up as much space as needed. Put another way, the column sizes itself
based on the contents.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
<Example href="forms/layout#auto-sizing">
<CForm className="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
@ -320,7 +321,7 @@ const Layout = () => {
<p className="text-medium-emphasis small">
You can then remix that once again with size-specific column classes.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
<Example href="forms/layout#auto-sizing">
<CForm className="row gx-3 gy-2 align-items-center">
<CCol sm="3">
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
@ -366,13 +367,14 @@ const Layout = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use the <code>&lt;CCol xs="auto"&gt;</code> class to create horizontal layouts. By
adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>,
we will have gutters in horizontal and vertical directions. The{' '}
Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create horizontal
layouts. By adding{' '}
<a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, we will
have gutters in horizontal and vertical directions. The{' '}
<code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
<code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#inline-forms">
<Example 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">

21
src/views/examples/forms/range/Range.js → src/views/components/forms/range/Range.js
View File

@ -1,10 +1,13 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Range = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Range" href="forms/range" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -12,10 +15,10 @@ const Range = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Create custom <code>&lt;input type="range"&gt;</code> controls with{' '}
Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
<code>&lt;CFormControl&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/range">
<Example href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
@ -32,7 +35,7 @@ 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="https://coreui.io/react/docs/4.0/forms/range#disabled">
<Example href="forms/range#disabled">
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
@ -50,7 +53,7 @@ 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="https://coreui.io/react/docs/4.0/forms/range#min-and-max">
<Example href="forms/range#min-and-max">
<CFormLabel htmlFor="customRange2">Example range</CFormLabel>
<CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
</Example>
@ -64,11 +67,11 @@ const Range = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
By default, range inputs "snap" to integer values. To change this, you can specify a{' '}
<code>step</code> value. In the example below, we double the number of steps by using{' '}
<code>step="0.5"</code>.
By default, range inputs &#34;snap&#34; to integer values. To change this, you can
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="https://coreui.io/react/docs/4.0/forms/range#steps">
<Example href="forms/range#steps">
<CFormLabel htmlFor="customRange3">Example range</CFormLabel>
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
</Example>

17
src/views/examples/forms/select/Select.js → src/views/components/forms/select/Select.js
View File

@ -1,17 +1,20 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Select = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Form Select" href="forms/select" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/select">
<Example href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
@ -32,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="https://coreui.io/react/docs/4.0/forms/select#sizing">
<Example 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>
@ -49,7 +52,7 @@ const Select = () => {
<p className="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<Example href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
@ -60,7 +63,7 @@ const Select = () => {
<p className="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<Example href="forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
@ -81,7 +84,7 @@ 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="https://coreui.io/react/docs/4.0/forms/select#disabled">
<Example href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
@ -98,7 +101,7 @@ const Select = () => {
<strong>React Select</strong> <small></small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/select">
<Example href="forms/select">
</Example>
</CCardBody>

29
src/views/examples/forms/validation/Validation.js → src/views/components/forms/validation/Validation.js
View File

@ -15,7 +15,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const CustomStyles = () => {
const [validated, setValidated] = useState(false)
@ -251,6 +251,9 @@ const Tooltips = () => {
const Validation = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -258,21 +261,19 @@ const Validation = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
For custom CoreUI form validation messages, you'll need to add the{' '}
For custom CoreUI form validation messages, you&#39;ll need to add the{' '}
<code>noValidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
disables the browser default feedback tooltips, but still provides access to the form
validation APIs in JavaScript. Try to submit the form below; our JavaScript will
intercept the submit button and relay feedback to you. When attempting to submit,
you'll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
form controls.
you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to
your form controls.
</p>
<p className="text-medium-emphasis small">
Custom feedback styles apply custom colors, borders, focus styles, and background
icons to better communicate feedback.{' '}
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation">
{CustomStyles()}
</Example>
<Example href="forms/validation">{CustomStyles()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -285,16 +286,14 @@ const Validation = () => {
<p className="text-medium-emphasis small">
Not interested in custom validation feedback messages or writing JavaScript to change
form behaviors? All good, you can use the browser defaults. Try submitting the form
below. Depending on your browser and OS, you'll see a slightly different style of
below. Depending on your browser and OS, you&#39;ll see a slightly different style of
feedback.
</p>
<p className="text-medium-emphasis small">
While these feedback styles cannot be styled with CSS, you can still customize the
feedback text through JavaScript.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#browser-defaults">
{BrowserDefaults()}
</Example>
<Example href="forms/validation#browser-defaults">{BrowserDefaults()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -315,7 +314,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="https://coreui.io/react/docs/4.0/forms/validation#server-side">
<Example href="forms/validation#server-side">
<CForm className="row g-3 needs-validation">
<CCol md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@ -412,7 +411,7 @@ const Validation = () => {
<code>&lt;CFormCheck&gt;</code>s
</li>
</ul>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements">
<Example href="forms/validation#supported-elements">
<CForm validated={true}>
<div className="mb-3">
<CFormLabel htmlFor="validationTextarea" className="form-label">
@ -496,9 +495,7 @@ const Validation = () => {
our column classes have this already, but your project may require an alternative
setup.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#tooltips">
{Tooltips()}
</Example>
<Example href="forms/validation#tooltips">{Tooltips()}</Example>
</CCardBody>
</CCard>
</CCol>

0
src/views/examples/icons/brands/Brands.js → src/views/components/icons/brands/Brands.js
View File

0
src/views/examples/icons/coreui-icons/CoreUIIcons.js → src/views/components/icons/coreui-icons/CoreUIIcons.js
View File

0
src/views/examples/icons/flags/Flags.js → src/views/components/icons/flags/Flags.js
View File

0
src/views/examples/icons/index.js → src/views/components/icons/index.js
View File

15
src/views/examples/notifications/alerts/Alerts.js → src/views/components/notifications/alerts/Alerts.js
View File

@ -9,13 +9,14 @@ import {
CCol,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const Alerts = () => {
const [visible, setVisible] = React.useState(10)
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Alert" href="components/alert" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -31,7 +32,7 @@ const Alerts = () => {
</a>
.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert">
<Example 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>
@ -54,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="https://coreui.io/react/docs/4.0/components/alert#link-color">
<Example 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.
@ -101,7 +102,7 @@ const Alerts = () => {
Alert can also incorporate supplementary components &amp; elements like heading,
paragraph, and divider.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#additional-content">
<Example href="components/alert#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
@ -128,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="https://coreui.io/react/docs/4.0/components/alert#dismissing">
<Example href="components/alert#dismissing">
<CAlert
color="warning"
dismissible

28
src/views/examples/notifications/badges/Badges.js → src/views/components/notifications/badges/Badges.js
View File

@ -1,19 +1,13 @@
import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CBadge,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable'
const Badges = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Badges" href="components/badge" />
</CCol>
<CCol lg={6}>
<CCard className="mb-4">
<CCardHeader>
@ -24,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="https://coreui.io/react/docs/4.0/components/badge">
<Example href="components/badge">
<h1>
Example heading <CBadge color="secondary">New</CBadge>
</h1>
@ -47,7 +41,7 @@ const Badges = () => {
<p className="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge">
<Example href="components/badge">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
@ -60,7 +54,7 @@ const Badges = () => {
Unless the context is clear, consider including additional context with a visually
hidden piece of additional text.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge">
<Example href="components/badge">
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span className="visually-hidden">unread messages</span>
@ -79,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="https://coreui.io/react/docs/4.0/components/badge#contextual-variations">
<Example href="components/badge#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
@ -96,9 +90,9 @@ const Badges = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Apply the <code>shape="rounded-pill"</code> prop to make badges rounded.
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge#pill-badges">
<Example href="components/badge#pill-badges">
<CBadge color="primary" shape="rounded-pill">
primary
</CBadge>

0
src/views/examples/notifications/index.js → src/views/components/notifications/index.js
View File

63
src/views/examples/notifications/modals/Modals.js → src/views/components/notifications/modals/Modals.js
View File

@ -15,7 +15,7 @@ import {
CRow,
CTooltip,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const LiveDemo = () => {
const [visible, setVisible] = useState(false)
@ -26,7 +26,7 @@ const LiveDemo = () => {
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalBody>Woohoo, you&#39;re reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
@ -48,7 +48,7 @@ const StaticBackdrop = () => {
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
I will not close if you click outside me. Don't even try to press escape key.
I will not close if you click outside me. Don&#39;teven try to press escape key.
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
@ -460,6 +460,9 @@ const FullscreenModal = () => {
const Modals = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Modal" href="components/modal" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -473,7 +476,7 @@ const Modals = () => {
include modal headers with dismiss actions whenever possible, or provide another
explicit dismiss action.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal">
<Example href="components/modal">
<CModal
className="show d-block position-static"
backdrop={false}
@ -504,9 +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="https://coreui.io/react/docs/4.0/components/modal#live-demo">
{LiveDemo()}
</Example>
<Example href="components/modal#live-demo">{LiveDemo()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -521,9 +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="https://coreui.io/react/docs/4.0/components/modal#static-backdrop">
{StaticBackdrop()}
</Example>
<Example href="components/modal#static-backdrop">{StaticBackdrop()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -538,14 +537,14 @@ 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="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
<Example href="components/modal#scrolling-long-content">
{ScrollingLongContent()}
</Example>
<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="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
<Example href="components/modal#scrolling-long-content">
{ScrollingLongContent2()}
</Example>
</CCardBody>
@ -558,15 +557,11 @@ const Modals = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>alignment="center</code> to <code>&lt;CModal&gt;</code> to vertically center
the modal.
Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
vertically center the modal.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
{VerticallyCentered()}
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
{VerticallyCentered2()}
</Example>
<Example href="components/modal#vertically-centered">{VerticallyCentered()}</Example>
<Example href="components/modal#vertically-centered">{VerticallyCentered2()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -581,9 +576,7 @@ const Modals = () => {
modals as needed. When modals are closed, any tooltips and popovers within are also
automatically dismissed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#tooltips-and-popovers">
{TooltipsPopovers()}
</Example>
<Example href="components/modal#tooltips-and-popovers">{TooltipsPopovers()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -610,7 +603,7 @@ const Modals = () => {
<tr>
<td>Small</td>
<td>
<code>'sm'</code>
<code>&#39;sm&#39;</code>
</td>
<td>
<code>300px</code>
@ -626,7 +619,7 @@ const Modals = () => {
<tr>
<td>Large</td>
<td>
<code>'lg'</code>
<code>&#39;lg&#39;</code>
</td>
<td>
<code>800px</code>
@ -635,7 +628,7 @@ const Modals = () => {
<tr>
<td>Extra large</td>
<td>
<code>'xl'</code>
<code>&#39;xl&#39;</code>
</td>
<td>
<code>1140px</code>
@ -643,9 +636,7 @@ const Modals = () => {
</tr>
</tbody>
</table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#optional-sizes">
{OptionalSizes()}
</Example>
<Example href="components/modal#optional-sizes">{OptionalSizes()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -675,7 +666,7 @@ const Modals = () => {
</tr>
<tr>
<td>
<code>'sm'</code>
<code>&#39;sm&#39;</code>
</td>
<td>
Below <code>576px</code>
@ -683,7 +674,7 @@ const Modals = () => {
</tr>
<tr>
<td>
<code>'md'</code>
<code>&#39;md&#39;</code>
</td>
<td>
Below <code>768px</code>
@ -691,7 +682,7 @@ const Modals = () => {
</tr>
<tr>
<td>
<code>'lg'</code>
<code>&#39;lg&#39;</code>
</td>
<td>
Below <code>992px</code>
@ -699,7 +690,7 @@ const Modals = () => {
</tr>
<tr>
<td>
<code>'xl'</code>
<code>&#39;xl&#39;</code>
</td>
<td>
Below <code>1200px</code>
@ -707,7 +698,7 @@ const Modals = () => {
</tr>
<tr>
<td>
<code>'xxl'</code>
<code>&#39;xxl&#39;</code>
</td>
<td>
Below <code>1400px</code>
@ -715,9 +706,7 @@ const Modals = () => {
</tr>
</tbody>
</table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#fullscreen-modal">
{FullscreenModal()}
</Example>
<Example href="components/modal#fullscreen-modal">{FullscreenModal()}</Example>
</CCardBody>
</CCard>
</CCol>

35
src/views/examples/notifications/toasts/Toasts.js → src/views/components/notifications/toasts/Toasts.js
View File

@ -12,9 +12,9 @@ import {
CToastHeader,
CToaster,
} from '@coreui/react'
import { Example } from 'src/reusable'
import { DocsCallout, Example } from 'src/reusable'
const exampleToast = () => {
const ExampleToast = () => {
const [toast, addToast] = useState(0)
const toaster = useRef()
const exampleToast = (
@ -48,6 +48,9 @@ const exampleToast = () => {
const Toasts = () => {
return (
<CRow>
<CCol xs={12}>
<DocsCallout name="Toast" href="components/toast" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
@ -59,7 +62,7 @@ const Toasts = () => {
we require a single element to contain your “toasted” content and strongly encourage a
dismiss button.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast">
<Example href="components/toast">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
@ -79,9 +82,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/toast">
{exampleToast()}
</Example>
<Example href="components/toast">{ExampleToast()}</Example>
</CCardBody>
</CCard>
</CCol>
@ -92,9 +93,9 @@ const Toasts = () => {
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Toasts are slightly translucent to blend in with what's below them.
Toasts are slightly translucent to blend in with what&#39;s below them.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#translucent">
<Example href="components/toast#translucent">
<div className="bg-dark p-3">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
@ -129,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="https://coreui.io/react/docs/4.0/components/toast#stacking">
<Example href="components/toast#stacking">
<CToaster>
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
@ -181,13 +182,13 @@ const Toasts = () => {
<p className="text-medium-emphasis small">
Customize your toasts by removing sub-components, tweaking them with{' '}
<a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
own markup. Here we've created a simpler toast by removing the default{' '}
own markup. Here we&#39;ve created a simpler toast by removing the default{' '}
<code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
<a href="https://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
the layout.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#custom-content">
<Example 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>
@ -198,7 +199,7 @@ const Toasts = () => {
<p className="text-medium-emphasis small">
Alternatively, you can also add additional controls and components to toasts.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#custom-content">
<Example href="components/toast#custom-content">
<CToast autohide={false}>
<CToastBody>
Hello, world! This is a toast message.
@ -226,12 +227,12 @@ const Toasts = () => {
Building on the above example, you can create different toast color schemes with our{' '}
<a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
<a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
Here we've set <code>color="primary"</code> and added <code>.text-white</code> class
to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to our
close button. For a crisp edge, we remove the default border with{' '}
<code>.border-0</code>.
Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added{' '}
<code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set{' '}
<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="https://coreui.io/react/docs/4.0/components/toast#color-schemes">
<Example 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>

50
src/views/examples/widgets/Widgets.js → src/views/components/widgets/Widgets.js
View File

@ -10,16 +10,12 @@ import {
CWidgetSimple,
} from '@coreui/react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import CIcon from '@coreui/icons-react'
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown'
// import ChartLineSimple from '../charts/ChartLineSimple'
// import ChartBarSimple from '../charts/ChartBarSimple'
import CIcon from '@coreui/icons-react'
const Widgets = () => {
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
@ -333,6 +329,7 @@ const Widgets = () => {
title="Visitors"
progressColor="info"
progressValue={75}
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -342,6 +339,7 @@ const Widgets = () => {
title="New Clients"
progressColor="success"
progressValue={75}
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -351,6 +349,7 @@ const Widgets = () => {
title="Products sold"
progressColor="warning"
progressValue={75}
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -360,6 +359,7 @@ const Widgets = () => {
title="Returning Visitors"
progressColor="primary"
progressValue={75}
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -369,6 +369,7 @@ const Widgets = () => {
title="Avg. Time"
progressColor="danger"
progressValue={75}
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -378,6 +379,7 @@ const Widgets = () => {
title="comments"
progressColor="info"
progressValue={75}
className="mb-4"
/>
</CCol>
</CRow>
@ -390,6 +392,7 @@ const Widgets = () => {
title="Visitors"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -400,6 +403,7 @@ const Widgets = () => {
title="New Clients"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -410,6 +414,7 @@ const Widgets = () => {
title="Products sold"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -420,6 +425,7 @@ const Widgets = () => {
title="Returning Visitors"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -430,6 +436,7 @@ const Widgets = () => {
title="Avg. Time"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
<CCol sm="6" md="2">
@ -440,14 +447,14 @@ const Widgets = () => {
title="comments"
progressValue={75}
progressWhite
className="mb-4"
/>
</CCol>
</CRow>
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="bar"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -496,9 +503,8 @@ const Widgets = () => {
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="bar"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -547,9 +553,8 @@ const Widgets = () => {
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="bar"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartBar
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -598,9 +603,8 @@ const Widgets = () => {
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="line"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -657,9 +661,8 @@ const Widgets = () => {
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="line"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -716,9 +719,8 @@ const Widgets = () => {
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123">
<CChart
type="line"
<CWidgetSimple title="title" value="1,123" className="mb-4">
<CChartLine
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],

0
src/views/examples/widgets/WidgetsBrand.js → src/views/components/widgets/WidgetsBrand.js
View File

18
src/views/examples/widgets/WidgetsDropdown.js → src/views/components/widgets/WidgetsDropdown.js
View File

@ -9,11 +9,10 @@ import {
CWidgetDropdown,
} from '@coreui/react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
import CIcon from '@coreui/icons-react'
const WidgetsDropdown = () => {
// render
return (
<CRow>
<CCol sm="6" lg="3">
@ -36,10 +35,9 @@ const WidgetsDropdown = () => {
</CDropdown>
}
chart={
<CChart
<CChartLine
className="mt-3 mx-3"
style={{ height: '70px' }}
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
@ -97,7 +95,6 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
@ -118,8 +115,7 @@ const WidgetsDropdown = () => {
</CDropdown>
}
chart={
<CChart
type="line"
<CChartLine
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
@ -178,7 +174,6 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
@ -199,8 +194,7 @@ const WidgetsDropdown = () => {
</CDropdown>
}
chart={
<CChart
type="line"
<CChartLine
className="mt-3"
style={{ height: '70px' }}
data={{
@ -246,7 +240,6 @@ const WidgetsDropdown = () => {
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
@ -267,8 +260,7 @@ const WidgetsDropdown = () => {
</CDropdown>
}
chart={
<CChart
type="bar"
<CChartBar
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{

19
src/views/dashboard/Dashboard.js
View File

@ -18,14 +18,12 @@ import {
CTableHeaderCell,
CTableRow,
} from '@coreui/react'
import { CChart } from '@coreui/react-chartjs'
import { CChartLine } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils'
import CIcon from '@coreui/icons-react'
import MainChartExample from '../examples/charts/MainChartExample.js'
const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js'))
const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
const Dashboard = () => {
const random = (min, max) => {
@ -62,8 +60,7 @@ const Dashboard = () => {
</CButtonGroup>
</CCol>
</CRow>
<CChart
type="line"
<CChartLine
style={{ height: '300px', marginTop: '40px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@ -192,13 +189,13 @@ const Dashboard = () => {
<CCol sm="6">
<div className="border-start border-start-4 border-start-info py-1 px-3">
<div className="text-medium-emphasis small">New Clients</div>
<div className="fs-3 fw-semibold">9,123</div>
<div className="fs-5 fw-semibold">9,123</div>
</div>
</CCol>
<CCol sm="6">
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Recurring Clients</div>
<div className="fs-3 fw-semibold">22,643</div>
<div className="fs-5 fw-semibold">22,643</div>
</div>
</CCol>
</CRow>
@ -275,13 +272,13 @@ const Dashboard = () => {
<CCol sm="6">
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Pageviews</div>
<div className="fs-3 fw-semibold">78,623</div>
<div className="fs-5 fw-semibold">78,623</div>
</div>
</CCol>
<CCol sm="6">
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
<div className="text-medium-emphasis small">Organic</div>
<div className="fs-3 fw-semibold">49,123</div>
<div className="fs-5 fw-semibold">49,123</div>
</div>
</CCol>
</CRow>

154
src/views/examples/base/tabs/Tabs.js
View File

@ -1,154 +0,0 @@
import React, { useState } from 'react'
import {
CCol,
CNav,
CNavItem,
CNavLink,
CRow,
CTabContent,
CTabPane,
CCard,
CCardBody,
CCardHeader,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Tabs = () => {
const [activeKey, setActiveKey] = useState(1)
const lorem =
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
return (
<CRow>
<CCol xs="12" md="6" className="mb-4">
<CCard className="mb-4">
<CCardHeader>
Index indentifiers
<DocsLink name="CTabs" />
</CCardHeader>
<CCardBody>
<CNav variant="tabs">
<CNavItem>
<CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>
Profile
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>
Messages
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane visible={activeKey === 1}>{`1. ${lorem}`}</CTabPane>
<CTabPane visible={activeKey === 2}>{`2. ${lorem}`}</CTabPane>
<CTabPane visible={activeKey === 3}>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CCardBody>
</CCard>
</CCol>
{/* <CCol xs="12" md="6" className="mb-4">
<CCard className="mb-4">
<CCardHeader>Id indentifiers</CCardHeader>
<CCardBody>
<CTabs activeTab="home">
<CNav variant="tabs">
<CNavItem>
<CNavLink data-tab="home">Home</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink data-tab="profile">Profile</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink data-tab="messages">Messages</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane data-tab="home">{`1. ${lorem}`}</CTabPane>
<CTabPane data-tab="profile">{`2. ${lorem}`}</CTabPane>
<CTabPane data-tab="messages">{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6" className="mb-4">
<CCard className="mb-4">
<CCardHeader>No fade animation tabs</CCardHeader>
<CCardBody>
<CTabs>
<CNav variant="tabs">
<CNavItem>
<CNavLink>
<CIcon name="cil-calculator" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-basket" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-chart-pie" />
</CNavLink>
</CNavItem>
</CNav>
<CTabContent fade={false}>
<CTabPane>{`1. ${lorem}`}</CTabPane>
<CTabPane>{`2. ${lorem}`}</CTabPane>
<CTabPane>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6" className="mb-4">
<CCard className="mb-4">
<CCardHeader>Controlled tabs</CCardHeader>
<CCardBody>
<CTabs
activeTab={active}
onActiveTabChange={(idx) => setActive(idx)}
>
<CNav variant="tabs">
<CNavItem>
<CNavLink>
<CIcon name="cil-calculator" />
{active === 0 && " Home"}
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-basket" />
{active === 1 && " Profile"}
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-chart-pie" />
{active === 2 && " Messages"}
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane>{`1. ${lorem}`}</CTabPane>
<CTabPane>{`2. ${lorem}`}</CTabPane>
<CTabPane>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
</CCard>
</CCol> */}
</CRow>
)
}
export default Tabs

85
src/views/examples/charts/ChartBarSimple.js
View File

@ -1,85 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { getColor } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
const ChartBarSimple = (props) => {
const {
backgroundColor,
pointHoverBackgroundColor,
dataPoints,
label,
pointed,
...attributes
} = props
const defaultDatasets = {
data: dataPoints,
backgroundColor: getColor(backgroundColor),
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
label: label,
barPercentage: 0.5,
categoryPercentage: 1,
}
const defaultOptions = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
}
// render
return (
<CChart
type="bar"
{...attributes}
data={defaultDatasets}
// options={defaultOptions}
// labels={label}
/>
)
}
ChartBarSimple.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
className: PropTypes.string,
//
backgroundColor: PropTypes.string,
pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array,
label: PropTypes.string,
pointed: PropTypes.bool,
}
ChartBarSimple.defaultProps = {
backgroundColor: 'rgba(0,0,0,.2)',
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: 'Sales',
}
export default ChartBarSimple

166
src/views/examples/charts/ChartLineSimple.js
View File

@ -1,166 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b'
const ChartLineSimple = (props) => {
const {
borderColor,
backgroundColor,
pointHoverBackgroundColor,
dataPoints,
label,
pointed,
...attributes
} = props
const pointHoverColor = (() => {
if (pointHoverBackgroundColor) {
return pointHoverBackgroundColor
} else if (backgroundColor !== 'transparent') {
return backgroundColor
}
return borderColor
})()
const defaultDatasets = (() => {
return [
{
data: dataPoints,
borderColor: getColor(borderColor),
backgroundColor: getColor(backgroundColor),
pointBackgroundColor: getColor(pointHoverColor),
pointHoverBackgroundColor: getColor(pointHoverColor),
label,
},
]
})()
const pointedOptions = (() => {
return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
tension: 0.4,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}
})()
const straightOptions = (() => {
return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
elements: {
line: {
borderWidth: 2,
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
},
}
})()
const defaultOptions = (() => {
const options = pointed ? pointedOptions : straightOptions
return Object.assign({}, options, {
maintainAspectRatio: false,
legend: {
display: false,
},
})
})()
const computedDatasets = (() => {
return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
})()
const computedOptions = (() => {
return deepObjectsMerge(defaultOptions, attributes.options || {})
})()
// render
return (
<CChart
type="line"
{...attributes}
datasets={computedDatasets}
options={computedOptions}
labels={label}
/>
)
}
ChartLineSimple.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
className: PropTypes.string,
//
borderColor: PropTypes.string,
backgroundColor: PropTypes.string,
pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array,
label: PropTypes.string,
pointed: PropTypes.bool,
}
ChartLineSimple.defaultProps = {
borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'transparent',
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: 'Sales',
}
export default ChartLineSimple

95
src/views/examples/charts/MainChartExample.js
View File

@ -1,95 +0,0 @@
import React from 'react'
import { CChart } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils'
const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b'
const MainChartExample = (attributes) => {
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
let elements = 27
const data1 = []
const data2 = []
const data3 = []
for (let i = 0; i <= elements; i++) {
data1.push(random(50, 200))
data2.push(random(80, 100))
data3.push(65)
}
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: brandInfo,
borderWidth: 2,
data: data1,
fill: true,
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: brandSuccess,
pointHoverBackgroundColor: brandSuccess,
borderWidth: 2,
data: data2,
},
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: brandDanger,
pointHoverBackgroundColor: brandDanger,
borderWidth: 1,
borderDash: [8, 5],
data: data3,
},
],
}
const options = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
drawOnChartArea: false,
},
},
y: {
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250,
},
},
},
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
}
return <CChart type="line" data={data} options={options} {...attributes} />
}
export default MainChartExample

0
src/views/examples/pages/login/Login.js → src/views/pages/login/Login.js
View File

2
src/views/examples/pages/page404/Page404.js → src/views/pages/page404/Page404.js
View File

@ -28,9 +28,7 @@ const Page404 = () => {
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText>
<CButton color="info">Search</CButton>
</CInputGroupText>
</CInputGroup>
</CCol>
</CRow>

2
src/views/examples/pages/page500/Page500.js → src/views/pages/page500/Page500.js
View File

@ -28,9 +28,7 @@ const Page500 = () => {
<CIcon name="cil-magnifying-glass" />
</CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText>
<CButton color="info">Search</CButton>
</CInputGroupText>
</CInputGroup>
</CCol>
</CRow>

15
src/views/examples/pages/register/Register.js → src/views/pages/register/Register.js
View File

@ -3,7 +3,6 @@ import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCol,
CContainer,
CForm,
@ -60,20 +59,6 @@ const Register = () => {
</CButton>
</CForm>
</CCardBody>
<CCardFooter className="p-4">
<CRow>
<CCol xs="12" sm="6">
<CButton className="btn-facebook mb-1" block>
<span>facebook</span>
</CButton>
</CCol>
<CCol xs="12" sm="6">
<CButton className="btn-twitter mb-1" block>
<span>twitter</span>
</CButton>
</CCol>
</CRow>
</CCardFooter>
</CCard>
</CCol>
</CRow>

6
src/views/examples/theme/colors/Colors.js → src/views/theme/colors/Colors.js
View File

@ -1,3 +1,4 @@
import PropTypes from 'prop-types'
import React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames'
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
@ -41,6 +42,11 @@ const ThemeColor = ({ className, children }) => {
)
}
ThemeColor.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
}
const Colors = () => {
return (
<>

0
src/views/examples/theme/typography/Typography.js → src/views/theme/typography/Typography.js
View File