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')) const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
// Pages // Pages
const Login = React.lazy(() => import('./views/examples/pages/login/Login')) const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/examples/pages/register/Register')) const Register = React.lazy(() => import('./views/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
class App extends Component { class App extends Component {
render() { render() {

4
src/components/AppHeader.js
View File

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

13
src/reusable/DocsLink.js
View File

@ -1,16 +1,17 @@
import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import { CLink } from '@coreui/react' import { CLink } from '@coreui/react'
const DocsLink = (props) => { 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 ( return (
<div className="float-end"> <div className="float-end">
<CLink <CLink
{...rest} {...rest}
href={href} href={_href}
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
className="card-header-action" 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) 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 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 Example = (props) => {
const { children, href, ...rest } = props const { children, href } = props
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return ( return (
<div className="example"> <div className="example">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
<CIcon name="cil-media-play" className="me-2" />
Preview Preview
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href={href} target="_blank"> <CNavLink href={href} target="_blank">
<CIcon name="cil-code" className="me-2" />
Code Code
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
@ -29,4 +31,9 @@ const Example = (props) => {
) )
} }
Example.propTypes = {
children: PropTypes.node,
href: PropTypes.string,
}
export default React.memo(Example) 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, CAccordionHeader,
CAccordionItem, CAccordionItem,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Accordion = () => { const Accordion = () => {
const [activeKey, setActiveKey] = useState(0) const [activeKey, setActiveKey] = useState(0)
@ -20,7 +20,10 @@ const Accordion = () => {
return ( return (
<CRow> <CRow>
<CCol> <CCol xs={12}>
<DocsCallout name="Accordion" href="components/accordion" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Accordion</strong> <strong>React Accordion</strong>
@ -29,7 +32,7 @@ const Accordion = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content. Click the accordions below to expand/collapse the accordion content.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="components/accordion">
<CAccordion> <CAccordion>
<CAccordionItem> <CAccordionItem>
<CAccordionHeader> <CAccordionHeader>
@ -42,13 +45,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey === 1}> <CAccordionCollapse visible={activeKey === 1}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
@ -63,13 +66,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey === 2}> <CAccordionCollapse visible={activeKey === 2}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
@ -84,13 +87,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey === 3}> <CAccordionCollapse visible={activeKey === 3}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
@ -108,7 +111,7 @@ const Accordion = () => {
borders, and some rounded corners to render accordions edge-to-edge with their parent borders, and some rounded corners to render accordions edge-to-edge with their parent
container. container.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="components/accordion#flush">
<CAccordion flush> <CAccordion flush>
<CAccordionItem> <CAccordionItem>
<CAccordionHeader> <CAccordionHeader>
@ -121,13 +124,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 1}> <CAccordionCollapse visible={activeKey2 === 1}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
@ -142,13 +145,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 2}> <CAccordionCollapse visible={activeKey2 === 2}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
@ -163,13 +166,13 @@ const Accordion = () => {
</CAccordionHeader> </CAccordionHeader>
<CAccordionCollapse visible={activeKey2 === 3}> <CAccordionCollapse visible={activeKey2 === 3}>
<CAccordionBody> <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 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 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 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 custom CSS or overriding our default variables. It&#39;s also worth noting
just about any HTML can go within the <code>.accordion-body</code>, though the that just about any HTML can go within the <code>.accordion-body</code>,
transition does limit overflow. though the transition does limit overflow.
</CAccordionBody> </CAccordionBody>
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>

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

@ -9,12 +9,15 @@ import {
CRow, CRow,
CLink, CLink,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Breadcrumbs = () => { const Breadcrumbs = () => {
return ( return (
<CRow> <CRow>
<CCol> <CCol xs={12}>
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
</CCol>
<CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Breadcrumb</strong> <strong>React Breadcrumb</strong>
@ -35,7 +38,7 @@ const Breadcrumbs = () => {
</a> </a>
. .
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/breadcrumb"> <Example href="components/breadcrumb">
<CBreadcrumb> <CBreadcrumb>
<CBreadcrumbItem> <CBreadcrumbItem>
<CLink href="#">Home</CLink> <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, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Cards = () => { const Cards = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Card" href="components/card" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -36,14 +39,14 @@ const Cards = () => {
alignment and mix well with other CoreUI components. Cards have no top, left, and alignment and mix well with other CoreUI components. Cards have no top, left, and
right margins by default, so use{' '} right margins by default, so use{' '}
<a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed. <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>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Below is an example of a basic card with mixed content and a fixed width. Cards have 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. element.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card"> <Example href="components/card">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -67,7 +70,7 @@ const Cards = () => {
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of the 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> </CCardText>
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
@ -86,7 +89,7 @@ const Cards = () => {
The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
need a padded section within a card. need a padded section within a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#body"> <Example href="components/card/#body">
<CCard> <CCard>
<CCardBody>This is some text within a card body.</CCardBody> <CCardBody>This is some text within a card body.</CCardBody>
</CCard> </CCard>
@ -111,14 +114,14 @@ const Cards = () => {
stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
arranged rightly. arranged rightly.
</p> </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' }}> <CCard style={{ width: '18rem' }}>
<CCardBody> <CCardBody>
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
<CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle> <CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of the 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> </CCardText>
<CCardLink href="#">Card link</CCardLink> <CCardLink href="#">Card link</CCardLink>
<CCardLink href="#">Another 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>, text can be added to the card. Text within{' '}
<code>.card-text</code> can additionally be styled with the regular HTML tags. <code>.card-text</code> can additionally be styled with the regular HTML tags.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#images"> <Example href="components/card/#images">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -162,7 +165,7 @@ const Cards = () => {
<CCardBody> <CCardBody>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of the 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> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -179,7 +182,7 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create lists of content in a card with a flush list group. Create lists of content in a card with a flush list group.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#list-groups"> <Example href="components/card/#list-groups">
<CRow> <CRow>
<CCol lg={4}> <CCol lg={4}>
<CCard> <CCard>
@ -226,7 +229,7 @@ const Cards = () => {
in there. Shown below are image styles, blocks, text styles, and a list group—all in there. Shown below are image styles, blocks, text styles, and a list group—all
wrapped in a fixed-width card. wrapped in a fixed-width card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#kitchen-sink"> <Example href="components/card/#kitchen-sink">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -250,7 +253,7 @@ const Cards = () => {
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of the 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> </CCardText>
</CCardBody> </CCardBody>
<CListGroup flush> <CListGroup flush>
@ -276,7 +279,7 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add an optional header and/or footer within a card. Add an optional header and/or footer within a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer"> <Example href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
@ -289,9 +292,9 @@ const Cards = () => {
</CCard> </CCard>
</Example> </Example>
<p className="text-medium-emphasis small"> <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer"> <Example href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader component="h5">Header</CCardHeader> <CCardHeader component="h5">Header</CCardHeader>
<CCardBody> <CCardBody>
@ -303,7 +306,7 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer"> <Example href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader>Quote</CCardHeader> <CCardHeader>Quote</CCardHeader>
<CCardBody> <CCardBody>
@ -319,7 +322,7 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </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"> <CCard className="text-center">
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
@ -342,15 +345,15 @@ const Cards = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Cards assume no specific <code>width</code> to start, so they'll be 100% wide unless Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide
otherwise stated. You can adjust this as required with custom CSS, grid classes, grid unless otherwise stated. You can adjust this as required with custom CSS, grid
Sass mixins, or services. classes, grid Sass mixins, or services.
</p> </p>
<h3>Using grid markup</h3> <h3>Using grid markup</h3>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed. Using the grid, wrap cards in columns and rows as needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="components/card/#sizing">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCard> <CCard>
@ -380,9 +383,9 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use some of{' '} Use some of{' '}
<a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="components/card/#sizing">
<CCard className="w-75"> <CCard className="w-75">
<CCardBody> <CCardBody>
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
@ -406,7 +409,7 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a width. Use custom CSS in your stylesheets or as inline styles to set a width.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="components/card/#sizing">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <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> <a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
. .
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#text-alignment"> <Example href="components/card/#text-alignment">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>
@ -474,7 +477,7 @@ const Cards = () => {
Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '} Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
<code>&lt;CNav&gt;</code> component. <code>&lt;CNav&gt;</code> component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/##navigation"> <Example href="components/card/##navigation">
<CCard className="text-center"> <CCard className="text-center">
<CCardHeader> <CCardHeader>
<CNav variant="tabs" className="card-header-tabs"> <CNav variant="tabs" className="card-header-tabs">
@ -502,7 +505,7 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/card/##navigation"> <Example href="components/card/##navigation">
<CCard className="text-center"> <CCard className="text-center">
<CCardHeader> <CCardHeader>
<CNav variant="pills" className="card-header-pills"> <CNav variant="pills" className="card-header-pills">
@ -540,10 +543,10 @@ const Cards = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Similar to headers and footers, cards can include top and bottom "image caps"—images Similar to headers and footers, cards can include top and bottom &#34;image
at the top or bottom of a card. caps&#34;—images at the top or bottom of a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#image-caps"> <Example href="components/card/#image-caps">
<CRow> <CRow>
<CCol lg={6}> <CCol lg={6}>
<CCard className="mb-3"> <CCard className="mb-3">
@ -627,7 +630,7 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code>color</code> property to change the appearance of a card. Use <code>color</code> property to change the appearance of a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#background-and-color"> <Example href="components/card/#background-and-color">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'white' }, { color: 'primary', textColor: 'white' },
@ -646,7 +649,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle> <CCardTitle>{item.color} card title</CCardTitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of 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> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -659,9 +662,9 @@ const Cards = () => {
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change 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{' '} 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 <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#border"> <Example href="components/card/#border">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'primary' }, { color: 'primary', textColor: 'primary' },
@ -680,7 +683,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle> <CCardTitle>{item.color} card title</CCardTitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of 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> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -693,9 +696,9 @@ const Cards = () => {
Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change 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{' '} 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 <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#top-border"> <Example href="components/card/#top-border">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'primary' }, { color: 'primary', textColor: 'primary' },
@ -717,7 +720,7 @@ const Cards = () => {
<CCardTitle>{item.color} card title</CCardTitle> <CCardTitle>{item.color} card title</CCardTitle>
<CCardText> <CCardText>
Some quick example text to build on the card title and make up the bulk of 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> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -739,7 +742,7 @@ const Cards = () => {
height columns. Card groups start off stacked and use <code>display: flex;</code> to 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. become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups"> <Example href="components/card/#card-groups">
<CCardGroup> <CCardGroup>
<CCard> <CCard>
<CCardImage <CCardImage
@ -837,7 +840,7 @@ const Cards = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
When using card groups with footers, their content will automatically line up. When using card groups with footers, their content will automatically line up.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups"> <Example href="components/card/#card-groups">
<CCardGroup> <CCardGroup>
<CCard> <CCard>
<CCardImage <CCardImage
@ -943,13 +946,13 @@ const Cards = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use the <code>CRow</code> component and set{' '} Use the <code>CRow</code> component and set{' '}
<code>&#123;xs|sm|md|lg|xl|xxl}=&#123;&#123; cols: * &#125;&#125;</code> property to <code>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: * &#125;&#125;</code> property
control how many grid columns (wrapped around your cards) you show per row. For 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 example, here&#39;s <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the
on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting
cards to equal width across multiple rows, from the medium breakpoint up. four cards to equal width across multiple rows, from the medium breakpoint up.
</p> </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 }}> <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
<CCol xs> <CCol xs>
<CCard> <CCard>
@ -1082,10 +1085,10 @@ const Cards = () => {
</CRow> </CRow>
</Example> </Example>
<p className="text-medium-emphasis small"> <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. fourth card wrap.
</p> </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 }}> <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
<CCol xs> <CCol xs>
<CCard> <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 { import {
CCard, CCard,
CCardBody, CCardBody,
@ -9,7 +9,7 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const slides = [ 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', '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 Carousels = () => {
const [activeIndex] = useState(1)
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Carousel" href="components/carousel" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -35,7 +36,7 @@ const Carousels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small">Here’s a carousel with slides</p> <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> <CCarousel>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" /> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -60,7 +61,7 @@ const Carousels = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Adding in the previous and next controls by <code>controls</code> property. Adding in the previous and next controls by <code>controls</code> property.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-controls"> <Example href="components/carousel/#with-controls">
<CCarousel controls> <CCarousel controls>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" /> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -85,7 +86,7 @@ const Carousels = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the controls, too. You can attach the indicators to the carousel, lengthwise the controls, too.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators"> <Example href="components/carousel/#with-indicators">
<CCarousel controls indicators> <CCarousel controls indicators>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" /> <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{' '} with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
<code>.d-md-block</code>. <code>.d-md-block</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-captions"> <Example href="components/carousel/#with-captions">
<CCarousel controls indicators> <CCarousel controls indicators>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" /> <img className="d-block w-100" src={slides[0]} alt="slide 1" />
@ -150,10 +151,10 @@ const Carousels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>transition="crossfade"</code> to your carousel to animate slides with a fade Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
transition instead of a slide. with a fade transition instead of a slide.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#crossfade"> <Example href="components/carousel/#crossfade">
<CCarousel controls transition="crossfade"> <CCarousel controls transition="crossfade">
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slides[0]} alt="slide 1" /> <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 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>. variables that customize the <code>color</code> and <code>background-color</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#dark-variant"> <Example href="components/carousel/#dark-variant">
<CCarousel controls indicators dark> <CCarousel controls indicators dark>
<CCarouselItem> <CCarouselItem>
<img className="d-block w-100" src={slidesLight[0]} alt="slide 1" /> <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 React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/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 Collapses = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
@ -9,6 +9,9 @@ const Collapses = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Collapse" href="components/collapse" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -16,7 +19,7 @@ const Collapses = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small">You can use a link or a button component.</p> <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 <CButton
href="#" href="#"
onClick={(e) => { onClick={(e) => {
@ -49,7 +52,7 @@ const Collapses = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements. A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p> </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={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton> <CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
<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> <h2>Add borders</h2>
<p> <p>
Or, keep it light and add a border for some added definition to the boundaries of 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 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's content for equal-height. adjusted the alignment and sizing of both column&#39;s content for equal-height.
</p> </p>
<CButton color="secondary" variant="outline"> <CButton color="secondary" variant="outline">
Example button 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 { import {
CBadge, CBadge,
CCard, CCard,
@ -10,11 +10,14 @@ import {
CListGroupItem, CListGroupItem,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const ListGroups = () => { const ListGroups = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="List Group" href="components/list-group" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -25,7 +28,7 @@ const ListGroups = () => {
The default list group is an unordered list with items and the proper CSS classes. 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. Build upon it with the options that follow, or with your CSS as required.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group"> <Example href="components/list-group">
<CListGroup> <CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</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 Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
show the current active selection. show the current active selection.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#active-items"> <Example href="components/list-group/#active-items">
<CListGroup> <CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem> <CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</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 Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
make it appear disabled. make it appear disabled.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#disabled-items"> <Example href="components/list-group/#disabled-items">
<CListGroup> <CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -90,12 +93,12 @@ const ListGroups = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '} 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{' '} <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 <code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '} list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
<code>&lt;div&gt;</code> <code>&lt;div&gt;</code>
s) don't provide a click or tap affordance. s) don&#39;tprovide a click or tap affordance.
</p> </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> <CListGroup>
<CListGroupItem component="a" href="#" active> <CListGroupItem component="a" href="#" active>
Cras justo odio Cras justo odio
@ -127,7 +130,7 @@ const ListGroups = () => {
Add <code>flush</code> boolean property to remove some borders and rounded corners to 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). render list group items edge-to-edge in a parent container (e.g., cards).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#flush"> <Example href="components/list-group/#flush">
<CListGroup flush> <CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -146,14 +149,14 @@ const ListGroups = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>layout="horizontal"</code> to change the layout of list group items from Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
vertical to horizontal across all breakpoints. Alternatively, choose a responsive 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 variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
a list group horizontal starting at that breakpoint's <code>min-width</code>. to make a list group horizontal starting at that breakpoint&#39;s{' '}
Currently{' '} <code>min-width</code>. Currently{' '}
<strong>horizontal list groups cannot be combined with flush list groups.</strong> <strong>horizontal list groups cannot be combined with flush list groups.</strong>
</p> </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) => ( {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
<CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}> <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
@ -174,7 +177,7 @@ const ListGroups = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use contextual classes to style list items with a stateful background and color. Use contextual classes to style list items with a stateful background and color.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes"> <Example href="components/list-group/#contextual-classes">
<CListGroup> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <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 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. indicate an active selection on a contextual list group item.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes"> <Example href="components/list-group/#contextual-classes">
<CListGroup> <CListGroup>
<CListGroupItem component="a" href="#"> <CListGroupItem component="a" href="#">
Dapibus ac facilisis in Dapibus ac facilisis in
@ -232,7 +235,7 @@ const ListGroups = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add badges to any list group item to show unread counts, activity, and more. Add badges to any list group item to show unread counts, activity, and more.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#with-badges"> <Example href="components/list-group/#with-badges">
<CListGroup> <CListGroup>
<CListGroupItem className="d-flex justify-content-between align-items-center"> <CListGroupItem className="d-flex justify-content-between align-items-center">
Cras justo odio 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 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>. help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#custom-content"> <Example href="components/list-group/#custom-content">
<CListGroup> <CListGroup>
<CListGroupItem component="a" href="#" active> <CListGroupItem component="a" href="#" active>
<div className="d-flex w-100 justify-content-between"> <div className="d-flex w-100 justify-content-between">
@ -314,9 +317,10 @@ const ListGroups = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </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> <CListGroup>
<CListGroupItem> <CListGroupItem>
<CFormCheck label="Cras justo odio" /> <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, CNavItem,
CNavLink, CNavLink,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Navs = () => { const Navs = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Nav" href="components/nav" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -30,7 +33,7 @@ const Navs = () => {
overrides (for working with lists), some link padding for larger hit areas, and basic overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling. disabled styling.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav"> <Example href="components/nav#base-nav">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <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 the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup. without the extra markup.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav"> <Example href="components/nav#base-nav">
<CNav component="nav"> <CNav component="nav">
<CNavLink href="#" active> <CNavLink href="#" active>
Active Active
@ -89,7 +92,7 @@ const Navs = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>: Centered with <code>.justify-content-center</code>:
</p> </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"> <CNav className="justify-content-center">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -112,7 +115,7 @@ const Navs = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>: Right-aligned with <code>.justify-content-end</code>:
</p> </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"> <CNav className="justify-content-end">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -146,7 +149,7 @@ const Navs = () => {
<code>.flex-column</code> utility. Need to stack them on some viewports but not <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>). others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#vertical"> <Example href="components/nav#vertical">
<CNav className="flex-column"> <CNav className="flex-column">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -176,10 +179,10 @@ const Navs = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant="tabs"</code> class to Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
generate a tabbed interface to generate a tabbed interface
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs"> <Example href="components/nav#tabs">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -209,9 +212,9 @@ const Navs = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#pills"> <Example href="components/nav#pills">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -241,12 +244,12 @@ const Navs = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Force your <code>.nav</code>'s contents to extend the full available width one of two Force your <code>.nav</code>&#39;s contents to extend the full available width one of
modifier classes. To proportionately fill all available space with your{' '} 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 <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
space is occupied, but not every nav item has the same width. horizontal space is occupied, but not every nav item has the same width.
</p> </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"> <CNav variant="pills" layout="fill">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -267,11 +270,11 @@ const Navs = () => {
</CNav> </CNav>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
For equal-width elements, use <code>layout="justified"</code>. All horizontal space For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
will be occupied by nav links, but unlike the .nav-fill above, every nav item will be space will be occupied by nav links, but unlike the .nav-fill above, every nav item
the same width. will be the same width.
</p> </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"> <CNav variant="pills" layout="justified">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <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 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. horizontal layout that fills the available width starting from the small breakpoint.
</p> </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"> <CNav component="nav" variant="pills" className="flex-column flex-sm-row">
<CNavLink href="#" active> <CNavLink href="#" active>
Active Active
@ -328,7 +331,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Tabs with dropdowns</small> <strong>React Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs-with-dropdowns"> <Example href="components/nav#tabs-with-dropdowns">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -362,7 +365,7 @@ const Navs = () => {
<strong>React Navs</strong> <small>Pills with dropdowns</small> <strong>React Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <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, CPaginationItem,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Paginations = () => { const Paginations = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Pagination" href="components/pagination" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -27,13 +30,13 @@ const Paginations = () => {
screen readers and other assistive technologies. screen readers and other assistive technologies.
</p> </p>
<p className="text-medium-emphasis small"> <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{' '} 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 <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 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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination"> <Example href="components/pagination">
<CPagination aria-label="Page navigation example"> <CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</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 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. to provide proper screen reader support with <code>aria</code> attributes.
</p> </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"> <CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous"> <CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
@ -85,11 +88,11 @@ const Paginations = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '} 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 <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, property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
we always add <code>tabindex="-1"</code> on disabled links and use custom JavaScript such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
to fully disable their functionality. custom JavaScript to fully disable their functionality.
</p> </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"> <CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled> <CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
@ -112,10 +115,10 @@ const Paginations = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Fancy larger or smaller pagination? Add <code>size="lg"</code> or{' '} Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size="sm"</code> for additional sizes. <code>size=&#34;sm&#34;</code> for additional sizes.
</p> </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"> <CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
@ -124,7 +127,7 @@ const Paginations = () => {
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </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"> <CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
@ -146,7 +149,7 @@ const Paginations = () => {
Change the alignment of pagination components with{' '} Change the alignment of pagination components with{' '}
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>. <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p> </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"> <CPagination className="justify-content-center" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem> <CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
@ -155,7 +158,7 @@ const Paginations = () => {
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </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"> <CPagination className="justify-content-end" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem> <CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</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 React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/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 = () => { const Popovers = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Popover" href="components/popover" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Popover</strong> <small>Basic example</small> <strong>React Popover</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/popover"> <Example href="components/popover">
<CPopover <CPopover
title="Popover title" title="Popover title"
content="And here’s some amazing content. It’s very engaging. Right?" 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 Four options are available: top, right, bottom, and left aligned. Directions are
mirrored when using CoreUI for React in RTL. mirrored when using CoreUI for React in RTL.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/popover#four-directions"> <Example href="components/popover#four-directions">
<CPopover <CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top" 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 React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/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 = () => { const Progress = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Progress" href="components/progress" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -13,13 +16,13 @@ const Progress = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Progress components are built with two HTML elements, some CSS to set the width, and a 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"> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
the HTML5 <code>&lt;progress&gt;</code> element the HTML5 <code>&lt;progress&gt;</code> element
</a> </a>
, ensuring you can stack progress bars, animate them, and place text labels over them. , ensuring you can stack progress bars, animate them, and place text labels over them.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress"> <Example href="components/progress">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={0} /> <CProgressBar value={0} />
</CProgress> </CProgress>
@ -49,7 +52,7 @@ const Progress = () => {
Add labels to your progress bars by placing text within the{' '} Add labels to your progress bars by placing text within the{' '}
<code>&lt;CProgressBar&gt;</code>. <code>&lt;CProgressBar&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#labels"> <Example href="components/progress#labels">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={25}>25%</CProgressBar> <CProgressBar value={25}>25%</CProgressBar>
</CProgress> </CProgress>
@ -68,7 +71,7 @@ const Progress = () => {
you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
resize accordingly. resize accordingly.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#height"> <Example href="components/progress#height">
<CProgress height={1} className="mb-3"> <CProgress height={1} className="mb-3">
<CProgressBar value={25}></CProgressBar> <CProgressBar value={25}></CProgressBar>
</CProgress> </CProgress>
@ -88,7 +91,7 @@ const Progress = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code>color</code> prop to change the appearance of individual progress bars. Use <code>color</code> prop to change the appearance of individual progress bars.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#backgrounds"> <Example href="components/progress#backgrounds">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" value={25} /> <CProgressBar color="success" value={25} />
</CProgress> </CProgress>
@ -114,7 +117,7 @@ const Progress = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need. Include multiple progress bars in a progress component if you need.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars"> <Example href="components/progress#multiple-bars">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={15} /> <CProgressBar value={15} />
<CProgressBar color="success" value={30} /> <CProgressBar color="success" value={30} />
@ -131,10 +134,10 @@ const Progress = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>variant="striped"</code> to any <code>&lt;CProgressBar&gt;</code> to apply a Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
stripe via CSS gradient over the progress bar's background color. apply a stripe via CSS gradient over the progress bar&#39;s background color.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#striped"> <Example href="components/progress#striped">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" variant="striped" value={25} /> <CProgressBar color="success" variant="striped" value={25} />
</CProgress> </CProgress>
@ -162,7 +165,7 @@ const Progress = () => {
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3 <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
animations. animations.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes"> <Example href="components/progress#animated-stripes">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" variant="striped" animated value={25} /> <CProgressBar color="success" variant="striped" animated value={25} />
</CProgress> </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 { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Accordion = () => { const Accordion = () => {
const [activeKey, setActiveKey] = useState(0)
const [activeKey2, setActiveKey2] = useState(0)
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Spinner" href="components/spinner" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -17,14 +17,14 @@ const Accordion = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator. Use the border spinners for a lightweight loading indicator.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner"> <Example href="components/spinner">
<CSpinner /> <CSpinner />
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its <code>border-color</code>. 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. You can use any of our text color utilities on the standard spinner.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#colors"> <Example href="components/spinner#colors">
<CSpinner color="primary" /> <CSpinner color="primary" />
<CSpinner color="secondary" /> <CSpinner color="secondary" />
<CSpinner color="success" /> <CSpinner color="success" />
@ -44,17 +44,17 @@ const Accordion = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
technically spin, it does repeatedly grow! doesn&#39;t technically spin, it does repeatedly grow!
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#growing-spinner"> <Example href="components/spinner#growing-spinner">
<CSpinner variant="grow" /> <CSpinner variant="grow" />
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so you can easily 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. change its appearance. Here it is in blue, along with the supported variants.
</p> </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="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" /> <CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" /> <CSpinner color="success" variant="grow" />
@ -74,10 +74,10 @@ const Accordion = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>size="sm"</code> property to make a smaller spinner that can quickly be used Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
within other components. be used within other components.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#size"> <Example href="components/spinner#size">
<CSpinner size="sm" /> <CSpinner size="sm" />
<CSpinner size="sm" variant="grow" /> <CSpinner size="sm" variant="grow" />
</Example> </Example>
@ -95,7 +95,7 @@ const Accordion = () => {
place. You may also swap the text out of the spinner element and utilize button text place. You may also swap the text out of the spinner element and utilize button text
as needed. as needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#buttons"> <Example href="components/spinner#buttons">
<CButton disabled> <CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" /> <CSpinner component="span" size="sm" aria-hidden="true" />
</CButton> </CButton>
@ -104,7 +104,7 @@ const Accordion = () => {
Loading... Loading...
</CButton> </CButton>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#buttons"> <Example href="components/spinner#buttons">
<CButton disabled> <CButton disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" /> <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
</CButton> </CButton>

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

@ -13,11 +13,14 @@ import {
CTableHeaderCell, CTableHeaderCell,
CTableRow, CTableRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Tables = () => { const Tables = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Table" href="components/table" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -25,10 +28,10 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Using the most basic table CoreUI, here's how <code>&lt;CTable&gt;</code>-based tables Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
look in CoreUI. tables look in CoreUI.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table"> <Example href="components/table">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -71,7 +74,7 @@ const Tables = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use contextual classes to color tables, table rows or individual cells. Use contextual classes to color tables, table rows or individual cells.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#variants"> <Example href="components/table#variants">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -142,7 +145,7 @@ const Tables = () => {
Use <code>striped</code> property to add zebra-striping to any table row within the{' '} Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
<code>&lt;CTableBody&gt;</code>. <code>&lt;CTableBody&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows"> <Example href="components/table#striped-rows">
<CTable striped> <CTable striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -176,7 +179,7 @@ const Tables = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
These classes can also be added to table variants: These classes can also be added to table variants:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows"> <Example href="components/table#striped-rows">
<CTable color="dark" striped> <CTable color="dark" striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -207,7 +210,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows"> <Example href="components/table#striped-rows">
<CTable color="success" striped> <CTable color="success" striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -251,7 +254,7 @@ const Tables = () => {
Use <code>hover</code> property to enable a hover state on table rows within a{' '} Use <code>hover</code> property to enable a hover state on table rows within a{' '}
<code>&lt;CTableBody&gt;</code>. <code>&lt;CTableBody&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows"> <Example href="components/table#hoverable-rows">
<CTable hover> <CTable hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -282,7 +285,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows"> <Example href="components/table#hoverable-rows">
<CTable color="dark" hover> <CTable color="dark" hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -313,7 +316,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows"> <Example href="components/table#hoverable-rows">
<CTable striped hover> <CTable striped hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -353,7 +356,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Active tables</small> <strong>React Table</strong> <small>Active tables</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables"> <Example href="components/table#active-tables">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -386,7 +389,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables"> <Example href="components/table#active-tables">
<CTable color="dark"> <CTable color="dark">
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -431,7 +434,7 @@ const Tables = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>bordered</code> property for borders on all sides of the table and cells. Add <code>bordered</code> property for borders on all sides of the table and cells.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables"> <Example href="components/table#bordered-tables">
<CTable bordered> <CTable bordered>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -468,7 +471,7 @@ const Tables = () => {
</a>{' '} </a>{' '}
can be added to change colors: can be added to change colors:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables"> <Example href="components/table#bordered-tables">
<CTable bordered borderColor="primary"> <CTable bordered borderColor="primary">
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -511,7 +514,7 @@ const Tables = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders. Add <code>borderless</code> property for a table without borders.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders"> <Example href="components/table#tables-without-borders">
<CTable borderless> <CTable borderless>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -542,7 +545,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </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> <CTable color="dark" borderless>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -586,7 +589,7 @@ const Tables = () => {
Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
by cutting all cell <code>padding</code> in half. by cutting all cell <code>padding</code> in half.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#small-tables"> <Example href="components/table#small-tables">
<CTable small> <CTable small>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -632,7 +635,7 @@ const Tables = () => {
<code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
property to re-align where needed. property to re-align where needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment"> <Example href="components/table#vertical-alignment">
<CTable align="middle" responsive> <CTable align="middle" responsive>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -712,7 +715,7 @@ const Tables = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Border styles, active styles, and table variants are not inherited by nested tables. Border styles, active styles, and table variants are not inherited by nested tables.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#nesting"> <Example href="components/table#nesting">
<CTable striped> <CTable striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -777,11 +780,11 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Similar to tables and dark tables, use the modifier prop <code>color="light"</code> or{' '} Similar to tables and dark tables, use the modifier prop{' '}
<code>color="dark"</code> to make <code>&lt;CTableHead&gt;</code>s appear light or <code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
dark gray. <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head"> <Example href="components/table#table-head">
<CTable> <CTable>
<CTableHead color="light"> <CTableHead color="light">
<CTableRow> <CTableRow>
@ -813,7 +816,7 @@ const Tables = () => {
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head"> <Example href="components/table#table-head">
<CTable> <CTable>
<CTableHead color="dark"> <CTableHead color="dark">
<CTableRow> <CTableRow>
@ -853,7 +856,7 @@ const Tables = () => {
<strong>React Table</strong> <small>Table foot</small> <strong>React Table</strong> <small>Table foot</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-foot"> <Example href="components/table#table-foot">
<CTable> <CTable>
<CTableHead color="light"> <CTableHead color="light">
<CTableRow> <CTableRow>
@ -903,10 +906,10 @@ const Tables = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps 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 users with screen readers to find a table and understand what it&#39;s about and
they want to read it. decide if they want to read it.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions"> <Example href="components/table#captions">
<CTable> <CTable>
<CTableCaption>List of users</CTableCaption> <CTableCaption>List of users</CTableCaption>
<CTableHead> <CTableHead>
@ -941,9 +944,9 @@ const Tables = () => {
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '} 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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions"> <Example href="components/table#captions">
<CTable caption="top"> <CTable caption="top">
<CTableCaption>List of users</CTableCaption> <CTableCaption>List of users</CTableCaption>
<CTableHead> <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 React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/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 Tooltips = () => {
const placements = [
'top-start',
'top',
'top-end',
'bottom-start',
'bottom',
'bottom-end',
'right-start',
'right',
'right-end',
'left-start',
'left',
'left-end',
]
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Tooltip" href="components/tooltip" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -29,21 +17,21 @@ const Tooltips = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Hover over the links below to see tooltips: Hover over the links below to see tooltips:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/tooltip"> <Example href="components/tooltip">
<p className="text-medium-emphasis"> <p className="text-medium-emphasis">
Tight pants next level keffiyeh Tight pants next level keffiyeh
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> you probably </CLink> <CLink> you probably </CLink>
</CTooltip> </CTooltip>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
apparel american apparel
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> have a </CLink> <CLink> have a </CLink>
</CTooltip> </CTooltip>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
chambray. A really ironic artisan cleanse vegan chambray. A really ironic artisan
<CTooltip content="Tooltip text"> <CTooltip content="Tooltip text">
<CLink> whatever keytar </CLink> <CLink> whatever keytar </CLink>
</CTooltip> </CTooltip>
@ -58,7 +46,7 @@ const Tooltips = () => {
Hover over the buttons below to see the four tooltips directions: top, right, bottom, Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left. Directions are mirrored when using CoreUI in RTL. and left. Directions are mirrored when using CoreUI in RTL.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/tooltip"> <Example href="components/tooltip">
<CTooltip <CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top" 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, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const ButtonGroups = () => { const ButtonGroups = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Button Group" href="components/button-group" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -33,7 +36,7 @@ const ButtonGroups = () => {
Wrap a series of <code>&lt;CButton&gt;</code> components in{' '} Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
<code>&lt;CButtonGroup&gt;</code>.{' '} <code>&lt;CButtonGroup&gt;</code>.{' '}
</p> </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"> <CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton> <CButton color="primary">Left</CButton>
<CButton color="primary">Middle</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{' '} These classes can also be added to groups of links, as an alternative to the{' '}
<code>&lt;CNav&gt;</code> components. <code>&lt;CNav&gt;</code> components.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group"> <Example href="components/button-group">
<CButtonGroup> <CButtonGroup>
<CButton href="#" color="primary" active> <CButton href="#" color="primary" active>
Active link Active link
@ -66,7 +69,7 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Mixed styles</span> <strong>React Button Group</strong> <span>Mixed styles</span>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton> <CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton> <CButton color="warning">Middle</CButton>
@ -82,7 +85,7 @@ const ButtonGroups = () => {
<strong>React Button Group</strong> <span>Outlined styles</span> <strong>React Button Group</strong> <span>Outlined styles</span>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline"> <CButton color="primary" variant="outline">
Left Left
@ -108,7 +111,7 @@ const ButtonGroups = () => {
Combine button-like checkbox and radio toggle buttons into a seamless looking button Combine button-like checkbox and radio toggle buttons into a seamless looking button
group. group.
</p> </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"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
button button
@ -133,7 +136,7 @@ const ButtonGroups = () => {
/> />
</CButtonGroup> </CButtonGroup>
</Example> </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"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
type="radio" type="radio"
@ -177,7 +180,7 @@ const ButtonGroups = () => {
Join sets of button groups into button toolbars for more complicated components. Use Join sets of button groups into button toolbars for more complicated components. Use
utility classes as needed to space out groups, buttons, and more. utility classes as needed to space out groups, buttons, and more.
</p> </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"> <CButtonToolbar role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group"> <CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="primary">1</CButton> <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 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. example above, you’ll likely need some utilities through to space items correctly.
</p> </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"> <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group"> <CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline"> <CButton color="secondary" variant="outline">
@ -264,10 +267,10 @@ const ButtonGroups = () => {
<CCardBody> <CCardBody>
<p> <p>
Alternatively, of implementing button sizing classes to each button in a group, set{' '} 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 <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
one when nesting multiple groups. each one when nesting multiple groups.
</p> </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"> <CButtonGroup size="lg" role="group" aria-label="Large button group">
<CButton color="dark" variant="outline"> <CButton color="dark" variant="outline">
Left Left
@ -318,7 +321,7 @@ const ButtonGroups = () => {
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
of buttons. of buttons.
</p> </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"> <CButtonGroup role="group" aria-label="Button group with nested dropdown">
<CButton color="primary">1</CButton> <CButton color="primary">1</CButton>
<CButton color="primary">2</CButton> <CButton color="primary">2</CButton>
@ -347,7 +350,7 @@ const ButtonGroups = () => {
Create a set of buttons that appear vertically stacked rather than horizontally.{' '} Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
<strong>Split button dropdowns are not supported here.</strong> <strong>Split button dropdowns are not supported here.</strong>
</p> </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"> <CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
@ -358,7 +361,7 @@ const ButtonGroups = () => {
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </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"> <CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
@ -406,7 +409,7 @@ const ButtonGroups = () => {
</CDropdown> </CDropdown>
</CButtonGroup> </CButtonGroup>
</Example> </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"> <CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck <CFormCheck
type="radio" 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 React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Buttons = () => { const Buttons = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Button" href="components/buttons" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -18,7 +21,7 @@ const Buttons = () => {
it. CoreUI buttons are used to initialize operations, both in the background or it. CoreUI buttons are used to initialize operations, both in the background or
foreground of an experience. foreground of an experience.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons"> <Example href="components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => ( {['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}> <CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0"> <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -61,7 +64,7 @@ const Buttons = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>. You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons"> <Example href="components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => ( {['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}> <CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0"> <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). elements (though some browsers may apply a slightly different rendering).
</p> </p>
<p className="text-medium-emphasis small"> <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 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 should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
to assistive technologies such as screen readers. meaning to assistive technologies such as screen readers.
</p> </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"> <CButton component="a" color="primary" href="#" role="button">
Link Link
</CButton> </CButton>
@ -138,9 +141,9 @@ const Buttons = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
If you need a button, but without the strong background colors. Set{' '} 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> </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) => ( {['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}> <CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0"> <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -181,10 +184,10 @@ const Buttons = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
If you need a ghost variant of button, set <code>variant="ghost"</code> prop to remove If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
all background colors. to remove all background colors.
</p> </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) => ( {['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}> <CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0"> <CCol xs={12} xl={2} className="mb-3 mb-xl-0">
@ -225,10 +228,10 @@ const Buttons = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
additional sizes. <code>size=&#34;sm&#34;</code> for additional sizes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes"> <Example href="components/buttons#sizes">
<CButton color="primary" size="lg"> <CButton color="primary" size="lg">
Large button Large button
</CButton> </CButton>
@ -236,7 +239,7 @@ const Buttons = () => {
Large button Large button
</CButton> </CButton>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes"> <Example href="components/buttons#sizes">
<CButton color="primary" size="sm"> <CButton color="primary" size="sm">
Small button Small button
</CButton> </CButton>
@ -253,7 +256,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Pill</small> <strong>React Button</strong> <small>Pill</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#pill-buttons"> <Example href="components/buttons#pill-buttons">
{[ {[
'primary', 'primary',
'secondary', 'secondary',
@ -278,7 +281,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>Square</small> <strong>React Button</strong> <small>Square</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#square"> <Example href="components/buttons#square">
{[ {[
'primary', 'primary',
'secondary', 'secondary',
@ -309,7 +312,7 @@ const Buttons = () => {
<code>pointer-events: none</code> applied to, disabling hover and active states from <code>pointer-events: none</code> applied to, disabling hover and active states from
triggering. triggering.
</p> </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> <CButton color="primary" size="lg" disabled>
Primary button Primary button
</CButton> </CButton>
@ -321,12 +324,13 @@ const Buttons = () => {
Disabled buttons using the <code>&lt;a&gt;</code> component act a little different: Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<code>&lt;a&gt;</code>s don't support the <code>disabled</code> attribute, so CoreUI <code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
has to add <code>.disabled</code> className to make buttons look inactive. CoreUI also CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
has to add to the disabled button component <code>aria-disabled="true"</code>{' '} CoreUI also has to add to the disabled button component{' '}
attribute to show the state of the component to assistive technologies. <code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
to assistive technologies.
</p> </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> <CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link Primary link
</CButton> </CButton>
@ -346,7 +350,7 @@ const Buttons = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using utilities. Create buttons that span the full width of a parent—by using utilities.
</p> </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"> <div className="d-grid gap-2">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<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 <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
your browser to see them change. your browser to see them change.
</p> </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"> <div className="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
@ -366,10 +370,10 @@ const Buttons = () => {
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column width classes. For 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. horizontally with <code>.mx-auto</code>, too.
</p> </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"> <div className="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
@ -377,11 +381,11 @@ const Buttons = () => {
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons when horizontal. 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 Here we&#39;ve taken our previous responsive example and added some flex utilities and
margin utility on the button to right align the buttons when they're no longer a margin utility on the button to right align the buttons when they&#39;re no longer
stacked. stacked.
</p> </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"> <div className="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" className="me-md-2"> <CButton color="primary" className="me-md-2">
Button Button

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

@ -13,11 +13,14 @@ import {
CDropdownToggle, CDropdownToggle,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Dropdowns = () => { const Dropdowns = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Dropdown" href="components/dropdown" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -25,9 +28,10 @@ const Dropdowns = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button"> <Example href="components/dropdown#single-button">
<CDropdown> <CDropdown>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -40,7 +44,7 @@ const Dropdowns = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The best part is you can do this with any button variant, too: The best part is you can do this with any button variant, too:
</p> </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( {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => ( (color, index) => (
@ -74,11 +78,11 @@ const Dropdowns = () => {
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
We use this extra class to reduce the horizontal <code>padding</code> on either side 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 of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
button dropdowns. Those additional changes hold the caret centered in the split button normal button dropdowns. Those additional changes hold the caret centered in the split
and implement a more properly sized hit area next to the main button. button and implement a more properly sized hit area next to the main button.
</p> </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( {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => ( (color, index) => (
@ -110,7 +114,7 @@ const Dropdowns = () => {
Button dropdowns work with buttons of all sizes, including default and split dropdown Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons. buttons.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing"> <Example href="components/dropdown#sizing">
<CDropdown variant="btn-group"> <CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg"> <CDropdownToggle color="secondary" size="lg">
Large button Large button
@ -137,7 +141,7 @@ const Dropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing"> <Example href="components/dropdown#sizing">
<CDropdown variant="btn-group"> <CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm"> <CDropdownToggle color="secondary" size="sm">
Small button Small button
@ -177,7 +181,7 @@ const Dropdowns = () => {
Opt into darker dropdowns to match a dark navbar or custom style by set{' '} 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. <code>dark</code> property. No changes are required to the dropdown items.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns"> <Example href="components/dropdown#dark-dropdowns">
<CDropdown dark> <CDropdown dark>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -190,10 +194,10 @@ const Dropdowns = () => {
</CDropdown> </CDropdown>
</Example> </Example>
<p className="text-medium-emphasis small">And putting it to use in a navbar:</p> <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"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid"> <div className="container-fluid">
<a className="navbar-brand" href="#"> <a className="navbar-brand" href="https://coreui.io/react/">
Navbar Navbar
</a> </a>
<button <button
@ -234,10 +238,11 @@ const Dropdowns = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Trigger dropdown menus above elements by adding <code>direction="dropup"</code> to the{' '} Trigger dropdown menus above elements by adding{' '}
<code>&lt;CDropdown&gt;</code> component. <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup"> <Example href="components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup"> <CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -271,9 +276,10 @@ const Dropdowns = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Trigger dropdown menus at the right of the elements by adding{' '} 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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright"> <Example href="components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend"> <CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -307,9 +313,10 @@ const Dropdowns = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Trigger dropdown menus at the left of the elements by adding{' '} 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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft"> <Example href="components/dropdown#dropleft">
<CButtonGroup> <CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart"> <CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split /> <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 React from 'react'
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/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' import { DocsLink } from 'src/reusable'
const Charts = () => { const Charts = () => {
@ -15,8 +22,7 @@ const Charts = () => {
<DocsLink href="http://www.chartjs.org" /> <DocsLink href="http://www.chartjs.org" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartBar
type="bar"
data={{ data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [ datasets: [
@ -36,8 +42,7 @@ const Charts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Line Chart</CCardHeader> <CCardHeader>Line Chart</CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartLine
type="line"
data={{ data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [ datasets: [
@ -67,8 +72,7 @@ const Charts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader> <CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartDoughnut
type="doughnut"
data={{ data={{
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [ datasets: [
@ -86,8 +90,7 @@ const Charts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Pie Chart</CCardHeader> <CCardHeader>Pie Chart</CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartPie
type="pie"
data={{ data={{
labels: ['Red', 'Green', 'Yellow'], labels: ['Red', 'Green', 'Yellow'],
datasets: [ datasets: [
@ -106,8 +109,7 @@ const Charts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Polar Area Chart</CCardHeader> <CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartPolarArea
type="polarArea"
data={{ data={{
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'], labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [ datasets: [
@ -125,8 +127,7 @@ const Charts = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Radar Chart</CCardHeader> <CCardHeader>Radar Chart</CCardHeader>
<CCardBody> <CCardBody>
<CChart <CChartRadar
type="radar"
data={{ data={{
labels: [ labels: [
'Eating', '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 React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const ChecksRadios = () => { const ChecksRadios = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Checkbox</strong> <strong>React Checkbox</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <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="flexCheckDefault" label="Default checkbox" />
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked /> <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
</Example> </Example>
@ -26,10 +29,10 @@ const ChecksRadios = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s 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 are automatically styled to match with a lighter color to help indicate the
state. input&#39;s state.
</p> </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 checkbox" disabled />
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled /> <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
</Example> </Example>
@ -44,10 +47,10 @@ const ChecksRadios = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s 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 are automatically styled to match with a lighter color to help indicate the
state. input&#39;s state.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios"> <Example href="forms/checks-radios#radios">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
@ -71,7 +74,7 @@ const ChecksRadios = () => {
<strong>React Radio</strong> <small>Disabled</small> <strong>React Radio</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled-1"> <Example href="forms/checks-radios#disabled-1">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="flexRadioDisabled" name="flexRadioDisabled"
@ -102,7 +105,7 @@ const ChecksRadios = () => {
properly to render a toggle switch. Switches also support the <code>disabled</code>{' '} properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
attribute. attribute.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches"> <Example href="forms/checks-radios#switches">
<CFormCheck <CFormCheck
switch switch
label="Default switch checkbox input" label="Default switch checkbox input"
@ -137,7 +140,7 @@ const ChecksRadios = () => {
<strong>React Switches</strong> <small>Sizes</small> <strong>React Switches</strong> <small>Sizes</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#sizes"> <Example href="forms/checks-radios#sizes">
<CFormCheck <CFormCheck
switch switch
label="Default switch checkbox input" 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 By default, any number of checkboxes and radios that are immediate sibling will be
vertically stacked and appropriately spaced. vertically stacked and appropriately spaced.
</p> </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="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled /> <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#default-stacked"> <Example href="forms/checks-radios#default-stacked">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="exampleRadios" name="exampleRadios"
@ -211,7 +214,7 @@ const ChecksRadios = () => {
Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '} Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
boolean property to any <code>&lt;CFormCheck&gt;</code>. boolean property to any <code>&lt;CFormCheck&gt;</code>.
</p> </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="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" /> <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck <CFormCheck
@ -222,7 +225,7 @@ const ChecksRadios = () => {
disabled disabled
/> />
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline"> <Example href="forms/checks-radios#inline">
<CFormCheck <CFormCheck
inline inline
type="radio" type="radio"
@ -262,7 +265,7 @@ const ChecksRadios = () => {
Remember to still provide some form of accessible name for assistive technologies (for Remember to still provide some form of accessible name for assistive technologies (for
instance, using <code>aria-label</code>). instance, using <code>aria-label</code>).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels"> <Example href="forms/checks-radios#without-labels">
<div> <div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." /> <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div> </div>
@ -290,10 +293,10 @@ const ChecksRadios = () => {
property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed. further be grouped in a button group if needed.
</p> </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" /> <CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button
id="btn-check-2" id="btn-check-2"
@ -302,11 +305,11 @@ const ChecksRadios = () => {
defaultChecked defaultChecked
/> />
</Example> </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 /> <CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
</Example> </Example>
<h3>Radio toggle buttons</h3> <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 <CFormCheck
button button
buttonColor="secondary" buttonColor="secondary"
@ -350,7 +353,7 @@ const ChecksRadios = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Different variants of button, such at the various outlined styles, are supported. Different variants of button, such at the various outlined styles, are supported.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="forms/checks-radios#toggle-buttons">
<div> <div>
<CFormCheck <CFormCheck
button 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, CFormSelect,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const FloatingLabels = () => { const FloatingLabels = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Floating Label" href="forms/floating-label" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -30,7 +33,7 @@ const FloatingLabels = () => {
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector <code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
(e.g., <code>~</code>). (e.g., <code>~</code>).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels"> <Example href="forms/floating-labels">
<CFormFloating className="mb-3"> <CFormFloating className="mb-3">
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" /> <CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel> <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@ -41,10 +44,10 @@ const FloatingLabels = () => {
</CFormFloating> </CFormFloating>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
When there's a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>s When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
will automatically adjust to their floated position. s will automatically adjust to their floated position.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels"> <Example href="forms/floating-labels">
<CFormFloating> <CFormFloating>
<CFormControl <CFormControl
type="email" type="email"
@ -65,10 +68,10 @@ const FloatingLabels = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
By default, <code>&lt;CFormControl component="textarea"&gt;</code>s will be the same By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be
height as <code>&lt;CFormControl&gt;</code>s. the same height as <code>&lt;CFormControl&gt;</code>s.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas"> <Example href="forms/floating-labels#textareas">
<CFormFloating> <CFormFloating>
<CFormControl <CFormControl
component="textarea" component="textarea"
@ -79,11 +82,12 @@ const FloatingLabels = () => {
</CFormFloating> </CFormFloating>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormControl component="textarea"&gt;</code>, To set a custom height on your{' '}
do not use the <code>rows</code> attribute. Instead, set an explicit{' '} <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>, do not use the{' '}
<code>height</code> (either inline or via custom CSS). <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas"> <Example href="forms/floating-labels#textareas">
<CFormFloating> <CFormFloating>
<CFormControl <CFormControl
component="textarea" component="textarea"
@ -106,13 +110,13 @@ const FloatingLabels = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '} 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;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.{' '} <code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
<strong> <strong>
Selects with <code>size</code> and <code>multiple</code> are not supported. Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong> </strong>
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#selects"> <Example href="forms/floating-labels#selects">
<CFormFloating> <CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example"> <CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option> <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 When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes. within column classes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#layout"> <Example href="forms/floating-labels#layout">
<CRow xs={{ gutter: 2 }}> <CRow xs={{ gutter: 2 }}>
<CCol md> <CCol md>
<CFormFloating> <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, CFormLabel,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const FormControl = () => { const FormControl = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Form Control" href="forms/form-control" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Form Control</strong> <strong>React Form Control</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control"> <Example href="forms/form-control">
<CForm> <CForm>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel> <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
@ -51,10 +54,10 @@ const FormControl = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Set heights using <code>size</code> property like <code>size="lg"</code> and{' '} Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
<code>size="sm"</code>. <code>size=&#34;sm&#34;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing"> <Example href="forms/form-control#sizing">
<CFormControl <CFormControl
type="text" type="text"
size="lg" size="lg"
@ -88,7 +91,7 @@ const FormControl = () => {
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#disabled"> <Example href="forms/form-control#disabled">
<CFormControl <CFormControl
type="text" type="text"
placeholder="Disabled input" placeholder="Disabled input"
@ -116,10 +119,10 @@ const FormControl = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to prevent modification of 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 the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
retain the standard cursor. but retain the standard cursor.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly"> <Example href="forms/form-control#readonly">
<CFormControl <CFormControl
type="text" type="text"
placeholder="Readonly input here..." placeholder="Readonly input here..."
@ -141,7 +144,7 @@ const FormControl = () => {
as plain text, use the <code>plainText</code> boolean property to remove the default as plain text, use the <code>plainText</code> boolean property to remove the default
form field styling and preserve the correct margin and padding. form field styling and preserve the correct margin and padding.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="components/accordion">
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label"> <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
Email Email
@ -165,7 +168,7 @@ const FormControl = () => {
</div> </div>
</CRow> </CRow>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="components/accordion">
<CForm className="row g-3"> <CForm className="row g-3">
<div className="col-auto"> <div className="col-auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden"> <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
@ -201,7 +204,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>File input</small> <strong>React Form Control</strong> <small>File input</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel> <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormControl type="file" id="formFile" /> <CFormControl type="file" id="formFile" />
@ -232,7 +235,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Color</small> <strong>React Form Control</strong> <small>Color</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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> <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormControl <CFormControl
type="color" 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, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Select = () => { const Select = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Input Group" href="forms/input-group" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -34,7 +37,7 @@ const Select = () => {
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group. input group.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group"> <Example href="forms/input-group">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText> <CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormControl <CFormControl
@ -45,8 +48,8 @@ const Select = () => {
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl <CFormControl
placeholder="Recipient's username" placeholder="Recipient&#39;s username"
aria-label="Recipient's username" aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2" aria-describedby="basic-addon2"
/> />
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText> <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{' '} custom form field validation within an input group. You may disable this with{' '}
<code>.flex-nowrap</code>. <code>.flex-nowrap</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#wrapping"> <Example href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap"> <CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText> <CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormControl <CFormControl
@ -110,9 +113,9 @@ const Select = () => {
size classes on each element. size classes on each element.
</p> </p>
<p className="text-medium-emphasis small"> <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> </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"> <CInputGroup size="sm" className="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText> <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormControl <CFormControl
@ -145,9 +148,9 @@ const Select = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </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"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CFormCheck <CFormCheck
@ -183,7 +186,7 @@ const Select = () => {
styles are only available for input groups with a single{' '} styles are only available for input groups with a single{' '}
<code>&lt;CFormControl&gt;</code>. <code>&lt;CFormControl&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-inputs"> <Example href="forms/input-group#multiple-inputs">
<CInputGroup> <CInputGroup>
<CInputGroupText>First and last name</CInputGroupText> <CInputGroupText>First and last name</CInputGroupText>
<CFormControl aria-label="First name" /> <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 Multiple add-ons are supported and can be mixed with checkbox and radio input
versions.. versions..
</p> </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"> <CInputGroup className="mb-3">
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</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 Multiple add-ons are supported and can be mixed with checkbox and radio input
versions.. versions..
</p> </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"> <CInputGroup className="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1"> <CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button Button
@ -280,7 +283,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Buttons with dropdowns</small> <strong>React Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CInputGroup className="mb-3">
<CDropdown variant="input-group"> <CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
@ -348,7 +351,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Segmented buttons</small> <strong>React Input group</strong> <small>Segmented buttons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CInputGroup className="mb-3">
<CDropdown variant="input-group"> <CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
@ -391,7 +394,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom select</small> <strong>React Input group</strong> <small>Custom select</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupSelect01"> <CInputGroupText component="label" htmlFor="inputGroupSelect01">
Options Options
@ -446,7 +449,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Custom file input</small> <strong>React Input group</strong> <small>Custom file input</small>
</CCardHeader> </CCardHeader>
<CCardBody> <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"> <CInputGroup className="mb-3">
<CInputGroupText component="label" htmlFor="inputGroupFile01"> <CInputGroupText component="label" htmlFor="inputGroupFile01">
Upload 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 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. that require multiple columns, varied widths, and additional alignment options.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#form-grid"> <Example href="forms/layout#form-grid">
<CRow> <CRow>
<CCol xs> <CCol xs>
<CFormControl placeholder="First name" aria-label="First name" /> <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> 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. , you can have control over the gutter width in as well the inline as block direction.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters"> <Example href="forms/layout#gutters">
<CRow className="g-3"> <CRow className="g-3">
<CCol xs> <CCol xs>
<CFormControl placeholder="First name" aria-label="First name" /> <CFormControl placeholder="First name" aria-label="First name" />
@ -65,7 +65,7 @@ const Layout = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
More complex layouts can also be created with the grid system. More complex layouts can also be created with the grid system.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters"> <Example href="forms/layout#gutters">
<CForm className="row g-3"> <CForm className="row g-3">
<CCol md="6"> <CCol md="6">
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel> <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 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 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{' '} 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. associated form controls.
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
At times, you maybe need to use margin or padding utilities to create that perfect 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. stacked radio inputs label to better align the text baseline.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form"> <Example href="forms/layout#horizontal-form">
<CForm> <CForm>
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label"> <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 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>. follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
</p> </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"> <CRow className="mb-3">
<CFormLabel <CFormLabel
htmlFor="colFormLabelSm" htmlFor="colFormLabelSm"
@ -248,12 +248,13 @@ const Layout = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
As shown in the previous examples, our grid system allows you to place any number of{' '} 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 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 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> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing"> <Example href="forms/layout#column-sizing">
<CRow className="g-3"> <CRow className="g-3">
<CCol sm="7"> <CCol sm="7">
<CFormControl placeholder="City" aria-label="City" /> <CFormControl placeholder="City" aria-label="City" />
@ -277,11 +278,11 @@ const Layout = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The example below uses a flexbox utility to vertically center the contents and changes{' '} 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 <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your
only take up as much space as needed. Put another way, the column sizes itself based columns only take up as much space as needed. Put another way, the column sizes itself
on the contents. based on the contents.
</p> </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"> <CForm className="row gy-2 gx-3 align-items-center">
<CCol xs="auto"> <CCol xs="auto">
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput"> <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
@ -320,7 +321,7 @@ const Layout = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can then remix that once again with size-specific column classes. You can then remix that once again with size-specific column classes.
</p> </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"> <CForm className="row gx-3 gy-2 align-items-center">
<CCol sm="3"> <CCol sm="3">
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName"> <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
@ -366,13 +367,14 @@ const Layout = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use the <code>&lt;CCol xs="auto"&gt;</code> class to create horizontal layouts. By Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create horizontal
adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, layouts. By adding{' '}
we will have gutters in horizontal and vertical directions. The{' '} <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>.align-items-center</code> aligns the form elements to the middle, making the{' '}
<code>&lt;CFormCheck&gt;</code> align properly. <code>&lt;CFormCheck&gt;</code> align properly.
</p> </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"> <CForm className="row row-cols-lg-auto g-3 align-items-center">
<CCol xs="12"> <CCol xs="12">
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername"> <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 React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/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 = () => { const Range = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Range" href="forms/range" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -12,10 +15,10 @@ const Range = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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>. <code>&lt;CFormControl&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range"> <Example href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel> <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" /> <CFormRange id="customRange1" />
</Example> </Example>
@ -32,7 +35,7 @@ const Range = () => {
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#disabled"> <Example href="forms/range#disabled">
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel> <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled /> <CFormRange id="disabledRange" disabled />
</Example> </Example>
@ -50,7 +53,7 @@ const Range = () => {
<code>0</code> and <code>100</code>, respectively. You may specify new values for <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. those using the <code>min</code> and <code>max</code> attributes.
</p> </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> <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
<CFormRange min="0" max="5" defaultValue="3" id="customRange2" /> <CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
</Example> </Example>
@ -64,11 +67,11 @@ const Range = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
By default, range inputs "snap" to integer values. To change this, you can specify a{' '} By default, range inputs &#34;snap&#34; to integer values. To change this, you can
<code>step</code> value. In the example below, we double the number of steps by using{' '} specify a <code>step</code> value. In the example below, we double the number of steps
<code>step="0.5"</code>. by using <code>step=&#34;0.5&#34;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#steps"> <Example href="forms/range#steps">
<CFormLabel htmlFor="customRange3">Example range</CFormLabel> <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" /> <CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
</Example> </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 React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Select = () => { const Select = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Form Select" href="forms/select" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong>React Select</strong> <small>Default</small> <strong>React Select</strong> <small>Default</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/select"> <Example href="forms/select">
<CFormSelect aria-label="Default select example"> <CFormSelect aria-label="Default select example">
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</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 You may also choose from small and large custom selects to match our similarly sized
text inputs. text inputs.
</p> </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"> <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
@ -49,7 +52,7 @@ const Select = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported: The <code>multiple</code> attribute is also supported:
</p> </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"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
@ -60,7 +63,7 @@ const Select = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
As is the <code>htmlSize</code> property: As is the <code>htmlSize</code> property:
</p> </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"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</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 Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
appearance and remove pointer events. appearance and remove pointer events.
</p> </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> <CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
@ -98,7 +101,7 @@ const Select = () => {
<strong>React Select</strong> <small></small> <strong>React Select</strong> <small></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/select"> <Example href="forms/select">
</Example> </Example>
</CCardBody> </CCardBody>

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

@ -15,7 +15,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const CustomStyles = () => { const CustomStyles = () => {
const [validated, setValidated] = useState(false) const [validated, setValidated] = useState(false)
@ -251,6 +251,9 @@ const Tooltips = () => {
const Validation = () => { const Validation = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -258,21 +261,19 @@ const Validation = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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 <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 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 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, 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 you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to
form controls. your form controls.
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Custom feedback styles apply custom colors, borders, focus styles, and background Custom feedback styles apply custom colors, borders, focus styles, and background
icons to better communicate feedback.{' '} icons to better communicate feedback.{' '}
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation"> <Example href="forms/validation">{CustomStyles()}</Example>
{CustomStyles()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -285,16 +286,14 @@ const Validation = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Not interested in custom validation feedback messages or writing JavaScript to change 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 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. feedback.
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
While these feedback styles cannot be styled with CSS, you can still customize the While these feedback styles cannot be styled with CSS, you can still customize the
feedback text through JavaScript. feedback text through JavaScript.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#browser-defaults"> <Example href="forms/validation#browser-defaults">{BrowserDefaults()}</Example>
{BrowserDefaults()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -315,7 +314,7 @@ const Validation = () => {
attribute allows more than one <code>id</code> to be referenced, in case the field attribute allows more than one <code>id</code> to be referenced, in case the field
already points to additional form text). already points to additional form text).
</p> </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"> <CForm className="row g-3 needs-validation">
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel> <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@ -412,7 +411,7 @@ const Validation = () => {
<code>&lt;CFormCheck&gt;</code>s <code>&lt;CFormCheck&gt;</code>s
</li> </li>
</ul> </ul>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements"> <Example href="forms/validation#supported-elements">
<CForm validated={true}> <CForm validated={true}>
<div className="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="validationTextarea" className="form-label"> <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 our column classes have this already, but your project may require an alternative
setup. setup.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#tooltips"> <Example href="forms/validation#tooltips">{Tooltips()}</Example>
{Tooltips()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </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, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const Alerts = () => { const Alerts = () => {
const [visible, setVisible] = React.useState(10)
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Alert" href="components/alert" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -31,7 +32,7 @@ const Alerts = () => {
</a> </a>
. .
</p> </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="primary">A simple primary alert—check it out!</CAlert>
<CAlert color="secondary">A simple secondary 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> <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 Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
links inside any alert. links inside any alert.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#link-color"> <Example href="components/alert#link-color">
<CAlert color="primary"> <CAlert color="primary">
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like. it a click if you like.
@ -101,7 +102,7 @@ const Alerts = () => {
Alert can also incorporate supplementary components &amp; elements like heading, Alert can also incorporate supplementary components &amp; elements like heading,
paragraph, and divider. paragraph, and divider.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#additional-content"> <Example href="components/alert#additional-content">
<CAlert color="success"> <CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading> <CAlertHeading tag="h4">Well done!</CAlertHeading>
<p> <p>
@ -128,7 +129,7 @@ const Alerts = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop. Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#dismissing"> <Example href="components/alert#dismissing">
<CAlert <CAlert
color="warning" color="warning"
dismissible 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 React from 'react'
import { import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
CButton, import { DocsCallout, Example } from 'src/reusable'
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CBadge,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const Badges = () => { const Badges = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Badges" href="components/badge" />
</CCol>
<CCol lg={6}> <CCol lg={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -24,7 +18,7 @@ const Badges = () => {
Bootstrap badge scale to suit the size of the parent element by using relative font Bootstrap badge scale to suit the size of the parent element by using relative font
sizing and <code>em</code> units. sizing and <code>em</code> units.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/badge"> <Example href="components/badge">
<h1> <h1>
Example heading <CBadge color="secondary">New</CBadge> Example heading <CBadge color="secondary">New</CBadge>
</h1> </h1>
@ -47,7 +41,7 @@ const Badges = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter. Badges can be used as part of links or buttons to provide a counter.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/badge"> <Example href="components/badge">
<CButton color="primary"> <CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge> Notifications <CBadge color="secondary">4</CBadge>
</CButton> </CButton>
@ -60,7 +54,7 @@ const Badges = () => {
Unless the context is clear, consider including additional context with a visually Unless the context is clear, consider including additional context with a visually
hidden piece of additional text. hidden piece of additional text.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/badge"> <Example href="components/badge">
<CButton color="primary"> <CButton color="primary">
Profile <CBadge color="secondary">9</CBadge> Profile <CBadge color="secondary">9</CBadge>
<span className="visually-hidden">unread messages</span> <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 Add any of the below-mentioned <code>color</code> props to modify the presentation of
a badge. a badge.
</p> </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="primary">primary</CBadge>
<CBadge color="success">success</CBadge> <CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge> <CBadge color="danger">danger</CBadge>
@ -96,9 +90,9 @@ const Badges = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </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"> <CBadge color="primary" shape="rounded-pill">
primary primary
</CBadge> </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, CRow,
CTooltip, CTooltip,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const LiveDemo = () => { const LiveDemo = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
@ -26,7 +26,7 @@ const LiveDemo = () => {
<CModalHeader onDismiss={() => setVisible(false)}> <CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </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> <CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}> <CButton color="secondary" onClick={() => setVisible(false)}>
Close Close
@ -48,7 +48,7 @@ const StaticBackdrop = () => {
<CModalTitle>Modal title</CModalTitle> <CModalTitle>Modal title</CModalTitle>
</CModalHeader> </CModalHeader>
<CModalBody> <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> </CModalBody>
<CModalFooter> <CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}> <CButton color="secondary" onClick={() => setVisible(false)}>
@ -460,6 +460,9 @@ const FullscreenModal = () => {
const Modals = () => { const Modals = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Modal" href="components/modal" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -473,7 +476,7 @@ const Modals = () => {
include modal headers with dismiss actions whenever possible, or provide another include modal headers with dismiss actions whenever possible, or provide another
explicit dismiss action. explicit dismiss action.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal"> <Example href="components/modal">
<CModal <CModal
className="show d-block position-static" className="show d-block position-static"
backdrop={false} backdrop={false}
@ -504,9 +507,7 @@ const Modals = () => {
Toggle a working modal demo by clicking the button below. It will slide down and fade Toggle a working modal demo by clicking the button below. It will slide down and fade
in from the top of the page. in from the top of the page.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#live-demo"> <Example href="components/modal#live-demo">{LiveDemo()}</Example>
{LiveDemo()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -521,9 +522,7 @@ const Modals = () => {
modal will behave as though the backdrop is static, meaning it will not close when 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. clicking outside it. Click the button below to try it.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#static-backdrop"> <Example href="components/modal#static-backdrop">{StaticBackdrop()}</Example>
{StaticBackdrop()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -538,14 +537,14 @@ const Modals = () => {
modal will behave as though the backdrop is static, meaning it will not close when 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. clicking outside it. Click the button below to try it.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content"> <Example href="components/modal#scrolling-long-content">
{ScrollingLongContent()} {ScrollingLongContent()}
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can also create a scrollable modal that allows scroll the modal body by adding{' '} You can also create a scrollable modal that allows scroll the modal body by adding{' '}
<code>scrollable</code> prop. <code>scrollable</code> prop.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content"> <Example href="components/modal#scrolling-long-content">
{ScrollingLongContent2()} {ScrollingLongContent2()}
</Example> </Example>
</CCardBody> </CCardBody>
@ -558,15 +557,11 @@ const Modals = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code>alignment="center</code> to <code>&lt;CModal&gt;</code> to vertically center Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
the modal. vertically center the modal.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered"> <Example href="components/modal#vertically-centered">{VerticallyCentered()}</Example>
{VerticallyCentered()} <Example href="components/modal#vertically-centered">{VerticallyCentered2()}</Example>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
{VerticallyCentered2()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -581,9 +576,7 @@ const Modals = () => {
modals as needed. When modals are closed, any tooltips and popovers within are also modals as needed. When modals are closed, any tooltips and popovers within are also
automatically dismissed. automatically dismissed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#tooltips-and-popovers"> <Example href="components/modal#tooltips-and-popovers">{TooltipsPopovers()}</Example>
{TooltipsPopovers()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -610,7 +603,7 @@ const Modals = () => {
<tr> <tr>
<td>Small</td> <td>Small</td>
<td> <td>
<code>'sm'</code> <code>&#39;sm&#39;</code>
</td> </td>
<td> <td>
<code>300px</code> <code>300px</code>
@ -626,7 +619,7 @@ const Modals = () => {
<tr> <tr>
<td>Large</td> <td>Large</td>
<td> <td>
<code>'lg'</code> <code>&#39;lg&#39;</code>
</td> </td>
<td> <td>
<code>800px</code> <code>800px</code>
@ -635,7 +628,7 @@ const Modals = () => {
<tr> <tr>
<td>Extra large</td> <td>Extra large</td>
<td> <td>
<code>'xl'</code> <code>&#39;xl&#39;</code>
</td> </td>
<td> <td>
<code>1140px</code> <code>1140px</code>
@ -643,9 +636,7 @@ const Modals = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#optional-sizes"> <Example href="components/modal#optional-sizes">{OptionalSizes()}</Example>
{OptionalSizes()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -675,7 +666,7 @@ const Modals = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<code>'sm'</code> <code>&#39;sm&#39;</code>
</td> </td>
<td> <td>
Below <code>576px</code> Below <code>576px</code>
@ -683,7 +674,7 @@ const Modals = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<code>'md'</code> <code>&#39;md&#39;</code>
</td> </td>
<td> <td>
Below <code>768px</code> Below <code>768px</code>
@ -691,7 +682,7 @@ const Modals = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<code>'lg'</code> <code>&#39;lg&#39;</code>
</td> </td>
<td> <td>
Below <code>992px</code> Below <code>992px</code>
@ -699,7 +690,7 @@ const Modals = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<code>'xl'</code> <code>&#39;xl&#39;</code>
</td> </td>
<td> <td>
Below <code>1200px</code> Below <code>1200px</code>
@ -707,7 +698,7 @@ const Modals = () => {
</tr> </tr>
<tr> <tr>
<td> <td>
<code>'xxl'</code> <code>&#39;xxl&#39;</code>
</td> </td>
<td> <td>
Below <code>1400px</code> Below <code>1400px</code>
@ -715,9 +706,7 @@ const Modals = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#fullscreen-modal"> <Example href="components/modal#fullscreen-modal">{FullscreenModal()}</Example>
{FullscreenModal()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -12,9 +12,9 @@ import {
CToastHeader, CToastHeader,
CToaster, CToaster,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsCallout, Example } from 'src/reusable'
const exampleToast = () => { const ExampleToast = () => {
const [toast, addToast] = useState(0) const [toast, addToast] = useState(0)
const toaster = useRef() const toaster = useRef()
const exampleToast = ( const exampleToast = (
@ -48,6 +48,9 @@ const exampleToast = () => {
const Toasts = () => { const Toasts = () => {
return ( return (
<CRow> <CRow>
<CCol xs={12}>
<DocsCallout name="Toast" href="components/toast" />
</CCol>
<CCol xs={12}> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
@ -59,7 +62,7 @@ const Toasts = () => {
we require a single element to contain your “toasted” content and strongly encourage a we require a single element to contain your “toasted” content and strongly encourage a
dismiss button. dismiss button.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/toast"> <Example href="components/toast">
<CToast title="CoreUI for React.js" autohide={false}> <CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close> <CToastHeader close>
<svg <svg
@ -79,9 +82,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody> <CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast> </CToast>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/toast"> <Example href="components/toast">{ExampleToast()}</Example>
{exampleToast()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -92,9 +93,9 @@ const Toasts = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <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> </p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#translucent"> <Example href="components/toast#translucent">
<div className="bg-dark p-3"> <div className="bg-dark p-3">
<CToast title="CoreUI for React.js" autohide={false}> <CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close> <CToastHeader close>
@ -129,7 +130,7 @@ const Toasts = () => {
You can stack toasts by wrapping them in a toast container, which will vertically add You can stack toasts by wrapping them in a toast container, which will vertically add
some spacing. some spacing.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#stacking"> <Example href="components/toast#stacking">
<CToaster> <CToaster>
<CToast title="CoreUI for React.js" autohide={false}> <CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close> <CToastHeader close>
@ -181,13 +182,13 @@ const Toasts = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Customize your toasts by removing sub-components, tweaking them with{' '} 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 <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{' '} <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://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
the layout. the layout.
</p> </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"> <CToast autohide={false} className="align-items-center">
<div className="d-flex"> <div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody> <CToastBody>Hello, world! This is a toast message.</CToastBody>
@ -198,7 +199,7 @@ const Toasts = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Alternatively, you can also add additional controls and components to toasts. Alternatively, you can also add additional controls and components to toasts.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#custom-content"> <Example href="components/toast#custom-content">
<CToast autohide={false}> <CToast autohide={false}>
<CToastBody> <CToastBody>
Hello, world! This is a toast message. 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{' '} 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/colors">color</a> and{' '}
<a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities. <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 Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added{' '}
to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to our <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set{' '}
close button. For a crisp edge, we remove the default border with{' '} <code>white</code> property to our close button. For a crisp edge, we remove the
<code>.border-0</code>. default border with <code>.border-0</code>.
</p> </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"> <CToast autohide={false} color="primary" className="text-white align-items-center">
<div className="d-flex"> <div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody> <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, CWidgetSimple,
} from '@coreui/react' } from '@coreui/react'
import { getStyle } from '@coreui/utils' 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 WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown' import WidgetsDropdown from './WidgetsDropdown'
// import ChartLineSimple from '../charts/ChartLineSimple'
// import ChartBarSimple from '../charts/ChartBarSimple'
import CIcon from '@coreui/icons-react'
const Widgets = () => { const Widgets = () => {
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
@ -333,6 +329,7 @@ const Widgets = () => {
title="Visitors" title="Visitors"
progressColor="info" progressColor="info"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -342,6 +339,7 @@ const Widgets = () => {
title="New Clients" title="New Clients"
progressColor="success" progressColor="success"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -351,6 +349,7 @@ const Widgets = () => {
title="Products sold" title="Products sold"
progressColor="warning" progressColor="warning"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -360,6 +359,7 @@ const Widgets = () => {
title="Returning Visitors" title="Returning Visitors"
progressColor="primary" progressColor="primary"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -369,6 +369,7 @@ const Widgets = () => {
title="Avg. Time" title="Avg. Time"
progressColor="danger" progressColor="danger"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -378,6 +379,7 @@ const Widgets = () => {
title="comments" title="comments"
progressColor="info" progressColor="info"
progressValue={75} progressValue={75}
className="mb-4"
/> />
</CCol> </CCol>
</CRow> </CRow>
@ -390,6 +392,7 @@ const Widgets = () => {
title="Visitors" title="Visitors"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -400,6 +403,7 @@ const Widgets = () => {
title="New Clients" title="New Clients"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -410,6 +414,7 @@ const Widgets = () => {
title="Products sold" title="Products sold"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -420,6 +425,7 @@ const Widgets = () => {
title="Returning Visitors" title="Returning Visitors"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -430,6 +436,7 @@ const Widgets = () => {
title="Avg. Time" title="Avg. Time"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
<CCol sm="6" md="2"> <CCol sm="6" md="2">
@ -440,14 +447,14 @@ const Widgets = () => {
title="comments" title="comments"
progressValue={75} progressValue={75}
progressWhite progressWhite
className="mb-4"
/> />
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartBar
type="bar"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -496,9 +503,8 @@ const Widgets = () => {
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartBar
type="bar"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -547,9 +553,8 @@ const Widgets = () => {
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartBar
type="bar"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -598,9 +603,8 @@ const Widgets = () => {
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartLine
type="line"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -657,9 +661,8 @@ const Widgets = () => {
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartLine
type="line"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
@ -716,9 +719,8 @@ const Widgets = () => {
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123" className="mb-4">
<CChart <CChartLine
type="line"
style={{ height: '40px' }} style={{ height: '40px' }}
data={{ data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'], 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, CWidgetDropdown,
} from '@coreui/react' } from '@coreui/react'
import { getStyle } from '@coreui/utils' import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs' import { CChartBar, CChartLine } from '@coreui/react-chartjs'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const WidgetsDropdown = () => { const WidgetsDropdown = () => {
// render
return ( return (
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
@ -36,10 +35,9 @@ const WidgetsDropdown = () => {
</CDropdown> </CDropdown>
} }
chart={ chart={
<CChart <CChartLine
className="mt-3 mx-3" className="mt-3 mx-3"
style={{ height: '70px' }} style={{ height: '70px' }}
type="line"
data={{ data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [ datasets: [
@ -97,7 +95,6 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
@ -118,8 +115,7 @@ const WidgetsDropdown = () => {
</CDropdown> </CDropdown>
} }
chart={ chart={
<CChart <CChartLine
type="line"
className="mt-3 mx-3" className="mt-3 mx-3"
style={{ height: '70px' }} style={{ height: '70px' }}
data={{ data={{
@ -178,7 +174,6 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
@ -199,8 +194,7 @@ const WidgetsDropdown = () => {
</CDropdown> </CDropdown>
} }
chart={ chart={
<CChart <CChartLine
type="line"
className="mt-3" className="mt-3"
style={{ height: '70px' }} style={{ height: '70px' }}
data={{ data={{
@ -246,7 +240,6 @@ const WidgetsDropdown = () => {
} }
/> />
</CCol> </CCol>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
className="mb-4" className="mb-4"
@ -267,8 +260,7 @@ const WidgetsDropdown = () => {
</CDropdown> </CDropdown>
} }
chart={ chart={
<CChart <CChartBar
type="bar"
className="mt-3 mx-3" className="mt-3 mx-3"
style={{ height: '70px' }} style={{ height: '70px' }}
data={{ data={{

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

@ -18,14 +18,12 @@ import {
CTableHeaderCell, CTableHeaderCell,
CTableRow, CTableRow,
} from '@coreui/react' } from '@coreui/react'
import { CChart } from '@coreui/react-chartjs' import { CChartLine } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils' import { getStyle, hexToRgba } from '@coreui/utils'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import MainChartExample from '../examples/charts/MainChartExample.js' const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js'))
const Dashboard = () => { const Dashboard = () => {
const random = (min, max) => { const random = (min, max) => {
@ -62,8 +60,7 @@ const Dashboard = () => {
</CButtonGroup> </CButtonGroup>
</CCol> </CCol>
</CRow> </CRow>
<CChart <CChartLine
type="line"
style={{ height: '300px', marginTop: '40px' }} style={{ height: '300px', marginTop: '40px' }}
data={{ data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@ -192,13 +189,13 @@ const Dashboard = () => {
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-4 border-start-info py-1 px-3"> <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="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> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3"> <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="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> </div>
</CCol> </CCol>
</CRow> </CRow>
@ -275,13 +272,13 @@ const Dashboard = () => {
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3"> <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="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> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<div className="border-start border-start-4 border-start-success py-1 px-3 mb-3"> <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="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> </div>
</CCol> </CCol>
</CRow> </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

4
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" /> <CIcon name="cil-magnifying-glass" />
</CInputGroupText> </CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" /> <CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText> <CButton color="info">Search</CButton>
<CButton color="info">Search</CButton>
</CInputGroupText>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>

4
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" /> <CIcon name="cil-magnifying-glass" />
</CInputGroupText> </CInputGroupText>
<CFormControl size="16" type="text" placeholder="What are you looking for?" /> <CFormControl size="16" type="text" placeholder="What are you looking for?" />
<CInputGroupText> <CButton color="info">Search</CButton>
<CButton color="info">Search</CButton>
</CInputGroupText>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
</CRow> </CRow>

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

@ -3,7 +3,6 @@ import {
CButton, CButton,
CCard, CCard,
CCardBody, CCardBody,
CCardFooter,
CCol, CCol,
CContainer, CContainer,
CForm, CForm,
@ -60,20 +59,6 @@ const Register = () => {
</CButton> </CButton>
</CForm> </CForm>
</CCardBody> </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> </CCard>
</CCol> </CCol>
</CRow> </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 React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react' 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 = () => { const Colors = () => {
return ( return (
<> <>

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