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

refactor: update components examples

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-05-17 01:16:28 +02:00
parent 323e9b9d8d
commit 35be1eac55
31 changed files with 2657 additions and 3228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/containers/_nav.js
View File

@ -73,12 +73,6 @@ const _nav = [
anchor: 'Collapse', anchor: 'Collapse',
to: '/base/collapses', to: '/base/collapses',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Forms',
to: '/base/forms',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
@ -119,7 +113,7 @@ const _nav = [
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Progress', anchor: 'Progress',
to: '/base/progress-bar', to: '/base/progress',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
@ -167,6 +161,55 @@ const _nav = [
}, },
], ],
}, },
{
_component: 'CNavGroup',
anchor: 'Forms',
icon: <CIcon name="cil-note" customClasses="nav-icon" />,
items: [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Form Control',
to: '/forms/form-control',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Select',
to: '/forms/select',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Checks & Radios',
to: '/forms/checks-radios',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Range',
to: '/forms/range',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Input Group',
to: '/forms/input-group',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Layout',
to: '/forms/layout',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Validation',
to: '/forms/validation',
},
],
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
@ -231,8 +274,8 @@ const _nav = [
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Toaster', anchor: 'Toasts',
to: '/notifications/toaster', to: '/notifications/toasts',
}, },
], ],
}, },

10
src/reusable/Example.js
View File

@ -7,7 +7,7 @@ const Example = (props) => {
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href // const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return ( return (
<> <div className="example">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active>
@ -20,10 +20,12 @@ const Example = (props) => {
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
<CTabContent> <CTabContent className="rounded-bottom">
<CTabPane visible>{children}</CTabPane> <CTabPane className="p-3 preview" visible>
{children}
</CTabPane>
</CTabContent> </CTabContent>
</> </div>
) )
} }

