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

refactor: update some components to v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-02-18 23:40:31 +01:00
parent 76da5c50a7
commit e95c7e34bb
12 changed files with 681 additions and 751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
migration.md
View File

@ -16,6 +16,16 @@
- variant="pill" --> shape="rounded-pill" - variant="pill" --> shape="rounded-pill"
- variant="square" --> shape="rounded-0" - variant="square" --> shape="rounded-0"
## Forms
- `CInput` => `CFormControl`
- `CLabel` => `CFormLabel`
- `CSelect` => `CFormSelect`
- Deprecated component `CFormGroup`
- Deprecated component `CInputGroupAppend`
- Deprecated component `CInputGroupPrepend`
## Header ## Header
- Deprecated pro `withSubheader` - Deprecated pro `withSubheader`

2
src/containers/TheFooter.js
View File

@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react-ts'
const TheFooter = () => { const TheFooter = () => {
return ( return (
<CFooter fixed={false}> <CFooter>
<div> <div>
<a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a> <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
<span className="ms-1">&copy; 2020 creativeLabs.</span> <span className="ms-1">&copy; 2020 creativeLabs.</span>

6
src/containers/TheHeader.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { CToggler, CBreadcrumbRouter, CLink } from "@coreui/react"; import { CToggler, CBreadcrumbRouter } from "@coreui/react";
import { import {
CContainer, CContainer,
CHeader, CHeader,
@ -91,7 +91,7 @@ const TheHeader = () => {
className="border-0 c-subheader-nav m-0 px-0 px-md-3" className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes} routes={routes}
/> />
<CHeaderNav> {/* <CHeaderNav>
<CNavItem> <CNavItem>
<CNavLink href="#"> <CNavLink href="#">
<CIcon name="cil-speech" alt="Settings" /> <CIcon name="cil-speech" alt="Settings" />
@ -107,7 +107,7 @@ const TheHeader = () => {
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings <CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CNavLink> </CNavLink>
</CNavItem> </CNavItem>
</CHeaderNav> </CHeaderNav> */}
</CContainer> </CContainer>
</CHeader> </CHeader>
); );

2
src/containers/TheLayout.js
View File

@ -9,7 +9,7 @@ import {
const TheLayout = () => { const TheLayout = () => {
return ( return (
<div className="d-flex"> <div className="d-flex bg-light">
<TheSidebar/> <TheSidebar/>
<div className="wrapper"> <div className="wrapper">
<TheHeader/> <TheHeader/>

9
src/containers/TheSidebar.js
View File

@ -13,7 +13,7 @@ import {
CSidebar, CSidebar,
CSidebarBrand, CSidebarBrand,
CSidebarNav, CSidebarNav,
CSidebarNavGenerator, CCreateNavItem,
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
@ -27,8 +27,9 @@ const TheSidebar = () => {
return ( return (
<CSidebar <CSidebar
show={show} position="sticky"
onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })} selfHiding="md"
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
> >
<CSidebarBrand className="d-md-down-none" to="/"> <CSidebarBrand className="d-md-down-none" to="/">
<CIcon <CIcon
@ -44,7 +45,7 @@ const TheSidebar = () => {
</CSidebarBrand> </CSidebarBrand>
<CSidebarNav> <CSidebarNav>
<CSidebarNavGenerator <CCreateNavItem
items={navigation} items={navigation}
// components={{ // components={{
// CSidebarNavDivider, // CSidebarNavDivider,

318
src/containers/_nav.js
View File

@ -6,7 +6,7 @@ const _nav = [
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchorText: 'Dashboard', anchor: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>, icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: { badge: {
@ -14,217 +14,245 @@ const _nav = [
text: 'NEW', text: 'NEW',
} }
}, },
// { {
// _component: 'CSidebarNavTitle', _component: 'CNavTitle',
// items: ['Theme'] anchor: 'Theme'
// }, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchorText: 'Colors', anchor: 'Colors',
to: '/theme/colors', to: '/theme/colors',
icon: 'cil-drop', icon: 'cil-drop',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchorText: 'Typography', anchor: 'Typography',
to: '/theme/typography', to: '/theme/typography',
icon: 'cil-pencil', icon: 'cil-pencil',
}, },
// { {
// _component: 'CSidebarNavTitle', _component: 'CNavTitle',
// items: ['Components'] anchor: 'Components'
// }, },
{ {
_component: 'CNavGroup', _component: 'CNavGroup',
anchorText: 'Base', as: NavLink,
route: '/base', anchor: 'Base',
to: '/to',
icon: 'cil-puzzle', icon: 'cil-puzzle',
items: [ items: [
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchorText: 'Breadcrumb', anchor: 'Breadcrumb',
to: '/base/breadcrumbs', to: '/base/breadcrumbs',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchorText: 'Cards', anchor: 'Cards',
to: '/base/cards', to: '/base/cards',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Carousel', as: NavLink,
anchor: 'Carousel',
to: '/base/carousels', to: '/base/carousels',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Collapse', as: NavLink,
anchor: 'Collapse',
to: '/base/collapses', to: '/base/collapses',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Forms', as: NavLink,
anchor: 'Forms',
to: '/base/forms', to: '/base/forms',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Jumbotron', as: NavLink,
anchor: 'Jumbotron',
to: '/base/jumbotrons', to: '/base/jumbotrons',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'List group', as: NavLink,
anchor: 'List group',
to: '/base/list-groups', to: '/base/list-groups',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Navs', as: NavLink,
anchor: 'Navs',
to: '/base/navs', to: '/base/navs',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Navbars', as: NavLink,
anchor: 'Navbars',
to: '/base/navbars', to: '/base/navbars',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Pagination', as: NavLink,
anchor: 'Pagination',
to: '/base/paginations', to: '/base/paginations',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Popovers', as: NavLink,
anchor: 'Popovers',
to: '/base/popovers', to: '/base/popovers',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Progress', as: NavLink,
anchor: 'Progress',
to: '/base/progress-bar', to: '/base/progress-bar',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Switches', as: NavLink,
anchor: 'Switches',
to: '/base/switches', to: '/base/switches',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Tables', as: NavLink,
anchor: 'Tables',
to: '/base/tables', to: '/base/tables',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Tabs', as: NavLink,
anchor: 'Tabs',
to: '/base/tabs', to: '/base/tabs',
}, },
{ {
_component: 'CNavItem', _component: 'CNavItem',
anchorText: 'Tooltips', as: NavLink,
anchor: 'Tooltips',
to: '/base/tooltips', to: '/base/tooltips',
}, },
], ],
}, },
// { {
// _component: 'CNavGroup', _component: 'CNavGroup',
// anchorText: 'Buttons', anchor: 'Buttons',
// route: '/buttons', // route: '/buttons',
// icon: 'cil-cursor', icon: 'cil-cursor',
// items: [ items: [
// { {
// _component: 'CNavItem', _component: 'CNavItem',
// anchorText: 'Buttons', as: NavLink,
// to: '/buttons/buttons', anchor: 'Buttons',
// }, to: '/buttons/buttons',
// { },
// _component: 'CNavItem', {
// anchorText: 'Brand buttons', _component: 'CNavItem',
// to: '/buttons/brand-buttons', as: NavLink,
// }, anchor: 'Brand buttons',
// { to: '/buttons/brand-buttons',
// _component: 'CNavItem', },
// anchorText: 'Buttons groups', {
// to: '/buttons/button-groups', _component: 'CNavItem',
// }, as: NavLink,
// { anchor: 'Buttons groups',
// _component: 'CNavItem', to: '/buttons/button-groups',
// anchorText: 'Dropdowns', },
// to: '/buttons/button-dropdowns', {
// } _component: 'CNavItem',
// ], as: NavLink,
// }, anchor: 'Dropdowns',
// { to: '/buttons/button-dropdowns',
// _component: 'CNavItem', }
// anchorText: 'Charts', ],
// to: '/charts', },
// icon: 'cil-chart-pie' {
// }, _component: 'CNavItem',
// { as: NavLink,
// _component: 'CNavGroup', anchor: 'Charts',
// anchorText: 'Icons', to: '/charts',
// route: '/icons', icon: 'cil-chart-pie'
// icon: 'cil-star', },
// items: [ {
// { _component: 'CNavGroup',
// _component: 'CNavItem', anchor: 'Icons',
// anchorText: 'CoreUI Free', // route: '/icons',
// to: '/icons/coreui-icons', icon: 'cil-star',
// badge: { items: [
// color: 'success', {
// text: 'NEW', _component: 'CNavItem',
// }, as: NavLink,
// }, anchor: 'CoreUI Free',
// { to: '/icons/coreui-icons',
// _component: 'CNavItem', badge: {
// anchorText: 'CoreUI Flags', color: 'success',
// to: '/icons/flags', text: 'NEW',
// }, },
// { },
// _component: 'CNavItem', {
// anchorText: 'CoreUI Brands', _component: 'CNavItem',
// to: '/icons/brands', as: NavLink,
// }, anchor: 'CoreUI Flags',
// ], to: '/icons/flags',
// }, },
// { {
// _component: 'CNavGroup', _component: 'CNavItem',
// anchorText: 'Notifications', as: NavLink,
// route: '/notifications', anchor: 'CoreUI Brands',
// icon: 'cil-bell', to: '/icons/brands',
// items: [ },
// { ],
// _component: 'CNavItem', },
// anchorText: 'Alerts', {
// to: '/notifications/alerts', _component: 'CNavGroup',
// }, anchor: 'Notifications',
// { // route: '/notifications',
// _component: 'CNavItem', icon: 'cil-bell',
// anchorText: 'Badges', items: [
// to: '/notifications/badges', {
// }, _component: 'CNavItem',
// { as: NavLink,
// _component: 'CNavItem', anchor: 'Alerts',
// anchorText: 'Modal', to: '/notifications/alerts',
// to: '/notifications/modals', },
// }, {
// { _component: 'CNavItem',
// _component: 'CNavItem', as: NavLink,
// anchorText: 'Toaster', anchor: 'Badges',
// to: '/notifications/toaster' to: '/notifications/badges',
// } },
// ] {
// }, _component: 'CNavItem',
// { as: NavLink,
// _component: 'CNavItem', anchor: 'Modal',
// anchorText: 'Widgets', to: '/notifications/modals',
// to: '/widgets', },
// icon: 'cil-calculator', {
// badge: { _component: 'CNavItem',
// color: 'info', as: NavLink,
// text: 'NEW', anchor: 'Toaster',
// }, to: '/notifications/toaster'
// }, }
]
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Widgets',
to: '/widgets',
icon: 'cil-calculator',
badge: {
color: 'info',
text: 'NEW',
},
},
// { // {
// _component: 'CSidebarNavDivider' // _component: 'CSidebarNavDivider'
// }, // },
@ -234,35 +262,35 @@ const _nav = [
// }, // },
// { // {
// _component: 'CNavGroup', // _component: 'CNavGroup',
// anchorText: 'Pages', // anchor: 'Pages',
// route: '/pages', // route: '/pages',
// icon: 'cil-star', // icon: 'cil-star',
// items: [ // items: [
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Login', // anchor: 'Login',
// to: '/login', // to: '/login',
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Register', // anchor: 'Register',
// to: '/register', // to: '/register',
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Error 404', // anchor: 'Error 404',
// to: '/404', // to: '/404',
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Error 500', // anchor: 'Error 500',
// to: '/500', // to: '/500',
// }, // },
// ], // ],
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Disabled', // anchor: 'Disabled',
// icon: 'cil-ban', // icon: 'cil-ban',
// badge: { // badge: {
// color: 'secondary', // color: 'secondary',
@ -273,7 +301,7 @@ const _nav = [
// }, // },
// { // {
// _component: 'CSidebarNavDivider', // _component: 'CSidebarNavDivider',
// classanchorText: 'm-2' // classanchor: 'm-2'
// }, // },
// { // {
// _component: 'CSidebarNavTitle', // _component: 'CSidebarNavTitle',
@ -281,37 +309,37 @@ const _nav = [
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Label danger', // anchor: 'Label danger',
// to: '', // to: '',
// icon: { // icon: {
// anchorText: 'cil-star', // anchor: 'cil-star',
// classanchorText: 'text-danger' // classanchor: 'text-danger'
// }, // },
// label: true // label: true
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Label info', // anchor: 'Label info',
// to: '', // to: '',
// icon: { // icon: {
// anchorText: 'cil-star', // anchor: 'cil-star',
// classanchorText: 'text-info' // classanchor: 'text-info'
// }, // },
// label: true // label: true
// }, // },
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchorText: 'Label warning', // anchor: 'Label warning',
// to: '', // to: '',
// icon: { // icon: {
// anchorText: 'cil-star', // anchor: 'cil-star',
// classanchorText: 'text-warning' // classanchor: 'text-warning'
// }, // },
// label: true // label: true
// }, // },
// { // {
// _component: 'CSidebarNavDivider', // _component: 'CSidebarNavDivider',
// classanchorText: 'm-2' // classanchor: 'm-2'
// } // }
] ]

12
src/reusable/DocsLink.js
View File

@ -11,13 +11,13 @@ const DocsLink = props => {
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return ( return (
<div className="card-header-actions"> <div className="float-end">
<CLink <CLink
{...rest} {...rest}
href={href} href={href}
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
className="card-header-action" className="card-header-action"
> >
<small className="text-muted">{ text || 'docs' }</small> <small className="text-muted">{ text || 'docs' }</small>
</CLink> </CLink>
@ -25,4 +25,4 @@ const DocsLink = props => {
) )
} }
export default React.memo(DocsLink) export default React.memo(DocsLink)

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

@ -1,17 +1,17 @@
import React from 'react' import React from "react";
import { import {
CBreadcrumb, CBreadcrumb,
CBreadcrumbItem, CBreadcrumbItem,
CBreadcrumbRouter,
CCard, CCard,
CCardBody, CCardBody,
CCardHeader, CCardHeader,
CCol, CCol,
CRow, CRow,
CLink CLink,
} from '@coreui/react-ts' } from "@coreui/react-ts";
import { DocsLink } from 'src/reusable' import { CBreadcrumbRouter } from '@coreui/react'
import routes from '../../../routes' import { DocsLink } from "src/reusable";
import routes from "../../../routes";
const Breadcrumbs = () => { const Breadcrumbs = () => {
return ( return (
@ -20,11 +20,11 @@ const Breadcrumbs = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Breadcrumb Bootstrap Breadcrumb
<DocsLink name="CBreadcrumb"/> <DocsLink name="CBreadcrumb" />
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>CBreadcrumbRouter wrapper component</h6> <h6>CBreadcrumbRouter wrapper component</h6>
<CBreadcrumbRouter routes={routes}/> <CBreadcrumbRouter routes={routes} />
<h6>Manual</h6> <h6>Manual</h6>
<CBreadcrumb> <CBreadcrumb>
<CBreadcrumbItem> <CBreadcrumbItem>
@ -51,15 +51,13 @@ const Breadcrumbs = () => {
<CBreadcrumbItem> <CBreadcrumbItem>
<CLink href="#">Data</CLink> <CLink href="#">Data</CLink>
</CBreadcrumbItem> </CBreadcrumbItem>
<CBreadcrumbItem active> <CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
Bootstrap
</CBreadcrumbItem>
</CBreadcrumb> </CBreadcrumb>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
) );
} };
export default Breadcrumbs export default Breadcrumbs;

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

@ -49,9 +49,7 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with icon Card with icon
<div className="card-header-actions"> <CIcon name="cil-check" className="float-end"/>
<CIcon name="cil-check" className="float-end"/>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -64,9 +62,7 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with switch Card with switch
<div className="card-header-actions"> <CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
<CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -79,9 +75,7 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<div className="card-header-actions"> <CBadge color="success" className="float-end">Success</CBadge>
<CBadge color="success" className="float-end">Success</CBadge>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -94,9 +88,7 @@ const Cards = () => {
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<div className="card-header-actions"> <CBadge shape="pill" color="danger" className="float-end">42</CBadge>
<CBadge shape="pill" color="danger" className="float-end">42</CBadge>
</div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
@ -108,7 +100,7 @@ const Cards = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="primary"> <CCard className="mb-4 border-primary">
<CCardHeader> <CCardHeader>
Card outline primary Card outline primary
</CCardHeader> </CCardHeader>
@ -120,7 +112,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="secondary"> <CCard className="mb-4 border-secondary">
<CCardHeader> <CCardHeader>
Card outline secondary Card outline secondary
</CCardHeader> </CCardHeader>
@ -132,7 +124,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="success"> <CCard className="mb-4 border-success">
<CCardHeader> <CCardHeader>
Card outline success Card outline success
</CCardHeader> </CCardHeader>
@ -144,7 +136,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="info"> <CCard className="mb-4 border-info">
<CCardHeader> <CCardHeader>
Card outline info Card outline info
</CCardHeader> </CCardHeader>
@ -156,7 +148,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="warning"> <CCard className="mb-4 border-warning">
<CCardHeader> <CCardHeader>
Card outline warning Card outline warning
</CCardHeader> </CCardHeader>
@ -168,7 +160,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard borderColor="danger"> <CCard className="mb-4 border-danger">
<CCardHeader> <CCardHeader>
Card outline danger Card outline danger
</CCardHeader> </CCardHeader>
@ -183,7 +175,7 @@ const Cards = () => {
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="primary"> <CCard className="border-top-primary border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -195,7 +187,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="secondary"> <CCard className="border-top-secondary border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -207,7 +199,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="success"> <CCard className="border-top-success border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -219,7 +211,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="info"> <CCard className="border-top-info border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -231,7 +223,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="warning"> <CCard className="border-top-warning border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -243,7 +235,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard accentColor="danger"> <CCard className="border-top-danger border-top-3 mb-4">
<CCardHeader> <CCardHeader>
Card with accent Card with accent
</CCardHeader> </CCardHeader>
@ -257,7 +249,7 @@ const Cards = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white text-center"> <CCard color="primary" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -267,7 +259,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="success" className="text-white text-center"> <CCard color="success" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -277,7 +269,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="info" className="text-white text-center"> <CCard color="info" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -287,7 +279,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="warning" className="text-white text-center"> <CCard color="warning" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -297,7 +289,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="danger" className="text-white text-center"> <CCard color="danger" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -307,7 +299,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white text-center"> <CCard color="primary" className="text-white text-center mb-4">
<CCardBody> <CCardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -319,7 +311,7 @@ const Cards = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="primary" className="text-white"> <CCard color="primary" className="text-white mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
</CCardHeader> </CCardHeader>
@ -331,7 +323,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="success" className="text-white"> <CCard color="success" className="text-white mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
</CCardHeader> </CCardHeader>
@ -343,7 +335,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="info" className="text-white"> <CCard color="info" className="text-white mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
</CCardHeader> </CCardHeader>
@ -355,7 +347,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard color="warning" className="text-white"> <CCard color="warning" className="text-white mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
</CCardHeader> </CCardHeader>
@ -366,45 +358,6 @@ const Cards = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4">
<CCard color="gradient-secondary">
<CCardHeader>
Card title - gradient
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" sm="6" md="4">
<CFade in={showCard}>
<CCard className="mb-4">
<CCardHeader>
Card actions
<div className="card-header-actions">
<CLink className="card-header-action">
<CIcon name="cil-settings" />
</CLink>
<CLink className="card-header-action" onClick={() => setCollapsed(!collapsed)}>
<CIcon name={collapsed ? 'cil-chevron-bottom':'cil-chevron-top'} />
</CLink>
<CLink className="card-header-action" onClick={() => setShowCard(false)}>
<CIcon name="cil-x-circle" />
</CLink>
</div>
</CCardHeader>
<CCollapse show={collapsed}>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCollapse>
</CCard>
</CFade>
</CCol>
</CRow> </CRow>
</> </>
) )

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

File diff suppressed because it is too large Load Diff

12
src/views/base/navbars/Navbars.js
View File

@ -1,4 +1,10 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import {
CToggler,
CForm,
CInput,
CImg
} from '@coreui/react'
import { import {
CCard, CCard,
CCardBody, CCardBody,
@ -11,14 +17,10 @@ import {
CNavbarNav, CNavbarNav,
CNavbarBrand, CNavbarBrand,
CNavbarText, CNavbarText,
CToggler,
CNavLink, CNavLink,
CDropdown, CDropdown,
CForm,
CInput,
CButton, CButton,
CImg } from '@coreui/react-ts'
} from '@coreui/react'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
const CNavbars = () => { const CNavbars = () => {

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

@ -154,7 +154,7 @@ const Alerts = () => {
color="warning" color="warning"
show={visible} show={visible}
closeButton closeButton
onShowChange={setVisible} visible={setVisible}
> >
I will be closed in {visible} seconds! I will be closed in {visible} seconds!
<CProgress <CProgress