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',
to: '/base/collapses',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Forms',
to: '/base/forms',
},
{
_component: 'CNavItem',
as: NavLink,
@ -119,7 +113,7 @@ const _nav = [
_component: 'CNavItem',
as: NavLink,
anchor: 'Progress',
to: '/base/progress-bar',
to: '/base/progress',
},
{
_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',
as: NavLink,
@ -231,8 +274,8 @@ const _nav = [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Toaster',
to: '/notifications/toaster',
anchor: 'Toasts',
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
return (
<>
<div className="example">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
@ -20,10 +20,12 @@ const Example = (props) => {
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane visible>{children}</CTabPane>
<CTabContent className="rounded-bottom">
<CTabPane className="p-3 preview" visible>
{children}
</CTabPane>
</CTabContent>
</>
</div>
)
}

28
src/routes.js
View File

@ -1,6 +1,6 @@
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 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 Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
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 ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
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 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 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 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 Register = React.lazy(() => import('./views/pages/register/Register'))
@ -50,14 +57,13 @@ const routes = [
{ path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
{ path: '/base/forms', name: 'Forms', component: BasicForms },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ 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/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
@ -66,6 +72,14 @@ const routes = [
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ 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/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
{ path: '/icons/flags', name: 'Flags', component: Flags },
@ -74,7 +88,7 @@ const routes = [
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ 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/register', name: 'Register', component: Register },
{ 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 "layout";
@import "example";
// If you want to add custom CSS you can put it here.
@import "custom";

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

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

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

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

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

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

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

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

8
src/views/base/collapses/Collapses.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable'
import { Example } from 'src/reusable'
const Collapses = () => {
const [visible, setVisible] = useState(false)
@ -15,7 +15,7 @@ const Collapses = () => {
<strong>React Collapse</strong>
</CCardHeader>
<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">
<CButton
href="#"
@ -46,8 +46,8 @@ const Collapses = () => {
<strong>React Collapse</strong> <small> multi target</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A <code class="css-0">&lt;CButton&gt;</code> can show and hide multiple elements.
<p className="text-medium-emphasis small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets">
<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,
CCardHeader,
CCol,
CFormCheck,
CListGroup,
CListGroupItem,
CRow,
CTabContent,
CTabPane,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
const ListGroups = () => {
const [activeTab, setActiveTab] = useState(1)
return (
<>
<CRow>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<DocsLink name="CListGroup" />
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
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>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@ -33,320 +33,312 @@ const ListGroups = () => {
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group links
<small> with first item active and last item disabled</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Active items</small>
</CCardHeader>
<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>
<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
</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Morbi leo risus</CListGroupItem>
<CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
<CListGroupItem href="#" disabled>
<CListGroupItem component="a" href="#">
Dapibus ac facilisis in
</CListGroupItem>
<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
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> contextual classes</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Flush</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>flush</code> boolean property to remove some borders and rounded corners to
render list group items edge-to-edge in a parent container (e.g., cards).
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#flush">
<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>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem color="secondary">
This is a secondary list group item
</CListGroupItem>
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CListGroupItem color={color} key={index}>
A simple {color} list group item
</CListGroupItem>
))}
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> contextual classes with .action</small>
</CCardHeader>
<CCardBody>
</Example>
<p className="text-medium-emphasis small">
Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
<code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
in the previous example. Also supported is the <code>active</code> state; apply it to
indicate an active selection on a contextual list group item.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="button" color="primary">
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 component="a" href="#">
Dapibus ac facilisis in
</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>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> accent</small>
</CCardHeader>
<CCardBody>
<CListGroup accent>
<CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
<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>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>With badges</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add badges to any list group item to show unread counts, activity, and more.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#with-badges">
<CListGroup>
<CListGroupItem className="justify-content-between">
<CListGroupItem className="d-flex justify-content-between align-items-center">
Cras justo odio
<CBadge className="float-end" shape="rounded-pill" color="primary">
<CBadge color="primary" shape="rounded-pill">
14
</CBadge>
</CListGroupItem>
<CListGroupItem className="justify-content-between">
<CListGroupItem className="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<CBadge className="float-end" shape="rounded-pill" color="primary">
<CBadge color="primary" shape="rounded-pill">
2
</CBadge>
</CListGroupItem>
<CListGroupItem className="justify-content-between">
<CListGroupItem className="d-flex justify-content-between align-items-center">
Morbi leo risus
<CBadge className="float-end" shape="rounded-pill" color="primary">
<CBadge color="primary" shape="rounded-pill">
1
</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol sm="12" xl="6">
<CCard className="mb-4">
<CCardHeader>
List group
<small> custom content</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Custom content</small>
</CCardHeader>
<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>
<CListGroupItem component="a" active>
<h5 className="d-flex w-100 justify-content-between">
List group item heading
<CListGroupItem component="a" href="#" active>
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small>3 days ago</small>
</h5>
<div className="mb-1">
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
<small>Donec id elit non mi porta.</small>
</div>
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem component="a">
<h5>List group item heading</h5>
<div>
<CListGroupItem component="a" href="#">
<div className="d-flex w-100 justify-content-between">
<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
varius blandit.
</div>
<small>Small.</small>
</p>
<small className="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem component="a">
<h5>List group item heading</h5>
<div>
<CListGroupItem component="a" href="#">
<div className="d-flex w-100 justify-content-between">
<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
varius blandit.
</div>
<small>Small.</small>
</p>
<small className="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>
List group
<small> tab Javascript plugin</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="4">
<CListGroup id="list-tab" role="tablist">
<CListGroupItem
onClick={() => setActiveTab(0)}
component="button"
active={activeTab === 0}
>
Home
</CListGroupItem>
<CListGroupItem
onClick={() => setActiveTab(1)}
component="button"
active={activeTab === 1}
>
Profile
</CListGroupItem>
<CListGroupItem
onClick={() => setActiveTab(2)}
component="button"
active={activeTab === 2}
>
Messages
</CListGroupItem>
<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>
</>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React List Group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Place CoreUI's checkboxes and radios within list group items and customize as needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Dapibus ac facilisis in" defaultChecked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Morbi leo risus" defaultChecked />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="orta ac consectetur ac" />
</CListGroupItem>
<CListGroupItem>
<CFormCheck label="Vestibulum at eros" />
</CListGroupItem>
</CListGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}

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

@ -13,301 +13,384 @@ import {
CNavItem,
CNavLink,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
const Navs = () => {
return (
<>
<CRow>
<CCol xs="6">
<CCard className="mb-4">
<CCardHeader>
Navs
<DocsLink name="CNav" />
</CCardHeader>
<CCardBody>
<small>List Based</small>
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Base navs</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
The base <code>.nav</code> component is built with flexbox and provide a strong
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>
<CNavItem>
<CNavLink active>Active</CNavLink>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
<hr />
<small>Link Based</small>
<CNav>
<CNavLink>Active</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink disabled>Disabled</CNavLink>
</Example>
<p className="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNav>
<hr />
<small>Link Base</small>
</Example>
</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">
<CNavLink>Active</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink disabled>Disabled</CNavLink>
<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>
<hr />
<small>Link Based</small>
</Example>
<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">
<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>
<CNavLink>Link</CNavLink>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Another Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="6">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> tabs</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Vertical</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the{' '}
<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">
<CNavLink active>Active</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink>Link</CNavLink>
<CNavLink disabled>Disabled</CNavLink>
<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>
</CCardBody>
</CCard>
</CCol>
<CCol xs="6">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> pills</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Pills</small>
</CCardHeader>
<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">
<CNavItem>
<CNavLink active>Link</CNavLink>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> fill and justify</small>
</CCardHeader>
<CCardBody>
<CNav fill variant="pills">
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Fill and justify</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Force your <code>.nav</code>'s contents to extend the full available width one of two
modifier classes. To proportionately fill all available space with your{' '}
<code>.nav-item</code>s, use <code>layout="fill"</code>. Notice that all horizontal
space is occupied, but not every nav item has the same width.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/nav#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink active>Active</CNavLink>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Longer nav link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
<hr />
<CNav fill variant="pills">
<CNavLink active className="nav-item">
</Example>
<p className="text-medium-emphasis small">
For equal-width elements, use <code>layout="justified"</code>. All horizontal space
will be occupied by nav links, but unlike the .nav-fill above, every nav item will be
the same width.
</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
</CNavLink>
<CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item">Link</CNavLink>
<CNavLink className="nav-item" disabled>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNav>
<hr />
<CNav justified variant="pills">
</Example>
</CCardBody>
</CCard>
</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>
<CNavLink active>Active</CNavLink>
</CNavItem>
<CNavItem>
<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>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem>Separated link</CDropdownItem>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</CCardBody>
</CCard>
</CCol>
<CCol xs="6">
<CCard className="mb-4">
<CCardHeader>
Navs
<small> pills with dropdowns</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/nav#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink active>Link</CNavLink>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
<CDropdownItem divider />
<CDropdownItem>Separated link</CDropdownItem>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink>Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink disabled>Disabled</CNavLink>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
</Example>
</CCardBody>
</CCard>
</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 { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
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 (
<>
<CCard className="mb-4">
<CCardHeader>
Popovers
<DocsLink name="CPopover" />
</CCardHeader>
<CCardBody>
{/*eslint-disable-next-line*/}
<p className="text-muted">Hover over the links below to see popover:</p>
<p className="muted">
Tight pants next level keffiyeh
<CPopover title="Popover header" content="Popover text">
<CLink> you probably </CLink>
</CPopover>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
apparel
<CPopover title="Popover header" content="Popover text">
<CLink> have a </CLink>
</CPopover>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
really ironic artisan
<CPopover title="Popover header" content="Popover text">
<CLink> whatever keytar </CLink>
</CPopover>
scenester farm-to-table banksy Austin
<CPopover title="Popover header" content="Popover text">
<CLink> twitter handle </CLink>
</CPopover>
freegan cred raw denim single-origin coffee viral.
</p>
</CCardBody>
</CCard>
<hr />
<CCard className="mb-4">
<CCardHeader>
Popovers
<small> placement</small>
</CCardHeader>
<CCardBody>
<div className="my-3">
<CRow>
{placements.map((placement) => {
return (
<CCol md="4" className="py-4 text-center" key={placement}>
<CPopover
title="Popover header"
content={`Popover with placement: ${placement}`}
placement={placement}
trigger="click"
>
<CButton color="primary">{placement}</CButton>
</CPopover>
</CCol>
)
})}
</CRow>
</div>
</CCardBody>
</CCard>
</>
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Popover</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/popover">
<CPopover
title="Popover title"
content="And here’s some amazing content. It’s very engaging. Right?"
placement="end"
>
<CButton color="danger" size="lg">
Click to toggle popover
</CButton>
</CPopover>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Popover</strong> <small>Four directions</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Four options are available: top, right, bottom, and left aligned. Directions are
mirrored when using CoreUI for React in RTL.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/popover#four-directions">
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
>
<CButton color="secondary">Popover on top</CButton>
</CPopover>
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="end"
>
<CButton color="secondary">Popover on right</CButton>
</CPopover>
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="bottom"
>
<CButton color="secondary">Popover on bottom</CButton>
</CPopover>
<CPopover
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="start"
>
<CButton color="secondary">Popover on left</CButton>
</CPopover>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}

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 { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable'
import { Example } from 'src/reusable'
const ChecksRadios = () => {
return (
@ -24,10 +24,10 @@ const ChecksRadios = () => {
<strong>React Checkbox</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> attribute and the associated{' '}
<code class="css-0">&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input's state.
<p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
are automatically styled to match with a lighter color to help indicate the input's
state.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
@ -42,10 +42,10 @@ const ChecksRadios = () => {
<strong>React Radio</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> attribute and the associated{' '}
<code class="css-0">&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input's state.
<p className="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
are automatically styled to match with a lighter color to help indicate the input's
state.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios">
<CFormCheck
@ -97,10 +97,10 @@ const ChecksRadios = () => {
<strong>React Switches</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A switch has the markup of a custom checkbox but uses the{' '}
<code class="css-0">switch</code> boolean properly to render a toggle switch. Switches
also support the <code class="css-0">disabled</code> attribute.
<p className="text-medium-emphasis small">
A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
attribute.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches">
<CFormCheck
@ -165,7 +165,7 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
</CCardHeader>
<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
vertically stacked and appropriately spaced.
</p>
@ -207,10 +207,9 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Inline</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Group checkboxes or radios on the same horizontal row by adding{' '}
<code class="css-0">inline</code> boolean property to any{' '}
<code class="css-0">&lt;CFormCheck&gt;</code>.
<p className="text-medium-emphasis small">
Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
boolean property to any <code>&lt;CFormCheck&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
@ -259,9 +258,9 @@ const ChecksRadios = () => {
<strong>React Checks and Radios</strong> <small>Without labels</small>
</CCardHeader>
<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
instance, using <code class="css-0">aria-label</code>).
instance, using <code>aria-label</code>).
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels">
<div>
@ -286,10 +285,9 @@ const ChecksRadios = () => {
<strong>Toggle buttons</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create button-like checkboxes and radio buttons by using{' '}
<code class="css-0">button</code> boolean property on the{' '}
<code class="css-0">&lt;CFormCheck&gt;</code> component. These toggle buttons can
<p className="text-medium-emphasis small">
Create button-like checkboxes and radio buttons by using <code>button</code> boolean
property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
@ -349,7 +347,7 @@ const ChecksRadios = () => {
/>
</Example>
<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.
</p>
<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,
CRow,
} from '@coreui/react'
import { DocsLink, Example } from 'src/reusable'
import { Example } from 'src/reusable'
const FormControl = () => {
return (
@ -50,9 +50,9 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Set heights using <code class="css-0">size</code> property like{' '}
<code class="css-0">size="lg"</code> and <code class="css-0">size="sm"</code>.
<p className="text-medium-emphasis small">
Set heights using <code>size</code> property like <code>size="lg"</code> and{' '}
<code>size="sm"</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing">
<CFormControl
@ -84,9 +84,9 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a
grayed out appearance and remove pointer events.
<p className="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#disabled">
<CFormControl
@ -114,10 +114,10 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Readonly</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code class="css-0">readOnly</code> boolean attribute on an input to prevent
modification of the input's value. Read-only inputs appear lighter (just like disabled
inputs), but retain the standard cursor.
<p className="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
the input's value. Read-only inputs appear lighter (just like disabled inputs), but
retain the standard cursor.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly">
<CFormControl
@ -136,11 +136,10 @@ const FormControl = () => {
<strong>React Form Control</strong> <small>Readonly plain text</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you want to have <code class="css-0">&lt;input readonly&gt;</code> elements in your
form styled as plain text, use the <code class="css-0">plainText</code> boolean
property to remove the default form field styling and preserve the correct margin and
padding.
<p className="text-medium-emphasis small">
If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled
as plain text, use the <code>plainText</code> boolean property to remove the default
form field styling and preserve the correct margin and padding.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
<CRow className="mb-3">
@ -167,8 +166,8 @@ const FormControl = () => {
</CRow>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
<CForm class="row g-3">
<div class="col-auto">
<CForm className="row g-3">
<div className="col-auto">
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
Email
</CFormLabel>
@ -180,13 +179,13 @@ const FormControl = () => {
plainText
/>
</div>
<div class="col-auto">
<div className="col-auto">
<CFormLabel htmlFor="inputPassword2" className="visually-hidden">
Password
</CFormLabel>
<CFormControl type="password" id="inputPassword2" placeholder="Password" />
</div>
<div class="col-auto">
<div className="col-auto">
<CButton type="submit" className="mb-3">
Confirm identity
</CButton>
@ -203,19 +202,19 @@ const FormControl = () => {
</CCardHeader>
<CCardBody>
<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>
<CFormControl type="file" id="formFile" />
</div>
<div class="mb-3">
<div className="mb-3">
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
<CFormControl type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<div className="mb-3">
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
<CFormControl type="file" id="formFileDisabled" disabled />
</div>
<div class="mb-3">
<div className="mb-3">
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
<CFormControl type="file" size="sm" id="formFileSm" />
</div>

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

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

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

@ -14,7 +14,7 @@ import {
CInputGroupText,
CRow,
} from '@coreui/react'
import { DocsLink, Example } from 'src/reusable'
import { Example } from 'src/reusable'
const Layout = () => {
return (
@ -25,7 +25,7 @@ const Layout = () => {
<strong>Layout</strong> <small>Form grid</small>
</CCardHeader>
<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
that require multiple columns, varied widths, and additional alignment options.
</p>
@ -48,11 +48,8 @@ const Layout = () => {
<strong>Layout</strong> <small>Gutters</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By adding{' '}
<a href="https://coreui.io/docs/layout/gutters/" class="css-0">
gutter modifier classes
</a>
<p className="text-medium-emphasis small">
By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
, you can have control over the gutter width in as well the inline as block direction.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
@ -65,7 +62,7 @@ const Layout = () => {
</CCol>
</CRow>
</Example>
<p class="text-medium-emphasis small">
<p className="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
@ -118,19 +115,17 @@ const Layout = () => {
<strong>Layout</strong> <small>Horizontal form</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create horizontal forms with the grid by adding the <code class="css-0">.row</code>{' '}
class to form groups and using the <code class="css-0">.col-*-*</code> classes to
specify the width of your labels and controls. Be sure to add{' '}
<code class="css-0">.col-form-label</code> to your{' '}
<code class="css-0">&lt;CFormLabel&gt;</code>s as well so they're vertically centered
with their associated form controls.
<p className="text-medium-emphasis small">
Create horizontal forms with the grid by adding the <code>.row</code> class to form
groups and using the <code>.col-*-*</code> classes to specify the width of your labels
and controls. Be sure to add <code>.col-form-label</code> to your{' '}
<code>&lt;CFormLabel&gt;</code>s as well so they're vertically centered with their
associated form controls.
</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
alignment you need. For example, we've removed the{' '}
<code class="css-0">padding-top</code> on our stacked radio inputs label to better
align the text baseline.
alignment you need. For example, we've removed the <code>padding-top</code> on our
stacked radio inputs label to better align the text baseline.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form">
<CForm>
@ -195,13 +190,10 @@ const Layout = () => {
<strong>Layout</strong> <small>Horizontal form label sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Be sure to use <code class="css-0">.col-form-label-sm</code> or{' '}
<code class="css-0">.col-form-label-lg</code> to your{' '}
<code class="css-0">&lt;CFormLabel&gt;</code>s or{' '}
<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 className="text-medium-emphasis small">
Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form-label-sizing">
<CRow className="mb-3">
@ -254,14 +246,12 @@ const Layout = () => {
<strong>Layout</strong> <small>Column sizing</small>
</CCardHeader>
<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{' '}
<code class="css-0">&lt;CCol&gt;</code>s within a{' '}
<code class="css-0">&lt;CRow&gt;</code>. They'll split the available width equally
between them. You may also pick a subset of your columns to take up more or less
space, while the remaining <code class="css-0">&lt;CCol&gt;</code>s equally split the
rest, with specific column classes like <code class="css-0">&lt;CCol sm="7"&gt;</code>
.
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They'll split the
available width equally between them. You may also pick a subset of your columns to
take up more or less space, while the remaining <code>&lt;CCol&gt;</code>s equally
split the rest, with specific column classes like <code>&lt;CCol sm="7"&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing">
<CRow className="g-3">
@ -285,11 +275,11 @@ const Layout = () => {
<strong>Layout</strong> <small>Auto-sizing</small>
</CCardHeader>
<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{' '}
<code class="css-0">&lt;CCol&gt;</code> to{' '}
<code class="css-0">&lt;CCol xs="auto"&gt;</code> so that your columns only take up as
much space as needed. Put another way, the column sizes itself based on the contents.
<code>&lt;CCol&gt;</code> to <code>&lt;CCol xs="auto"&gt;</code> so that your columns
only take up as much space as needed. Put another way, the column sizes itself based
on the contents.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
<CForm className="row gy-2 gx-3 align-items-center">
@ -327,7 +317,7 @@ const Layout = () => {
</CCol>
</CForm>
</Example>
<p class="css-0">
<p className="text-medium-emphasis small">
You can then remix that once again with size-specific column classes.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
@ -375,15 +365,12 @@ const Layout = () => {
<strong>Layout</strong> <small>Inline forms</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Use the <code class="css-0">&lt;CCol xs="auto"&gt;</code> class to create horizontal
layouts. By adding{' '}
<a href="https://coreui.io/docs/layout/gutters/" class="css-0">
gutter modifier classes
</a>
, 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 className="text-medium-emphasis small">
Use the <code>&lt;CCol xs="auto"&gt;</code> class to create horizontal layouts. By
adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>,
we will have gutters in horizontal and vertical directions. The{' '}
<code>.align-items-center</code> aligns the form elements to the middle, making the{' '}
<code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/layout#inline-forms">
<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 { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
import { DocsLink, Example } from 'src/reusable'
import { Example } from 'src/reusable'
const Range = () => {
return (
@ -11,9 +11,9 @@ const Range = () => {
<strong>React Range</strong> <small></small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create custom <code class="css-0">&lt;input type="range"&gt;</code> controls with{' '}
<code class="css-0">&lt;CFormControl&gt;</code>.
<p className="text-medium-emphasis small">
Create custom <code>&lt;input type="range"&gt;</code> controls with{' '}
<code>&lt;CFormControl&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/range">
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>
@ -28,9 +28,9 @@ const Range = () => {
<strong>React Range</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a
grayed out appearance and remove pointer events.
<p className="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
appearance and remove pointer events.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#disabled">
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
@ -45,12 +45,10 @@ const Range = () => {
<strong>React Range</strong> <small>Min and max</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Range inputs have implicit values for <code class="css-0">min</code> and{' '}
<code class="css-0">max</code>—<code class="css-0">0</code> and{' '}
<code class="css-0">100</code>, respectively. You may specify new values for those
using the <code class="css-0">min</code> and <code class="css-0">max</code>{' '}
attributes.
<p className="text-medium-emphasis small">
Range inputs have implicit values for <code>min</code> and <code>max</code>—
<code>0</code> and <code>100</code>, respectively. You may specify new values for
those using the <code>min</code> and <code>max</code> attributes.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#min-and-max">
<CFormLabel htmlFor="customRange2">Example range</CFormLabel>
@ -65,10 +63,10 @@ const Range = () => {
<strong>React Range</strong> <small>Steps</small>
</CCardHeader>
<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{' '}
<code class="css-0">step</code> value. In the example below, we double the number of
steps by using <code class="css-0">step="0.5"</code>.
<code>step</code> value. In the example below, we double the number of steps by using{' '}
<code>step="0.5"</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/range#steps">
<CFormLabel htmlFor="customRange3">Example range</CFormLabel>

18
src/views/forms/select/Select.js
View File

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

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

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

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

@ -2,105 +2,108 @@ import React from 'react'
import {
CAlert,
CAlertHeading,
CButton,
CAlertLink,
CCard,
CCardBody,
CCardHeader,
CCol,
CLink,
CProgress,
CRow,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
const Alerts = () => {
const [visible, setVisible] = React.useState(10)
return (
<>
<CRow>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Alerts
<DocsLink name="CAlert" />
</CCardHeader>
<CCardBody>
<CAlert color="primary">This is a primary alert — check it out!</CAlert>
<CAlert color="secondary">This is a secondary alert — check it out!</CAlert>
<CAlert color="success">This is a success alert — check it out!</CAlert>
<CAlert color="danger">This is a danger alert — check it out!</CAlert>
<CAlert color="warning">This is a warning alert — check it out!</CAlert>
<CAlert color="info">This is a info alert — check it out!</CAlert>
<CAlert color="light">This is a light alert — check it out!</CAlert>
<CAlert color="dark">This is a dark alert — check it out!</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Alerts
<small>
{' '}
use <code>.alert-link</code> to provide links
</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Alert</strong>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
React Alert is prepared for any length of text, as well as an optional close button.
For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
<a href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
dismissing prop
</a>
.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert">
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
<CAlert color="success">A simple success alert—check it out!</CAlert>
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
<CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<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">
{/*eslint-disable-next-line*/}
This is a primary alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like.
</CAlert>
<CAlert color="secondary">
{/*eslint-disable-next-line*/}
This is a secondary alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>.
Give it a click if you like.
</CAlert>
<CAlert color="success">
{/*eslint-disable-next-line*/}
This is a success alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like.
</CAlert>
<CAlert color="danger">
{/*eslint-disable-next-line*/}
This is a danger alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like.
</CAlert>
<CAlert color="warning">
{/*eslint-disable-next-line*/}
This is a warning alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give
it a click if you like.
</CAlert>
<CAlert color="info">
{/*eslint-disable-next-line*/}
This is a info alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
a click if you like.
</CAlert>
<CAlert color="light">
{/*eslint-disable-next-line*/}
This is a light alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
a click if you like.
</CAlert>
<CAlert color="dark">
{/*eslint-disable-next-line*/}
This is a dark alert with&nbsp;
<CLink className="alert-link">an example link</CLink>. Give it a click if you like.
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it
a click if you like.
</CAlert>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Alerts
<small> additional content</small>
</CCardHeader>
<CCardBody>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Alert</strong> <small>Additional content</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
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">
<CAlertHeading>Well done!</CAlertHeading>
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
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
@ -112,38 +115,34 @@ const Alerts = () => {
tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>
Alerts
<small> dismissing</small>
</CCardHeader>
<CCardBody>
<CAlert color="info" dismissible>
I am an dismissible alert!
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Alert</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
<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 color="warning" show={visible} closeButton visible={setVisible}>
I will be closed in {visible} seconds!
<CProgress
striped
color="warning"
value={Number(visible) * 10}
size="xs"
className="mb-3"
/>
</CAlert>
<CButton color="primary" onClick={() => setVisible(10)}>
Reset timer
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}

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

@ -9,142 +9,118 @@ import {
CBadge,
CRow,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
const Badges = () => {
return (
<CRow>
<CCol xs="12" md="6">
<CCol lg={6}>
<CCard className="mb-4">
<CCardHeader>
Badges
<DocsLink name="CBadge" />
<strong>React Badges</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<h1>
Example heading <CBadge color="secondary">New</CBadge>
</h1>
<h2>
Example heading <CBadge color="secondary">New</CBadge>
</h2>
<h3>
Example heading <CBadge color="secondary">New</CBadge>
</h3>
<h4>
Example heading <CBadge color="secondary">New</CBadge>
</h4>
<h5>
Example heading <CBadge color="secondary">New</CBadge>
</h5>
<h6>
Example heading <CBadge color="secondary">New</CBadge>
</h6>
<p className="text-medium-emphasis small">
Bootstrap badge scale to suit the size of the parent element by using relative font
sizing and <code>em</code> units.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge">
<h1>
Example heading <CBadge color="secondary">New</CBadge>
</h1>
<h2>
Example heading <CBadge color="secondary">New</CBadge>
</h2>
<h3>
Example heading <CBadge color="secondary">New</CBadge>
</h3>
<h4>
Example heading <CBadge color="secondary">New</CBadge>
</h4>
<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>
<CCardFooter>
<CButton color="secondary">
Notifications{' '}
<CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>
9
</CBadge>
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCol lg={6}>
<CCard className="mb-4">
<CCardHeader>
Badges
<small> contextual variations</small>
<strong>React Badges</strong> <small>Contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge className="me-1" color="primary">
Primary
</CBadge>
<CBadge className="me-1" color="secondary">
Secondary
</CBadge>
<CBadge className="me-1" color="success">
Success
</CBadge>
<CBadge className="me-1" color="danger">
Danger
</CBadge>
<CBadge className="me-1" color="warning">
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>
<p className="text-medium-emphasis small">
Add any of the below-mentioned <code>color</code> props to modify the presentation of
a badge.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
<CBadge color="warning">warning</CBadge>
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</Example>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Badges
<small> pill badges</small>
<strong>React Badges</strong> <small>Pill badges</small>
</CCardHeader>
<CCardBody>
<CBadge className="me-1" color="primary" shape="rounded-pill">
Primary
</CBadge>
<CBadge className="me-1" color="secondary" shape="rounded-pill">
Secondary
</CBadge>
<CBadge className="me-1" color="success" shape="rounded-pill">
Success
</CBadge>
<CBadge className="me-1" color="danger" shape="rounded-pill">
Danger
</CBadge>
<CBadge className="me-1" color="warning" shape="rounded-pill">
Warning
</CBadge>
<CBadge className="me-1" color="info" shape="rounded-pill">
Info
</CBadge>
<CBadge className="me-1" color="light" shape="rounded-pill">
Light
</CBadge>
<CBadge className="me-1" color="dark" shape="rounded-pill">
Dark
</CBadge>
</CCardBody>
</CCard>
<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>
<p className="text-medium-emphasis small">
Apply the <code>shape="rounded-pill"</code> prop to make badges rounded.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/badge#pill-badges">
<CBadge color="primary" shape="rounded-pill">
primary
</CBadge>
<CBadge color="success" shape="rounded-pill">
success
</CBadge>
<CBadge color="danger" shape="rounded-pill">
danger
</CBadge>
<CBadge color="warning" shape="rounded-pill">
warning
</CBadge>
<CBadge color="info" shape="rounded-pill">
info
</CBadge>
<CBadge color="light" shape="rounded-pill">
light
</CBadge>
<CBadge color="dark" shape="rounded-pill">
dark
</CBadge>
</Example>
</CCardBody>
</CCard>
</CCol>

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

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

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

@ -5,234 +5,719 @@ import {
CCardBody,
CCardHeader,
CCol,
CLink,
CModal,
CModalBody,
CModalFooter,
CModalHeader,
CModalTitle,
CPopover,
CRow,
CTooltip,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import { Example } from 'src/reusable'
const Modals = () => {
const [modal, setModal] = useState(true)
const [large, setLarge] = useState(false)
const [small, setSmall] = useState(false)
const [primary, setPrimary] = useState(false)
const [success, setSuccess] = useState(false)
const [warning, setWarning] = useState(false)
const [danger, setDanger] = useState(false)
const [info, setInfo] = useState(false)
const LiveDemo = () => {
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>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 (
<CRow>
<CCol xs>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
Bootstrap Modals
<DocsLink name="CModal" />
<strong>React Modal</strong>
</CCardHeader>
<CCardBody>
<CButton onClick={() => setModal(!modal)} className="me-1">
Launch demo modal
</CButton>
<CButton onClick={() => setLarge(!large)} className="me-1">
Launch large modal
</CButton>
<CButton onClick={() => setSmall(!large)} className="me-1">
Launch small modal
</CButton>
<CModal visible={modal} onClose={setModal}>
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="primary">Do Something</CButton>{' '}
<CButton color="secondary" onClick={() => setModal(false)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={large} onClose={() => setLarge(!large)} size="lg">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="primary" onClick={() => setLarge(!large)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setLarge(!large)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={small} onClose={() => setSmall(!small)} size="sm">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="primary" onClick={() => setSmall(!small)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setSmall(!small)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<hr />
<CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1">
Primary modal
</CButton>
<CButton color="success" onClick={() => setSuccess(!success)} className="me-1">
Success modal
</CButton>
<CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">
Warning modal
</CButton>
<CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">
Danger modal
</CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="me-1">
Info modal
</CButton>
<CModal visible={primary} onClose={() => setPrimary(!primary)} color="primary">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="primary" onClick={() => setPrimary(!primary)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setPrimary(!primary)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={success} onClose={() => setSuccess(!success)} color="success">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="success" onClick={() => setSuccess(!success)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setSuccess(!success)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={warning} onClose={() => setWarning(!warning)} color="warning">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="warning" onClick={() => setWarning(!warning)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setWarning(!warning)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={danger} onClose={() => setDanger(!danger)} color="danger">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="danger" onClick={() => setDanger(!danger)}>
Do Something
</CButton>{' '}
<CButton color="secondary" onClick={() => setDanger(!danger)}>
Cancel
</CButton>
</CModalFooter>
</CModal>
<CModal visible={info} onClose={() => setInfo(!info)} color="info">
<CModalHeader closeButton>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setInfo(!info)}>
Cancel
</CButton>
<CButton color="info" onClick={() => setInfo(!info)}>
Do Something
</CButton>{' '}
</CModalFooter>
</CModal>
<p className="text-medium-emphasis small">
Below is a static modal example (meaning its <code>position</code> and{' '}
<code>display</code> have been overridden). Included are the modal header, modal body
(required for <code>padding</code>), and modal footer (optional). We ask that you
include modal headers with dismiss actions whenever possible, or provide another
explicit dismiss action.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal">
<CModal
className="show d-block position-static"
backdrop={false}
keyboard={false}
portal={false}
visible
>
<CModalHeader>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Modal body text goes here.</CModalBody>
<CModalFooter>
<CButton color="secondary">Close</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Live demo</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Toggle a working modal demo by clicking the button below. It will slide down and fade
in from the top of the page.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#live-demo">
{LiveDemo()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Static backdrop</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
modal will behave as though the backdrop is static, meaning it will not close when
clicking outside it. Click the button below to try it.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#static-backdrop">
{StaticBackdrop()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Scrolling long content</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
modal will behave as though the backdrop is static, meaning it will not close when
clicking outside it. Click the button below to try it.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
{ScrollingLongContent()}
</Example>
<p className="text-medium-emphasis small">
You can also create a scrollable modal that allows scroll the modal body by adding{' '}
<code>scrollable</code> prop.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#scrolling-long-content">
{ScrollingLongContent2()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Vertically centered</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>alignment="center</code> to <code>&lt;CModal&gt;</code> to vertically center
the modal.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
{VerticallyCentered()}
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/modal#vertically-centered">
{VerticallyCentered2()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Tooltips and popovers</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
<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
automatically dismissed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/modal#tooltips-and-popovers">
{TooltipsPopovers()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Optional sizes</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Modals have three optional sizes, available via modifier classes to be placed on a{' '}
<code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
horizontal scrollbars on narrower viewports.
</p>
<table className="table">
<thead>
<tr>
<th>Size</th>
<th>Property size</th>
<th>Modal max-width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small</td>
<td>
<code>'sm'</code>
</td>
<td>
<code>300px</code>
</td>
</tr>
<tr>
<td>Default</td>
<td className="text-medium-emphasis">None</td>
<td>
<code>500px</code>
</td>
</tr>
<tr>
<td>Large</td>
<td>
<code>'lg'</code>
</td>
<td>
<code>800px</code>
</td>
</tr>
<tr>
<td>Extra large</td>
<td>
<code>'xl'</code>
</td>
<td>
<code>1140px</code>
</td>
</tr>
</tbody>
</table>
<Example href="https://coreui.io/react/docs/4.0/components/modal#optional-sizes">
{OptionalSizes()}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Modal</strong> <small>Fullscreen Modal</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Another override is the option to pop up a modal that covers the user viewport,
available via property <code>fullscrean</code>.
</p>
<table className="table">
<thead>
<tr>
<th>Property fullscrean</th>
<th>Availability</th>
</tr>
</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>
</CCard>
</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