28
src/routes.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')) const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
const Tables = React.lazy(() => import('./views/base/tables/Tables')) const Tables = React.lazy(() => import('./views/base/tables/Tables'))
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
@ -8,15 +8,14 @@ const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumb
const Cards = React.lazy(() => import('./views/base/cards/Cards')) const Cards = React.lazy(() => import('./views/base/cards/Cards'))
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')) const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')) const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'))
const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')) const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')) const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')) const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
const Navs = React.lazy(() => import('./views/base/navs/Navs')) const Navs = React.lazy(() => import('./views/base/navs/Navs'))
const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')) const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')) const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')) const Progress = React.lazy(() => import('./views/base/progress/Progress'))
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
@ -35,6 +34,14 @@ const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography')) const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
const Widgets = React.lazy(() => import('./views/widgets/Widgets')) const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl'))
const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup'))
const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
const Range = React.lazy(() => import('./views/forms/range/Range'))
const Select = React.lazy(() => import('./views/forms/select/Select'))
const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
const Login = React.lazy(() => import('./views/pages/login/Login')) const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register')) const Register = React.lazy(() => import('./views/pages/register/Register'))
@ -50,14 +57,13 @@ const routes = [
{ path: '/base/cards', name: 'Cards', component: Cards }, { path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/carousels', name: 'Carousel', component: Carousels }, { path: '/base/carousels', name: 'Carousel', component: Carousels },
{ path: '/base/collapses', name: 'Collapse', component: Collapses }, { path: '/base/collapses', name: 'Collapse', component: Collapses },
{ path: '/base/forms', name: 'Forms', component: BasicForms },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons }, { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups }, { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars }, { path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs }, { path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar }, { path: '/base/progress', name: 'Progress', component: Progress },
{ path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs }, { path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
@ -66,6 +72,14 @@ const routes = [
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ path: '/charts', name: 'Charts', component: Charts }, { path: '/charts', name: 'Charts', component: Charts },
{ path: '/forms', name: 'Forms', component: FormControl, exact: true },
{ path: '/forms/form-control', name: 'Form Control', component: FormControl },
{ path: '/forms/select', name: 'Select', component: Select },
{ path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
{ path: '/forms/range', name: 'Range', component: Range },
{ path: '/forms/input-group', name: 'Input Group', component: InputGroup },
{ path: '/forms/layout', name: 'Layout', component: Layout },
{ path: '/forms/validation', name: 'Validation', component: Validation },
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons }, { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
{ path: '/icons/flags', name: 'Flags', component: Flags }, { path: '/icons/flags', name: 'Flags', component: Flags },
@ -74,7 +88,7 @@ const routes = [
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts }, { path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges }, { path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals }, { path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/notifications/toaster', name: 'Toaster', component: Toaster }, { path: '/notifications/toasts', name: 'Toasts', component: Toasts },
{ path: '/pages/login', name: 'Login', component: Login }, { path: '/pages/login', name: 'Login', component: Login },
{ path: '/pages/register', name: 'Register', component: Register }, { path: '/pages/register', name: 'Register', component: Register },
{ path: '/widgets', name: 'Widgets', component: Widgets }, { path: '/widgets', name: 'Widgets', component: Widgets },

108
src/scss/_example.scss Normal file
View File

@ -0,0 +1,108 @@
.example {
&:not(:first-child) {
margin-top: 1.5rem;
}
.tab-content {
background-color: $light-50 !important;
@at-root .dark-theme & {
background-color: rgba(255, 255, 255, .1) !important;
}
}
code[class*="language-"],
pre[class*="language-"] {
font-size: .875rem !important;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: transparent;
}
& + p {
margin-top: 1.5rem
}
// Components examples
.preview {
+ p {
margin-top: 2rem;
}
> .form-control {
+ .form-control {
margin-top: .5rem;
}
}
> .nav + .nav,
> .alert + .alert,
> .navbar + .navbar,
> .progress + .progress {
margin-top: 1rem;
}
> .dropdown-menu {
position: static;
display: block;
}
> :last-child {
margin-bottom: 0;
}
// Images
> svg + svg,
> img + img {
margin-left: .5rem;
}
// Buttons
> .btn,
> .btn-group {
margin: .25rem .125rem;
}
> .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
}
// List groups
> .list-group {
max-width: 400px;
}
> [class*="list-group-horizontal"] {
max-width: 100%;
}
// Navbars
.fixed-top,
.sticky-top {
position: static;
margin: -1rem -1rem 1rem;
}
.fixed-bottom {
position: static;
margin: 1rem -1rem -1rem;
}
@include media-breakpoint-up(sm) {
.fixed-top,
.sticky-top {
margin: -1.5rem -1.5rem 1rem;
}
.fixed-bottom {
margin: 1rem -1.5rem -1.5rem;
}
}
// Pagination
.pagination {
margin-top: .5rem;
margin-bottom: .5rem;
}
}
}

1
src/scss/style.scss
View File

@ -8,6 +8,7 @@ $enable-rtl: true;
@import "@coreui/coreui/scss/coreui"; @import "@coreui/coreui/scss/coreui";
@import "layout"; @import "layout";
@import "example";
// If you want to add custom CSS you can put it here. // If you want to add custom CSS you can put it here.
@import "custom"; @import "custom";

12
src/views/base/accordion/Accordion.js
View File

@ -12,7 +12,7 @@ import {
CAccordionHeader, CAccordionHeader,
CAccordionItem, CAccordionItem,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Accordion = () => { const Accordion = () => {
const [activeKey, setActiveKey] = useState(0) const [activeKey, setActiveKey] = useState(0)
@ -26,7 +26,7 @@ const Accordion = () => {
<strong>React Accordion</strong> <strong>React Accordion</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content. Click the accordions below to expand/collapse the accordion content.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="https://coreui.io/react/docs/4.0/components/accordion">
@ -103,10 +103,10 @@ const Accordion = () => {
<strong>React Accordion</strong> <small>Flush</small> <strong>React Accordion</strong> <small>Flush</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">flush</code> to remove the default{' '} Add <code>flush</code> to remove the default <code>background-color</code>, some
<code class="css-0">background-color</code>, some borders, and some rounded corners to borders, and some rounded corners to render accordions edge-to-edge with their parent
render accordions edge-to-edge with their parent container. container.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="https://coreui.io/react/docs/4.0/components/accordion">
<CAccordion flush> <CAccordion flush>

78
src/views/base/breadcrumbs/Breadcrumbs.js
View File

@ -9,45 +9,61 @@ import {
CRow, CRow,
CLink, CLink,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Breadcrumbs = () => { const Breadcrumbs = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12"> <CCol>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Breadcrumb <strong>React Breadcrumb</strong>
<DocsLink name="CBreadcrumb" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBreadcrumb> <p className="text-medium-emphasis small">
<CBreadcrumbItem> The breadcrumb navigation provides links back to each previous page the user navigated
<CLink href="#">Home</CLink> through and shows the current location in a website or an application. You don’t have
</CBreadcrumbItem> to add separators, because they automatically added in CSS through{' '}
<CBreadcrumbItem active>Library</CBreadcrumbItem> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
</CBreadcrumb> {' '}
<CBreadcrumb> <code>::before</code>
<CBreadcrumbItem> </a>{' '}
<CLink href="#">Home</CLink> and{' '}
</CBreadcrumbItem> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
<CBreadcrumbItem> {' '}
<CLink href="#">Library</CLink> <code>content</code>
</CBreadcrumbItem> </a>
<CBreadcrumbItem active>Data</CBreadcrumbItem> .
</CBreadcrumb> </p>
<CBreadcrumb> <Example href="https://coreui.io/react/docs/4.0/components/breadcrumb">
<CBreadcrumbItem> <CBreadcrumb>
<CLink href="#">Home</CLink> <CBreadcrumbItem>
</CBreadcrumbItem> <CLink href="#">Home</CLink>
<CBreadcrumbItem> </CBreadcrumbItem>
<CLink href="#">Library</CLink> <CBreadcrumbItem active>Library</CBreadcrumbItem>
</CBreadcrumbItem> </CBreadcrumb>
<CBreadcrumbItem> <CBreadcrumb>
<CLink href="#">Data</CLink> <CBreadcrumbItem>
</CBreadcrumbItem> <CLink href="#">Home</CLink>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem> </CBreadcrumbItem>
</CBreadcrumb> <CBreadcrumbItem>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Data</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Data</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
</CBreadcrumb>
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

211
src/views/base/cards/Cards.js
View File

@ -19,13 +19,9 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import CIcon from '@coreui/icons-react' import { Example } from 'src/reusable'
import { DocsLink, Example } from 'src/reusable'
const Cards = () => { const Cards = () => {
// const [collapsed, setCollapsed] = React.useState(true)
// const [showCard, setShowCard] = React.useState(true)
return ( return (
<CRow> <CRow>
<CCol xs={12}> <CCol xs={12}>
@ -34,18 +30,15 @@ const Cards = () => {
<strong>Card</strong> <small>Example</small> <strong>Card</strong> <small>Example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Cards are built with as little markup and styles as possible but still manage to Cards are built with as little markup and styles as possible but still manage to
deliver a bunch of control and customization. Built with flexbox, they offer easy deliver a bunch of control and customization. Built with flexbox, they offer easy
alignment and mix well with other CoreUI components. Cards have no top, left, and alignment and mix well with other CoreUI components. Cards have no top, left, and
right margins by default, so use{' '} right margins by default, so use{' '}
<a href="https://coreui.io/docs/utilities/spacing" class="css-0"> <a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
spacing utilities They have no fixed width to start, so they'll fill the full width of its parent.
</a>{' '}
as needed. They have no fixed width to start, so they'll fill the full width of its
parent.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Below is an example of a basic card with mixed content and a fixed width. Cards have Below is an example of a basic card with mixed content and a fixed width. Cards have
no fixed width to start, so they'll naturally fill the full width of its parent no fixed width to start, so they'll naturally fill the full width of its parent
element. element.
@ -89,9 +82,9 @@ const Cards = () => {
<strong>Card</strong> <small>Body</small> <strong>Card</strong> <small>Body</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The main block of a card is the <code class="css-0">&lt;CCardBody&gt;</code>. Use it The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
whenever you need a padded section within a card. need a padded section within a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#body"> <Example href="https://coreui.io/react/docs/4.0/components/card/#body">
<CCard> <CCard>
@ -107,16 +100,15 @@ const Cards = () => {
<strong>Card</strong> <small>Titles, text, and links</small> <strong>Card</strong> <small>Titles, text, and links</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Card titles are managed by <code class="css-0">&lt;CCardTitle&gt;</code> component. Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically,
Identically, links are attached and collected next to each other by{' '} links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code>{' '}
<code class="css-0">&lt;CCardLink&gt;</code> component. component.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Subtitles are managed by <code class="css-0">&lt;CCardSubtitle&gt;</code> component. Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the{' '}
If the <code class="css-0">&lt;CCardTitle&gt;</code> also, the{' '} <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are
<code class="css-0">&lt;CCardSubtitle&gt;</code> items are stored in a{' '} stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
<code class="css-0">&lt;CCardBody&gt;</code> item, the card title, and subtitle are
arranged rightly. arranged rightly.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#titles-text-and-links"> <Example href="https://coreui.io/react/docs/4.0/components/card/#titles-text-and-links">
@ -142,11 +134,10 @@ const Cards = () => {
<strong>Card</strong> <small>Images</small> <strong>Card</strong> <small>Images</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<code class="css-0">.card-img-top</code> places a picture to the top of the card. With{' '} <code>.card-img-top</code> places a picture to the top of the card. With{' '}
<code class="css-0">.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 class="css-0">.card-text</code> can additionally be styled with the regular HTML <code>.card-text</code> can additionally be styled with the regular HTML tags.
tags.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#images"> <Example href="https://coreui.io/react/docs/4.0/components/card/#images">
<CCard style={{ width: '18rem' }}> <CCard style={{ width: '18rem' }}>
@ -185,7 +176,7 @@ const Cards = () => {
<strong>Card</strong> <small>List groups</small> <strong>Card</strong> <small>List groups</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create lists of content in a card with a flush list group. Create lists of content in a card with a flush list group.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#list-groups"> <Example href="https://coreui.io/react/docs/4.0/components/card/#list-groups">
@ -230,7 +221,7 @@ const Cards = () => {
<strong>Card</strong> <small>Kitchen sink</small> <strong>Card</strong> <small>Kitchen sink</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Combine and match many content types to build the card you need, or throw everything Combine and match many content types to build the card you need, or throw everything
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.
@ -282,7 +273,7 @@ const Cards = () => {
<strong>Card</strong> <small>Header and footer</small> <strong>Card</strong> <small>Header and footer</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add an optional header and/or footer within a card. Add an optional header and/or footer within a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer"> <Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
@ -297,8 +288,8 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Card headers can be styled by adding ex. <code class="css-0">component="h5"</code>. Card headers can be styled by adding ex. <code>component="h5"</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer"> <Example href="https://coreui.io/react/docs/4.0/components/card/#header-and-footer">
<CCard> <CCard>
@ -316,12 +307,12 @@ const Cards = () => {
<CCard> <CCard>
<CCardHeader>Quote</CCardHeader> <CCardHeader>Quote</CCardHeader>
<CCardBody> <CCardBody>
<blockquote class="blockquote mb-0"> <blockquote className="blockquote mb-0">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante. a ante.
</p> </p>
<footer class="blockquote-footer"> <footer className="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite> Someone famous in <cite title="Source Title">Source Title</cite>
</footer> </footer>
</blockquote> </blockquote>
@ -350,13 +341,13 @@ const Cards = () => {
<strong>Card</strong> <small>Body</small> <strong>Card</strong> <small>Body</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Cards assume no specific <code class="css-0">width</code> to start, so they'll be 100% Cards assume no specific <code>width</code> to start, so they'll be 100% wide unless
wide unless otherwise stated. You can adjust this as required with custom CSS, grid otherwise stated. You can adjust this as required with custom CSS, grid classes, grid
classes, grid Sass mixins, or services. Sass mixins, or services.
</p> </p>
<h3>Using grid markup</h3> <h3>Using grid markup</h3>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed. Using the grid, wrap cards in columns and rows as needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
@ -386,12 +377,10 @@ const Cards = () => {
</CRow> </CRow>
</Example> </Example>
<h3>Using utilities</h3> <h3>Using utilities</h3>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use some of{' '} Use some of{' '}
<a href="https://coreui.io/docs/utilities/sizing/" class="css-0"> <a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
available sizing utilities rapidly set a card's width.
</a>{' '}
to rapidly set a card's width.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
<CCard className="w-75"> <CCard className="w-75">
@ -414,7 +403,7 @@ const Cards = () => {
</CCard> </CCard>
</Example> </Example>
<strong>Using custom CSS</strong> <strong>Using custom CSS</strong>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a width. Use custom CSS in your stylesheets or as inline styles to set a width.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#sizing"> <Example href="https://coreui.io/react/docs/4.0/components/card/#sizing">
@ -437,12 +426,10 @@ const Cards = () => {
<strong>Card</strong> <small>Text alignment</small> <strong>Card</strong> <small>Text alignment</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can instantly change the text arrangement of any card—in its whole or specific You can instantly change the text arrangement of any card—in its whole or specific
parts—with{' '} parts—with{' '}
<a href="https://coreui.io/docs/utilities/text/#text-alignment" class="css-0"> <a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
text align classes
</a>
. .
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#text-alignment"> <Example href="https://coreui.io/react/docs/4.0/components/card/#text-alignment">
@ -483,9 +470,9 @@ const Cards = () => {
<strong>Card</strong> <small>Navigation</small> <strong>Card</strong> <small>Navigation</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add some navigation to a <code class="css-0">&lt;CCardHeader&gt;</code> with our{' '} Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
<code class="css-0">&lt;CNav&gt;</code> component. <code>&lt;CNav&gt;</code> component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/##navigation"> <Example href="https://coreui.io/react/docs/4.0/components/card/##navigation">
<CCard className="text-center"> <CCard className="text-center">
@ -552,7 +539,7 @@ const Cards = () => {
<strong>Card</strong> <small>Image caps</small> <strong>Card</strong> <small>Image caps</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Similar to headers and footers, cards can include top and bottom "image caps"—images Similar to headers and footers, cards can include top and bottom "image caps"—images
at the top or bottom of a card. at the top or bottom of a card.
</p> </p>
@ -585,7 +572,7 @@ const Cards = () => {
additional content. This content is a little bit longer. additional content. This content is a little bit longer.
</CCardText> </CCardText>
<CCardText> <CCardText>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardText> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -599,7 +586,7 @@ const Cards = () => {
additional content. This content is a little bit longer. additional content. This content is a little bit longer.
</CCardText> </CCardText>
<CCardText> <CCardText>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardImage <CCardImage
@ -633,12 +620,12 @@ const Cards = () => {
<strong>Card</strong> <small>Card styles</small> <strong>Card</strong> <small>Card styles</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Cards include various options for customizing their backgrounds, borders, and color. Cards include various options for customizing their backgrounds, borders, and color.
</p> </p>
<h3>Background and color</h3> <h3>Background and color</h3>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code class="css-0">color</code> property to change the appearance of a card. Use <code>color</code> property to change the appearance of a card.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#background-and-color"> <Example href="https://coreui.io/react/docs/4.0/components/card/#background-and-color">
<CRow> <CRow>
@ -673,15 +660,11 @@ const Cards = () => {
</CRow> </CRow>
</Example> </Example>
<h3>Border</h3> <h3>Border</h3>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use{' '} Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
<a href="https://coreui.io/docs/utilities/borders/" class="css-0"> just the <code>border-color</code> of a card. Note that you can set{' '}
border utilities <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
</a>{' '} card's contents as shown below.
to change just the <code class="css-0">border-color</code> of a card. Note that you
can set <code class="css-0">textColor</code> property on the{' '}
<code class="css-0">&lt;CCard&gt;</code> or a subset of the card's contents as shown
below.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#border"> <Example href="https://coreui.io/react/docs/4.0/components/card/#border">
<CRow> <CRow>
@ -715,15 +698,11 @@ const Cards = () => {
</CRow> </CRow>
</Example> </Example>
<h3>Top border</h3> <h3>Top border</h3>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use{' '} Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
<a href="https://coreui.io/docs/utilities/borders/" class="css-0"> just the <code>border-color</code> of a card. Note that you can set{' '}
border utilities <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
</a>{' '} card's contents as shown below.
to change just the <code class="css-0">border-color</code> of a card. Note that you
can set <code class="css-0">textColor</code> property on the{' '}
<code class="css-0">&lt;CCard&gt;</code> or a subset of the card's contents as shown
below.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#top-border"> <Example href="https://coreui.io/react/docs/4.0/components/card/#top-border">
<CRow> <CRow>
@ -765,11 +744,10 @@ const Cards = () => {
<strong>Card</strong> <small>Card groups</small> <strong>Card</strong> <small>Card groups</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use card groups to render cards as a single, attached element with equal width and Use card groups to render cards as a single, attached element with equal width and
height columns. Card groups start off stacked and use{' '} height columns. Card groups start off stacked and use <code>display: flex;</code> to
<code class="css-0">display: flex;</code> to become attached with uniform dimensions become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
starting at the <code class="css-0">sm</code> breakpoint.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups"> <Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups">
<CCardGroup> <CCardGroup>
@ -799,7 +777,7 @@ const Cards = () => {
additional content. This content is a little bit longer. additional content. This content is a little bit longer.
</CCardText> </CCardText>
<CCardText> <CCardText>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardText> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -829,7 +807,7 @@ const Cards = () => {
content. content.
</CCardText> </CCardText>
<CCardText> <CCardText>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardText> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
@ -860,13 +838,13 @@ const Cards = () => {
that equal height action. that equal height action.
</CCardText> </CCardText>
<CCardText> <CCardText>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardText> </CCardText>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
When using card groups with footers, their content will automatically line up. When using card groups with footers, their content will automatically line up.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups"> <Example href="https://coreui.io/react/docs/4.0/components/card/#card-groups">
@ -898,7 +876,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@ -928,7 +906,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@ -959,7 +937,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
@ -973,14 +951,13 @@ const Cards = () => {
<strong>Card</strong> <small>Grid cards</small> <strong>Card</strong> <small>Grid cards</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use the <code class="css-0">CRow</code> component and set{' '} Use the <code>CRow</code> component and set{' '}
<code class="css-0">&#123;xs|sm|md|lg|xl|xxl}=&#123;&#123; cols: * &#125;&#125;</code>{' '} <code>&#123;xs|sm|md|lg|xl|xxl}=&#123;&#123; cols: * &#125;&#125;</code> property to
property to control how many grid columns (wrapped around your cards) you show per control how many grid columns (wrapped around your cards) you show per row. For
row. For example, here's <code class="css-0">xs=&#123;&#123;cols: 1&#125;&#125;</code>{' '} example, here's <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the cards
laying out the cards on one column, and{' '} on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four
<code class="css-0">md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards to cards to equal width across multiple rows, from the medium breakpoint up.
equal width across multiple rows, from the medium breakpoint up.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#grid-cards"> <Example href="https://coreui.io/react/docs/4.0/components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}> <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
@ -1012,7 +989,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1044,7 +1021,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1076,7 +1053,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1108,15 +1085,15 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Change it to <code class="css-0">md=&#123;&#123; cols: 3&#125;&#125;</code> and you'll Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you'll see the
see the fourth card wrap. fourth card wrap.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#grid-cards"> <Example href="https://coreui.io/react/docs/4.0/components/card/#grid-cards">
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}> <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
@ -1148,7 +1125,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1180,7 +1157,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1212,7 +1189,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1244,7 +1221,7 @@ const Cards = () => {
</CCardText> </CCardText>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<small class="text-muted">Last updated 3 mins ago</small> <small className="text-muted">Last updated 3 mins ago</small>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@ -1253,24 +1230,6 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
{/* <CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>Card</strong> <small>Body</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The main block of a card is the <code class="css-0">&lt;CCardBody&gt;</code>. Use it
whenever you need a padded section within a card.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/card/#body">
<CCard>
<CCardBody>This is some text within a card body.</CCardBody>
</CCard>
</Example>
</CCardBody>
</CCard>
</CCol> */}
</CRow> </CRow>
) )
} }

44
src/views/base/carousels/Carousels.js
View File

@ -9,7 +9,7 @@ import {
CCol, CCol,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const slides = [ const slides = [
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@ -34,7 +34,7 @@ const Carousels = () => {
<strong>Carousel</strong> <small>Slide only</small> <strong>Carousel</strong> <small>Slide only</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small">Here’s a carousel with slides</p> <p className="text-medium-emphasis small">Here’s a carousel with slides</p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel"> <Example href="https://coreui.io/react/docs/4.0/components/carousel">
<CCarousel> <CCarousel>
<CCarouselItem> <CCarouselItem>
@ -57,9 +57,8 @@ const Carousels = () => {
<strong>Carousel</strong> <small>With controls</small> <strong>Carousel</strong> <small>With controls</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Adding in the previous and next controls by <code class="css-0">controls</code>{' '} Adding in the previous and next controls by <code>controls</code> property.
property.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-controls"> <Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-controls">
<CCarousel controls> <CCarousel controls>
@ -83,7 +82,7 @@ const Carousels = () => {
<strong>Carousel</strong> <small>With indicators</small> <strong>Carousel</strong> <small>With indicators</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the controls, too. You can attach the indicators to the carousel, lengthwise the controls, too.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators"> <Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators">
@ -108,16 +107,13 @@ const Carousels = () => {
<strong>Carousel</strong> <small>With captions</small> <strong>Carousel</strong> <small>With captions</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can add captions to slides with the{' '} You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
<code class="css-0">&lt;CCarouselCaption&gt;</code> element within any{' '} within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
<code class="css-0">&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
smaller viewports, as shown below, with optional{' '} smaller viewports, as shown below, with optional{' '}
<a href="https://coreui.io/4.0/utilities/display%22" class="css-0"> <a href="https://coreui.io/4.0/utilities/display">display utilities</a>. We hide them
display utilities with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
</a> <code>.d-md-block</code>.
. We hide them with <code class="css-0">.d-none</code> and draw them back on
medium-sized devices with <code class="css-0">.d-md-block</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-captions"> <Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-captions">
<CCarousel controls indicators> <CCarousel controls indicators>
@ -153,9 +149,9 @@ const Carousels = () => {
<strong>Carousel</strong> <small>Crossfade</small> <strong>Carousel</strong> <small>Crossfade</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">transition="crossfade"</code> to your carousel to animate Add <code>transition="crossfade"</code> to your carousel to animate slides with a fade
slides with a fade transition instead of a slide. transition instead of a slide.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#crossfade"> <Example href="https://coreui.io/react/docs/4.0/components/carousel/#crossfade">
<CCarousel controls transition="crossfade"> <CCarousel controls transition="crossfade">
@ -179,13 +175,11 @@ const Carousels = () => {
<strong>Carousel</strong> <small>Dark variant</small> <strong>Carousel</strong> <small>Dark variant</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">dark</code> property to the{' '} Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
<code class="css-0">CCarousel</code> for darker controls, indicators, and captions. indicators, and captions. Controls have been inverted from their default white fill
Controls have been inverted from their default white fill with the{' '} with the <code>filter</code> CSS property. Captions and controls have additional Sass
<code class="css-0">filter</code> CSS property. Captions and controls have additional variables that customize the <code>color</code> and <code>background-color</code>.
Sass variables that customize the <code class="css-0">color</code> and{' '}
<code class="css-0">background-color</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#dark-variant"> <Example href="https://coreui.io/react/docs/4.0/components/carousel/#dark-variant">
<CCarousel controls indicators dark> <CCarousel controls indicators dark>

8
src/views/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 { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Collapses = () => { const Collapses = () => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
@ -15,7 +15,7 @@ const Collapses = () => {
<strong>React Collapse</strong> <strong>React Collapse</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small">You can use a link or a button component.</p> <p className="text-medium-emphasis small">You can use a link or a button component.</p>
<Example href="https://coreui.io/react/docs/4.0/components/collapse"> <Example href="https://coreui.io/react/docs/4.0/components/collapse">
<CButton <CButton
href="#" href="#"
@ -46,8 +46,8 @@ const Collapses = () => {
<strong>React Collapse</strong> <small> multi target</small> <strong>React Collapse</strong> <small> multi target</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
A <code class="css-0">&lt;CButton&gt;</code> can show and hide multiple elements. A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets"> <Example href="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets">
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton> <CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>

1415
src/views/base/forms/BasicForms.js
View File

File diff suppressed because it is too large Load Diff

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

@ -5,27 +5,27 @@ import {
CCardBody, CCardBody,
CCardHeader, CCardHeader,
CCol, CCol,
CFormCheck,
CListGroup, CListGroup,
CListGroupItem, CListGroupItem,
CRow, CRow,
CTabContent,
CTabPane,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const ListGroups = () => { const ListGroups = () => {
const [activeTab, setActiveTab] = useState(1)
return ( return (
<> <CRow>
<CRow> <CCol xs={12}>
<CCol sm="12" xl="6"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React List Group</strong> <small>Basic example</small>
List group </CCardHeader>
<DocsLink name="CListGroup" /> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> The default list group is an unordered list with items and the proper CSS classes.
Build upon it with the options that follow, or with your CSS as required.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
<CListGroup> <CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -33,320 +33,312 @@ 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>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
<CCol sm="12" xl="6"> </CCol>
<CCard className="mb-4"> <CCol xs={12}>
<CCardHeader> <CCard className="mb-4">
List group links <CCardHeader>
<small> with first item active and last item disabled</small> <strong>React List Group</strong> <small>Active items</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small">
Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
show the current active selection.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#active-items">
<CListGroup> <CListGroup>
<CListGroupItem href="#" active> <CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Disabled items</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
make it appear disabled.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Links and buttons</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
<em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
<code>component="a|button"</code>. We separate these pseudo-classes to ensure list
groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
<code>&lt;div&gt;</code>
s) don't provide a click or tap affordance.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
Cras justo odio Cras justo odio
</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem component="a" href="#">
<CListGroupItem href="#">Morbi leo risus</CListGroupItem> Dapibus ac facilisis in
<CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#" disabled> <CListGroupItem component="a" href="#">
Morbi leo risus
</CListGroupItem>
<CListGroupItem component="a" href="#">
Porta ac consectetur ac
</CListGroupItem>
<CListGroupItem component="a" href="#" disabled>
Vestibulum at eros Vestibulum at eros
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CCol xs={12}>
<CRow> <CCard className="mb-4">
<CCol sm="12" xl="6"> <CCardHeader>
<CCard className="mb-4"> <strong>React List Group</strong> <small>Flush</small>
<CCardHeader> </CCardHeader>
List group <CCardBody>
<small> contextual classes</small> <p className="text-medium-emphasis small">
</CCardHeader> Add <code>flush</code> boolean property to remove some borders and rounded corners to
<CCardBody> render list group items edge-to-edge in a parent container (e.g., cards).
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Horizontal</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>layout="horizontal"</code> to change the layout of list group items from
vertical to horizontal across all breakpoints. Alternatively, choose a responsive
variant <code>.layout="horizontal-&#123;sm | md | lg | xl | xxl&#125;"</code> to make
a list group horizontal starting at that breakpoint's <code>min-width</code>.
Currently{' '}
<strong>horizontal list groups cannot be combined with flush list groups.</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#flush">
{['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
<CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
</CListGroup>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Contextual classes</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use contextual classes to style list items with a stateful background and color.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes">
<CListGroup> <CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem> {[
<CListGroupItem color="secondary"> 'primary',
This is a secondary list group item 'secondary',
</CListGroupItem> 'success',
<CListGroupItem color="success">This is a success list group item</CListGroupItem> 'danger',
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem> 'warning',
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem> 'info',
<CListGroupItem color="info">This is a info list group item</CListGroupItem> 'light',
<CListGroupItem color="light">This is a light list group item</CListGroupItem> 'dark',
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem> ].map((color, index) => (
<CListGroupItem color={color} key={index}>
A simple {color} list group item
</CListGroupItem>
))}
</CListGroup> </CListGroup>
</CCardBody> </Example>
</CCard> <p className="text-medium-emphasis small">
</CCol> Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
<CCol sm="12" xl="6"> <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
<CCard className="mb-4"> in the previous example. Also supported is the <code>active</code> state; apply it to
<CCardHeader> indicate an active selection on a contextual list group item.
List group </p>
<small> contextual classes with .action</small> <Example href="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes">
</CCardHeader>
<CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem component="a" href="#">
<CListGroupItem component="button" color="primary"> Dapibus ac facilisis in
This is a primary list group item
</CListGroupItem>
<CListGroupItem component="button" color="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem component="button" color="success">
This is a success list group item
</CListGroupItem>
<CListGroupItem component="button" color="danger">
This is a danger list group item
</CListGroupItem>
<CListGroupItem component="button" color="warning">
This is a warning list group item
</CListGroupItem>
<CListGroupItem component="button" color="info">
This is a info list group item
</CListGroupItem>
<CListGroupItem component="button" color="light">
This is a light list group item
</CListGroupItem>
<CListGroupItem component="button" color="dark">
This is a dark list group item
</CListGroupItem> </CListGroupItem>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CListGroupItem component="a" href="#" color={color} key={index}>
A simple {color} list group item
</CListGroupItem>
))}
</CListGroup> </CListGroup>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CRow> <CCol xs={12}>
<CCol sm="12" xl="6"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React List Group</strong> <small>With badges</small>
List group </CCardHeader>
<small> accent</small> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> Add badges to any list group item to show unread counts, activity, and more.
<CListGroup accent> </p>
<CListGroupItem accent="primary">This is a primary list group item</CListGroupItem> <Example href="https://coreui.io/react/docs/4.0/components/list-group/#with-badges">
<CListGroupItem accent="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem accent="success">This is a success list group item</CListGroupItem>
<CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem accent="info">This is a info list group item</CListGroupItem>
<CListGroupItem accent="light">This is a light list group item</CListGroupItem>
<CListGroupItem accent="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> accent with color</small>
</CCardHeader>
<CCardBody>
<CListGroup accent>
<CListGroupItem accent="primary" color="primary">
This is a primary list group item
</CListGroupItem>
<CListGroupItem accent="secondary" color="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem accent="success" color="success">
This is a success list group item
</CListGroupItem>
<CListGroupItem accent="danger" color="danger">
This is a danger list group item
</CListGroupItem>
<CListGroupItem accent="warning" color="warning">
This is a warning list group item
</CListGroupItem>
<CListGroupItem accent="info" color="info">
This is a info list group item
</CListGroupItem>
<CListGroupItem accent="light" color="light">
This is a light list group item
</CListGroupItem>
<CListGroupItem accent="dark" color="dark">
This is a dark list group item
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="d-flex justify-content-between align-items-center">
Cras justo odio Cras justo odio
<CBadge className="float-end" shape="rounded-pill" color="primary"> <CBadge color="primary" shape="rounded-pill">
14 14
</CBadge> </CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in Dapibus ac facilisis in
<CBadge className="float-end" shape="rounded-pill" color="primary"> <CBadge color="primary" shape="rounded-pill">
2 2
</CBadge> </CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="d-flex justify-content-between align-items-center">
Morbi leo risus Morbi leo risus
<CBadge className="float-end" shape="rounded-pill" color="primary"> <CBadge color="primary" shape="rounded-pill">
1 1
</CBadge> </CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
<CCol sm="12" xl="6"> </CCol>
<CCard className="mb-4"> <CCol xs={12}>
<CCardHeader> <CCard className="mb-4">
List group <CCardHeader>
<small> custom content</small> <strong>React List Group</strong> <small>Custom content</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small">
Add nearly any HTML within, even for linked list groups like the one below, with the
help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#custom-content">
<CListGroup> <CListGroup>
<CListGroupItem component="a" active> <CListGroupItem component="a" href="#" active>
<h5 className="d-flex w-100 justify-content-between"> <div className="d-flex w-100 justify-content-between">
List group item heading <h5 className="mb-1">List group item heading</h5>
<small>3 days ago</small> <small>3 days ago</small>
</h5> </div>
<div className="mb-1"> <p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit. varius blandit.
<small>Donec id elit non mi porta.</small> </p>
</div> <small>Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a"> <CListGroupItem component="a" href="#">
<h5>List group item heading</h5> <div className="d-flex w-100 justify-content-between">
<div> <h5 className="mb-1">List group item heading</h5>
<small className="text-muted">3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit. varius blandit.
</div> </p>
<small>Small.</small> <small className="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem component="a"> <CListGroupItem component="a" href="#">
<h5>List group item heading</h5> <div className="d-flex w-100 justify-content-between">
<div> <h5 className="mb-1">List group item heading</h5>
<small className="text-muted">3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit. varius blandit.
</div> </p>
<small>Small.</small> <small className="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CRow> <CCol xs={12}>
<CCol xs> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React List Group</strong> <small>Checkboxes and radios</small>
List group </CCardHeader>
<small> tab Javascript plugin</small> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> Place CoreUI's checkboxes and radios within list group items and customize as needed.
<CRow> </p>
<CCol xs="4"> <Example href="https://coreui.io/react/docs/4.0/components/list-group/#checkboxes-and-radios">
<CListGroup id="list-tab" role="tablist"> <CListGroup>
<CListGroupItem <CListGroupItem>
onClick={() => setActiveTab(0)} <CFormCheck label="Cras justo odio" />
component="button" </CListGroupItem>
active={activeTab === 0} <CListGroupItem>
> <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
Home </CListGroupItem>
</CListGroupItem> <CListGroupItem>
<CListGroupItem <CFormCheck label="Morbi leo risus" defaultChecked />
onClick={() => setActiveTab(1)} </CListGroupItem>
component="button" <CListGroupItem>
active={activeTab === 1} <CFormCheck label="orta ac consectetur ac" />
> </CListGroupItem>
Profile <CListGroupItem>
</CListGroupItem> <CFormCheck label="Vestibulum at eros" />
<CListGroupItem </CListGroupItem>
onClick={() => setActiveTab(2)} </CListGroup>
component="button" </Example>
active={activeTab === 2} </CCardBody>
> </CCard>
Messages </CCol>
</CListGroupItem> </CRow>
<CListGroupItem
onClick={() => setActiveTab(3)}
component="button"
active={activeTab === 3}
>
Settings
</CListGroupItem>
</CListGroup>
</CCol>
<CCol xs="8">
<CTabContent>
<CTabPane visible={activeTab === 0}>
<p>
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing
exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat
proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat
aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor.
Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam
minim.
</p>
</CTabPane>
<CTabPane visible={activeTab === 1}>
<p>
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore
sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt
laboris deserunt anim aute dolor incididunt veniam aute dolore do
exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris
ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt
veniam ad.
</p>
</CTabPane>
<CTabPane visible={activeTab === 2}>
<p>
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet
cupidatat cupidatat anim do ut velit mollit consequat enim tempor.
Consectetur est minim nostrud nostrud consectetur irure labore voluptate
irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod
aliquip nulla laborum elit adipisicing pariatur cillum.
</p>
</CTabPane>
<CTabPane visible={activeTab === 3}>
<p>
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat
laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua
labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation
irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet
qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt
dolor eiusmod eu pariatur culpa mollit in irure.
</p>
</CTabPane>
</CTabContent>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
) )
} }

527
src/views/base/navs/Navs.js
View File

@ -13,301 +13,384 @@ import {
CNavItem, CNavItem,
CNavLink, CNavLink,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Navs = () => { const Navs = () => {
return ( return (
<> <CRow>
<CRow> <CCol xs={12}>
<CCol xs="6"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React Navs</strong> <small>Base navs</small>
Navs </CCardHeader>
<DocsLink name="CNav" /> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> The base <code>.nav</code> component is built with flexbox and provide a strong
<small>List Based</small> foundation for building all types of navigation components. It includes some style
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink active>Active</CNavLink> <CNavLink href="#" active>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
<hr /> </Example>
<small>Link Based</small> <p className="text-medium-emphasis small">
<CNav> Classes are used throughout, so your markup can be super flexible. Use{' '}
<CNavLink>Active</CNavLink> <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
<CNavLink>Link</CNavLink> items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
<CNavLink>Link</CNavLink> the .nav uses display: flex, the nav links behave the same as nav items would, but
<CNavLink disabled>Disabled</CNavLink> without the extra markup.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNav> </CNav>
<hr /> </Example>
<small>Link Base</small> </CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Horizontal alignment</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Change the horizontal alignment of your nav with{' '}
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
</a>
. By default, navs are left-aligned, but you can easily change them to center or right
aligned.
</p>
<p className="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#horizontal-alignment">
<CNav className="justify-content-center"> <CNav className="justify-content-center">
<CNavLink>Active</CNavLink> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#" active>
<CNavLink>Link</CNavLink> Active
<CNavLink disabled>Disabled</CNavLink> </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav> </CNav>
<hr /> </Example>
<small>Link Based</small> <p className="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<CNav className="justify-content-end"> <CNav className="justify-content-end">
<CNavLink>Active</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink disabled>Disabled</CNavLink>
</CNav>
</CCardBody>
</CCard>
</CCol>
<CCol xs="3">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> vertical / links</small>
</CCardHeader>
<CCardBody>
<CNav vertical>
<CNavLink className="nav-item">Active</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink disabled>Disabled</CNavLink>
</CNav>
</CCardBody>
</CCard>
</CCol>
<CCol xs="3">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> vertical / list</small>
</CCardHeader>
<CCardBody>
<CNav vertical>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#" active>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Another Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Disabled Link</CNavLink> <CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CCol xs={12}>
<CRow> <CCard className="mb-4">
<CCol xs="6"> <CCardHeader>
<CCard className="mb-4"> <strong>React Navs</strong> <small>Vertical</small>
<CCardHeader> </CCardHeader>
Navs <CCardBody>
<small> tabs</small> <p className="text-medium-emphasis small">
</CCardHeader> Stack your navigation by changing the flex item direction with the{' '}
<CCardBody> <code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#vertical">
<CNav className="flex-column">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Tabs</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant="tabs"</code> class to
generate a tabbed interface
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavLink active>Active</CNavLink> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#" active>
<CNavLink>Link</CNavLink> Active
<CNavLink disabled>Disabled</CNavLink> </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav> </CNav>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
<CCol xs="6"> </CCol>
<CCard className="mb-4"> <CCol xs={12}>
<CCardHeader> <CCard className="mb-4">
Navs <CCardHeader>
<small> pills</small> <strong>React Navs</strong> <small>Pills</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small">
Take that same HTML, but use <code>variant="pills"</code> instead:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#pills">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink active>Link</CNavLink> <CNavLink href="#" active>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Disabled</CNavLink> <CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CRow> <CCol xs={12}>
<CCol xs="12"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React Navs</strong> <small>Fill and justify</small>
Navs </CCardHeader>
<small> fill and justify</small> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> Force your <code>.nav</code>'s contents to extend the full available width one of two
<CNav fill variant="pills"> modifier classes. To proportionately fill all available space with your{' '}
<code>.nav-item</code>s, use <code>layout="fill"</code>. Notice that all horizontal
space is occupied, but not every nav item has the same width.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem> <CNavItem>
<CNavLink active>Active</CNavLink> <CNavLink href="#" active>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Longer nav link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Disabled</CNavLink> <CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</Example>
<hr /> <p className="text-medium-emphasis small">
For equal-width elements, use <code>layout="justified"</code>. All horizontal space
<CNav fill variant="pills"> will be occupied by nav links, but unlike the .nav-fill above, every nav item will be
<CNavLink active className="nav-item"> the same width.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Working with flex utilities</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{' '}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
verbose, these utilities offer greater customization across responsive breakpoints. In
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" className="flex-column flex-sm-row">
<CNavLink href="#" active>
Active Active
</CNavLink> </CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink className="nav-item">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink className="nav-item" disabled> <CNavLink href="#" disabled>
Disabled Disabled
</CNavLink> </CNavLink>
</CNav> </CNav>
</Example>
<hr /> </CCardBody>
</CCard>
<CNav justified variant="pills"> </CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/nav#tabs-with-dropdowns">
<CNav>
<CNavItem> <CNavItem>
<CNavLink active>Active</CNavLink> <CNavLink href="#" active>
</CNavItem> Active
<CNavItem> </CNavLink>
<CNavLink>Longer nav link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled</CNavLink>
</CNavItem>
</CNav>
<hr />
<CNav justified variant="pills">
<CNavLink className="nav-item" active>
Active
</CNavLink>
<CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item" disabled>
Disabled
</CNavLink>
</CNav>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> with flex</small>
</CCardHeader>
<CCardBody>
<CNav variant="pills" className="flex-sm-row">
<CNavLink className="flex-sm-fill text-sm-center" active>
Active
</CNavLink>
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
<CNavLink className="flex-sm-fill text-sm-center" disabled>
Disabled
</CNavLink>
</CNav>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="6">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<CNav variant="tabs">
<CNavItem>
<CNavLink active>Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem> <CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem>Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Disabled</CNavLink> <CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CCol>
<CCol xs="6"> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs <strong>React Navs</strong> <small>Pills with dropdowns</small>
<small> pills with dropdowns</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <Example href="https://coreui.io/react/docs/4.0/components/nav#pills-with-dropdowns">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink active>Link</CNavLink> <CNavLink href="#" active>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle> <CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem> <CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem>Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink>Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink disabled>Disabled</CNavLink> <CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
</> </CRow>
) )
} }

174
src/views/base/paginations/Paginations.js Normal file
View File

@ -0,0 +1,174 @@
import React from 'react'
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CPagination,
CPaginationItem,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const Paginations = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Pagination</strong>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
We use a large block of connected links for our pagination, making links hard to miss
and easily scalable—all while providing large hit areas. Pagination is built with list
HTML elements so screen readers can announce the number of available links. Use a
wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to
screen readers and other assistive technologies.
</p>
<p className="text-medium-emphasis small">
In addition, as pages likely have more than one such navigation section, it's
advisable to provide a descriptive <code>aria-label</code> for the{' '}
<code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
component is used to navigate between a set of search results, an appropriate label
could be <code>aria-label="Search results pages"</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination">
<CPagination ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Pagination</strong> <small>Working with icons</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Looking to use an icon or symbol in place of text for some pagination links? Be sure
to provide proper screen reader support with <code>aria</code> attributes.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#working-with-icons">
<CPagination ariaLabel="Page navigation example">
<CPaginationItem ariaLabel="Previous">
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Pagination</strong> <small>Disabled and active states</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Pagination links are customizable for different circumstances. Use{' '}
<code>disabled</code> for links that appear un-clickable and <code>.active</code> to
indicate the current page.
</p>
<p className="text-medium-emphasis small">
While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '}
<em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
property is not yet standardized and doesn't account for keyboard navigation. As such,
we always add <code>tabindex="-1"</code> on disabled links and use custom JavaScript
to fully disable their functionality.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#disabled-and-active-states">
<CPagination ariaLabel="Page navigation example">
<CPaginationItem ariaLabel="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem active>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Pagination</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Fancy larger or smaller pagination? Add <code>size="lg"</code> or{' '}
<code>size="sm"</code> for additional sizes.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<CPagination size="lg" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<CPagination size="sm" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Pagination</strong> <small>Alignment</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Change the alignment of pagination components with{' '}
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<CPagination className="justify-content-center" ariaLabel="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<CPagination className="justify-content-end" ariaLabel="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Paginations

119
src/views/base/paginations/Pagnations.js
View File

@ -1,119 +0,0 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Paginations = () => {
return (
<>
<CCard className="mb-4">
<CCardHeader>
Pagination
<DocsLink name="CPagination" />
</CCardHeader>
<CCardBody>
<CPagination>
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>with icons</small>
</CCardHeader>
<CCardBody>
<CPagination>
<CPaginationItem aria-label="previous">
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem aria-label="next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>with icons</small>
</CCardHeader>
<CCardBody>
<CPagination ariaLabel="Page navigation example">
<CPaginationItem ariaLabel="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem active>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>sizing</small>
</CCardHeader>
<CCardBody>
<CPagination size="lg" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
<hr />
<CPagination size="sm" ariaLabel="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Pagination
<small>alignment</small>
</CCardHeader>
<CCardBody>
<CPagination className="justify-content-start" ariaLabel="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
<hr />
<CPagination className="justify-content-center" ariaLabel="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
<hr />
<CPagination className="justify-content-end" ariaLabel="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</CCardBody>
</CCard>
</>
)
}
export default Paginations

144
src/views/base/popovers/Popovers.js
View File

@ -1,90 +1,70 @@
import React from 'react' import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react' import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Popovers = () => { const Popovers = () => {
const placements = [
'top-start',
'top',
'top-end',
'bottom-start',
'bottom',
'bottom-end',
'right-start',
'right',
'right-end',
'left-start',
'left',
'left-end',
]
return ( return (
<> <CRow>
<CCard className="mb-4"> <CCol xs={12}>
<CCardHeader> <CCard className="mb-4">
Popovers <CCardHeader>
<DocsLink name="CPopover" /> <strong>React Popover</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
{/*eslint-disable-next-line*/} <Example href="https://coreui.io/react/docs/4.0/components/popover">
<CPopover
<p className="text-muted">Hover over the links below to see popover:</p> title="Popover title"
content="And here’s some amazing content. It’s very engaging. Right?"
<p className="muted"> placement="end"
Tight pants next level keffiyeh >
<CPopover title="Popover header" content="Popover text"> <CButton color="danger" size="lg">
<CLink> you probably </CLink> Click to toggle popover
</CPopover> </CButton>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag </CPopover>
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american </Example>
apparel </CCardBody>
<CPopover title="Popover header" content="Popover text"> </CCard>
<CLink> have a </CLink> </CCol>
</CPopover> <CCol xs={12}>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. <CCard className="mb-4">
Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A <CCardHeader>
really ironic artisan <strong>React Popover</strong> <small>Four directions</small>
<CPopover title="Popover header" content="Popover text"> </CCardHeader>
<CLink> whatever keytar </CLink> <CCardBody>
</CPopover> <p className="text-medium-emphasis small">
scenester farm-to-table banksy Austin Four options are available: top, right, bottom, and left aligned. Directions are
<CPopover title="Popover header" content="Popover text"> mirrored when using CoreUI for React in RTL.
<CLink> twitter handle </CLink> </p>
</CPopover> <Example href="https://coreui.io/react/docs/4.0/components/popover#four-directions">
freegan cred raw denim single-origin coffee viral. <CPopover
</p> content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
</CCardBody> placement="top"
</CCard> >
<CButton color="secondary">Popover on top</CButton>
<hr /> </CPopover>
<CPopover
<CCard className="mb-4"> content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
<CCardHeader> placement="end"
Popovers >
<small> placement</small> <CButton color="secondary">Popover on right</CButton>
</CCardHeader> </CPopover>
<CCardBody> <CPopover
<div className="my-3"> content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
<CRow> placement="bottom"
{placements.map((placement) => { >
return ( <CButton color="secondary">Popover on bottom</CButton>
<CCol md="4" className="py-4 text-center" key={placement}> </CPopover>
<CPopover <CPopover
title="Popover header" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
content={`Popover with placement: ${placement}`} placement="start"
placement={placement} >
trigger="click" <CButton color="secondary">Popover on left</CButton>
> </CPopover>
<CButton color="primary">{placement}</CButton> </Example>
</CPopover> </CCardBody>
</CCol> </CCard>
) </CCol>
})} </CRow>
</CRow>
</div>
</CCardBody>
</CCard>
</>
) )
} }

93
src/views/base/progress-bar/ProgressBar.js
View File

@ -1,93 +0,0 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CProgress, CProgressBar } from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ProgressBar = () => {
return (
<>
<CCard className="mb-4">
<CCardHeader>
Progress
<DocsLink name="CProgressBar" />
</CCardHeader>
<CCardBody>
<CProgress className="mb-3" />
<CProgress value={25} className="mb-3" />
<CProgress value={50} className="mb-3" />
<CProgress value={75} className="mb-3" />
<CProgress value={100} className="mb-3" />
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> labels</small>
</CCardHeader>
<CCardBody>
<CProgress value={25.3746472} className="mb-3" />
<CProgress value={50.45} className="mb-3" />
<CProgress value={15} max={20} className="mb-3" />
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> heights</small>
</CCardHeader>
<CCardBody>
<CProgress value={25} className="mb-3" height="3" />
<CProgress value={25} className="mb-3" height="30" />
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> backgrounds</small>
</CCardHeader>
<CCardBody>
<CProgress color="success" value="25" className="mb-3" />
<CProgress color="info" value={50} className="mb-3" />
<CProgress color="warning" value={75} className="mb-3" />
<CProgress color="danger" value="100" className="mb-3" />
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> multiple bar</small>
</CCardHeader>
<CCardBody>
<CProgress size="xs">
<CProgressBar value={10} />
<CProgressBar color="success" value={30} />
<CProgressBar color="danger" value={20} />
</CProgress>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> striped</small>
</CCardHeader>
<CCardBody>
<CProgress striped value={2 * 5} className="mb-3" />
<CProgress striped color="success" value={25} className="mb-3" />
<CProgress striped color="info" value={50} className="mb-3" />
<CProgress striped color="warning" value={75} className="mb-3" />
<CProgress striped color="danger" value={100} className="mb-3" />
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Progress
<small> animated</small>
</CCardHeader>
<CCardBody>
<CProgress animated value={75} className="mb-3" />
</CCardBody>
</CCard>
</>
)
}
export default ProgressBar

186
src/views/base/progress/Progress.js Normal file
View File

@ -0,0 +1,186 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
const Progress = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Progress components are built with two HTML elements, some CSS to set the width, and a
few attributes. We don't use{' '}
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
the HTML5 <code>&lt;progress&gt;</code> element
</a>
, ensuring you can stack progress bars, animate them, and place text labels over them.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress">
<CProgress className="mb-3">
<CProgressBar value="0" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar value="25" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar value="50" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar value="75" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Labels</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add labels to your progress bars by placing text within the{' '}
<code>&lt;CProgressBar&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#labels">
<CProgress className="mb-3">
<CProgressBar value="25">25%</CProgressBar>
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Height</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if
you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
resize accordingly.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#height">
<CProgress height="1" className="mb-3">
<CProgressBar value="25"></CProgressBar>
</CProgress>
<CProgress height="20" className="mb-3">
<CProgressBar value="25"></CProgressBar>
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Backgrounds</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use <code>color</code> prop to change the appearance of individual progress bars.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#backgrounds">
<CProgress className="mb-3">
<CProgressBar color="success" value="25" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="info" value="50" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="warning" value="75" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="danger" value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Multiple bars</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars">
<CProgress className="mb-3">
<CProgressBar value="15" />
<CProgressBar color="success" value="30" />
<CProgressBar color="info" value="20" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Striped</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>variant="striped"</code> to any <code>&lt;CProgressBar&gt;</code> to apply a
stripe via CSS gradient over the progress bar's background color.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#striped">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" value="25" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="info" variant="striped" value="50" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="warning" variant="striped" value="75" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Progress</strong> <small>Animated stripes</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
The striped gradient can also be animated. Add <code>animated</code> property to{' '}
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
animations.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes">
<CProgress className="mb-3">
<CProgressBar color="success" variant="striped" animated value="25" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="info" variant="striped" animated value="50" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="warning" variant="striped" animated value="75" />
</CProgress>
<CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" animated value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Progress

48
src/views/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, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const ChecksRadios = () => { const ChecksRadios = () => {
return ( return (
@ -24,10 +24,10 @@ const ChecksRadios = () => {
<strong>React Checkbox</strong> <small>Disabled</small> <strong>React Checkbox</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> attribute and the associated{' '} Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
<code class="css-0">&lt;label&gt;</code>s are automatically styled to match with a are automatically styled to match with a lighter color to help indicate the input's
lighter color to help indicate the input's state. state.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled /> <CFormCheck label="Disabled checkbox" disabled />
@ -42,10 +42,10 @@ const ChecksRadios = () => {
<strong>React Radio</strong> <strong>React Radio</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> attribute and the associated{' '} Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
<code class="css-0">&lt;label&gt;</code>s are automatically styled to match with a are automatically styled to match with a lighter color to help indicate the input's
lighter color to help indicate the input's state. state.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios">
<CFormCheck <CFormCheck
@ -97,10 +97,10 @@ const ChecksRadios = () => {
<strong>React Switches</strong> <strong>React Switches</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
A switch has the markup of a custom checkbox but uses the{' '} A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
<code class="css-0">switch</code> boolean properly to render a toggle switch. Switches properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
also support the <code class="css-0">disabled</code> attribute. attribute.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches">
<CFormCheck <CFormCheck
@ -165,7 +165,7 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Default layout (stacked)</small> <strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>
@ -207,10 +207,9 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Inline</small> <strong>React Checks and Radios</strong> <small>Inline</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Group checkboxes or radios on the same horizontal row by adding{' '} Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
<code class="css-0">inline</code> boolean property to any{' '} boolean property to any <code>&lt;CFormCheck&gt;</code>.
<code class="css-0">&lt;CFormCheck&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" /> <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
@ -259,9 +258,9 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Without labels</small> <strong>React Checks and Radios</strong> <small>Without labels</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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 class="css-0">aria-label</code>). instance, using <code>aria-label</code>).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels">
<div> <div>
@ -286,10 +285,9 @@ const ChecksRadios = () => {
<strong>Toggle buttons</strong> <strong>Toggle buttons</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create button-like checkboxes and radio buttons by using{' '} Create button-like checkboxes and radio buttons by using <code>button</code> boolean
<code class="css-0">button</code> boolean property on the{' '} property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
<code class="css-0">&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed. further be grouped in a button group if needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
@ -349,7 +347,7 @@ const ChecksRadios = () => {
/> />
</Example> </Example>
<h3>Outlined styles</h3> <h3>Outlined styles</h3>
<p class="css-0"> <p className="text-medium-emphasis small">
Different variants of button, such at the various outlined styles, are supported. Different variants of button, such at the various outlined styles, are supported.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">

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

@ -10,7 +10,7 @@ import {
CFormLabel, CFormLabel,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const FormControl = () => { const FormControl = () => {
return ( return (
@ -50,9 +50,9 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Sizing</small> <strong>React Form Control</strong> <small>Sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Set heights using <code class="css-0">size</code> property like{' '} Set heights using <code>size</code> property like <code>size="lg"</code> and{' '}
<code class="css-0">size="lg"</code> and <code class="css-0">size="sm"</code>. <code>size="sm"</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing">
<CFormControl <CFormControl
@ -84,9 +84,9 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Disabled</small> <strong>React Form Control</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
grayed out appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#disabled"> <Example href="https://coreui.io/react/docs/4.0/forms/form-control#disabled">
<CFormControl <CFormControl
@ -114,10 +114,10 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Readonly</small> <strong>React Form Control</strong> <small>Readonly</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code class="css-0">readOnly</code> boolean attribute on an input to prevent Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
modification of the input's value. Read-only inputs appear lighter (just like disabled the input's value. Read-only inputs appear lighter (just like disabled inputs), but
inputs), but retain the standard cursor. retain the standard cursor.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly"> <Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly">
<CFormControl <CFormControl
@ -136,11 +136,10 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Readonly plain text</small> <strong>React Form Control</strong> <small>Readonly plain text</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
If you want to have <code class="css-0">&lt;input readonly&gt;</code> elements in your If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled
form styled as plain text, use the <code class="css-0">plainText</code> boolean as plain text, use the <code>plainText</code> boolean property to remove the default
property to remove the default form field styling and preserve the correct margin and form field styling and preserve the correct margin and padding.
padding.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="https://coreui.io/react/docs/4.0/components/accordion">
<CRow className="mb-3"> <CRow className="mb-3">
@ -167,8 +166,8 @@ const FormControl = () => {
</CRow> </CRow>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/accordion"> <Example href="https://coreui.io/react/docs/4.0/components/accordion">
<CForm class="row g-3"> <CForm className="row g-3">
<div class="col-auto"> <div className="col-auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden"> <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
Email Email
</CFormLabel> </CFormLabel>
@ -180,13 +179,13 @@ const FormControl = () => {
plainText plainText
/> />
</div> </div>
<div class="col-auto"> <div className="col-auto">
<CFormLabel htmlFor="inputPassword2" className="visually-hidden"> <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
Password Password
</CFormLabel> </CFormLabel>
<CFormControl type="password" id="inputPassword2" placeholder="Password" /> <CFormControl type="password" id="inputPassword2" placeholder="Password" />
</div> </div>
<div class="col-auto"> <div className="col-auto">
<CButton type="submit" className="mb-3"> <CButton type="submit" className="mb-3">
Confirm identity Confirm identity
</CButton> </CButton>
@ -203,19 +202,19 @@ const FormControl = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#file-input"> <Example href="https://coreui.io/react/docs/4.0/forms/form-control#file-input">
<div class="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel> <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
<CFormControl type="file" id="formFile" /> <CFormControl type="file" id="formFile" />
</div> </div>
<div class="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel> <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
<CFormControl type="file" id="formFileMultiple" multiple /> <CFormControl type="file" id="formFileMultiple" multiple />
</div> </div>
<div class="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel> <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
<CFormControl type="file" id="formFileDisabled" disabled /> <CFormControl type="file" id="formFileDisabled" disabled />
</div> </div>
<div class="mb-3"> <div className="mb-3">
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel> <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
<CFormControl type="file" size="sm" id="formFileSm" /> <CFormControl type="file" size="sm" id="formFileSm" />
</div> </div>

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

@ -18,7 +18,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Select = () => { const Select = () => {
return ( return (
@ -29,10 +29,10 @@ const Select = () => {
<strong>React Input group</strong> <small>Basic example</small> <strong>React Input group</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Place one add-on or button on either side of an input. You may also place one on both Place one add-on or button on either side of an input. You may also place one on both
sides of an input. Remember to place <code class="css-0">&lt;CFormLabel&gt;</code>s sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
outside the input group. input group.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
@ -80,10 +80,10 @@ const Select = () => {
<strong>React Input group</strong> <small>Wrapping</small> <strong>React Input group</strong> <small>Wrapping</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Input groups wrap by default via <code class="css-0">flex-wrap: wrap</code> in order Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
to accommodate custom form field validation within an input group. You may disable custom form field validation within an input group. You may disable this with{' '}
this with <code class="css-0">.flex-nowrap</code>. <code>.flex-nowrap</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#wrapping"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#wrapping">
<CInputGroup className="flex-nowrap"> <CInputGroup className="flex-nowrap">
@ -104,16 +104,13 @@ const Select = () => {
<strong>React Input group</strong> <small>Sizing</small> <strong>React Input group</strong> <small>Sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the relative form sizing classes to the{' '} Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
<code class="css-0">&lt;CInputGroup&gt;</code> itself and contents within will and contents within will automatically resize—no need for repeating the form control
automatically resize—no need for repeating the form control size classes on each size classes on each element.
element.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<strong class="css-0"> <strong>Sizing on the individual input group elements isn't supported.</strong>
Sizing on the individual input group elements isn't supported.
</strong>
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#sizing">
<CInputGroup size="sm" className="mb-3"> <CInputGroup size="sm" className="mb-3">
@ -147,7 +144,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Checkboxes and radios</small> <strong>React Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Place any checkbox or radio option within an input group's addon instead of text. Place any checkbox or radio option within an input group's addon instead of text.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#checkboxes-and-radios"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#checkboxes-and-radios">
@ -181,10 +178,10 @@ const Select = () => {
<strong>React Input group</strong> <small>Multiple inputs</small> <strong>React Input group</strong> <small>Multiple inputs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
While multiple <code class="css-0">&lt;CFormControl&gt;</code>s are supported While multiple <code>&lt;CFormControl&gt;</code>s are supported visually, validation
visually, validation styles are only available for input groups with a single{' '} styles are only available for input groups with a single{' '}
<code class="css-0">&lt;CFormControl&gt;</code>. <code>&lt;CFormControl&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-inputs"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-inputs">
<CInputGroup> <CInputGroup>
@ -202,7 +199,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Multiple addons</small> <strong>React Input group</strong> <small>Multiple addons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>
@ -227,7 +224,7 @@ const Select = () => {
<strong>React Input group</strong> <small>Button addons</small> <strong>React Input group</strong> <small>Button addons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>

81
src/views/forms/layout/Layout.js
View File

@ -14,7 +14,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Layout = () => { const Layout = () => {
return ( return (
@ -25,7 +25,7 @@ const Layout = () => {
<strong>Layout</strong> <small>Form grid</small> <strong>Layout</strong> <small>Form grid</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>
@ -48,11 +48,8 @@ const Layout = () => {
<strong>Layout</strong> <small>Gutters</small> <strong>Layout</strong> <small>Gutters</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
By adding{' '} By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
<a href="https://coreui.io/docs/layout/gutters/" class="css-0">
gutter modifier classes
</a>
, you can have control over the gutter width in as well the inline as block direction. , you can have control over the gutter width in as well the inline as block direction.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
@ -65,7 +62,7 @@ const Layout = () => {
</CCol> </CCol>
</CRow> </CRow>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
More complex layouts can also be created with the grid system. More complex layouts can also be created with the grid system.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
@ -118,19 +115,17 @@ const Layout = () => {
<strong>Layout</strong> <small>Horizontal form</small> <strong>Layout</strong> <small>Horizontal form</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create horizontal forms with the grid by adding the <code class="css-0">.row</code>{' '} Create horizontal forms with the grid by adding the <code>.row</code> class to form
class to form groups and using the <code class="css-0">.col-*-*</code> classes to groups and using the <code>.col-*-*</code> classes to specify the width of your labels
specify the width of your labels and controls. Be sure to add{' '} and controls. Be sure to add <code>.col-form-label</code> to your{' '}
<code class="css-0">.col-form-label</code> to your{' '} <code>&lt;CFormLabel&gt;</code>s as well so they're vertically centered with their
<code class="css-0">&lt;CFormLabel&gt;</code>s as well so they're vertically centered associated form controls.
with their associated form controls.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
At times, you maybe need to use margin or padding utilities to create that perfect At times, you maybe need to use margin or padding utilities to create that perfect
alignment you need. For example, we've removed the{' '} alignment you need. For example, we've removed the <code>padding-top</code> on our
<code class="css-0">padding-top</code> on our stacked radio inputs label to better stacked radio inputs label to better align the text baseline.
align the text baseline.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form">
<CForm> <CForm>
@ -195,13 +190,10 @@ const Layout = () => {
<strong>Layout</strong> <small>Horizontal form label sizing</small> <strong>Layout</strong> <small>Horizontal form label sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Be sure to use <code class="css-0">.col-form-label-sm</code> or{' '} Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
<code class="css-0">.col-form-label-lg</code> to your{' '} your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
<code class="css-0">&lt;CFormLabel&gt;</code>s or{' '} follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
<code class="css-0">&lt;legend&gt;</code>s to correctly follow the size of{' '}
<code class="css-0">.form-control-lg</code> and{' '}
<code class="css-0">.form-control-sm</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form-label-sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form-label-sizing">
<CRow className="mb-3"> <CRow className="mb-3">
@ -254,14 +246,12 @@ const Layout = () => {
<strong>Layout</strong> <small>Column sizing</small> <strong>Layout</strong> <small>Column sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
As shown in the previous examples, our grid system allows you to place any number of{' '} As shown in the previous examples, our grid system allows you to place any number of{' '}
<code class="css-0">&lt;CCol&gt;</code>s within a{' '} <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They'll split the
<code class="css-0">&lt;CRow&gt;</code>. They'll split the available width equally available width equally between them. You may also pick a subset of your columns to
between them. You may also pick a subset of your columns to take up more or less take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally
space, while the remaining <code class="css-0">&lt;CCol&gt;</code>s equally split the split the rest, with specific column classes like <code>&lt;CCol sm="7"&gt;</code>.
rest, with specific column classes like <code class="css-0">&lt;CCol sm="7"&gt;</code>
.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing">
<CRow className="g-3"> <CRow className="g-3">
@ -285,11 +275,11 @@ const Layout = () => {
<strong>Layout</strong> <small>Auto-sizing</small> <strong>Layout</strong> <small>Auto-sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
The example below uses a flexbox utility to vertically center the contents and changes{' '} The example below uses a flexbox utility to vertically center the contents and changes{' '}
<code class="css-0">&lt;CCol&gt;</code> to{' '} <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs="auto"&gt;</code> so that your columns
<code class="css-0">&lt;CCol xs="auto"&gt;</code> so that your columns only take up as only take up as much space as needed. Put another way, the column sizes itself based
much space as needed. Put another way, the column sizes itself based on the contents. on the contents.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
<CForm className="row gy-2 gx-3 align-items-center"> <CForm className="row gy-2 gx-3 align-items-center">
@ -327,7 +317,7 @@ const Layout = () => {
</CCol> </CCol>
</CForm> </CForm>
</Example> </Example>
<p class="css-0"> <p className="text-medium-emphasis small">
You can then remix that once again with size-specific column classes. You can then remix that once again with size-specific column classes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
@ -375,15 +365,12 @@ const Layout = () => {
<strong>Layout</strong> <small>Inline forms</small> <strong>Layout</strong> <small>Inline forms</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Use the <code class="css-0">&lt;CCol xs="auto"&gt;</code> class to create horizontal Use the <code>&lt;CCol xs="auto"&gt;</code> class to create horizontal layouts. By
layouts. By adding{' '} adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>,
<a href="https://coreui.io/docs/layout/gutters/" class="css-0"> we will have gutters in horizontal and vertical directions. The{' '}
gutter modifier classes <code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
</a> <code>&lt;CFormCheck&gt;</code> align properly.
, we will have gutters in horizontal and vertical directions. The{' '}
<code class="css-0">.align-items-center</code> aligns the form elements to the middle,
making the <code class="css-0">&lt;CFormCheck&gt;</code> align properly.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#inline-forms"> <Example href="https://coreui.io/react/docs/4.0/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">

30
src/views/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 { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Range = () => { const Range = () => {
return ( return (
@ -11,9 +11,9 @@ const Range = () => {
<strong>React Range</strong> <small></small> <strong>React Range</strong> <small></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Create custom <code class="css-0">&lt;input type="range"&gt;</code> controls with{' '} Create custom <code>&lt;input type="range"&gt;</code> controls with{' '}
<code class="css-0">&lt;CFormControl&gt;</code>. <code>&lt;CFormControl&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range"> <Example href="https://coreui.io/react/docs/4.0/forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel> <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
@ -28,9 +28,9 @@ const Range = () => {
<strong>React Range</strong> <small>Disabled</small> <strong>React Range</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
grayed out appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#disabled"> <Example href="https://coreui.io/react/docs/4.0/forms/range#disabled">
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel> <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
@ -45,12 +45,10 @@ const Range = () => {
<strong>React Range</strong> <small>Min and max</small> <strong>React Range</strong> <small>Min and max</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Range inputs have implicit values for <code class="css-0">min</code> and{' '} Range inputs have implicit values for <code>min</code> and <code>max</code>—
<code class="css-0">max</code>—<code class="css-0">0</code> and{' '} <code>0</code> and <code>100</code>, respectively. You may specify new values for
<code class="css-0">100</code>, respectively. You may specify new values for those those using the <code>min</code> and <code>max</code> attributes.
using the <code class="css-0">min</code> and <code class="css-0">max</code>{' '}
attributes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#min-and-max"> <Example href="https://coreui.io/react/docs/4.0/forms/range#min-and-max">
<CFormLabel htmlFor="customRange2">Example range</CFormLabel> <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
@ -65,10 +63,10 @@ const Range = () => {
<strong>React Range</strong> <small>Steps</small> <strong>React Range</strong> <small>Steps</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
By default, range inputs "snap" to integer values. To change this, you can specify a{' '} By default, range inputs "snap" to integer values. To change this, you can specify a{' '}
<code class="css-0">step</code> value. In the example below, we double the number of <code>step</code> value. In the example below, we double the number of steps by using{' '}
steps by using <code class="css-0">step="0.5"</code>. <code>step="0.5"</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#steps"> <Example href="https://coreui.io/react/docs/4.0/forms/range#steps">
<CFormLabel htmlFor="customRange3">Example range</CFormLabel> <CFormLabel htmlFor="customRange3">Example range</CFormLabel>

18
src/views/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 { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const Select = () => { const Select = () => {
return ( return (
@ -28,7 +28,7 @@ const Select = () => {
<strong>React Select</strong> <small>Sizing</small> <strong>React Select</strong> <small>Sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
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>
@ -46,8 +46,8 @@ const Select = () => {
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
The <code class="css-0">multiple</code> attribute is also supported: The <code>multiple</code> attribute is also supported:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
@ -57,8 +57,8 @@ const Select = () => {
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
</Example> </Example>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
As is the <code class="css-0">htmlSize</code> property: As is the <code>htmlSize</code> property:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
@ -77,9 +77,9 @@ const Select = () => {
<strong>React Select</strong> <small>Disabled</small> <strong>React Select</strong> <small>Disabled</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> boolean attribute on a select to give it a Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
grayed out appearance and remove pointer events. appearance and remove pointer events.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#disabled"> <Example href="https://coreui.io/react/docs/4.0/forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled> <CFormSelect aria-label="Disabled select example" disabled>

72
src/views/forms/validation/Validation.js
View File

@ -15,7 +15,7 @@ import {
CInputGroupText, CInputGroupText,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable' import { Example } from 'src/reusable'
const CustomStyles = () => { const CustomStyles = () => {
const [validated, setValidated] = useState(false) const [validated, setValidated] = useState(false)
@ -261,17 +261,16 @@ const Validation = () => {
<strong>Validation</strong> <small>Custom styles</small> <strong>Validation</strong> <small>Custom styles</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
For custom CoreUI form validation messages, you'll need to add the{' '} For custom CoreUI form validation messages, you'll need to add the{' '}
<code class="css-0">noValidate</code> boolean property to your{' '} <code>noValidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
<code class="css-0">&lt;CForm&gt;</code>. This disables the browser default feedback disables the browser default feedback tooltips, but still provides access to the form
tooltips, but still provides access to the form validation APIs in JavaScript. Try to validation APIs in JavaScript. Try to submit the form below; our JavaScript will
submit the form below; our JavaScript will intercept the submit button and relay intercept the submit button and relay feedback to you. When attempting to submit,
feedback to you. When attempting to submit, you'll see the{' '} you'll see the <code>:invalid</code> and <code>:valid</code> styles applied to your
<code class="css-0">:invalid</code> and <code class="css-0">:valid</code> styles form controls.
applied to your form controls.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Custom feedback styles apply custom colors, borders, focus styles, and background Custom feedback styles apply custom colors, borders, focus styles, and background
icons to better communicate feedback.{' '} icons to better communicate feedback.{' '}
</p> </p>
@ -287,13 +286,13 @@ const Validation = () => {
<strong>Validation</strong> <small>Browser defaults</small> <strong>Validation</strong> <small>Browser defaults</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Not interested in custom validation feedback messages or writing JavaScript to change Not interested in custom validation feedback messages or writing JavaScript to change
form behaviors? All good, you can use the browser defaults. Try submitting the form form behaviors? All good, you can use the browser defaults. Try submitting the form
below. Depending on your browser and OS, you'll see a slightly different style of below. Depending on your browser and OS, you'll see a slightly different style of
feedback. feedback.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
While these feedback styles cannot be styled with CSS, you can still customize the While these feedback styles cannot be styled with CSS, you can still customize the
feedback text through JavaScript. feedback text through JavaScript.
</p> </p>
@ -309,17 +308,16 @@ const Validation = () => {
<strong>Validation</strong> <small>Server side</small> <strong>Validation</strong> <small>Server side</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
We recommend using client-side validation, but in case you require server-side We recommend using client-side validation, but in case you require server-side
validation, you can indicate invalid and valid form fields with{' '} validation, you can indicate invalid and valid form fields with <code>isInvalid</code>{' '}
<code class="css-0">isInvalid</code> and <code class="css-0">isValid</code> boolean and <code>isValid</code> boolean properties.
properties.
</p> </p>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
For invalid fields, ensure that the invalid feedback/error message is associated with For invalid fields, ensure that the invalid feedback/error message is associated with
the relevant form field using <code class="css-0">aria-describedby</code> (noting that the relevant form field using <code>aria-describedby</code> (noting that this
this attribute allows more than one <code class="css-0">id</code> to be referenced, in attribute allows more than one <code>id</code> to be referenced, in case the field
case the field already points to additional form text). already points to additional form text).
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#server-side"> <Example href="https://coreui.io/react/docs/4.0/forms/validation#server-side">
<CForm className="row g-3 needs-validation"> <CForm className="row g-3 needs-validation">
@ -394,24 +392,24 @@ const Validation = () => {
<strong>Validation</strong> <small>Supported elements</small> <strong>Validation</strong> <small>Supported elements</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Validation styles are available for the following form controls and components: Validation styles are available for the following form controls and components:
</p> </p>
<ul class="css-0"> <ul>
<li class="css-0"> <li>
<code class="css-0">&lt;CFormControl&gt;</code>s <code>&lt;CFormControl&gt;</code>s
</li> </li>
<li class="css-0"> <li>
<code class="css-0">&lt;CFormSelect&gt;</code>s <code>&lt;CFormSelect&gt;</code>s
</li> </li>
<li class="css-0"> <li>
<code class="css-0">&lt;CFormCheck&gt;</code>s <code>&lt;CFormCheck&gt;</code>s
</li> </li>
</ul> </ul>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements"> <Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements">
<CForm validated={true}> <CForm validated={true}>
<div class="mb-3"> <div className="mb-3">
<CFormLabel for="validationTextarea" class="form-label"> <CFormLabel for="validationTextarea" className="form-label">
Textarea Textarea
</CFormLabel> </CFormLabel>
<CFormControl <CFormControl
@ -449,7 +447,7 @@ const Validation = () => {
/> />
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback> <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
<div class="mb-3"> <div className="mb-3">
<CFormSelect required aria-label="select example"> <CFormSelect required aria-label="select example">
<option value="">Open this select menu</option> <option value="">Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
@ -459,7 +457,7 @@ const Validation = () => {
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback> <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
</div> </div>
<div class="mb-3"> <div className="mb-3">
<CFormControl <CFormControl
type="file" type="file"
id="validationTextarea" id="validationTextarea"
@ -469,7 +467,7 @@ const Validation = () => {
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback> <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
</div> </div>
<div class="mb-3"> <div className="mb-3">
<CButton type="submit" color="primary" disabled> <CButton type="submit" color="primary" disabled>
Submit form Submit form
</CButton> </CButton>
@ -485,12 +483,12 @@ const Validation = () => {
<strong>Validation</strong> <small>Tooltips</small> <strong>Validation</strong> <small>Tooltips</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
If your form layout allows it, you can swap the text for the tooltip to display If your form layout allows it, you can swap the text for the tooltip to display
validation feedback in a styled tooltip. Be sure to have a parent with{' '} validation feedback in a styled tooltip. Be sure to have a parent with{' '}
<code class="css-0">position: relative</code> on it for tooltip positioning. In the <code>position: relative</code> on it for tooltip positioning. In the example below,
example below, our column classes have this already, but your project may require an our column classes have this already, but your project may require an alternative
alternative setup. setup.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/validation#tooltips"> <Example href="https://coreui.io/react/docs/4.0/forms/validation#tooltips">
{Tooltips()} {Tooltips()}

203
src/views/notifications/alerts/Alerts.js
View File

@ -2,105 +2,108 @@ import React from 'react'
import { import {
CAlert, CAlert,
CAlertHeading, CAlertHeading,
CButton, CAlertLink,
CCard, CCard,
CCardBody, CCardBody,
CCardHeader, CCardHeader,
CCol, CCol,
CLink,
CProgress,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Alerts = () => { const Alerts = () => {
const [visible, setVisible] = React.useState(10) const [visible, setVisible] = React.useState(10)
return ( return (
<> <CRow>
<CRow> <CCol xs={12}>
<CCol xs="12" md="6"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React Alert</strong>
Alerts </CCardHeader>
<DocsLink name="CAlert" /> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> React Alert is prepared for any length of text, as well as an optional close button.
<CAlert color="primary">This is a primary alert — check it out!</CAlert> For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
<CAlert color="secondary">This is a secondary alert — check it out!</CAlert> props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
<CAlert color="success">This is a success alert — check it out!</CAlert> <a href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
<CAlert color="danger">This is a danger alert — check it out!</CAlert> dismissing prop
<CAlert color="warning">This is a warning alert — check it out!</CAlert> </a>
<CAlert color="info">This is a info alert — check it out!</CAlert> .
<CAlert color="light">This is a light alert — check it out!</CAlert> </p>
<CAlert color="dark">This is a dark alert — check it out!</CAlert> <Example href="https://coreui.io/react/docs/4.0/components/alert">
</CCardBody> <CAlert color="primary">A simple primary alert—check it out!</CAlert>
</CCard> <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
</CCol> <CAlert color="success">A simple success alert—check it out!</CAlert>
<CCol xs="12" md="6"> <CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CCard className="mb-4"> <CAlert color="warning">A simple warning alert—check it out!</CAlert>
<CCardHeader> <CAlert color="info">A simple info alert—check it out!</CAlert>
Alerts <CAlert color="light">A simple light alert—check it out!</CAlert>
<small> <CAlert color="dark">A simple dark alert—check it out!</CAlert>
{' '} </Example>
use <code>.alert-link</code> to provide links </CCardBody>
</small> </CCard>
</CCardHeader> </CCol>
<CCardBody> <CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Alert</strong> <small>Link color</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
links inside any alert.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#link-color">
<CAlert color="primary"> <CAlert color="primary">
{/*eslint-disable-next-line*/} A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
This is a primary alert with&nbsp; it a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="secondary"> <CAlert color="secondary">
{/*eslint-disable-next-line*/} A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>.
This is a secondary alert with&nbsp; Give it a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="success"> <CAlert color="success">
{/*eslint-disable-next-line*/} A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give
This is a success alert with&nbsp; it a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="danger"> <CAlert color="danger">
{/*eslint-disable-next-line*/} A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give
This is a danger alert with&nbsp; it a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="warning"> <CAlert color="warning">
{/*eslint-disable-next-line*/} A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give
This is a warning alert with&nbsp; it a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="info"> <CAlert color="info">
{/*eslint-disable-next-line*/} A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
This is a info alert with&nbsp; a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="light"> <CAlert color="light">
{/*eslint-disable-next-line*/} A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
This is a light alert with&nbsp; a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
<CAlert color="dark"> <CAlert color="dark">
{/*eslint-disable-next-line*/} A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
This is a dark alert with&nbsp; a click if you like.
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
</CAlert> </CAlert>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
<CRow> <CCol xs={12}>
<CCol xs="12" md="6"> <CCard className="mb-4">
<CCard className="mb-4"> <CCardHeader>
<CCardHeader> <strong>React Alert</strong> <small>Additional content</small>
Alerts </CCardHeader>
<small> additional content</small> <CCardBody>
</CCardHeader> <p className="text-medium-emphasis small">
<CCardBody> Alert can also incorporate supplementary components &amp; elements like heading,
paragraph, and divider.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#additional-content">
<CAlert color="success"> <CAlert color="success">
<CAlertHeading>Well done!</CAlertHeading> <CAlertHeading tag="h4">Well done!</CAlertHeading>
<p> <p>
Aww yeah, you successfully read this important alert message. This example text is Aww yeah, you successfully read this important alert message. This example text is
going to run a bit longer so that you can see how spacing within an alert works going to run a bit longer so that you can see how spacing within an alert works
@ -112,38 +115,34 @@ const Alerts = () => {
tidy. tidy.
</p> </p>
</CAlert> </CAlert>
</CCardBody> </Example>
</CCard> </CCardBody>
</CCol> </CCard>
<CCol xs="12" md="6"> </CCol>
<CCard className="mb-4"> <CCol xs={12}>
<CCardHeader> <CCard className="mb-4">
Alerts <CCardHeader>
<small> dismissing</small> <strong>React Alert</strong> <small>Dismissing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert color="info" dismissible> <p className="text-medium-emphasis small">
I am an dismissible alert! Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
<CAlert
color="warning"
dismissible
onDismissed={() => {
alert('👋 Well, hi there! Thanks for dismissing me.')
}}
>
<strong>Go right ahead</strong> and click that dimiss over there on the right.
</CAlert> </CAlert>
<CAlert color="warning" show={visible} closeButton visible={setVisible}> </Example>
I will be closed in {visible} seconds! </CCardBody>
<CProgress </CCard>
striped </CCol>
color="warning" </CRow>
value={Number(visible) * 10}
size="xs"
className="mb-3"
/>
</CAlert>
<CButton color="primary" onClick={() => setVisible(10)}>
Reset timer
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
) )
} }

206
src/views/notifications/badges/Badges.js
View File

@ -9,142 +9,118 @@ import {
CBadge, CBadge,
CRow, CRow,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Badges = () => { const Badges = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol lg={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges <strong>React Badges</strong> <small>Dismissing</small>
<DocsLink name="CBadge" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h1> <p className="text-medium-emphasis small">
Example heading <CBadge color="secondary">New</CBadge> Bootstrap badge scale to suit the size of the parent element by using relative font
</h1> sizing and <code>em</code> units.
<h2> </p>
Example heading <CBadge color="secondary">New</CBadge> <Example href="https://coreui.io/react/docs/4.0/components/badge">
</h2> <h1>
<h3> Example heading <CBadge color="secondary">New</CBadge>
Example heading <CBadge color="secondary">New</CBadge> </h1>
</h3> <h2>
<h4> Example heading <CBadge color="secondary">New</CBadge>
Example heading <CBadge color="secondary">New</CBadge> </h2>
</h4> <h3>
<h5> Example heading <CBadge color="secondary">New</CBadge>
Example heading <CBadge color="secondary">New</CBadge> </h3>
</h5> <h4>
<h6> Example heading <CBadge color="secondary">New</CBadge>
Example heading <CBadge color="secondary">New</CBadge> </h4>
</h6> <h5>
Example heading <CBadge color="secondary">New</CBadge>
</h5>
<h6>
Example heading <CBadge color="secondary">New</CBadge>
</h6>
</Example>
<p className="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
</Example>
<p className="text-medium-emphasis small">
Remark that depending on how you use them, badges may be complicated for users of
screen readers and related assistive technologies.
</p>
<p className="text-medium-emphasis small">
Unless the context is clear, consider including additional context with a visually
hidden piece of additional text.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge">
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span className="visually-hidden">unread messages</span>
</CButton>
</Example>
</CCardBody> </CCardBody>
<CCardFooter>
<CButton color="secondary">
Notifications{' '}
<CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>
9
</CBadge>
</CButton>
</CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol lg={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges <strong>React Badges</strong> <small>Contextual variations</small>
<small> contextual variations</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="me-1" color="primary"> <p className="text-medium-emphasis small">
Primary Add any of the below-mentioned <code>color</code> props to modify the presentation of
</CBadge> a badge.
<CBadge className="me-1" color="secondary"> </p>
Secondary <Example href="https://coreui.io/react/docs/4.0/components/badge#contextual-variations">
</CBadge> <CBadge color="primary">primary</CBadge>
<CBadge className="me-1" color="success"> <CBadge color="success">success</CBadge>
Success <CBadge color="danger">danger</CBadge>
</CBadge> <CBadge color="warning">warning</CBadge>
<CBadge className="me-1" color="danger"> <CBadge color="info">info</CBadge>
Danger <CBadge color="light">light</CBadge>
</CBadge> <CBadge color="dark">dark</CBadge>
<CBadge className="me-1" color="warning"> </Example>
Warning
</CBadge>
<CBadge className="me-1" color="info">
Info
</CBadge>
<CBadge className="me-1" color="light">
Light
</CBadge>
<CBadge className="me-1" color="dark">
Dark
</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges <strong>React Badges</strong> <small>Pill badges</small>
<small> pill badges</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="me-1" color="primary" shape="rounded-pill"> <p className="text-medium-emphasis small">
Primary Apply the <code>shape="rounded-pill"</code> prop to make badges rounded.
</CBadge> </p>
<CBadge className="me-1" color="secondary" shape="rounded-pill"> <Example href="https://coreui.io/react/docs/4.0/components/badge#pill-badges">
Secondary <CBadge color="primary" shape="rounded-pill">
</CBadge> primary
<CBadge className="me-1" color="success" shape="rounded-pill"> </CBadge>
Success <CBadge color="success" shape="rounded-pill">
</CBadge> success
<CBadge className="me-1" color="danger" shape="rounded-pill"> </CBadge>
Danger <CBadge color="danger" shape="rounded-pill">
</CBadge> danger
<CBadge className="me-1" color="warning" shape="rounded-pill"> </CBadge>
Warning <CBadge color="warning" shape="rounded-pill">
</CBadge> warning
<CBadge className="me-1" color="info" shape="rounded-pill"> </CBadge>
Info <CBadge color="info" shape="rounded-pill">
</CBadge> info
<CBadge className="me-1" color="light" shape="rounded-pill"> </CBadge>
Light <CBadge color="light" shape="rounded-pill">
</CBadge> light
<CBadge className="me-1" color="dark" shape="rounded-pill"> </CBadge>
Dark <CBadge color="dark" shape="rounded-pill">
</CBadge> dark
</CCardBody> </CBadge>
</CCard> </Example>
<CCard className="mb-4">
<CCardHeader>
Badges
<small> square badges</small>
</CCardHeader>
<CCardBody>
<CBadge className="me-1" color="primary" shape="rounded-0">
Primary
</CBadge>
<CBadge className="me-1" color="secondary" shape="rounded-0">
Secondary
</CBadge>
<CBadge className="me-1" color="success" shape="rounded-0">
Success
</CBadge>
<CBadge className="me-1" color="danger" shape="rounded-0">
Danger
</CBadge>
<CBadge className="me-1" color="warning" shape="rounded-0">
Warning
</CBadge>
<CBadge className="me-1" color="info" shape="rounded-0">
Info
</CBadge>
<CBadge className="me-1" color="light" shape="rounded-0">
Light
</CBadge>
<CBadge className="me-1" color="dark" shape="rounded-0">
Dark
</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

2
src/views/notifications/index.js
View File

@ -1,6 +1,6 @@
import Alerts from './Alerts' import Alerts from './Alerts'
import Badges from './Badges' import Badges from './Badges'
import Modals from './Modals' import Modals from './Modals'
import Toaster from './Toaster' import Toaster from './toasts'
export { Alerts, Badges, Modals, Toaster } export { Alerts, Badges, Modals, Toaster }

911
src/views/notifications/modals/Modals.js
View File

@ -5,234 +5,719 @@ import {
CCardBody, CCardBody,
CCardHeader, CCardHeader,
CCol, CCol,
CLink,
CModal, CModal,
CModalBody, CModalBody,
CModalFooter, CModalFooter,
CModalHeader, CModalHeader,
CModalTitle, CModalTitle,
CPopover,
CRow, CRow,
CTooltip,
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { Example } from 'src/reusable'
const Modals = () => { const LiveDemo = () => {
const [modal, setModal] = useState(true) const [visible, setVisible] = useState(false)
const [large, setLarge] = useState(false) return (
const [small, setSmall] = useState(false) <>
const [primary, setPrimary] = useState(false) <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
const [success, setSuccess] = useState(false) <CModal visible={visible} onDismiss={() => setVisible(false)}>
const [warning, setWarning] = useState(false) <CModalHeader onDismiss={() => setVisible(false)}>
const [danger, setDanger] = useState(false) <CModalTitle>Modal title</CModalTitle>
const [info, setInfo] = useState(false) </CModalHeader>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const StaticBackdrop = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
<CModal visible={visible}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
I will not close if you click outside me. Don't even try to press escape key.
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const ScrollingLongContent = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
<CModal visible={visible} onDismiss={() => setVisible(false)}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const ScrollingLongContent2 = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const VerticallyCentered = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
<CModal alignment="center" visible={visible}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const VerticallyCentered2 = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
<CModal alignment="center" scrollable visible={visible}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const TooltipsPopovers = () => {
const [visible, setVisible] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
<CModal alignment="center" visible={visible}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<h5>Popover in a modal</h5>
<p>
This
<CPopover title="Popover title" content="Popover body content is set in this property.">
<CButton>button</CButton>
</CPopover>{' '}
triggers a popover on click.
</p>
<hr />
<h5>Tooltips in a modal</h5>
<p>
<CTooltip content="Tooltip">
<CLink>This link</CLink>
</CTooltip>{' '}
and
<CTooltip content="Tooltip">
<CLink>that link</CLink>
</CTooltip>{' '}
have tooltips on hover.
</p>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
)
}
const OptionalSizes = () => {
const [visibleXL, setVisibleXL] = useState(false)
const [visibleLg, setVisibleLg] = useState(false)
const [visibleSm, setVisibleSm] = useState(false)
return (
<>
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
<CModal size="xl" visible={visibleXL}>
<CModalHeader onDismiss={() => setVisibleXL(false)}>
<CModalTitle>Extra large modal</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal size="lg" visible={visibleLg}>
<CModalHeader onDismiss={() => setVisibleLg(false)}>
<CModalTitle>Large modal</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal size="sm" visible={visibleSm}>
<CModalHeader onDismiss={() => setVisibleSm(false)}>
<CModalTitle>Small modal</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
</>
)
}
const FullscreenModal = () => {
const [visible, setVisible] = useState(false)
const [visibleSm, setVisibleSm] = useState(false)
const [visibleMd, setVisibleMd] = useState(false)
const [visibleLg, setVisibleLg] = useState(false)
const [visibleXL, setVisibleXL] = useState(false)
const [visibleXXL, setVisibleXXL] = useState(false)
return (
<>
<CButton onClick={() => setVisible(!visible)}>Full screen</CButton>
<CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
<CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
<CModal fullscreen visible={visible}>
<CModalHeader onDismiss={() => setVisible(false)}>
<CModalTitle>Full screen</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal fullscreen="sm" visible={visibleSm}>
<CModalHeader onDismiss={() => setVisibleSm(false)}>
<CModalTitle>Full screen below sm</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal fullscreen="md" visible={visibleMd}>
<CModalHeader onDismiss={() => setVisibleMd(false)}>
<CModalTitle>Full screen below md</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal fullscreen="lg" visible={visibleLg}>
<CModalHeader onDismiss={() => setVisibleLg(false)}>
<CModalTitle>Full screen below lg</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal fullscreen="xl" visible={visibleXL}>
<CModalHeader onDismiss={() => setVisibleXL(false)}>
<CModalTitle>Full screen below xl</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
<CModal fullscreen="xxl" visible={visibleXXL}>
<CModalHeader onDismiss={() => setVisibleXXL(false)}>
<CModalTitle>Full screen below xxl</CModalTitle>
</CModalHeader>
<CModalBody>...</CModalBody>
</CModal>
</>
)
}
const Modals = () => {
return ( return (
<CRow> <CRow>
<CCol xs> <CCol xs={12}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Modals <strong>React Modal</strong>
<DocsLink name="CModal" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton onClick={() => setModal(!modal)} className="me-1"> <p className="text-medium-emphasis small">
Launch demo modal Below is a static modal example (meaning its <code>position</code> and{' '}
</CButton> <code>display</code> have been overridden). Included are the modal header, modal body
<CButton onClick={() => setLarge(!large)} className="me-1"> (required for <code>padding</code>), and modal footer (optional). We ask that you
Launch large modal include modal headers with dismiss actions whenever possible, or provide another
</CButton> explicit dismiss action.
<CButton onClick={() => setSmall(!large)} className="me-1"> </p>
Launch small modal <Example href="https://coreui.io/react/docs/4.0/components/modal">
</CButton> <CModal
<CModal visible={modal} onClose={setModal}> className="show d-block position-static"
<CModalHeader closeButton> backdrop={false}
<CModalTitle>Modal title</CModalTitle> keyboard={false}
</CModalHeader> portal={false}
<CModalBody> visible
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor >
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <CModalHeader>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <CModalTitle>Modal title</CModalTitle>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </CModalHeader>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <CModalBody>Modal body text goes here.</CModalBody>
deserunt mollit anim id est laborum. <CModalFooter>
</CModalBody> <CButton color="secondary">Close</CButton>
<CModalFooter> <CButton color="primary">Save changes</CButton>
<CButton color="primary">Do Something</CButton>{' '} </CModalFooter>
<CButton color="secondary" onClick={() => setModal(false)}> </CModal>
Cancel </Example>
</CButton> </CCardBody>
</CModalFooter> </CCard>
</CModal> </CCol>
<CCol xs={12}>
<CModal visible={large} onClose={() => setLarge(!large)} size="lg"> <CCard className="mb-4">
<CModalHeader closeButton> <CCardHeader>
<CModalTitle>Modal title</CModalTitle> <strong>React Modal</strong> <small>Live demo</small>
</CModalHeader> </CCardHeader>
<CModalBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <p className="text-medium-emphasis small">
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Toggle a working modal demo by clicking the button below. It will slide down and fade
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute in from the top of the page.
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <Example href="https://coreui.io/react/docs/4.0/components/modal#live-demo">
deserunt mollit anim id est laborum. {LiveDemo()}
</CModalBody> </Example>
<CModalFooter> </CCardBody>
<CButton color="primary" onClick={() => setLarge(!large)}> </CCard>
Do Something </CCol>
</CButton>{' '} <CCol xs={12}>
<CButton color="secondary" onClick={() => setLarge(!large)}> <CCard className="mb-4">
Cancel <CCardHeader>
</CButton> <strong>React Modal</strong> <small>Static backdrop</small>
</CModalFooter> </CCardHeader>
</CModal> <CCardBody>
<p className="text-medium-emphasis small">
<CModal visible={small} onClose={() => setSmall(!small)} size="sm"> If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
<CModalHeader closeButton> modal will behave as though the backdrop is static, meaning it will not close when
<CModalTitle>Modal title</CModalTitle> clicking outside it. Click the button below to try it.
</CModalHeader> </p>
<CModalBody> <Example href="https://coreui.io/react/docs/4.0/components/modal#static-backdrop">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor {StaticBackdrop()}
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </Example>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute </CCardBody>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </CCard>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia </CCol>
deserunt mollit anim id est laborum. <CCol xs={12}>
</CModalBody> <CCard className="mb-4">
<CModalFooter> <CCardHeader>
<CButton color="primary" onClick={() => setSmall(!small)}> <strong>React Modal</strong> <small>Scrolling long content</small>
Do Something </CCardHeader>
</CButton>{' '} <CCardBody>
<CButton color="secondary" onClick={() => setSmall(!small)}> <p className="text-medium-emphasis small">
Cancel If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
</CButton> modal will behave as though the backdrop is static, meaning it will not close when
</CModalFooter> clicking outside it. Click the button below to try it.
</CModal> </p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
<hr /> {ScrollingLongContent()}
</Example>
<CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1"> <p className="text-medium-emphasis small">
Primary modal You can also create a scrollable modal that allows scroll the modal body by adding{' '}
</CButton> <code>scrollable</code> prop.
<CButton color="success" onClick={() => setSuccess(!success)} className="me-1"> </p>
Success modal <Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
</CButton> {ScrollingLongContent2()}
<CButton color="warning" onClick={() => setWarning(!warning)} className="me-1"> </Example>
Warning modal </CCardBody>
</CButton> </CCard>
<CButton color="danger" onClick={() => setDanger(!danger)} className="me-1"> </CCol>
Danger modal <CCol xs={12}>
</CButton> <CCard className="mb-4">
<CButton color="info" onClick={() => setInfo(!info)} className="me-1"> <CCardHeader>
Info modal <strong>React Modal</strong> <small>Vertically centered</small>
</CButton> </CCardHeader>
<CCardBody>
<CModal visible={primary} onClose={() => setPrimary(!primary)} color="primary"> <p className="text-medium-emphasis small">
<CModalHeader closeButton> Add <code>alignment="center</code> to <code>&lt;CModal&gt;</code> to vertically center
<CModalTitle>Modal title</CModalTitle> the modal.
</CModalHeader> </p>
<CModalBody> <Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor {VerticallyCentered()}
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </Example>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla {VerticallyCentered2()}
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia </Example>
deserunt mollit anim id est laborum. </CCardBody>
</CModalBody> </CCard>
<CModalFooter> </CCol>
<CButton color="primary" onClick={() => setPrimary(!primary)}> <CCol xs={12}>
Do Something <CCard className="mb-4">
</CButton>{' '} <CCardHeader>
<CButton color="secondary" onClick={() => setPrimary(!primary)}> <strong>React Modal</strong> <small>Tooltips and popovers</small>
Cancel </CCardHeader>
</CButton> <CCardBody>
</CModalFooter> <p className="text-medium-emphasis small">
</CModal> <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
modals as needed. When modals are closed, any tooltips and popovers within are also
<CModal visible={success} onClose={() => setSuccess(!success)} color="success"> automatically dismissed.
<CModalHeader closeButton> </p>
<CModalTitle>Modal title</CModalTitle> <Example href="https://coreui.io/react/docs/4.0/components/modal#tooltips-and-popovers">
</CModalHeader> {TooltipsPopovers()}
<CModalBody> </Example>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </CCardBody>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </CCard>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute </CCol>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <CCol xs={12}>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <CCard className="mb-4">
deserunt mollit anim id est laborum. <CCardHeader>
</CModalBody> <strong>React Modal</strong> <small>Optional sizes</small>
<CModalFooter> </CCardHeader>
<CButton color="success" onClick={() => setSuccess(!success)}> <CCardBody>
Do Something <p className="text-medium-emphasis small">
</CButton>{' '} Modals have three optional sizes, available via modifier classes to be placed on a{' '}
<CButton color="secondary" onClick={() => setSuccess(!success)}> <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
Cancel horizontal scrollbars on narrower viewports.
</CButton> </p>
</CModalFooter> <table className="table">
</CModal> <thead>
<tr>
<CModal visible={warning} onClose={() => setWarning(!warning)} color="warning"> <th>Size</th>
<CModalHeader closeButton> <th>Property size</th>
<CModalTitle>Modal title</CModalTitle> <th>Modal max-width</th>
</CModalHeader> </tr>
<CModalBody> </thead>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <tbody>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <tr>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <td>Small</td>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <td>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <code>'sm'</code>
deserunt mollit anim id est laborum. </td>
</CModalBody> <td>
<CModalFooter> <code>300px</code>
<CButton color="warning" onClick={() => setWarning(!warning)}> </td>
Do Something </tr>
</CButton>{' '} <tr>
<CButton color="secondary" onClick={() => setWarning(!warning)}> <td>Default</td>
Cancel <td className="text-medium-emphasis">None</td>
</CButton> <td>
</CModalFooter> <code>500px</code>
</CModal> </td>
</tr>
<CModal visible={danger} onClose={() => setDanger(!danger)} color="danger"> <tr>
<CModalHeader closeButton> <td>Large</td>
<CModalTitle>Modal title</CModalTitle> <td>
</CModalHeader> <code>'lg'</code>
<CModalBody> </td>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <td>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <code>800px</code>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute </td>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </tr>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <tr>
deserunt mollit anim id est laborum. <td>Extra large</td>
</CModalBody> <td>
<CModalFooter> <code>'xl'</code>
<CButton color="danger" onClick={() => setDanger(!danger)}> </td>
Do Something <td>
</CButton>{' '} <code>1140px</code>
<CButton color="secondary" onClick={() => setDanger(!danger)}> </td>
Cancel </tr>
</CButton> </tbody>
</CModalFooter> </table>
</CModal> <Example href="https://coreui.io/react/docs/4.0/components/modal#optional-sizes">
{OptionalSizes()}
<CModal visible={info} onClose={() => setInfo(!info)} color="info"> </Example>
<CModalHeader closeButton> </CCardBody>
<CModalTitle>Modal title</CModalTitle> </CCard>
</CModalHeader> </CCol>
<CModalBody> <CCol xs={12}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <CCard className="mb-4">
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <CCardHeader>
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <strong>React Modal</strong> <small>Fullscreen Modal</small>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </CCardHeader>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <CCardBody>
deserunt mollit anim id est laborum. <p className="text-medium-emphasis small">
</CModalBody> Another override is the option to pop up a modal that covers the user viewport,
<CModalFooter> available via property <code>fullscrean</code>.
<CButton color="secondary" onClick={() => setInfo(!info)}> </p>
Cancel <table className="table">
</CButton> <thead>
<CButton color="info" onClick={() => setInfo(!info)}> <tr>
Do Something <th>Property fullscrean</th>
</CButton>{' '} <th>Availability</th>
</CModalFooter> </tr>
</CModal> </thead>
<tbody>
<tr>
<td>
<code>true</code>
</td>
<td>Always</td>
</tr>
<tr>
<td>
<code>'sm'</code>
</td>
<td>
Below <code>576px</code>
</td>
</tr>
<tr>
<td>
<code>'md'</code>
</td>
<td>
Below <code>768px</code>
</td>
</tr>
<tr>
<td>
<code>'lg'</code>
</td>
<td>
Below <code>992px</code>
</td>
</tr>
<tr>
<td>
<code>'xl'</code>
</td>
<td>
Below <code>1200px</code>
</td>
</tr>
<tr>
<td>
<code>'xxl'</code>
</td>
<td>
Below <code>1400px</code>
</td>
</tr>
</tbody>
</table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#fullscreen-modal">
{FullscreenModal()}
</Example>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

182
src/views/notifications/toaster/Toaster.js
View File

@ -1,182 +0,0 @@
import React, { useState } from 'react'
import {
CCard,
CCardHeader,
CCardBody,
CForm,
CFormControl,
CFormCheck,
CFormSelect,
CButton,
CContainer,
CRow,
CCol,
CFormLabel,
CToast,
CToaster,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Toaster = () => {
const placements = [
'top-start',
'top-center',
'top-end',
'middle-start',
'middle-center',
'middle-end',
'bottom-start',
'bottom-center',
'bottom-end',
]
const [toasts, setToasts] = useState([
{ placement: 'static' },
{ placement: 'static' },
{ placement: 'top-end', autohide: 3000 },
])
const [placement, setPlacement] = useState('top-end')
const [autohide, setAutohide] = useState(true)
const [autohideValue, setAutohideValue] = useState(5000)
const [closeButton, setCloseButton] = useState(true)
const [fade, setFade] = useState(true)
const addToast = () => {
setToasts([...toasts, { placement, autohide: autohide && autohideValue, closeButton, fade }])
}
const toasters = (() => {
return toasts.reduce((toasters, toast) => {
toasters[toast.placement] = toasters[toast.placement] || []
toasters[toast.placement].push(toast)
return toasters
}, {})
})()
return (
<CCard className="mb-4">
<CCardHeader>
Toasts.
<DocsLink name="-Toast" />
</CCardHeader>
<CCardBody>
<CContainer>
<CRow>
<CCol sm="12" lg="6">
<CForm>
<h5>Add toast with following props:</h5>
<div variant="custom-checkbox" className="my-2 mt-4">
<CFormCheck
id="autohide"
checked={autohide}
onChange={(e) => {
setAutohide(e.target.checked)
}}
custom
/>
<CFormLabel variant="custom-checkbox" htmlFor="autohide">
Autohide of the toast
</CFormLabel>
</div>
{autohide && (
<div className="my-2">
<CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel>
<CFormControl
type="number"
value={autohideValue}
onChange={(e) => {
setAutohideValue(Number(e.target.value))
}}
/>
</div>
)}
<div className="my-2">
<CFormLabel htmlFor="ccyear">Placement</CFormLabel>
<CFormSelect
className="form-control"
value={placement}
onChange={(e) => {
setPlacement(e.target.value)
}}
>
{placements.map((placement, i) => (
<option key={i}>{placement}</option>
))}
</CFormSelect>
</div>
<div variant="custom-checkbox" className="my-2">
<CFormCheck
id="fade"
checked={fade}
onChange={(e) => {
setFade(e.target.checked)
}}
custom
/>
<CFormLabel variant="custom-checkbox" htmlFor="fade">
fade
</CFormLabel>
</div>
<div variant="custom-checkbox" className="my-2">
<CFormCheck
id="close"
custom
checked={closeButton}
onChange={(e) => {
setCloseButton(e.target.checked)
}}
/>
<CFormLabel variant="custom-checkbox" htmlFor="close">
closeButton
</CFormLabel>
</div>
<CButton className="me-1 w-25" color="success" onClick={addToast}>
Add toast
</CButton>
</CForm>
</CCol>
<CCol sm="12" lg="6">
{Object.keys(toasters).map((toasterKey) => (
<CToaster placement={toasterKey} key={'toaster' + toasterKey}>
{toasters[toasterKey].map((toast, key) => {
return (
<CToast
key={'toast' + key}
icon={
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
}
title="CoreUI for React.js"
time="7 min ago"
autohide={toast.autohide}
>
{`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`}
</CToast>
)
})}
</CToaster>
))}
</CCol>
</CRow>
</CContainer>
</CCardBody>
</CCard>
)
}
export default Toaster

249
src/views/notifications/toasts/Toasts.js Normal file
View File

@ -0,0 +1,249 @@
import React, { useRef, useState } from 'react'
import {
CCard,
CCardHeader,
CCardBody,
CButton,
CRow,
CCol,
CToast,
CToastBody,
CToastClose,
CToastHeader,
CToaster,
} from '@coreui/react'
import { Example } from 'src/reusable'
const exampleToast = () => {
const [toast, addToast] = useState(0)
const toaster = useRef()
const exampleToast = (
<CToast title="CoreUI for React.js">
<CToastHeader close>
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong className="me-auto">CoreUI for React.js</strong>
<small>7 min ago</small>
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
)
return (
<>
<CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
<CToaster ref={toaster} push={toast} placement="top-end" />
</>
)
}
const Toasts = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Toast</strong> <small>Basic</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Toasts are as flexible as you need and have very little required markup. At a minimum,
we require a single element to contain your “toasted” content and strongly encourage a
dismiss button.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong className="me-auto">CoreUI for React.js</strong>
<small>7 min ago</small>
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/toast">
{exampleToast()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Toast</strong> <small>Translucent</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Toasts are slightly translucent to blend in with what's below them.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#translucent">
<div className="bg-dark p-3">
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong className="me-auto">CoreUI for React.js</strong>
<small>7 min ago</small>
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Toast</strong> <small>Stacking</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
You can stack toasts by wrapping them in a toast container, which will vertically add
some spacing.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#stacking">
<CToaster>
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong className="me-auto">CoreUI for React.js</strong>
<small>7 min ago</small>
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
<CToast title="CoreUI for React.js" autohide={false}>
<CToastHeader close>
<svg
className="rounded me-2"
width="20"
height="20"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
>
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>
<strong className="me-auto">CoreUI for React.js</strong>
<small>7 min ago</small>
</CToastHeader>
<CToastBody>Hello, world! This is a toast message.</CToastBody>
</CToast>
</CToaster>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Toast</strong> <small>Custom content</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Customize your toasts by removing sub-components, tweaking them with{' '}
<a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
own markup. Here we've created a simpler toast by removing the default{' '}
<code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
<a href="https://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
<a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
the layout.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#custom-content">
<CToast autohide={false} className="align-items-center">
<div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody>
<CToastClose className="me-2 m-auto" />
</div>
</CToast>
</Example>
<p className="text-medium-emphasis small">
Alternatively, you can also add additional controls and components to toasts.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#custom-content">
<CToast autohide={false}>
<CToastBody>
Hello, world! This is a toast message.
<div className="mt-2 pt-2 border-top">
<CButton type="button" color="primary" size="sm">
Take action
</CButton>
<CToastClose component={CButton} color="secondary" size="sm" className="ms-1">
Close
</CToastClose>
</div>
</CToastBody>
</CToast>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Toast</strong> <small>Custom content</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Building on the above example, you can create different toast color schemes with our{' '}
<a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
<a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
Here we've set <code>color="primary"</code> and added <code>.text-white</code> class
to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to our
close button. For a crisp edge, we remove the default border with{' '}
<code>.border-0</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/toast#color-schemes">
<CToast autohide={false} color="primary" className="text-white align-items-center">
<div className="d-flex">
<CToastBody>Hello, world! This is a toast message.</CToastBody>
<CToastClose className="me-2 m-auto" white />
</div>
</CToast>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Toasts