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

refactor: move components from reusable to components

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

1
src/_nav.js
View File

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

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

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

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

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

15
src/components/index.js
View File

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

5
src/reusable/index.js
View File

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

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

@ -12,7 +12,7 @@ import {
CAccordionHeader, CAccordionHeader,
CAccordionItem, CAccordionItem,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Accordion = () => { const Accordion = () => {
const [activeKey, setActiveKey] = useState(0) const [activeKey, setActiveKey] = useState(0)
@ -32,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="components/accordion"> <DocsExample href="components/accordion">
<CAccordion> <CAccordion>
<CAccordionItem> <CAccordionItem>
<CAccordionHeader> <CAccordionHeader>
@ -98,7 +98,7 @@ const Accordion = () => {
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
</CAccordion> </CAccordion>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -111,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="components/accordion#flush"> <DocsExample href="components/accordion#flush">
<CAccordion flush> <CAccordion flush>
<CAccordionItem> <CAccordionItem>
<CAccordionHeader> <CAccordionHeader>
@ -177,7 +177,7 @@ const Accordion = () => {
</CAccordionCollapse> </CAccordionCollapse>
</CAccordionItem> </CAccordionItem>
</CAccordion> </CAccordion>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

@ -19,7 +19,7 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Cards = () => { const Cards = () => {
return ( return (
@ -46,7 +46,7 @@ const Cards = () => {
no fixed width to start, so they&#39;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="components/card"> <DocsExample href="components/card">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -75,7 +75,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -89,11 +89,11 @@ 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="components/card/#body"> <DocsExample 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>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -114,7 +114,7 @@ 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="components/card/#titles-text-and-links"> <DocsExample 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>
@ -127,7 +127,7 @@ const Cards = () => {
<CCardLink href="#">Another link</CCardLink> <CCardLink href="#">Another link</CCardLink>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -142,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="components/card/#images"> <DocsExample href="components/card/#images">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -169,7 +169,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -182,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="components/card/#list-groups"> <DocsExample href="components/card/#list-groups">
<CRow> <CRow>
<CCol lg={4}> <CCol lg={4}>
<CCard> <CCard>
@ -214,7 +214,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -229,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="components/card/#kitchen-sink"> <DocsExample href="components/card/#kitchen-sink">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardImage <CCardImage
component="svg" component="svg"
@ -266,7 +266,7 @@ const Cards = () => {
<CCardLink href="#">Another link</CCardLink> <CCardLink href="#">Another link</CCardLink>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -279,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="components/card/#header-and-footer"> <DocsExample href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
@ -290,11 +290,11 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>. Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
</p> </p>
<Example href="components/card/#header-and-footer"> <DocsExample href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader component="h5">Header</CCardHeader> <CCardHeader component="h5">Header</CCardHeader>
<CCardBody> <CCardBody>
@ -305,8 +305,8 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
<Example href="components/card/#header-and-footer"> <DocsExample href="components/card/#header-and-footer">
<CCard> <CCard>
<CCardHeader>Quote</CCardHeader> <CCardHeader>Quote</CCardHeader>
<CCardBody> <CCardBody>
@ -321,8 +321,8 @@ const Cards = () => {
</blockquote> </blockquote>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
<Example href="components/card/#header-and-footer"> <DocsExample href="components/card/#header-and-footer">
<CCard className="text-center"> <CCard className="text-center">
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
@ -334,7 +334,7 @@ const Cards = () => {
</CCardBody> </CCardBody>
<CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter> <CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -353,7 +353,7 @@ const Cards = () => {
<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="components/card/#sizing"> <DocsExample href="components/card/#sizing">
<CRow> <CRow>
<CCol sm={6}> <CCol sm={6}>
<CCard> <CCard>
@ -378,14 +378,14 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
<h3>Using utilities</h3> <h3>Using utilities</h3>
<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&#39;s width. rapidly set a card&#39;s width.
</p> </p>
<Example href="components/card/#sizing"> <DocsExample href="components/card/#sizing">
<CCard className="w-75"> <CCard className="w-75">
<CCardBody> <CCardBody>
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
@ -404,12 +404,12 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
<strong>Using custom CSS</strong> <strong>Using custom CSS</strong>
<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="components/card/#sizing"> <DocsExample href="components/card/#sizing">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>
@ -419,7 +419,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -435,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="components/card/#text-alignment"> <DocsExample 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>
@ -463,7 +463,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -477,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="components/card/##navigation"> <DocsExample 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">
@ -504,8 +504,8 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
<Example href="components/card/##navigation"> <DocsExample 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">
@ -532,7 +532,7 @@ const Cards = () => {
<CButton href="#">Go somewhere</CButton> <CButton href="#">Go somewhere</CButton>
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -546,7 +546,7 @@ const Cards = () => {
Similar to headers and footers, cards can include top and bottom &#34;image Similar to headers and footers, cards can include top and bottom &#34;image
caps&#34;—images at the top or bottom of a card. caps&#34;—images at the top or bottom of a card.
</p> </p>
<Example href="components/card/#image-caps"> <DocsExample href="components/card/#image-caps">
<CRow> <CRow>
<CCol lg={6}> <CCol lg={6}>
<CCard className="mb-3"> <CCard className="mb-3">
@ -613,7 +613,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -630,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="components/card/#background-and-color"> <DocsExample href="components/card/#background-and-color">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'white' }, { color: 'primary', textColor: 'white' },
@ -656,7 +656,7 @@ const Cards = () => {
</CCol> </CCol>
))} ))}
</CRow> </CRow>
</Example> </DocsExample>
<h3>Border</h3> <h3>Border</h3>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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
@ -664,7 +664,7 @@ const Cards = () => {
<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&#39;s contents as shown below. card&#39;s contents as shown below.
</p> </p>
<Example href="components/card/#border"> <DocsExample href="components/card/#border">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'primary' }, { color: 'primary', textColor: 'primary' },
@ -690,7 +690,7 @@ const Cards = () => {
</CCol> </CCol>
))} ))}
</CRow> </CRow>
</Example> </DocsExample>
<h3>Top border</h3> <h3>Top border</h3>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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
@ -698,7 +698,7 @@ const Cards = () => {
<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&#39;s contents as shown below. card&#39;s contents as shown below.
</p> </p>
<Example href="components/card/#top-border"> <DocsExample href="components/card/#top-border">
<CRow> <CRow>
{[ {[
{ color: 'primary', textColor: 'primary' }, { color: 'primary', textColor: 'primary' },
@ -727,7 +727,7 @@ const Cards = () => {
</CCol> </CCol>
))} ))}
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -742,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="components/card/#card-groups"> <DocsExample href="components/card/#card-groups">
<CCardGroup> <CCardGroup>
<CCard> <CCard>
<CCardImage <CCardImage
@ -836,11 +836,11 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
</Example> </DocsExample>
<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="components/card/#card-groups"> <DocsExample href="components/card/#card-groups">
<CCardGroup> <CCardGroup>
<CCard> <CCard>
<CCardImage <CCardImage
@ -934,7 +934,7 @@ const Cards = () => {
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -952,7 +952,7 @@ const Cards = () => {
cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting
four cards to equal width across multiple rows, from the medium breakpoint up. four cards to equal width across multiple rows, from the medium breakpoint up.
</p> </p>
<Example href="components/card/#grid-cards"> <DocsExample 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>
@ -1083,12 +1083,12 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
<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&#39;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="components/card/#grid-cards"> <DocsExample 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>
@ -1219,7 +1219,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -9,7 +9,7 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
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',
@ -36,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="components/carousel"> <DocsExample 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" />
@ -48,7 +48,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" /> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -61,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="components/carousel/#with-controls"> <DocsExample 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" />
@ -73,7 +73,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" /> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -86,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="components/carousel/#with-indicators"> <DocsExample 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" />
@ -98,7 +98,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" /> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -116,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="components/carousel/#with-captions"> <DocsExample 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" />
@ -140,7 +140,7 @@ const Carousels = () => {
</CCarouselCaption> </CCarouselCaption>
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -154,7 +154,7 @@ const Carousels = () => {
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
with a fade transition instead of a slide. with a fade transition instead of a slide.
</p> </p>
<Example href="components/carousel/#crossfade"> <DocsExample 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" />
@ -166,7 +166,7 @@ const Carousels = () => {
<img className="d-block w-100" src={slides[2]} alt="slide 3" /> <img className="d-block w-100" src={slides[2]} alt="slide 3" />
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -182,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="components/carousel/#dark-variant"> <DocsExample 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" />
@ -206,7 +206,7 @@ const Carousels = () => {
</CCarouselCaption> </CCarouselCaption>
</CCarouselItem> </CCarouselItem>
</CCarousel> </CCarousel>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

10
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Collapses = () => { const Collapses = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
@ -19,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="components/collapse"> <DocsExample href="components/collapse">
<CButton <CButton
href="#" href="#"
onClick={(e) => { onClick={(e) => {
@ -39,7 +39,7 @@ const Collapses = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCollapse> </CCollapse>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -52,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="components/collapse#multiple-targets"> <DocsExample 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
@ -87,7 +87,7 @@ const Collapses = () => {
</CCollapse> </CCollapse>
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

@ -10,7 +10,7 @@ import {
CListGroupItem, CListGroupItem,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const ListGroups = () => { const ListGroups = () => {
return ( return (
@ -28,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="components/list-group"> <DocsExample 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>
@ -36,7 +36,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -50,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="components/list-group/#active-items"> <DocsExample 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>
@ -58,7 +58,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -72,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="components/list-group/#disabled-items"> <DocsExample 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>
@ -80,7 +80,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -98,7 +98,7 @@ const ListGroups = () => {
<code>&lt;div&gt;</code> <code>&lt;div&gt;</code>
s) don&#39;tprovide a click or tap affordance. s) don&#39;tprovide a click or tap affordance.
</p> </p>
<Example href="components/list-group/#links-and-buttons"> <DocsExample 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
@ -116,7 +116,7 @@ const ListGroups = () => {
Vestibulum at eros Vestibulum at eros
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -130,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="components/list-group/#flush"> <DocsExample 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>
@ -138,7 +138,7 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -156,7 +156,7 @@ const ListGroups = () => {
<code>min-width</code>. 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="components/list-group/#flush"> <DocsExample 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>
@ -164,7 +164,7 @@ const ListGroups = () => {
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
</CListGroup> </CListGroup>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -177,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="components/list-group/#contextual-classes"> <DocsExample href="components/list-group/#contextual-classes">
<CListGroup> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
{[ {[
@ -195,14 +195,14 @@ const ListGroups = () => {
</CListGroupItem> </CListGroupItem>
))} ))}
</CListGroup> </CListGroup>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Contextual classes also work with <code>&lt;a&gt;</code>s or{' '} Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
<code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
in the previous example. Also supported is the <code>active</code> state; apply it to 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="components/list-group/#contextual-classes"> <DocsExample href="components/list-group/#contextual-classes">
<CListGroup> <CListGroup>
<CListGroupItem component="a" href="#"> <CListGroupItem component="a" href="#">
Dapibus ac facilisis in Dapibus ac facilisis in
@ -222,7 +222,7 @@ const ListGroups = () => {
</CListGroupItem> </CListGroupItem>
))} ))}
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -235,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="components/list-group/#with-badges"> <DocsExample 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
@ -256,7 +256,7 @@ const ListGroups = () => {
</CBadge> </CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -270,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="components/list-group/#custom-content"> <DocsExample 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">
@ -306,7 +306,7 @@ const ListGroups = () => {
<small className="text-medium-emphasis">Donec id elit non mi porta.</small> <small className="text-medium-emphasis">Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -320,7 +320,7 @@ const ListGroups = () => {
Place CoreUI&#39;s checkboxes and radios within list group items and customize as Place CoreUI&#39;s checkboxes and radios within list group items and customize as
needed. needed.
</p> </p>
<Example href="components/list-group/#checkboxes-and-radios"> <DocsExample href="components/list-group/#checkboxes-and-radios">
<CListGroup> <CListGroup>
<CListGroupItem> <CListGroupItem>
<CFormCheck label="Cras justo odio" /> <CFormCheck label="Cras justo odio" />
@ -338,7 +338,7 @@ const ListGroups = () => {
<CFormCheck label="Vestibulum at eros" /> <CFormCheck label="Vestibulum at eros" />
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

@ -13,7 +13,7 @@ import {
CNavItem, CNavItem,
CNavLink, CNavLink,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Navs = () => { const Navs = () => {
return ( return (
@ -33,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="components/nav#base-nav"> <DocsExample href="components/nav#base-nav">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -52,7 +52,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '} Classes are used throughout, so your markup can be super flexible. Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
@ -60,7 +60,7 @@ const Navs = () => {
the .nav uses display: flex, the nav links behave the same as nav items would, but 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="components/nav#base-nav"> <DocsExample href="components/nav#base-nav">
<CNav component="nav"> <CNav component="nav">
<CNavLink href="#" active> <CNavLink href="#" active>
Active Active
@ -71,7 +71,7 @@ const Navs = () => {
Disabled Disabled
</CNavLink> </CNavLink>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -92,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="components/nav#horizontal-alignment"> <DocsExample href="components/nav#horizontal-alignment">
<CNav className="justify-content-center"> <CNav className="justify-content-center">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -111,11 +111,11 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
<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="components/nav#base-nav"> <DocsExample href="components/nav#base-nav">
<CNav className="justify-content-end"> <CNav className="justify-content-end">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -134,7 +134,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -149,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="components/nav#vertical"> <DocsExample href="components/nav#vertical">
<CNav className="flex-column"> <CNav className="flex-column">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -168,7 +168,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -182,7 +182,7 @@ const Navs = () => {
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface to generate a tabbed interface
</p> </p>
<Example href="components/nav#tabs"> <DocsExample href="components/nav#tabs">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -201,7 +201,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -214,7 +214,7 @@ const Navs = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead: Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p> </p>
<Example href="components/nav#pills"> <DocsExample href="components/nav#pills">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -233,7 +233,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -249,7 +249,7 @@ const Navs = () => {
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width. horizontal space is occupied, but not every nav item has the same width.
</p> </p>
<Example href="components/nav#fill-and-justify"> <DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="fill"> <CNav variant="pills" layout="fill">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -268,13 +268,13 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width. will be the same width.
</p> </p>
<Example href="components/nav#fill-and-justify"> <DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="justified"> <CNav variant="pills" layout="justified">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -293,7 +293,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -310,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="components/nav#working-with-flex-utilities"> <DocsExample href="components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" className="flex-column flex-sm-row"> <CNav component="nav" variant="pills" className="flex-column flex-sm-row">
<CNavLink href="#" active> <CNavLink href="#" active>
Active Active
@ -321,7 +321,7 @@ const Navs = () => {
Disabled Disabled
</CNavLink> </CNavLink>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -331,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="components/nav#tabs-with-dropdowns"> <DocsExample href="components/nav#tabs-with-dropdowns">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -355,7 +355,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -365,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="components/nav#pills-with-dropdowns"> <DocsExample href="components/nav#pills-with-dropdowns">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -389,7 +389,7 @@ const Navs = () => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -8,7 +8,7 @@ import {
CPaginationItem, CPaginationItem,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Paginations = () => { const Paginations = () => {
return ( return (
@ -36,7 +36,7 @@ const Paginations = () => {
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=&#34;Search results pages&#34;</code>. could be <code>aria-label=&#34;Search results pages&#34;</code>.
</p> </p>
<Example href="components/pagination"> <DocsExample 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>
@ -44,7 +44,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -58,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="components/pagination#working-with-icons"> <DocsExample 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>
@ -70,7 +70,7 @@ const Paginations = () => {
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</CPaginationItem> </CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -92,7 +92,7 @@ const Paginations = () => {
such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
custom JavaScript to fully disable their functionality. custom JavaScript to fully disable their functionality.
</p> </p>
<Example href="components/pagination#disabled-and-active-states"> <DocsExample 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>
@ -104,7 +104,7 @@ const Paginations = () => {
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</CPaginationItem> </CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -118,7 +118,7 @@ const Paginations = () => {
Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '} Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size=&#34;sm&#34;</code> for additional sizes. <code>size=&#34;sm&#34;</code> for additional sizes.
</p> </p>
<Example href="components/pagination#sizing"> <DocsExample 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>
@ -126,8 +126,8 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
<Example href="components/pagination#sizing"> <DocsExample 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>
@ -135,7 +135,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -149,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="components/pagination#aligment"> <DocsExample 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>
@ -157,8 +157,8 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
<Example href="components/pagination#aligment"> <DocsExample 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>
@ -166,7 +166,7 @@ const Paginations = () => {
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem> <CPaginationItem>Next</CPaginationItem>
</CPagination> </CPagination>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Popovers = () => { const Popovers = () => {
return ( return (
@ -14,7 +14,7 @@ const Popovers = () => {
<strong>React Popover</strong> <small>Basic example</small> <strong>React Popover</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="components/popover"> <DocsExample 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?"
@ -24,7 +24,7 @@ const Popovers = () => {
Click to toggle popover Click to toggle popover
</CButton> </CButton>
</CPopover> </CPopover>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -38,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="components/popover#four-directions"> <DocsExample 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"
@ -63,7 +63,7 @@ const Popovers = () => {
> >
<CButton color="secondary">Popover on left</CButton> <CButton color="secondary">Popover on left</CButton>
</CPopover> </CPopover>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Progress = () => { const Progress = () => {
return ( return (
@ -22,7 +22,7 @@ const Progress = () => {
</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="components/progress"> <DocsExample href="components/progress">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={0} /> <CProgressBar value={0} />
</CProgress> </CProgress>
@ -38,7 +38,7 @@ const Progress = () => {
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={100} /> <CProgressBar value={100} />
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -52,11 +52,11 @@ 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="components/progress#labels"> <DocsExample href="components/progress#labels">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value={25}>25%</CProgressBar> <CProgressBar value={25}>25%</CProgressBar>
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -71,14 +71,14 @@ 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="components/progress#height"> <DocsExample 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>
<CProgress height={20} className="mb-3"> <CProgress height={20} className="mb-3">
<CProgressBar value={25}></CProgressBar> <CProgressBar value={25}></CProgressBar>
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -91,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="components/progress#backgrounds"> <DocsExample href="components/progress#backgrounds">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" value={25} /> <CProgressBar color="success" value={25} />
</CProgress> </CProgress>
@ -104,7 +104,7 @@ const Progress = () => {
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" value={100} /> <CProgressBar color="danger" value={100} />
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -117,13 +117,13 @@ 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="components/progress#multiple-bars"> <DocsExample 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} />
<CProgressBar color="info" value={20} /> <CProgressBar color="info" value={20} />
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -137,7 +137,7 @@ const Progress = () => {
Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
apply a stripe via CSS gradient over the progress bar&#39;s background color. apply a stripe via CSS gradient over the progress bar&#39;s background color.
</p> </p>
<Example href="components/progress#striped"> <DocsExample 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>
@ -150,7 +150,7 @@ const Progress = () => {
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" value={100} /> <CProgressBar color="danger" variant="striped" value={100} />
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -165,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="components/progress#animated-stripes"> <DocsExample 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>
@ -178,7 +178,7 @@ const Progress = () => {
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" animated value={100} /> <CProgressBar color="danger" variant="striped" animated value={100} />
</CProgress> </CProgress>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
import React 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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Accordion = () => { const Accordion = () => {
return ( return (
@ -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="components/spinner"> <DocsExample href="components/spinner">
<CSpinner /> <CSpinner />
</Example> </DocsExample>
<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="components/spinner#colors"> <DocsExample href="components/spinner#colors">
<CSpinner color="primary" /> <CSpinner color="primary" />
<CSpinner color="secondary" /> <CSpinner color="secondary" />
<CSpinner color="success" /> <CSpinner color="success" />
@ -33,7 +33,7 @@ const Accordion = () => {
<CSpinner color="info" /> <CSpinner color="info" />
<CSpinner color="light" /> <CSpinner color="light" />
<CSpinner color="dark" /> <CSpinner color="dark" />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -47,14 +47,14 @@ const Accordion = () => {
If you don&#39;tfancy a border spinner, switch to the grow spinner. While it If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
doesn&#39;t technically spin, it does repeatedly grow! doesn&#39;t technically spin, it does repeatedly grow!
</p> </p>
<Example href="components/spinner#growing-spinner"> <DocsExample href="components/spinner#growing-spinner">
<CSpinner variant="grow" /> <CSpinner variant="grow" />
</Example> </DocsExample>
<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="components/spinner#growing-spinner"> <DocsExample 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" />
@ -63,7 +63,7 @@ const Accordion = () => {
<CSpinner color="info" variant="grow" /> <CSpinner color="info" variant="grow" />
<CSpinner color="light" variant="grow" /> <CSpinner color="light" variant="grow" />
<CSpinner color="dark" variant="grow" /> <CSpinner color="dark" variant="grow" />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -77,10 +77,10 @@ const Accordion = () => {
Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
be used within other components. be used within other components.
</p> </p>
<Example href="components/spinner#size"> <DocsExample href="components/spinner#size">
<CSpinner size="sm" /> <CSpinner size="sm" />
<CSpinner size="sm" variant="grow" /> <CSpinner size="sm" variant="grow" />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -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="components/spinner#buttons"> <DocsExample 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>
@ -103,8 +103,8 @@ const Accordion = () => {
<CSpinner component="span" size="sm" aria-hidden="true" /> <CSpinner component="span" size="sm" aria-hidden="true" />
Loading... Loading...
</CButton> </CButton>
</Example> </DocsExample>
<Example href="components/spinner#buttons"> <DocsExample 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>
@ -112,7 +112,7 @@ const Accordion = () => {
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" /> <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
Loading... Loading...
</CButton> </CButton>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -13,7 +13,7 @@ import {
CTableHeaderCell, CTableHeaderCell,
CTableRow, CTableRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Tables = () => { const Tables = () => {
return ( return (
@ -31,7 +31,7 @@ const Tables = () => {
Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
tables look in CoreUI. tables look in CoreUI.
</p> </p>
<Example href="components/table"> <DocsExample href="components/table">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -61,7 +61,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -74,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="components/table#variants"> <DocsExample href="components/table#variants">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -131,7 +131,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -145,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="components/table#striped-rows"> <DocsExample href="components/table#striped-rows">
<CTable striped> <CTable striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -175,11 +175,11 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<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="components/table#striped-rows"> <DocsExample href="components/table#striped-rows">
<CTable color="dark" striped> <CTable color="dark" striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -209,8 +209,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#striped-rows"> <DocsExample href="components/table#striped-rows">
<CTable color="success" striped> <CTable color="success" striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -240,7 +240,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -254,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="components/table#hoverable-rows"> <DocsExample href="components/table#hoverable-rows">
<CTable hover> <CTable hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -284,8 +284,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#hoverable-rows"> <DocsExample href="components/table#hoverable-rows">
<CTable color="dark" hover> <CTable color="dark" hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -315,8 +315,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#hoverable-rows"> <DocsExample href="components/table#hoverable-rows">
<CTable striped hover> <CTable striped hover>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -346,7 +346,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -356,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="components/table#active-tables"> <DocsExample href="components/table#active-tables">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -388,8 +388,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#active-tables"> <DocsExample href="components/table#active-tables">
<CTable color="dark"> <CTable color="dark">
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -421,7 +421,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -434,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="components/table#bordered-tables"> <DocsExample href="components/table#bordered-tables">
<CTable bordered> <CTable bordered>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -464,14 +464,14 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color"> <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities Border color utilities
</a>{' '} </a>{' '}
can be added to change colors: can be added to change colors:
</p> </p>
<Example href="components/table#bordered-tables"> <DocsExample href="components/table#bordered-tables">
<CTable bordered borderColor="primary"> <CTable bordered borderColor="primary">
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -501,7 +501,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -514,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="components/table#tables-without-borders"> <DocsExample href="components/table#tables-without-borders">
<CTable borderless> <CTable borderless>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -544,8 +544,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#tables-without-borders"> <DocsExample href="components/table#tables-without-borders">
<CTable color="dark" borderless> <CTable color="dark" borderless>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -575,7 +575,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -589,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="components/table#small-tables"> <DocsExample href="components/table#small-tables">
<CTable small> <CTable small>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -619,7 +619,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -635,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="components/table#vertical-alignment"> <DocsExample href="components/table#vertical-alignment">
<CTable align="middle" responsive> <CTable align="middle" responsive>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -702,7 +702,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -715,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="components/table#nesting"> <DocsExample href="components/table#nesting">
<CTable striped> <CTable striped>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -769,7 +769,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -784,7 +784,7 @@ const Tables = () => {
<code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '} <code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
<code>&lt;CTableHead&gt;</code>s appear light or dark gray. <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p> </p>
<Example href="components/table#table-head"> <DocsExample href="components/table#table-head">
<CTable> <CTable>
<CTableHead color="light"> <CTableHead color="light">
<CTableRow> <CTableRow>
@ -815,8 +815,8 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<Example href="components/table#table-head"> <DocsExample href="components/table#table-head">
<CTable> <CTable>
<CTableHead color="dark"> <CTableHead color="dark">
<CTableRow> <CTableRow>
@ -846,7 +846,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -856,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="components/table#table-foot"> <DocsExample href="components/table#table-foot">
<CTable> <CTable>
<CTableHead color="light"> <CTableHead color="light">
<CTableRow> <CTableRow>
@ -894,7 +894,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableHead> </CTableHead>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -909,7 +909,7 @@ const Tables = () => {
users with screen readers to find a table and understand what it&#39;s about and users with screen readers to find a table and understand what it&#39;s about and
decide if they want to read it. decide if they want to read it.
</p> </p>
<Example href="components/table#captions"> <DocsExample href="components/table#captions">
<CTable> <CTable>
<CTableCaption>List of users</CTableCaption> <CTableCaption>List of users</CTableCaption>
<CTableHead> <CTableHead>
@ -941,12 +941,12 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
<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=&#34;top&#34;</code>. <code>caption=&#34;top&#34;</code>.
</p> </p>
<Example href="components/table#captions"> <DocsExample href="components/table#captions">
<CTable caption="top"> <CTable caption="top">
<CTableCaption>List of users</CTableCaption> <CTableCaption>List of users</CTableCaption>
<CTableHead> <CTableHead>
@ -978,7 +978,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Tooltips = () => { const Tooltips = () => {
return ( return (
@ -17,7 +17,7 @@ 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="components/tooltip"> <DocsExample 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">
@ -41,12 +41,12 @@ const Tooltips = () => {
</CTooltip> </CTooltip>
freegan cred raw denim single-origin coffee viral. freegan cred raw denim single-origin coffee viral.
</p> </p>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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="components/tooltip"> <DocsExample 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"
@ -71,7 +71,7 @@ const Tooltips = () => {
> >
<CButton color="secondary">Tooltip on left</CButton> <CButton color="secondary">Tooltip on left</CButton>
</CTooltip> </CTooltip>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -18,7 +18,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const ButtonGroups = () => { const ButtonGroups = () => {
return ( return (
@ -36,18 +36,18 @@ 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="components/button-group"> <DocsExample 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>
<CButton color="primary">Right</CButton> <CButton color="primary">Right</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
<p> <p>
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="components/button-group"> <DocsExample href="components/button-group">
<CButtonGroup> <CButtonGroup>
<CButton href="#" color="primary" active> <CButton href="#" color="primary" active>
Active link Active link
@ -59,7 +59,7 @@ const ButtonGroups = () => {
Link Link
</CButton> </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -69,13 +69,13 @@ 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="components/button-group#mixed-styles"> <DocsExample 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>
<CButton color="success">Right</CButton> <CButton color="success">Right</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -85,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="components/button-group#outlined-styles"> <DocsExample 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
@ -97,7 +97,7 @@ const ButtonGroups = () => {
Right Right
</CButton> </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -111,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="components/button-group#checkbox-and-radio-button-groups"> <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
button button
@ -135,8 +135,8 @@ const ButtonGroups = () => {
label="Checkbox 3" label="Checkbox 3"
/> />
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
<Example href="components/button-group#checkbox-and-radio-button-groups"> <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group"> <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck <CFormCheck
type="radio" type="radio"
@ -166,7 +166,7 @@ const ButtonGroups = () => {
label="Radio 3" label="Radio 3"
/> />
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -180,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="components/button-group#button-toolbar"> <DocsExample 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>
@ -197,12 +197,12 @@ const ButtonGroups = () => {
<CButton color="info">8</CButton> <CButton color="info">8</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</Example> </DocsExample>
<p> <p>
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="components/button-group#button-toolbar"> <DocsExample 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">
@ -255,7 +255,7 @@ const ButtonGroups = () => {
/> />
</CInputGroup> </CInputGroup>
</CButtonToolbar> </CButtonToolbar>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -270,7 +270,7 @@ const ButtonGroups = () => {
<code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
each one when nesting multiple groups. each one when nesting multiple groups.
</p> </p>
<Example href="components/button-group#sizing"> <DocsExample 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
@ -306,7 +306,7 @@ const ButtonGroups = () => {
Right Right
</CButton> </CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -321,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="components/button-group#nesting"> <DocsExample 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>
@ -336,7 +336,7 @@ const ButtonGroups = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -350,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="components/button-group/#vertical-variation"> <DocsExample 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>
@ -360,8 +360,8 @@ const ButtonGroups = () => {
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton> <CButton color="dark">Button</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
<Example href="components/button-group/#vertical-variation"> <DocsExample 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>
@ -408,8 +408,8 @@ const ButtonGroups = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
<Example href="components/button-group/#vertical-variation"> <DocsExample 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"
@ -443,7 +443,7 @@ const ButtonGroups = () => {
label="Radio 3" label="Radio 3"
/> />
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,7 +1,7 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Buttons = () => { const Buttons = () => {
return ( return (
@ -21,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="components/buttons"> <DocsExample 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">
@ -51,7 +51,7 @@ const Buttons = () => {
</CCol> </CCol>
</CRow> </CRow>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -64,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="components/buttons"> <DocsExample 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">
@ -98,7 +98,7 @@ const Buttons = () => {
</CCol> </CCol>
</CRow> </CRow>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -119,7 +119,7 @@ const Buttons = () => {
should be given a <code>role=&#34;button&#34;</code> to adequately communicate their should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers. meaning to assistive technologies such as screen readers.
</p> </p>
<Example href="components/buttons#button-components"> <DocsExample 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>
@ -129,7 +129,7 @@ const Buttons = () => {
<CButton component="input" type="button" color="primary" value="Input" /> <CButton component="input" type="button" color="primary" value="Input" />
<CButton component="input" type="submit" color="primary" value="Submit" /> <CButton component="input" type="submit" color="primary" value="Submit" />
<CButton component="input" type="reset" color="primary" value="Reset" /> <CButton component="input" type="reset" color="primary" value="Reset" />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -143,7 +143,7 @@ const Buttons = () => {
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=&#34;outline&#34;</code> prop to remove all background colors. <code>variant=&#34;outline&#34;</code> prop to remove all background colors.
</p> </p>
<Example href="components/buttons#outline-buttons"> <DocsExample 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">
@ -173,7 +173,7 @@ const Buttons = () => {
</CCol> </CCol>
</CRow> </CRow>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -187,7 +187,7 @@ const Buttons = () => {
If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
to remove all background colors. to remove all background colors.
</p> </p>
<Example href="components/buttons#ghost-buttons"> <DocsExample 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">
@ -217,7 +217,7 @@ const Buttons = () => {
</CCol> </CCol>
</CRow> </CRow>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -231,22 +231,22 @@ const Buttons = () => {
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '} Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
<code>size=&#34;sm&#34;</code> for additional sizes. <code>size=&#34;sm&#34;</code> for additional sizes.
</p> </p>
<Example href="components/buttons#sizes"> <DocsExample href="components/buttons#sizes">
<CButton color="primary" size="lg"> <CButton color="primary" size="lg">
Large button Large button
</CButton> </CButton>
<CButton color="secondary" size="lg"> <CButton color="secondary" size="lg">
Large button Large button
</CButton> </CButton>
</Example> </DocsExample>
<Example href="components/buttons#sizes"> <DocsExample href="components/buttons#sizes">
<CButton color="primary" size="sm"> <CButton color="primary" size="sm">
Small button Small button
</CButton> </CButton>
<CButton color="secondary" size="sm"> <CButton color="secondary" size="sm">
Small button Small button
</CButton> </CButton>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -256,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="components/buttons#pill-buttons"> <DocsExample href="components/buttons#pill-buttons">
{[ {[
'primary', 'primary',
'secondary', 'secondary',
@ -271,7 +271,7 @@ const Buttons = () => {
{color.charAt(0).toUpperCase() + color.slice(1)} {color.charAt(0).toUpperCase() + color.slice(1)}
</CButton> </CButton>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -281,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="components/buttons#square"> <DocsExample href="components/buttons#square">
{[ {[
'primary', 'primary',
'secondary', 'secondary',
@ -296,7 +296,7 @@ const Buttons = () => {
{color.charAt(0).toUpperCase() + color.slice(1)} {color.charAt(0).toUpperCase() + color.slice(1)}
</CButton> </CButton>
))} ))}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -312,14 +312,14 @@ 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="components/buttons#disabled-state"> <DocsExample href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled> <CButton color="primary" size="lg" disabled>
Primary button Primary button
</CButton> </CButton>
<CButton color="secondary" size="lg" disabled> <CButton color="secondary" size="lg" disabled>
Button Button
</CButton> </CButton>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>
@ -330,14 +330,14 @@ const Buttons = () => {
<code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component <code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
to assistive technologies. to assistive technologies.
</p> </p>
<Example href="components/buttons#disabled-state"> <DocsExample 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>
<CButton component="a" href="#" color="secondary" size="lg" disabled> <CButton component="a" href="#" color="secondary" size="lg" disabled>
Link Link
</CButton> </CButton>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -350,49 +350,49 @@ 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="components/buttons#block-buttons"> <DocsExample 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>
</div> </div>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically stacked buttons until Here we create a responsive variation, starting with vertically stacked buttons until
the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '} the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize <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="components/buttons#block-buttons"> <DocsExample 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>
</div> </div>
</Example> </DocsExample>
<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 &#34;block button&#34;, 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="components/buttons#block-buttons"> <DocsExample 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>
</div> </div>
</Example> </DocsExample>
<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&#39;ve taken our previous responsive example and added some flex utilities and Here we&#39;ve taken our previous responsive example and added some flex utilities and
a margin utility on the button to right align the buttons when they&#39;re no longer a margin utility on the button to right align the buttons when they&#39;re no longer
stacked. stacked.
</p> </p>
<Example href="components/buttons#block-buttons"> <DocsExample href="components/buttons#block-buttons">
<div className="d-grid gap-2 d-md-flex justify-content-md-end"> <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
</CButton> </CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -13,7 +13,7 @@ import {
CDropdownToggle, CDropdownToggle,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Dropdowns = () => { const Dropdowns = () => {
return ( return (
@ -31,7 +31,7 @@ const Dropdowns = () => {
Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '} Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
elements: elements:
</p> </p>
<Example href="components/dropdown#single-button"> <DocsExample href="components/dropdown#single-button">
<CDropdown> <CDropdown>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -40,11 +40,11 @@ const Dropdowns = () => {
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
<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="components/dropdown#single-button"> <DocsExample href="components/dropdown#single-button">
<> <>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => ( (color, index) => (
@ -61,7 +61,7 @@ const Dropdowns = () => {
), ),
)} )}
</> </>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -82,7 +82,7 @@ const Dropdowns = () => {
normal button dropdowns. Those additional changes hold the caret centered in the split normal button dropdowns. Those additional changes hold the caret centered in the split
button and implement a more properly sized hit area next to the main button. button and implement a more properly sized hit area next to the main button.
</p> </p>
<Example href="components/dropdown#split-button"> <DocsExample href="components/dropdown#split-button">
<> <>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => ( (color, index) => (
@ -100,7 +100,7 @@ const Dropdowns = () => {
), ),
)} )}
</> </>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -114,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="components/dropdown#sizing"> <DocsExample 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
@ -140,8 +140,8 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
<Example href="components/dropdown#sizing"> <DocsExample 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
@ -167,7 +167,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -181,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="components/dropdown#dark-dropdowns"> <DocsExample href="components/dropdown#dark-dropdowns">
<CDropdown dark> <CDropdown dark>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
@ -192,9 +192,9 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
<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="components/dropdown#dark-dropdowns"> <DocsExample 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="https://coreui.io/react/"> <a className="navbar-brand" href="https://coreui.io/react/">
@ -227,7 +227,7 @@ const Dropdowns = () => {
</div> </div>
</div> </div>
</nav> </nav>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -242,7 +242,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '} <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component. component.
</p> </p>
<Example href="components/dropdown#dropup"> <DocsExample 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>
@ -264,7 +264,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -279,7 +279,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '} <code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component. component.
</p> </p>
<Example href="components/dropdown#dropright"> <DocsExample 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>
@ -301,7 +301,7 @@ const Dropdowns = () => {
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -316,7 +316,7 @@ const Dropdowns = () => {
<code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '} <code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
component. component.
</p> </p>
<Example href="components/dropdown#dropleft"> <DocsExample 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 />
@ -330,7 +330,7 @@ const Dropdowns = () => {
</CDropdown> </CDropdown>
<CButton color="secondary">Small split button</CButton> <CButton color="secondary">Small split button</CButton>
</CButtonGroup> </CButtonGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const ChecksRadios = () => { const ChecksRadios = () => {
return ( return (
@ -14,10 +14,10 @@ const ChecksRadios = () => {
<strong>React Checkbox</strong> <strong>React Checkbox</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios"> <DocsExample 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> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -32,10 +32,10 @@ const ChecksRadios = () => {
are automatically styled to match with a lighter color to help indicate the are automatically styled to match with a lighter color to help indicate the
input&#39;s state. input&#39;s state.
</p> </p>
<Example href="forms/checks-radios#disabled"> <DocsExample 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> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -50,7 +50,7 @@ const ChecksRadios = () => {
are automatically styled to match with a lighter color to help indicate the are automatically styled to match with a lighter color to help indicate the
input&#39;s state. input&#39;s state.
</p> </p>
<Example href="forms/checks-radios#radios"> <DocsExample href="forms/checks-radios#radios">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
@ -64,7 +64,7 @@ const ChecksRadios = () => {
label="Checked radio" label="Checked radio"
defaultChecked defaultChecked
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -74,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="forms/checks-radios#disabled-1"> <DocsExample href="forms/checks-radios#disabled-1">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="flexRadioDisabled" name="flexRadioDisabled"
@ -90,7 +90,7 @@ const ChecksRadios = () => {
defaultChecked defaultChecked
disabled disabled
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -105,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="forms/checks-radios#switches"> <DocsExample href="forms/checks-radios#switches">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" /> <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch <CFormSwitch
label="Checked switch checkbox input" label="Checked switch checkbox input"
@ -123,7 +123,7 @@ const ChecksRadios = () => {
defaultChecked defaultChecked
disabled disabled
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -133,7 +133,7 @@ const ChecksRadios = () => {
<strong>React Switches</strong> <small>Sizes</small> <strong>React Switches</strong> <small>Sizes</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/checks-radios#sizes"> <DocsExample href="forms/checks-radios#sizes">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" /> <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
<CFormSwitch <CFormSwitch
size="lg" size="lg"
@ -145,7 +145,7 @@ const ChecksRadios = () => {
label="Extra large switch checkbox input" label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL" id="formSwitchCheckDefaultXL"
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -159,11 +159,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="forms/checks-radios#default-stacked"> <DocsExample 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> </DocsExample>
<Example href="forms/checks-radios#default-stacked"> <DocsExample href="forms/checks-radios#default-stacked">
<CFormCheck <CFormCheck
type="radio" type="radio"
name="exampleRadios" name="exampleRadios"
@ -187,7 +187,7 @@ const ChecksRadios = () => {
label="Disabled radio" label="Disabled radio"
disabled disabled
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -201,7 +201,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="forms/checks-radios#inline"> <DocsExample 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
@ -211,8 +211,8 @@ const ChecksRadios = () => {
label="3 (disabled)" label="3 (disabled)"
disabled disabled
/> />
</Example> </DocsExample>
<Example href="forms/checks-radios#inline"> <DocsExample href="forms/checks-radios#inline">
<CFormCheck <CFormCheck
inline inline
type="radio" type="radio"
@ -238,7 +238,7 @@ const ChecksRadios = () => {
label="3 (disabled)" label="3 (disabled)"
disabled disabled
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -252,7 +252,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="forms/checks-radios#without-labels"> <DocsExample href="forms/checks-radios#without-labels">
<div> <div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." /> <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div> </div>
@ -265,7 +265,7 @@ const ChecksRadios = () => {
aria-label="..." aria-label="..."
/> />
</div> </div>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -280,10 +280,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="forms/checks-radios#toggle-buttons"> <DocsExample 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> </DocsExample>
<Example href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button
id="btn-check-2" id="btn-check-2"
@ -291,12 +291,12 @@ const ChecksRadios = () => {
label="Checked" label="Checked"
defaultChecked defaultChecked
/> />
</Example> </DocsExample>
<Example href="forms/checks-radios#toggle-buttons"> <DocsExample 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> </DocsExample>
<h3>Radio toggle buttons</h3> <h3>Radio toggle buttons</h3>
<Example href="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button
buttonColor="secondary" buttonColor="secondary"
@ -335,12 +335,12 @@ const ChecksRadios = () => {
autoComplete="off" autoComplete="off"
label="Radio" label="Radio"
/> />
</Example> </DocsExample>
<h3>Outlined styles</h3> <h3>Outlined styles</h3>
<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="forms/checks-radios#toggle-buttons"> <DocsExample href="forms/checks-radios#toggle-buttons">
<div> <div>
<CFormCheck <CFormCheck
button button
@ -385,7 +385,7 @@ const ChecksRadios = () => {
label="Radio" label="Radio"
/> />
</div> </div>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

@ -11,7 +11,7 @@ import {
CFormTextarea, CFormTextarea,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const FormControl = () => { const FormControl = () => {
return ( return (
@ -25,7 +25,7 @@ const FormControl = () => {
<strong>React Form Control</strong> <strong>React Form Control</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/form-control"> <DocsExample 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>
@ -40,7 +40,7 @@ const FormControl = () => {
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea> <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
</div> </div>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -54,7 +54,7 @@ const FormControl = () => {
Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '} Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
<code>size=&#34;sm&#34;</code>. <code>size=&#34;sm&#34;</code>.
</p> </p>
<Example href="forms/form-control#sizing"> <DocsExample href="forms/form-control#sizing">
<CFormInput <CFormInput
type="text" type="text"
size="lg" size="lg"
@ -74,7 +74,7 @@ const FormControl = () => {
placeholder="Small input" placeholder="Small input"
aria-label="sm input example" aria-label="sm input example"
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -88,7 +88,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="forms/form-control#disabled"> <DocsExample href="forms/form-control#disabled">
<CFormInput <CFormInput
type="text" type="text"
placeholder="Disabled input" placeholder="Disabled input"
@ -104,7 +104,7 @@ const FormControl = () => {
readOnly readOnly
/> />
<br /> <br />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -119,14 +119,14 @@ const FormControl = () => {
the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs), the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
but retain the standard cursor. but retain the standard cursor.
</p> </p>
<Example href="forms/form-control#readonly"> <DocsExample href="forms/form-control#readonly">
<CFormInput <CFormInput
type="text" type="text"
placeholder="Readonly input here..." placeholder="Readonly input here..."
aria-label="readonly input example" aria-label="readonly input example"
readOnly readOnly
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -141,7 +141,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="components/accordion"> <DocsExample 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
@ -164,8 +164,8 @@ const FormControl = () => {
<CFormInput type="password" id="inputPassword" /> <CFormInput type="password" id="inputPassword" />
</div> </div>
</CRow> </CRow>
</Example> </DocsExample>
<Example href="components/accordion"> <DocsExample 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">
@ -191,7 +191,7 @@ const FormControl = () => {
</CButton> </CButton>
</div> </div>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -201,7 +201,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="forms/form-control#file-input"> <DocsExample 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>
<CFormInput type="file" id="formFile" /> <CFormInput type="file" id="formFile" />
@ -222,7 +222,7 @@ const FormControl = () => {
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel> <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" /> <CFormInput type="file" size="lg" id="formFileLg" />
</div> </div>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -232,7 +232,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="forms/form-control#color"> <DocsExample href="forms/form-control#color">
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel> <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
<CFormInput <CFormInput
type="color" type="color"
@ -240,7 +240,7 @@ const FormControl = () => {
defaultValue="#563d7c" defaultValue="#563d7c"
title="Choose your color" title="Choose your color"
/> />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -19,7 +19,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Select = () => { const Select = () => {
return ( return (
@ -38,7 +38,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="forms/input-group"> <DocsExample href="forms/input-group">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText> <CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput <CFormInput
@ -74,7 +74,7 @@ const Select = () => {
<CInputGroupText>With textarea</CInputGroupText> <CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea> <CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -89,7 +89,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="forms/input-group#wrapping"> <DocsExample href="forms/input-group#wrapping">
<CInputGroup className="flex-nowrap"> <CInputGroup className="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText> <CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput <CFormInput
@ -98,7 +98,7 @@ const Select = () => {
aria-describedby="addon-wrapping" aria-describedby="addon-wrapping"
/> />
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -116,7 +116,7 @@ const Select = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong> <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p> </p>
<Example href="forms/input-group#sizing"> <DocsExample 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>
<CFormInput <CFormInput
@ -138,7 +138,7 @@ const Select = () => {
aria-describedby="inputGroup-sizing-lg" aria-describedby="inputGroup-sizing-lg"
/> />
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -151,7 +151,7 @@ const Select = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;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="forms/input-group#checkboxes-and-radios"> <DocsExample href="forms/input-group#checkboxes-and-radios">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CFormCheck <CFormCheck
@ -172,7 +172,7 @@ const Select = () => {
</CInputGroupText> </CInputGroupText>
<CFormInput aria-label="Text input with radio button" /> <CFormInput aria-label="Text input with radio button" />
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -187,13 +187,13 @@ const Select = () => {
styles are only available for input groups with a single{' '} styles are only available for input groups with a single{' '}
<code>&lt;CFormInput&gt;</code>. <code>&lt;CFormInput&gt;</code>.
</p> </p>
<Example href="forms/input-group#multiple-inputs"> <DocsExample href="forms/input-group#multiple-inputs">
<CInputGroup> <CInputGroup>
<CInputGroupText>First and last name</CInputGroupText> <CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" /> <CFormInput aria-label="First name" />
<CFormInput aria-label="Last name" /> <CFormInput aria-label="Last name" />
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -207,7 +207,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="forms/input-group#multiple-addons"> <DocsExample 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>
@ -218,7 +218,7 @@ const Select = () => {
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText> <CInputGroupText>0.00</CInputGroupText>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -232,7 +232,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="forms/input-group#button-addons"> <DocsExample 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
@ -274,7 +274,7 @@ const Select = () => {
Button Button
</CButton> </CButton>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -284,7 +284,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="forms/input-group#buttons-with-dropdowns"> <DocsExample 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">
@ -342,7 +342,7 @@ const Select = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -352,7 +352,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="forms/input-group#segmented-buttons"> <DocsExample 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">
@ -385,7 +385,7 @@ const Select = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -395,7 +395,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="forms/input-group#custom-select"> <DocsExample 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
@ -440,7 +440,7 @@ const Select = () => {
Button Button
</CButton> </CButton>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -450,7 +450,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="forms/input-group#custom-file-input"> <DocsExample 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
@ -495,7 +495,7 @@ const Select = () => {
Button Button
</CButton> </CButton>
</CInputGroup> </CInputGroup>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -14,7 +14,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { Example } from 'src/reusable' import { DocsExample } from 'src/components'
const Layout = () => { const Layout = () => {
return ( return (
@ -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="forms/layout#form-grid"> <DocsExample href="forms/layout#form-grid">
<CRow> <CRow>
<CCol xs> <CCol xs>
<CFormInput placeholder="First name" aria-label="First name" /> <CFormInput placeholder="First name" aria-label="First name" />
@ -38,7 +38,7 @@ const Layout = () => {
<CFormInput placeholder="Last name" aria-label="Last name" /> <CFormInput placeholder="Last name" aria-label="Last name" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -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="forms/layout#gutters"> <DocsExample href="forms/layout#gutters">
<CRow className="g-3"> <CRow className="g-3">
<CCol xs> <CCol xs>
<CFormInput placeholder="First name" aria-label="First name" /> <CFormInput placeholder="First name" aria-label="First name" />
@ -61,11 +61,11 @@ const Layout = () => {
<CFormInput placeholder="Last name" aria-label="Last name" /> <CFormInput placeholder="Last name" aria-label="Last name" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
<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="forms/layout#gutters"> <DocsExample 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>
@ -105,7 +105,7 @@ const Layout = () => {
<CButton type="submit">Sign in</CButton> <CButton type="submit">Sign in</CButton>
</CCol> </CCol>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -127,7 +127,7 @@ const Layout = () => {
alignment you need. For example, we&#39;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="forms/layout#horizontal-form"> <DocsExample 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">
@ -180,7 +180,7 @@ const Layout = () => {
</CRow> </CRow>
<CButton type="submit">Sign in</CButton> <CButton type="submit">Sign in</CButton>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -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="forms/layout#horizontal-form-label-sizing"> <DocsExample href="forms/layout#horizontal-form-label-sizing">
<CRow className="mb-3"> <CRow className="mb-3">
<CFormLabel <CFormLabel
htmlFor="colFormLabelSm" htmlFor="colFormLabelSm"
@ -236,7 +236,7 @@ const Layout = () => {
/> />
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -254,7 +254,7 @@ const Layout = () => {
split the rest, with specific column classes like{' '} split the rest, with specific column classes like{' '}
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>. <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p> </p>
<Example href="forms/layout#column-sizing"> <DocsExample href="forms/layout#column-sizing">
<CRow className="g-3"> <CRow className="g-3">
<CCol sm={7}> <CCol sm={7}>
<CFormInput placeholder="City" aria-label="City" /> <CFormInput placeholder="City" aria-label="City" />
@ -266,7 +266,7 @@ const Layout = () => {
<CFormInput placeholder="Zip" aria-label="Zip" /> <CFormInput placeholder="Zip" aria-label="Zip" />
</CCol> </CCol>
</CRow> </CRow>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -282,7 +282,7 @@ const Layout = () => {
columns only take up as much space as needed. Put another way, the column sizes itself columns only take up as much space as needed. Put another way, the column sizes itself
based on the contents. based on the contents.
</p> </p>
<Example href="forms/layout#auto-sizing"> <DocsExample 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">
@ -317,11 +317,11 @@ const Layout = () => {
<CButton type="submit">Submit</CButton> <CButton type="submit">Submit</CButton>
</CCol> </CCol>
</CForm> </CForm>
</Example> </DocsExample>
<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="forms/layout#auto-sizing"> <DocsExample 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">
@ -356,7 +356,7 @@ const Layout = () => {
<CButton type="submit">Submit</CButton> <CButton type="submit">Submit</CButton>
</CCol> </CCol>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -374,7 +374,7 @@ const Layout = () => {
<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="forms/layout#inline-forms"> <DocsExample 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">
@ -403,7 +403,7 @@ const Layout = () => {
<CButton type="submit">Submit</CButton> <CButton type="submit">Submit</CButton>
</CCol> </CCol>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Range = () => { const Range = () => {
return ( return (
@ -18,10 +18,10 @@ const Range = () => {
Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '} Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
<code>&lt;CFormRange&gt;</code>. <code>&lt;CFormRange&gt;</code>.
</p> </p>
<Example href="forms/range"> <DocsExample href="forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel> <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" /> <CFormRange id="customRange1" />
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -35,10 +35,10 @@ 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="forms/range#disabled"> <DocsExample 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> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -53,10 +53,10 @@ 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="forms/range#min-and-max"> <DocsExample 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> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -71,10 +71,10 @@ const Range = () => {
specify a <code>step</code> value. In the example below, we double the number of steps specify a <code>step</code> value. In the example below, we double the number of steps
by using <code>step=&#34;0.5&#34;</code>. by using <code>step=&#34;0.5&#34;</code>.
</p> </p>
<Example href="forms/range#steps"> <DocsExample 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> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Select = () => { const Select = () => {
return ( return (
@ -14,14 +14,14 @@ const Select = () => {
<strong>React Select</strong> <small>Default</small> <strong>React Select</strong> <small>Default</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/select"> <DocsExample 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>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -35,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="forms/select#sizing"> <DocsExample 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>
@ -48,29 +48,29 @@ const Select = () => {
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </DocsExample>
<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="forms/select#sizing"> <DocsExample 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>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </DocsExample>
<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="forms/select#sizing"> <DocsExample 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>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -84,14 +84,14 @@ 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="forms/select#disabled"> <DocsExample 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>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -101,9 +101,9 @@ const Select = () => {
<strong>React Select</strong> <small></small> <strong>React Select</strong> <small></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="forms/select"> <DocsExample href="forms/select">
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> */} </CCol> */}

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

@ -16,7 +16,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const CustomStyles = () => { const CustomStyles = () => {
const [validated, setValidated] = useState(false) const [validated, setValidated] = useState(false)
@ -274,7 +274,7 @@ const Validation = () => {
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="forms/validation">{CustomStyles()}</Example> <DocsExample href="forms/validation">{CustomStyles()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -294,7 +294,7 @@ const Validation = () => {
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="forms/validation#browser-defaults">{BrowserDefaults()}</Example> <DocsExample href="forms/validation#browser-defaults">{BrowserDefaults()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -315,7 +315,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="forms/validation#server-side"> <DocsExample 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>
@ -388,7 +388,7 @@ const Validation = () => {
</CButton> </CButton>
</CCol> </CCol>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -412,7 +412,7 @@ const Validation = () => {
<code>&lt;CFormCheck&gt;</code>s <code>&lt;CFormCheck&gt;</code>s
</li> </li>
</ul> </ul>
<Example href="forms/validation#supported-elements"> <DocsExample 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">
@ -478,7 +478,7 @@ const Validation = () => {
</CButton> </CButton>
</div> </div>
</CForm> </CForm>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -495,7 +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="forms/validation#tooltips">{Tooltips()}</Example> <DocsExample href="forms/validation#tooltips">{Tooltips()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

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

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

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

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

@ -9,7 +9,7 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Alerts = () => { const Alerts = () => {
return ( return (
@ -32,7 +32,7 @@ const Alerts = () => {
</a> </a>
. .
</p> </p>
<Example href="components/alert"> <DocsExample 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>
@ -41,7 +41,7 @@ const Alerts = () => {
<CAlert color="info">A simple info alert—check it out!</CAlert> <CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert> <CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert> <CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -55,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="components/alert#link-color"> <DocsExample 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.
@ -88,7 +88,7 @@ const Alerts = () => {
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
a click if you like. a click if you like.
</CAlert> </CAlert>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -102,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="components/alert#additional-content"> <DocsExample 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>
@ -116,7 +116,7 @@ const Alerts = () => {
tidy. tidy.
</p> </p>
</CAlert> </CAlert>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -129,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="components/alert#dismissing"> <DocsExample href="components/alert#dismissing">
<CAlert <CAlert
color="warning" color="warning"
dismissible dismissible
@ -139,7 +139,7 @@ const Alerts = () => {
> >
<strong>Go right ahead</strong> and click that dimiss over there on the right. <strong>Go right ahead</strong> and click that dimiss over there on the right.
</CAlert> </CAlert>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const Badges = () => { const Badges = () => {
return ( return (
@ -18,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="components/badge"> <DocsExample href="components/badge">
<h1> <h1>
Example heading <CBadge color="secondary">New</CBadge> Example heading <CBadge color="secondary">New</CBadge>
</h1> </h1>
@ -37,15 +37,15 @@ const Badges = () => {
<h6> <h6>
Example heading <CBadge color="secondary">New</CBadge> Example heading <CBadge color="secondary">New</CBadge>
</h6> </h6>
</Example> </DocsExample>
<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="components/badge"> <DocsExample href="components/badge">
<CButton color="primary"> <CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge> Notifications <CBadge color="secondary">4</CBadge>
</CButton> </CButton>
</Example> </DocsExample>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Remark that depending on how you use them, badges may be complicated for users of Remark that depending on how you use them, badges may be complicated for users of
screen readers and related assistive technologies. screen readers and related assistive technologies.
@ -54,12 +54,12 @@ 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="components/badge"> <DocsExample 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>
</CButton> </CButton>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -73,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="components/badge#contextual-variations"> <DocsExample 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>
@ -81,7 +81,7 @@ const Badges = () => {
<CBadge color="info">info</CBadge> <CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge> <CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge> <CBadge color="dark">dark</CBadge>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
@ -92,7 +92,7 @@ const Badges = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded. Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
</p> </p>
<Example href="components/badge#pill-badges"> <DocsExample href="components/badge#pill-badges">
<CBadge color="primary" shape="rounded-pill"> <CBadge color="primary" shape="rounded-pill">
primary primary
</CBadge> </CBadge>
@ -114,7 +114,7 @@ const Badges = () => {
<CBadge color="dark" shape="rounded-pill"> <CBadge color="dark" shape="rounded-pill">
dark dark
</CBadge> </CBadge>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

34
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 { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const LiveDemo = () => { const LiveDemo = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
@ -476,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="components/modal"> <DocsExample href="components/modal">
<CModal <CModal
className="show d-block position-static" className="show d-block position-static"
backdrop={false} backdrop={false}
@ -493,7 +493,7 @@ const Modals = () => {
<CButton color="primary">Save changes</CButton> <CButton color="primary">Save changes</CButton>
</CModalFooter> </CModalFooter>
</CModal> </CModal>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -507,7 +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="components/modal#live-demo">{LiveDemo()}</Example> <DocsExample href="components/modal#live-demo">{LiveDemo()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -522,7 +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="components/modal#static-backdrop">{StaticBackdrop()}</Example> <DocsExample href="components/modal#static-backdrop">{StaticBackdrop()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -537,16 +537,16 @@ 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="components/modal#scrolling-long-content"> <DocsExample href="components/modal#scrolling-long-content">
{ScrollingLongContent()} {ScrollingLongContent()}
</Example> </DocsExample>
<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="components/modal#scrolling-long-content"> <DocsExample href="components/modal#scrolling-long-content">
{ScrollingLongContent2()} {ScrollingLongContent2()}
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -560,8 +560,12 @@ const Modals = () => {
Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
vertically center the modal. vertically center the modal.
</p> </p>
<Example href="components/modal#vertically-centered">{VerticallyCentered()}</Example> <DocsExample href="components/modal#vertically-centered">
<Example href="components/modal#vertically-centered">{VerticallyCentered2()}</Example> {VerticallyCentered()}
</DocsExample>
<DocsExample href="components/modal#vertically-centered">
{VerticallyCentered2()}
</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -576,7 +580,9 @@ 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="components/modal#tooltips-and-popovers">{TooltipsPopovers()}</Example> <DocsExample href="components/modal#tooltips-and-popovers">
{TooltipsPopovers()}
</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -636,7 +642,7 @@ const Modals = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Example href="components/modal#optional-sizes">{OptionalSizes()}</Example> <DocsExample href="components/modal#optional-sizes">{OptionalSizes()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -706,7 +712,7 @@ const Modals = () => {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<Example href="components/modal#fullscreen-modal">{FullscreenModal()}</Example> <DocsExample href="components/modal#fullscreen-modal">{FullscreenModal()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -12,7 +12,7 @@ import {
CToastHeader, CToastHeader,
CToaster, CToaster,
} from '@coreui/react' } from '@coreui/react'
import { DocsCallout, Example } from 'src/reusable' import { DocsCallout, DocsExample } from 'src/components'
const ExampleToast = () => { const ExampleToast = () => {
const [toast, addToast] = useState(0) const [toast, addToast] = useState(0)
@ -62,7 +62,7 @@ const Toasts = () => {
we require a single element to contain your “toasted” content and strongly encourage a we require a single element to contain your “toasted” content and strongly encourage a
dismiss button. dismiss button.
</p> </p>
<Example href="components/toast"> <DocsExample 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
@ -81,8 +81,8 @@ const Toasts = () => {
</CToastHeader> </CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody> <CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast> </CToast>
</Example> </DocsExample>
<Example href="components/toast">{ExampleToast()}</Example> <DocsExample href="components/toast">{ExampleToast()}</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -95,7 +95,7 @@ const Toasts = () => {
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Toasts are slightly translucent to blend in with what&#39;s below them. Toasts are slightly translucent to blend in with what&#39;s below them.
</p> </p>
<Example href="components/toast#translucent"> <DocsExample 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>
@ -116,7 +116,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody> <CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast> </CToast>
</div> </div>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -130,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="components/toast#stacking"> <DocsExample 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>
@ -169,7 +169,7 @@ const Toasts = () => {
<CToastBody>Hello, world! This is a toast message.</CToastBody> <CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast> </CToast>
</CToaster> </CToaster>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -188,18 +188,18 @@ const Toasts = () => {
<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="components/toast#custom-content"> <DocsExample 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>
<CToastClose className="me-2 m-auto" /> <CToastClose className="me-2 m-auto" />
</div> </div>
</CToast> </CToast>
</Example> </DocsExample>
<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="components/toast#custom-content"> <DocsExample 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.
@ -213,7 +213,7 @@ const Toasts = () => {
</div> </div>
</CToastBody> </CToastBody>
</CToast> </CToast>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@ -232,14 +232,14 @@ const Toasts = () => {
<code>white</code> property to our close button. For a crisp edge, we remove the <code>white</code> property to our close button. For a crisp edge, we remove the
default border with <code>.border-0</code>. default border with <code>.border-0</code>.
</p> </p>
<Example href="components/toast#color-schemes"> <DocsExample 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>
<CToastClose className="me-2 m-auto" white /> <CToastClose className="me-2 m-auto" white />
</div> </div>
</CToast> </CToast>
</Example> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

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

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

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