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

refactor: migrate to CoreUI v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-02-16 01:32:28 +01:00
parent d5ba135d18
commit e484c60e6f
48 changed files with 2186 additions and 2179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
migration.md
View File

@ -1,10 +1,27 @@
# Migration from version 3 # Migration from version 3
## CSS
- `ml-*` to `ms-*`
- `mfs-*` to `ms-*`
- `mr-*` to `me-*`
- `mfe-*` to `me-*`
- `pl-*` to `ps-*`
- `pr-*` to `pe-*`
- `float-left` to `float-start`
- `float-right` to `float-end`
## Badges ## Badges
- variant="pill" --> shape="rounded-pill" - variant="pill" --> shape="rounded-pill"
- variant="square" --> shape="rounded-0" - variant="square" --> shape="rounded-0"
## Header
- Deprecated pro `withSubheader`
- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
## List Group ## List Group
- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`. - Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.

2
package.json
View File

@ -24,7 +24,7 @@
}, },
"dependencies": { "dependencies": {
"@coreui/chartjs": "^2.0.0", "@coreui/chartjs": "^2.0.0",
"@coreui/coreui": "^3.4.0", "@coreui/coreui": "next",
"@coreui/icons": "^2.0.0-rc.0", "@coreui/icons": "^2.0.0-rc.0",
"@coreui/icons-react": "^1.0.2", "@coreui/icons-react": "^1.0.2",
"@coreui/react": "^3.4.0", "@coreui/react": "^3.4.0",

8
src/containers/TheFooter.js
View File

@ -1,15 +1,15 @@
import React from 'react' import React from 'react'
import { CFooter } from '@coreui/react' import { CFooter } from '@coreui/react-ts'
const TheFooter = () => { const TheFooter = () => {
return ( return (
<CFooter fixed={false}> <CFooter fixed={false}>
<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="ml-1">&copy; 2020 creativeLabs.</span> <span className="ms-1">&copy; 2020 creativeLabs.</span>
</div> </div>
<div className="mfs-auto"> <div className="ms-auto">
<span className="mr-1">Powered by</span> <span className="me-1">Powered by</span>
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a> <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
</div> </div>
</CFooter> </CFooter>

176
src/containers/TheHeader.js
View File

@ -1,100 +1,116 @@
import React from 'react' import React from "react";
import { useSelector, useDispatch } from 'react-redux' import { NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { CToggler, CBreadcrumbRouter, CLink } from "@coreui/react";
import { import {
CContainer,
CHeader, CHeader,
CToggler,
CHeaderBrand, CHeaderBrand,
CHeaderDivider,
CHeaderNav, CHeaderNav,
CHeaderNavItem, CNavLink,
CHeaderNavLink, CNavItem,
CSubheader, } from "@coreui/react-ts";
CBreadcrumbRouter, import CIcon from "@coreui/icons-react";
CLink
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
// routes config // routes config
import routes from '../routes' import routes from "../routes";
import { import {
TheHeaderDropdown, TheHeaderDropdown,
TheHeaderDropdownMssg, TheHeaderDropdownMssg,
TheHeaderDropdownNotif, TheHeaderDropdownNotif,
TheHeaderDropdownTasks TheHeaderDropdownTasks,
} from './index' } from "./index";
const TheHeader = () => { const TheHeader = () => {
const dispatch = useDispatch() const dispatch = useDispatch();
const sidebarShow = useSelector(state => state.sidebarShow) const sidebarShow = useSelector((state) => state.sidebarShow);
const toggleSidebar = () => { const toggleSidebar = () => {
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive' const val = [true, "responsive"].includes(sidebarShow)
dispatch({type: 'set', sidebarShow: val}) ? false
} : "responsive";
dispatch({ type: "set", sidebarShow: val });
};
const toggleSidebarMobile = () => { const toggleSidebarMobile = () => {
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive' const val = [false, "responsive"].includes(sidebarShow)
dispatch({type: 'set', sidebarShow: val}) ? true
} : "responsive";
dispatch({ type: "set", sidebarShow: val });
};
return ( return (
<CHeader withSubheader> <CHeader position="sticky" className="mb-4">
<CToggler <CContainer fluid>
inHeader <CToggler
className="ml-md-3 d-lg-none" inHeader
onClick={toggleSidebarMobile} className="ms-md-3 d-lg-none"
/> onClick={toggleSidebarMobile}
<CToggler
inHeader
className="ml-3 d-md-down-none"
onClick={toggleSidebar}
/>
<CHeaderBrand className="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo"/>
</CHeaderBrand>
<CHeaderNav className="d-md-down-none mr-auto">
<CHeaderNavItem className="px-3" >
<CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink to="/users">Users</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem className="px-3">
<CHeaderNavLink>Settings</CHeaderNavLink>
</CHeaderNavItem>
</CHeaderNav>
<CHeaderNav className="px-3">
<TheHeaderDropdownNotif/>
<TheHeaderDropdownTasks/>
<TheHeaderDropdownMssg/>
<TheHeaderDropdown/>
</CHeaderNav>
<CSubheader className="px-3 justify-content-between">
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/> />
<div className="d-md-down-none mfe-2 c-subheader-nav"> <CToggler
<CLink className="c-subheader-nav-link"href="#"> inHeader
<CIcon name="cil-speech" alt="Settings" /> className="ms-3 d-md-down-none"
</CLink> onClick={toggleSidebar}
<CLink />
className="c-subheader-nav-link" <CHeaderBrand className="mx-auto d-lg-none" to="/">
aria-current="page" <CIcon name="logo" height="48" alt="Logo" />
to="/dashboard" </CHeaderBrand>
>
<CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
</CLink>
<CLink className="c-subheader-nav-link" href="#">
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CLink>
</div>
</CSubheader>
</CHeader>
)
}
export default TheHeader <CHeaderNav className="d-md-down-none me-auto">
<CNavItem>
<CNavLink
to="/dashboard"
component={NavLink}
activeClassName="active"
>
Dashboard
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink to="/users" component={NavLink} activeClassName="active">
Users
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav>
<TheHeaderDropdownNotif />
<TheHeaderDropdownTasks />
<TheHeaderDropdownMssg />
<TheHeaderDropdown />
</CHeaderNav>
</CContainer>
<CHeaderDivider />
<CContainer fluid>
<CBreadcrumbRouter
className="border-0 c-subheader-nav m-0 px-0 px-md-3"
routes={routes}
/>
<CHeaderNav>
<CNavItem>
<CNavLink href="#">
<CIcon name="cil-speech" alt="Settings" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink to="/users" component={NavLink} activeClassName="active">
<CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
</CNavLink>
</CNavItem>
</CHeaderNav>
</CContainer>
</CHeader>
);
};
export default TheHeader;

76
src/containers/TheHeaderDropdown.js
View File

@ -1,87 +1,71 @@
import React from 'react' import React from 'react'
import { import {
CAvatar,
CBadge, CBadge,
CDropdown, CDropdown,
CDropdownDivider,
CDropdownHeader,
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CImg } from '@coreui/react-ts'
} from '@coreui/react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdown = () => { const TheHeaderDropdown = () => {
return ( return (
<CDropdown <CDropdown
inNav variant="nav-item"
className="c-header-nav-items mx-2"
direction="down"
> >
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle placement="bottom-end">
<div className="c-avatar"> <CAvatar image="avatars/6.jpg" />
<CImg
src={'avatars/6.jpg'}
className="c-avatar-img"
alt="admin@bootstrapmaster.com"
/>
</div>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu className="pt-0" placement="bottom-end">
<CDropdownItem <CDropdownHeader className="bg-light fw-semibold py-2">
header Account
tag="div" </CDropdownHeader>
color="light"
className="text-center"
>
<strong>Account</strong>
</CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-bell" className="mfe-2" /> <CIcon name="cil-bell" className="me-2" />
Updates Updates
<CBadge color="info" className="mfs-auto">42</CBadge> <CBadge color="info" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-envelope-open" className="mfe-2" /> <CIcon name="cil-envelope-open" className="me-2" />
Messages Messages
<CBadge color="success" className="mfs-auto">42</CBadge> <CBadge color="success" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-task" className="mfe-2" /> <CIcon name="cil-task" className="me-2" />
Tasks Tasks
<CBadge color="danger" className="mfs-auto">42</CBadge> <CBadge color="danger" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-comment-square" className="mfe-2" /> <CIcon name="cil-comment-square" className="me-2" />
Comments Comments
<CBadge color="warning" className="mfs-auto">42</CBadge> <CBadge color="warning" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem <CDropdownHeader className="bg-light fw-semibold py-2">
header Settings
tag="div" </CDropdownHeader>
color="light" <CDropdownItem>
className="text-center" <CIcon name="cil-user" className="me-2" />Profile
>
<strong>Settings</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-user" className="mfe-2" />Profile <CIcon name="cil-settings" className="me-2" />
</CDropdownItem>
<CDropdownItem>
<CIcon name="cil-settings" className="mfe-2" />
Settings Settings
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-credit-card" className="mfe-2" /> <CIcon name="cil-credit-card" className="me-2" />
Payments Payments
<CBadge color="secondary" className="mfs-auto">42</CBadge> <CBadge color="secondary" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-file" className="mfe-2" /> <CIcon name="cil-file" className="me-2" />
Projects Projects
<CBadge color="primary" className="mfs-auto">42</CBadge> <CBadge color="primary" className="ms-auto">42</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem divider /> <CDropdownDivider />
<CDropdownItem> <CDropdownItem>
<CIcon name="cil-lock-locked" className="mfe-2" /> <CIcon name="cil-lock-locked" className="me-2" />
Lock Account Lock Account
</CDropdownItem> </CDropdownItem>
</CDropdownMenu> </CDropdownMenu>

21
src/containers/TheHeaderDropdownMssg.js
View File

@ -13,8 +13,7 @@ const TheHeaderDropdownMssg = () => {
const itemsCount = 4 const itemsCount = 4
return ( return (
<CDropdown <CDropdown
inNav variant="nav-item"
className="c-header-nav-item mx-2"
direction="down" direction="down"
> >
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle className="c-header-nav-link" caret={false}>
@ -30,7 +29,7 @@ const TheHeaderDropdownMssg = () => {
</CDropdownItem> </CDropdownItem>
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 mr-3 float-left"> <div className="pt-3 me-3 float-start">
<div className="c-avatar"> <div className="c-avatar">
<CImg <CImg
src={'avatars/7.jpg'} src={'avatars/7.jpg'}
@ -42,7 +41,7 @@ const TheHeaderDropdownMssg = () => {
</div> </div>
<div> <div>
<small className="text-muted">John Doe</small> <small className="text-muted">John Doe</small>
<small className="text-muted float-right mt-1">Just now</small> <small className="text-muted float-end mt-1">Just now</small>
</div> </div>
<div className="text-truncate font-weight-bold"> <div className="text-truncate font-weight-bold">
<span className="fa fa-exclamation text-danger"></span> Important message <span className="fa fa-exclamation text-danger"></span> Important message
@ -55,7 +54,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 mr-3 float-left"> <div className="pt-3 me-3 float-start">
<div className="c-avatar"> <div className="c-avatar">
<CImg <CImg
src={'avatars/6.jpg'} src={'avatars/6.jpg'}
@ -67,7 +66,7 @@ const TheHeaderDropdownMssg = () => {
</div> </div>
<div> <div>
<small className="text-muted">Jane Dovve</small> <small className="text-muted">Jane Dovve</small>
<small className="text-muted float-right mt-1">5 minutes ago</small> <small className="text-muted float-end mt-1">5 minutes ago</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@ -77,7 +76,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 mr-3 float-left"> <div className="pt-3 me-3 float-start">
<div className="c-avatar"> <div className="c-avatar">
<CImg <CImg
src={'avatars/5.jpg'} src={'avatars/5.jpg'}
@ -89,7 +88,7 @@ const TheHeaderDropdownMssg = () => {
</div> </div>
<div> <div>
<small className="text-muted">Janet Doe</small> <small className="text-muted">Janet Doe</small>
<small className="text-muted float-right mt-1">1:52 PM</small> <small className="text-muted float-end mt-1">1:52 PM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@ -99,7 +98,7 @@ const TheHeaderDropdownMssg = () => {
<CDropdownItem href="#"> <CDropdownItem href="#">
<div className="message"> <div className="message">
<div className="pt-3 mr-3 float-left"> <div className="pt-3 me-3 float-start">
<div className="c-avatar"> <div className="c-avatar">
<CImg <CImg
src={'avatars/4.jpg'} src={'avatars/4.jpg'}
@ -111,7 +110,7 @@ const TheHeaderDropdownMssg = () => {
</div> </div>
<div> <div>
<small className="text-muted">Joe Doe</small> <small className="text-muted">Joe Doe</small>
<small className="text-muted float-right mt-1">4:03 AM</small> <small className="text-muted float-end mt-1">4:03 AM</small>
</div> </div>
<div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div> <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
<div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
@ -124,4 +123,4 @@ const TheHeaderDropdownMssg = () => {
) )
} }
export default TheHeaderDropdownMssg export default TheHeaderDropdownMssg

17
src/containers/TheHeaderDropdownNotif.js
View File

@ -6,15 +6,14 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CProgress CProgress
} from '@coreui/react' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdownNotif = () => { const TheHeaderDropdownNotif = () => {
const itemsCount = 5 const itemsCount = 5
return ( return (
<CDropdown <CDropdown
inNav variant="nav-item"
className="c-header-nav-item mx-2"
> >
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle className="c-header-nav-link" caret={false}>
<CIcon name="cil-bell"/> <CIcon name="cil-bell"/>
@ -29,11 +28,11 @@ const TheHeaderDropdownNotif = () => {
> >
<strong>You have {itemsCount} notifications</strong> <strong>You have {itemsCount} notifications</strong>
</CDropdownItem> </CDropdownItem>
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem> <CDropdownItem><CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem> <CDropdownItem><CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted</CDropdownItem>
<CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem> <CDropdownItem><CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready</CDropdownItem>
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem> <CDropdownItem><CIcon name="cil-basket" className="me-2 text-primary" /> New client</CDropdownItem>
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem> <CDropdownItem><CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded</CDropdownItem>
<CDropdownItem <CDropdownItem
header header
tag="div" tag="div"
@ -67,4 +66,4 @@ const TheHeaderDropdownNotif = () => {
) )
} }
export default TheHeaderDropdownNotif export default TheHeaderDropdownNotif

19
src/containers/TheHeaderDropdownTasks.js
View File

@ -6,17 +6,16 @@ import {
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CProgress CProgress
} from '@coreui/react' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdownTasks = () => { const TheHeaderDropdownTasks = () => {
const itemsCount = 5 const itemsCount = 5
return ( return (
<CDropdown <CDropdown
inNav variant="nav-item"
className="c-header-nav-item mx-2"
> >
<CDropdownToggle className="c-header-nav-link" caret={false}> <CDropdownToggle>
<CIcon name="cil-list" /> <CIcon name="cil-list" />
<CBadge shape="pill" color="warning">{itemsCount}</CBadge> <CBadge shape="pill" color="warning">{itemsCount}</CBadge>
</CDropdownToggle> </CDropdownToggle>
@ -31,23 +30,23 @@ const TheHeaderDropdownTasks = () => {
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Upgrade NPM &amp; Bower <span <div className="small mb-1">Upgrade NPM &amp; Bower <span
className="float-right"><strong>0%</strong></span></div> className="float-end"><strong>0%</strong></span></div>
<CProgress size="xs" color="info" value={0} /> <CProgress size="xs" color="info" value={0} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div> <div className="small mb-1">ReactJS Version <span className="float-end"><strong>25%</strong></span></div>
<CProgress size="xs" color="danger" value={25} /> <CProgress size="xs" color="danger" value={25} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div> <div className="small mb-1">VueJS Version <span className="float-end"><strong>50%</strong></span></div>
<CProgress size="xs" color="warning" value={50} /> <CProgress size="xs" color="warning" value={50} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div> <div className="small mb-1">Add new layouts <span className="float-end"><strong>75%</strong></span></div>
<CProgress size="xs" color="info" value={75} /> <CProgress size="xs" color="info" value={75} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="d-block"> <CDropdownItem className="d-block">
<div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div> <div className="small mb-1">Angular 2 Cli Version <span className="float-end"><strong>100%</strong></span></div>
<CProgress size="xs" color="success" value={100} /> <CProgress size="xs" color="success" value={100} />
</CDropdownItem> </CDropdownItem>
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem> <CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
@ -56,4 +55,4 @@ const TheHeaderDropdownTasks = () => {
) )
} }
export default TheHeaderDropdownTasks export default TheHeaderDropdownTasks

6
src/containers/TheLayout.js
View File

@ -9,11 +9,11 @@ import {
const TheLayout = () => { const TheLayout = () => {
return ( return (
<div className="c-app c-default-layout"> <div className="d-flex">
<TheSidebar/> <TheSidebar/>
<div className="c-wrapper"> <div className="wrapper">
<TheHeader/> <TheHeader/>
<div className="c-body"> <div className="body">
<TheContent/> <TheContent/>
</div> </div>
<TheFooter/> <TheFooter/>

9
src/containers/TheSidebar.js
View File

@ -2,9 +2,6 @@ import React from 'react'
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { import {
CCreateElement, CCreateElement,
CSidebar,
CSidebarBrand,
CSidebarNav,
CSidebarNavDivider, CSidebarNavDivider,
CSidebarNavTitle, CSidebarNavTitle,
CSidebarMinimizer, CSidebarMinimizer,
@ -12,6 +9,12 @@ import {
CSidebarNavItem, CSidebarNavItem,
} from '@coreui/react' } from '@coreui/react'
import {
CSidebar,
CSidebarBrand,
CSidebarNav,
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
// sidebar nav config // sidebar nav config

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

@ -17,7 +17,7 @@ const Breadcrumbs = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Breadcrumb Bootstrap Breadcrumb
<DocsLink name="CBreadcrumb"/> <DocsLink name="CBreadcrumb"/>

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

@ -23,7 +23,7 @@ const Cards = () => {
<> <>
<CRow> <CRow>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card title Card title
<DocsLink name="CCard"/> <DocsLink name="CCard"/>
@ -36,7 +36,7 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<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
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
@ -46,11 +46,11 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with icon Card with icon
<div className="card-header-actions"> <div className="card-header-actions">
<CIcon name="cil-check" className="float-right"/> <CIcon name="cil-check" className="float-end"/>
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@ -61,11 +61,11 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with switch Card with switch
<div className="card-header-actions"> <div className="card-header-actions">
<CSwitch className={'float-right mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" /> <CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@ -76,11 +76,11 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<div className="card-header-actions"> <div className="card-header-actions">
<CBadge color="success" className="float-right">Success</CBadge> <CBadge color="success" className="float-end">Success</CBadge>
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@ -91,11 +91,11 @@ const Cards = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card with label Card with label
<div className="card-header-actions"> <div className="card-header-actions">
<CBadge shape="pill" color="danger" className="float-right">42</CBadge> <CBadge shape="pill" color="danger" className="float-end">42</CBadge>
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
@ -380,7 +380,7 @@ const Cards = () => {
</CCol> </CCol>
<CCol xs="12" sm="6" md="4"> <CCol xs="12" sm="6" md="4">
<CFade in={showCard}> <CFade in={showCard}>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Card actions Card actions
<div className="card-header-actions"> <div className="card-header-actions">

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

@ -10,7 +10,7 @@ import {
CCarouselInner, CCarouselInner,
CCarouselItem, CCarouselItem,
CCol, CCol,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -26,7 +26,7 @@ const Carousels = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Carousel with controls Carousel with controls
<DocsLink name="CCarousel"/> <DocsLink name="CCarousel"/>
@ -51,7 +51,7 @@ const Carousels = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Carousel with controls, indicators and caption Carousel with controls, indicators and caption
</CCardHeader> </CCardHeader>
@ -79,7 +79,7 @@ const Carousels = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Carousel animation Carousel animation
</CCardHeader> </CCardHeader>
@ -107,7 +107,7 @@ const Carousels = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" xl="6"> <CCol xs="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Carousel animation with autoSlide Carousel animation with autoSlide
</CCardHeader> </CCardHeader>

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

@ -49,7 +49,7 @@ const Collapses = () => {
return ( return (
<CRow> <CRow>
<CCol xl="6"> <CCol xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Collapse Collapse
<DocsLink name="CCollapse"/> <DocsLink name="CCollapse"/>
@ -84,7 +84,7 @@ const Collapses = () => {
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Collapse Collapse
<small> multi target</small> <small> multi target</small>
@ -101,7 +101,7 @@ const Collapses = () => {
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCollapse show={collapseMulti[0]}> <CCollapse show={collapseMulti[0]}>
<CCard> <CCard className="mb-4">
<CCardBody> <CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</CCardBody> </CCardBody>
@ -110,7 +110,7 @@ const Collapses = () => {
</CCol> </CCol>
<CCol className="col-sm-12 col-md-6"> <CCol className="col-sm-12 col-md-6">
<CCollapse show={collapseMulti[1]}> <CCollapse show={collapseMulti[1]}>
<CCard> <CCard className="mb-4">
<CCardBody> <CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</CCardBody> </CCardBody>
@ -123,7 +123,7 @@ const Collapses = () => {
<hr/> <hr/>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Fade Fade
<DocsLink name="CFade"/> <DocsLink name="CFade"/>
@ -139,7 +139,7 @@ const Collapses = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xl="6"> <CCol xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Collapse Collapse
<small> accordion</small> <small> accordion</small>

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

@ -42,7 +42,7 @@ const BasicForms = () => {
<> <>
<CRow> <CRow>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Credit Card Credit Card
<small> Form</small> <small> Form</small>
@ -113,7 +113,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Company Company
<small> Form</small> <small> Form</small>
@ -155,7 +155,7 @@ const BasicForms = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Basic Form Basic Form
<small> Elements</small> <small> Elements</small>
@ -218,11 +218,11 @@ const BasicForms = () => {
<CLabel htmlFor="textarea-input">Textarea</CLabel> <CLabel htmlFor="textarea-input">Textarea</CLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CTextarea <CTextarea
name="textarea-input" name="textarea-input"
id="textarea-input" id="textarea-input"
rows="9" rows="9"
placeholder="Content..." placeholder="Content..."
/> />
</CCol> </CCol>
</CFormGroup> </CFormGroup>
@ -272,11 +272,11 @@ const BasicForms = () => {
<CLabel htmlFor="disabledSelect">Disabled Select</CLabel> <CLabel htmlFor="disabledSelect">Disabled Select</CLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CSelect <CSelect
custom custom
name="disabledSelect" name="disabledSelect"
id="disabledSelect" id="disabledSelect"
disabled disabled
autoComplete="name" autoComplete="name"
> >
<option value="0">Please select</option> <option value="0">Please select</option>
@ -292,37 +292,37 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol sm="9"> <CCol sm="9">
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="primary" color="primary"
defaultChecked defaultChecked
/> />
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="success" color="success"
defaultChecked defaultChecked
variant="outline" variant="outline"
/> />
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="warning" color="warning"
defaultChecked defaultChecked
variant="opposite" variant="opposite"
/> />
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="danger" color="danger"
defaultChecked defaultChecked
shape="pill" shape="pill"
/> />
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="info" color="info"
defaultChecked defaultChecked
shape="pill" shape="pill"
variant="outline" variant="outline"
/> />
<CSwitch <CSwitch
className="mr-1" className="me-1"
color="dark" color="dark"
defaultChecked defaultChecked
shape="pill" shape="pill"
@ -372,10 +372,10 @@ const BasicForms = () => {
<CCol md="3"><CLabel>Checkboxes</CLabel></CCol> <CCol md="3"><CLabel>Checkboxes</CLabel></CCol>
<CCol md="9"> <CCol md="9">
<CFormGroup variant="checkbox" className="checkbox"> <CFormGroup variant="checkbox" className="checkbox">
<CInputCheckbox <CInputCheckbox
id="checkbox1" id="checkbox1"
name="checkbox1" name="checkbox1"
value="option1" value="option1"
/> />
<CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">Option 1</CLabel> <CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">Option 1</CLabel>
</CFormGroup> </CFormGroup>
@ -395,11 +395,11 @@ const BasicForms = () => {
</CCol> </CCol>
<CCol md="9"> <CCol md="9">
<CFormGroup variant="custom-checkbox" inline> <CFormGroup variant="custom-checkbox" inline>
<CInputCheckbox <CInputCheckbox
custom custom
id="inline-checkbox1" id="inline-checkbox1"
name="inline-checkbox1" name="inline-checkbox1"
value="option1" value="option1"
/> />
<CLabel variant="custom-checkbox" htmlFor="inline-checkbox1">One</CLabel> <CLabel variant="custom-checkbox" htmlFor="inline-checkbox1">One</CLabel>
</CFormGroup> </CFormGroup>
@ -424,9 +424,9 @@ const BasicForms = () => {
<CLabel>Multiple File input</CLabel> <CLabel>Multiple File input</CLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CInputFile <CInputFile
id="file-multiple-input" id="file-multiple-input"
name="file-multiple-input" name="file-multiple-input"
multiple multiple
custom custom
/> />
@ -451,19 +451,19 @@ const BasicForms = () => {
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Inline Inline
<small> Form</small> <small> Form</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CForm action="" method="post" inline> <CForm action="" method="post" inline>
<CFormGroup className="pr-1"> <CFormGroup className="pe-1">
<CLabel htmlFor="exampleInputName2" className="pr-1">Name</CLabel> <CLabel htmlFor="exampleInputName2" className="pe-1">Name</CLabel>
<CInput id="exampleInputName2" placeholder="Jane Doe" required /> <CInput id="exampleInputName2" placeholder="Jane Doe" required />
</CFormGroup> </CFormGroup>
<CFormGroup className="pr-1"> <CFormGroup className="pe-1">
<CLabel htmlFor="exampleInputEmail2" className="pr-1">Email</CLabel> <CLabel htmlFor="exampleInputEmail2" className="pe-1">Email</CLabel>
<CInput type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required /> <CInput type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
</CFormGroup> </CFormGroup>
</CForm> </CForm>
@ -475,7 +475,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Horizontal Horizontal
<small> Form</small> <small> Form</small>
@ -506,7 +506,7 @@ const BasicForms = () => {
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Normal Normal
<small> Form</small> <small> Form</small>
@ -529,7 +529,7 @@ const BasicForms = () => {
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Input Input
<small> Grid</small> <small> Grid</small>
@ -592,7 +592,7 @@ const BasicForms = () => {
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user" /> Login</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton> <CButton type="submit" size="sm" color="primary"><CIcon name="cil-user" /> Login</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Input Input
<small> Sizes</small> <small> Sizes</small>
@ -628,7 +628,7 @@ const BasicForms = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Form Form
<small> validation feedback</small> <small> validation feedback</small>
@ -648,7 +648,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="6"> <CCol xs="12" sm="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Validation feedback Form Validation feedback Form
</CCardHeader> </CCardHeader>
@ -674,7 +674,7 @@ const BasicForms = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Icon/Text Groups Icon/Text Groups
</CCardHeader> </CCardHeader>
@ -728,7 +728,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Groups Button Groups
</CCardHeader> </CCardHeader>
@ -776,7 +776,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="4"> <CCol xs="12" md="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Dropdowns Groups Dropdowns Groups
</CCardHeader> </CCardHeader>
@ -860,7 +860,7 @@ const BasicForms = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Use the grid for big devices! Use the grid for big devices!
<small> <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small> <small> <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
@ -919,7 +919,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Input Grid for small devices! Input Grid for small devices!
<small> <code>.col-*</code></small> <small> <code>.col-*</code></small>
@ -980,7 +980,7 @@ const BasicForms = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Example Form Example Form
</CCardHeader> </CCardHeader>
@ -1027,7 +1027,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Example Form Example Form
</CCardHeader> </CCardHeader>
@ -1065,7 +1065,7 @@ const BasicForms = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" sm="4"> <CCol xs="12" sm="4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Example Form Example Form
</CCardHeader> </CCardHeader>
@ -1106,23 +1106,23 @@ const BasicForms = () => {
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CFade timeout={300} in={showElements} unmountOnExit={true}> <CFade timeout={300} in={showElements} unmountOnExit={true}>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Form Elements Form Elements
<div className="card-header-actions"> <div className="card-header-actions">
<CButton color="link" className="card-header-action btn-setting"> <CButton color="link" className="card-header-action btn-setting">
<CIcon name="cil-settings" /> <CIcon name="cil-settings" />
</CButton> </CButton>
<CButton <CButton
color="link" color="link"
className="card-header-action btn-minimize" className="card-header-action btn-minimize"
onClick={() => setCollapsed(!collapsed)} onClick={() => setCollapsed(!collapsed)}
> >
<CIcon name={ collapsed ? "cil-arrow-top" : "cil-arrow-bottom"} /> <CIcon name={ collapsed ? "cil-arrow-top" : "cil-arrow-bottom"} />
</CButton> </CButton>
<CButton <CButton
color="link" color="link"
className="card-header-action btn-close" className="card-header-action btn-close"
onClick={() => setShowElements(false)} onClick={() => setShowElements(false)}
> >
<CIcon name="cil-x" /> <CIcon name="cil-x" />

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

@ -19,7 +19,7 @@ const Jumbotrons = () => {
<> <>
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Jumbotron Jumbotron
<DocsLink name="CJumbotron"/> <DocsLink name="CJumbotron"/>
@ -39,7 +39,7 @@ const Jumbotrons = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Jumbotron Jumbotron
<small> fluid</small> <small> fluid</small>
@ -57,7 +57,7 @@ const Jumbotrons = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Embed Embed
</CCardHeader> </CCardHeader>

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

@ -22,7 +22,7 @@ const ListGroups = () => {
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<DocsLink name="CListGroup"/> <DocsLink name="CListGroup"/>
@ -40,7 +40,7 @@ const ListGroups = () => {
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group links List group links
<small> with first item active and last item disabled</small> <small> with first item active and last item disabled</small>
@ -61,7 +61,7 @@ const ListGroups = () => {
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> contextual classes</small> <small> contextual classes</small>
@ -84,7 +84,7 @@ const ListGroups = () => {
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> contextual classes with .action</small> <small> contextual classes with .action</small>
@ -108,7 +108,7 @@ const ListGroups = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> accent</small> <small> accent</small>
@ -128,7 +128,7 @@ const ListGroups = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> accent with color</small> <small> accent with color</small>
@ -150,7 +150,7 @@ const ListGroups = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> with badges</small> <small> with badges</small>
@ -159,15 +159,15 @@ const ListGroups = () => {
<CListGroup> <CListGroup>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Cras justo odio Cras justo odio
<CBadge className="float-right" shape="pill" color="primary">14</CBadge> <CBadge className="float-end" shape="pill" color="primary">14</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Dapibus ac facilisis in Dapibus ac facilisis in
<CBadge className="float-right" shape="pill" color="primary">2</CBadge> <CBadge className="float-end" shape="pill" color="primary">2</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem className="justify-content-between"> <CListGroupItem className="justify-content-between">
Morbi leo risus Morbi leo risus
<CBadge className="float-right" shape="pill" color="primary">1</CBadge> <CBadge className="float-end" shape="pill" color="primary">1</CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
@ -176,7 +176,7 @@ const ListGroups = () => {
</CCol> </CCol>
<CCol sm="12" xl="6"> <CCol sm="12" xl="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> custom content</small> <small> custom content</small>
@ -216,7 +216,7 @@ const ListGroups = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
List group List group
<small> tab Javascript plugin</small> <small> tab Javascript plugin</small>

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

@ -29,7 +29,7 @@ const CNavbars = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar CNavbar
<DocsLink name="CNavbar"/> <DocsLink name="CNavbar"/>
@ -45,10 +45,10 @@ const CNavbars = () => {
<CNavLink>Home</CNavLink> <CNavLink>Home</CNavLink>
<CNavLink>Link</CNavLink> <CNavLink>Link</CNavLink>
</CNavbarNav> </CNavbarNav>
<CNavbarNav className="ml-auto"> <CNavbarNav className="ms-auto">
<CForm inline> <CForm inline>
<CInput <CInput
className="mr-sm-2" className="me-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
/> />
@ -84,7 +84,7 @@ const CNavbars = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar brand CNavbar brand
</CCardHeader> </CCardHeader>
@ -102,7 +102,7 @@ const CNavbars = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar text CNavbar text
</CCardHeader> </CCardHeader>
@ -122,7 +122,7 @@ const CNavbars = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar dropdown CNavbar dropdown
</CCardHeader> </CCardHeader>
@ -163,7 +163,7 @@ const CNavbars = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar form CNavbar form
</CCardHeader> </CCardHeader>
@ -171,7 +171,7 @@ const CNavbars = () => {
<CNavbar light color="light"> <CNavbar light color="light">
<CForm inline> <CForm inline>
<CInput <CInput
className="mr-sm-2" className="me-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
/> />
@ -181,7 +181,7 @@ const CNavbars = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
CNavbar input group CNavbar input group
</CCardHeader> </CCardHeader>
@ -189,7 +189,7 @@ const CNavbars = () => {
<CNavbar light color="light"> <CNavbar light color="light">
<CForm inline> <CForm inline>
<CInput <CInput
className="mr-sm-2" className="me-sm-2"
placeholder="Username" placeholder="Username"
/> />
</CForm> </CForm>

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

@ -20,7 +20,7 @@ const Navs = () => {
<> <>
<CRow> <CRow>
<CCol xs="6"> <CCol xs="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<DocsLink name="CNav"/> <DocsLink name="CNav"/>
@ -66,7 +66,7 @@ const Navs = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="3"> <CCol xs="3">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> vertical / links</small> <small> vertical / links</small>
@ -82,7 +82,7 @@ const Navs = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="3"> <CCol xs="3">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> vertical / list</small> <small> vertical / list</small>
@ -109,7 +109,7 @@ const Navs = () => {
<CRow> <CRow>
<CCol xs="6"> <CCol xs="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> tabs</small> <small> tabs</small>
@ -125,7 +125,7 @@ const Navs = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="6"> <CCol xs="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> pills</small> <small> pills</small>
@ -151,7 +151,7 @@ const Navs = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> fill and justify</small> <small> fill and justify</small>
@ -214,7 +214,7 @@ const Navs = () => {
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> with flex</small> <small> with flex</small>
@ -234,7 +234,7 @@ const Navs = () => {
<CRow> <CRow>
<CCol xs="6"> <CCol xs="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> tabs with dropdowns</small> <small> tabs with dropdowns</small>
@ -268,7 +268,7 @@ const Navs = () => {
</CCol> </CCol>
<CCol xs="6"> <CCol xs="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Navs Navs
<small> pills with dropdowns</small> <small> pills with dropdowns</small>

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

@ -13,7 +13,7 @@ const Paginations = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Pagination Pagination
<DocsLink name="CPagination"/> <DocsLink name="CPagination"/>
@ -50,7 +50,7 @@ const Paginations = () => {
<div>currentPage: {currentPage}</div> <div>currentPage: {currentPage}</div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
<strong> Pagination </strong> <strong> Pagination </strong>
<small>alignment</small> <small>alignment</small>

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

@ -21,7 +21,7 @@ const Popovers = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Popovers Popovers
<DocsLink name="CPopover"/> <DocsLink name="CPopover"/>
@ -64,7 +64,7 @@ const Popovers = () => {
<hr/> <hr/>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Popovers Popovers
<small> placement</small> <small> placement</small>

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

@ -11,7 +11,7 @@ import { DocsLink } from 'src/reusable'
const ProgressBar = () => { const ProgressBar = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<DocsLink name="CProgressBar"/> <DocsLink name="CProgressBar"/>
@ -24,7 +24,7 @@ const ProgressBar = () => {
<CProgress value={100} className="mb-3" /> <CProgress value={100} className="mb-3" />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> labels</small> <small> labels</small>
@ -35,7 +35,7 @@ const ProgressBar = () => {
<CProgress value={15} max={20} className="mb-3"/> <CProgress value={15} max={20} className="mb-3"/>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> heights</small> <small> heights</small>
@ -45,7 +45,7 @@ const ProgressBar = () => {
<CProgress value={25} className="mb-3" height="30"/> <CProgress value={25} className="mb-3" height="30"/>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> backgrounds</small> <small> backgrounds</small>
@ -57,7 +57,7 @@ const ProgressBar = () => {
<CProgress color="danger" value="100" className="mb-3" /> <CProgress color="danger" value="100" className="mb-3" />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> multiple bar</small> <small> multiple bar</small>
@ -70,7 +70,7 @@ const ProgressBar = () => {
</CProgress> </CProgress>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> striped</small> <small> striped</small>
@ -83,7 +83,7 @@ const ProgressBar = () => {
<CProgress striped color="danger" value={100} className="mb-3" /> <CProgress striped color="danger" value={100} className="mb-3" />
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Progress Progress
<small> animated</small> <small> animated</small>

48
src/views/base/switches/Switches.js
View File

@ -13,7 +13,7 @@ const Switches = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12" md="12"> <CCol xs="12" md="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
3d Switch 3d Switch
<DocsLink name="CSwitch"/> <DocsLink name="CSwitch"/>
@ -32,7 +32,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch default Switch default
</CCardHeader> </CCardHeader>
@ -47,7 +47,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch default - pills Switch default - pills
</CCardHeader> </CCardHeader>
@ -67,7 +67,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch outline Switch outline
@ -83,7 +83,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch outline pills Switch outline pills
@ -104,7 +104,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch outline alternative Switch outline alternative
@ -120,7 +120,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch outline alternative - pills Switch outline alternative - pills
@ -141,7 +141,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text Switch with text
@ -157,7 +157,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text pills Switch with text pills
@ -173,7 +173,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline Switch with text outline
@ -189,7 +189,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline pills Switch with text outline pills
@ -205,7 +205,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline alternative Switch with text outline alternative
@ -221,7 +221,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline alternative pills Switch with text outline alternative pills
@ -242,7 +242,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text Switch with text
@ -258,7 +258,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text pills Switch with text pills
@ -274,7 +274,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline Switch with text outline
@ -290,7 +290,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline pills Switch with text outline pills
@ -306,7 +306,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline alternative Switch with text outline alternative
@ -322,7 +322,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Switch with text outline alternative pills Switch with text outline alternative pills
@ -343,7 +343,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
@ -362,7 +362,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
@ -385,7 +385,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
@ -403,7 +403,7 @@ const Switches = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
@ -426,7 +426,7 @@ const Switches = () => {
</CCol> </CCol>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Sizes Sizes
</CCardHeader> </CCardHeader>

12
src/views/base/tables/Tables.js
View File

@ -28,7 +28,7 @@ const Tables = () => {
<> <>
<CRow> <CRow>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Simple Table Simple Table
<DocsLink name="CModal"/> <DocsLink name="CModal"/>
@ -56,7 +56,7 @@ const Tables = () => {
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Striped Table Striped Table
</CCardHeader> </CCardHeader>
@ -87,7 +87,7 @@ const Tables = () => {
<CRow> <CRow>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Condensed Table Condensed Table
</CCardHeader> </CCardHeader>
@ -115,7 +115,7 @@ const Tables = () => {
</CCol> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bordered Table Bordered Table
</CCardHeader> </CCardHeader>
@ -146,7 +146,7 @@ const Tables = () => {
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Combined All Table Combined All Table
</CCardHeader> </CCardHeader>
@ -177,7 +177,7 @@ const Tables = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Combined All dark Table Combined All dark Table
</CCardHeader> </CCardHeader>

8
src/views/base/tabs/Tabs.js
View File

@ -23,7 +23,7 @@ const Tabs = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12" md="6" className="mb-4"> <CCol xs="12" md="6" className="mb-4">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Index indentifiers Index indentifiers
<DocsLink name="CTabs" /> <DocsLink name="CTabs" />
@ -49,7 +49,7 @@ const Tabs = () => {
</CCard> </CCard>
</CCol> </CCol>
{/* <CCol xs="12" md="6" className="mb-4"> {/* <CCol xs="12" md="6" className="mb-4">
<CCard> <CCard className="mb-4">
<CCardHeader>Id indentifiers</CCardHeader> <CCardHeader>Id indentifiers</CCardHeader>
<CCardBody> <CCardBody>
<CTabs activeTab="home"> <CTabs activeTab="home">
@ -75,7 +75,7 @@ const Tabs = () => {
</CCol> </CCol>
<CCol xs="12" md="6" className="mb-4"> <CCol xs="12" md="6" className="mb-4">
<CCard> <CCard className="mb-4">
<CCardHeader>No fade animation tabs</CCardHeader> <CCardHeader>No fade animation tabs</CCardHeader>
<CCardBody> <CCardBody>
<CTabs> <CTabs>
@ -107,7 +107,7 @@ const Tabs = () => {
</CCol> </CCol>
<CCol xs="12" md="6" className="mb-4"> <CCol xs="12" md="6" className="mb-4">
<CCard> <CCard className="mb-4">
<CCardHeader>Controlled tabs</CCardHeader> <CCardHeader>Controlled tabs</CCardHeader>
<CCardBody> <CCardBody>
<CTabs <CTabs

4
src/views/base/tooltips/Tooltips.js
View File

@ -23,7 +23,7 @@ const Tooltips = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Tooltips Tooltips
<DocsLink name="CTooltip"/> <DocsLink name="CTooltip"/>
@ -66,7 +66,7 @@ const Tooltips = () => {
<hr/> <hr/>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Tooltips Tooltips
<small> placement</small> <small> placement</small>

208
src/views/buttons/brand-buttons/BrandButtons.js
View File

@ -13,7 +13,7 @@ const BrandButtons = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Brand button Brand button
</CCardHeader> </CCardHeader>
@ -22,72 +22,72 @@ const BrandButtons = () => {
<small> <code>size="sm"</code></small> <small> <code>size="sm"</code></small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton> <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton> <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton> <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton> <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton> <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="mfs-2">Xing</span></CButton> <CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="ms-2">Xing</span></CButton>
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="mfs-2">Github</span></CButton> <CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="ms-2">Github</span></CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton> <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton> <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton> <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton> <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton> <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="mfs-2">VK</span></CButton> <CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="ms-2">VK</span></CButton>
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton> <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="mfs-2">Behance</span></CButton> <CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="ms-2">Behance</span></CButton>
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton> <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton> <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton> <CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
<CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton> <CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
<CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton> <CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
<CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton> <CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
<CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton> <CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
<CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span className="mfs-2">Xing</span></CButton> <CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /><span className="ms-2">Xing</span></CButton>
<CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span className="mfs-2">Github</span></CButton> <CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /><span className="ms-2">Github</span></CButton>
<CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton> <CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
<CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton> <CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
<CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton> <CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
<CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton> <CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
<CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton> <CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
<CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span className="mfs-2">VK</span></CButton> <CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /><span className="ms-2">VK</span></CButton>
<CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton> <CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
<CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span className="mfs-2">Behance</span></CButton> <CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /><span className="ms-2">Behance</span></CButton>
<CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton> <CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
<CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton> <CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
</p> </p>
<h6>Size Large <h6>Size Large
<small> <code>size="lg"</code></small> <small> <code>size="lg"</code></small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="mfs-2">Facebook</span></CButton> <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="mfs-2">Twitter</span></CButton> <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="mfs-2">LinkedIn</span></CButton> <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="mfs-2">Flickr</span></CButton> <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="mfs-2">Tumblr</span></CButton> <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="mfs-2">Xing</span></CButton> <CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="ms-2">Xing</span></CButton>
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="mfs-2">Github</span></CButton> <CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="ms-2">Github</span></CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="mfs-2">StackOverflow</span></CButton> <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="mfs-2">YouTube</span></CButton> <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="mfs-2">Dribbble</span></CButton> <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="mfs-2">Instagram</span></CButton> <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="mfs-2">Pinterest</span></CButton> <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="mfs-2">VK</span></CButton> <CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="ms-2">VK</span></CButton>
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="mfs-2">Yahoo</span></CButton> <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="mfs-2">Behance</span></CButton> <CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="ms-2">Behance</span></CButton>
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="mfs-2">Reddit</span></CButton> <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="mfs-2">Vimeo</span></CButton> <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Brand button Brand button
<small> only icons</small> <small> only icons</small>
@ -97,65 +97,65 @@ const BrandButtons = () => {
<small> <code>size="sm"</code></small> <small> <code>size="sm"</code></small>
</h6> </h6>
<p> <p>
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton> <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton>
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton> <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton>
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton> <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton>
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton> <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton>
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton> <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton>
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton> <CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton>
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton> <CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton>
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton> <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton>
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton> <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton>
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton> <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton>
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton> <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton>
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton> <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton>
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton> <CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton>
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton> <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton>
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton> <CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton>
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton> <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton>
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton> <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton> <CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /></CButton>
<CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton> <CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /></CButton>
<CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton> <CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
<CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton> <CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /></CButton>
<CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton> <CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
<CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton> <CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /></CButton>
<CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton> <CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /></CButton>
<CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton> <CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
<CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton> <CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /></CButton>
<CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton> <CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
<CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton> <CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /></CButton>
<CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton> <CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
<CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton> <CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /></CButton>
<CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton> <CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
<CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton> <CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /></CButton>
<CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton> <CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /></CButton>
<CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton> <CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
</p> </p>
<h6>Size Large <h6>Size Large
<small> <code>size="lg"</code></small> <small> <code>size="lg"</code></small>
</h6> </h6>
<p> <p>
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton> <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton>
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton> <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton>
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton> <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton>
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton> <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton>
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton> <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton>
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton> <CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton>
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton> <CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton>
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton> <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton>
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton> <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton>
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton> <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton>
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton> <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton>
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton> <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton>
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton> <CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton>
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton> <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton>
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton> <CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton>
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton> <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton>
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton> <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton>
</p> </p>
</CCardBody> </CCardBody>
</CCard> </CCard>

4
src/views/buttons/button-dropdowns/ButtonDropdowns.js
View File

@ -24,7 +24,7 @@ const ButtonDropdowns = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12"> <CCol xs="12">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Dropdowns Dropdowns
<DocsLink name="CDropdown"/> <DocsLink name="CDropdown"/>
@ -276,7 +276,7 @@ const ButtonDropdowns = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Menus Menus
</CCardHeader> </CCardHeader>

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

@ -26,7 +26,7 @@ const ButtonGroups = () => {
return ( return (
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Callout Callout
<DocsLink name="CCallout"/> <DocsLink name="CCallout"/>
@ -38,7 +38,7 @@ const ButtonGroups = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<DocsLink name="-Button/#CButtonGroup"/> <DocsLink name="-Button/#CButtonGroup"/>
@ -52,20 +52,20 @@ const ButtonGroups = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<small> toolbar</small> <small> toolbar</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButtonToolbar className="mb-3"> <CButtonToolbar className="mb-3">
<CButtonGroup className="mr-2"> <CButtonGroup className="me-2">
<CButton color="secondary">1</CButton> <CButton color="secondary">1</CButton>
<CButton color="secondary">2</CButton> <CButton color="secondary">2</CButton>
<CButton color="secondary">3</CButton> <CButton color="secondary">3</CButton>
<CButton color="secondary">4</CButton> <CButton color="secondary">4</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup className="mr-2"> <CButtonGroup className="me-2">
<CButton color="secondary">5</CButton> <CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton> <CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton> <CButton color="secondary">7</CButton>
@ -75,7 +75,7 @@ const ButtonGroups = () => {
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
<CButtonToolbar className="mb-3"> <CButtonToolbar className="mb-3">
<CButtonGroup className="mr-2"> <CButtonGroup className="me-2">
<CButton color="secondary">1</CButton> <CButton color="secondary">1</CButton>
<CButton color="secondary">2</CButton> <CButton color="secondary">2</CButton>
<CButton color="secondary">3</CButton> <CButton color="secondary">3</CButton>
@ -105,7 +105,7 @@ const ButtonGroups = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<small> vertical variation</small> <small> vertical variation</small>
@ -122,7 +122,7 @@ const ButtonGroups = () => {
</CCol> </CCol>
<CCol md={6}> <CCol md={6}>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<small> sizing</small> <small> sizing</small>
@ -148,7 +148,7 @@ const ButtonGroups = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<small> nestingccc</small> <small> nestingccc</small>
@ -170,7 +170,7 @@ const ButtonGroups = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Button Group Button Group
<small> vertical</small> <small> vertical</small>

18
src/views/buttons/buttons/Buttons.js
View File

@ -13,7 +13,7 @@ import { DocsLink } from 'src/reusable'
const Buttons = () => { const Buttons = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Standard Buttons Standard Buttons
<DocsLink name="-Button"/> <DocsLink name="-Button"/>
@ -117,7 +117,7 @@ const Buttons = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
layout="outline" Buttons layout="outline" Buttons
</CCardHeader> </CCardHeader>
@ -217,7 +217,7 @@ const Buttons = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
layout="ghost" Buttons layout="ghost" Buttons
</CCardHeader> </CCardHeader>
@ -317,7 +317,7 @@ const Buttons = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Square Buttons Square Buttons
</CCardHeader> </CCardHeader>
@ -423,7 +423,7 @@ const Buttons = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Pill Buttons Pill Buttons
</CCardHeader> </CCardHeader>
@ -530,7 +530,7 @@ const Buttons = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Sizes Sizes
</CCardHeader> </CCardHeader>
@ -599,7 +599,7 @@ const Buttons = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
With Icons With Icons
</CCardHeader> </CCardHeader>
@ -635,7 +635,7 @@ const Buttons = () => {
</CCard> </CCard>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Level Buttons Level Buttons
</CCardHeader> </CCardHeader>
@ -652,7 +652,7 @@ const Buttons = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Level Buttons Level Buttons
</CCardHeader> </CCardHeader>

12
src/views/charts/Charts.js
View File

@ -19,7 +19,7 @@ const Charts = () => {
return ( return (
<CCardGroup columns className = "cols-2" > <CCardGroup columns className = "cols-2" >
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bar Chart Bar Chart
<DocsLink href="http://www.chartjs.org"/> <DocsLink href="http://www.chartjs.org"/>
@ -43,7 +43,7 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Doughnut Chart Doughnut Chart
</CCardHeader> </CCardHeader>
@ -70,7 +70,7 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Line Chart Line Chart
</CCardHeader> </CCardHeader>
@ -98,7 +98,7 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Pie Chart Pie Chart
</CCardHeader> </CCardHeader>
@ -125,7 +125,7 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Polar Area Chart Polar Area Chart
</CCardHeader> </CCardHeader>
@ -165,7 +165,7 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Radar Chart Radar Chart
</CCardHeader> </CCardHeader>

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

@ -1,5 +1,10 @@
import React, { lazy } from 'react' import React, { lazy } from 'react'
import { import {
CCallout
} from '@coreui/react'
import {
CAvatar,
CBadge, CBadge,
CButton, CButton,
CButtonGroup, CButtonGroup,
@ -10,8 +15,7 @@ import {
CCol, CCol,
CProgress, CProgress,
CRow, CRow,
CCallout } from '@coreui/react-ts'
} from '@coreui/react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import MainChartExample from '../charts/MainChartExample.js' import MainChartExample from '../charts/MainChartExample.js'
@ -23,7 +27,7 @@ const Dashboard = () => {
return ( return (
<> <>
<WidgetsDropdown /> <WidgetsDropdown />
<CCard> <CCard className="mb-4">
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol sm="5">
@ -31,10 +35,10 @@ const Dashboard = () => {
<div className="small text-muted">November 2017</div> <div className="small text-muted">November 2017</div>
</CCol> </CCol>
<CCol sm="7" className="d-none d-md-block"> <CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right"> <CButton color="primary" className="float-end">
<CIcon name="cil-cloud-download"/> <CIcon name="cil-cloud-download"/>
</CButton> </CButton>
<CButtonGroup className="float-right mr-3"> <CButtonGroup className="float-end me-3">
{ {
['Day', 'Month', 'Year'].map(value => ( ['Day', 'Month', 'Year'].map(value => (
<CButton <CButton
@ -111,7 +115,7 @@ const Dashboard = () => {
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Traffic {' & '} Sales Traffic {' & '} Sales
</CCardHeader> </CCardHeader>
@ -251,7 +255,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" /> <CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span> <span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span> <span className="ms-auto font-weight-bold">43%</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" /> <CProgress className="progress-xs" color="warning" value="43" />
@ -261,7 +265,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" /> <CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span> <span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span> <span className="ms-auto font-weight-bold">37%</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" /> <CProgress className="progress-xs" color="warning" value="37" />
@ -271,7 +275,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" /> <CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span> <span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span> <span className="ms-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" /> <CProgress className="progress-xs" color="success" value="56" />
@ -283,7 +287,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-facebook" className="progress-group-icon" /> <CIcon name="cib-facebook" className="progress-group-icon" />
<span className="title">Facebook</span> <span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span> <span className="ms-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="15" /> <CProgress className="progress-xs" color="success" value="15" />
@ -293,7 +297,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-twitter" className="progress-group-icon" /> <CIcon name="cib-twitter" className="progress-group-icon" />
<span className="title">Twitter</span> <span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span> <span className="ms-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="11" /> <CProgress className="progress-xs" color="success" value="11" />
@ -303,7 +307,7 @@ const Dashboard = () => {
<div className="progress-group-header"> <div className="progress-group-header">
<CIcon name="cib-linkedin" className="progress-group-icon" /> <CIcon name="cib-linkedin" className="progress-group-icon" />
<span className="title">LinkedIn</span> <span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span> <span className="ms-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="8" /> <CProgress className="progress-xs" color="success" value="8" />
@ -334,10 +338,7 @@ const Dashboard = () => {
<tbody> <tbody>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/1.jpg" status="success"/>
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td> </td>
<td> <td>
<div>Yiorgos Avraamu</div> <div>Yiorgos Avraamu</div>
@ -350,10 +351,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>50%</strong> <strong>50%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>
@ -369,10 +370,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/2.jpg" status="danger"/>
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td> </td>
<td> <td>
<div>Avram Tarasios</div> <div>Avram Tarasios</div>
@ -386,10 +384,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>10%</strong> <strong>10%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>
@ -405,10 +403,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/3.jpg" status="warning"/>
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td> </td>
<td> <td>
<div>Quintin Ed</div> <div>Quintin Ed</div>
@ -421,10 +416,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>74%</strong> <strong>74%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>
@ -440,10 +435,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/4.jpg" status="secondary"/>
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td> </td>
<td> <td>
<div>Enéas Kwadwo</div> <div>Enéas Kwadwo</div>
@ -456,10 +448,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>98%</strong> <strong>98%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>
@ -475,10 +467,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/5.jpg" status="success"/>
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td> </td>
<td> <td>
<div>Agapetus Tadeáš</div> <div>Agapetus Tadeáš</div>
@ -491,10 +480,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>22%</strong> <strong>22%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>
@ -510,10 +499,7 @@ const Dashboard = () => {
</tr> </tr>
<tr> <tr>
<td className="text-center"> <td className="text-center">
<div className="c-avatar"> <CAvatar image="avatars/6.jpg" status="danger"/>
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td> </td>
<td> <td>
<div>Friderik Dávid</div> <div>Friderik Dávid</div>
@ -526,10 +512,10 @@ const Dashboard = () => {
</td> </td>
<td> <td>
<div className="clearfix"> <div className="clearfix">
<div className="float-left"> <div className="float-start">
<strong>43%</strong> <strong>43%</strong>
</div> </div>
<div className="float-right"> <div className="float-end">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small> <small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div> </div>
</div> </div>

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

@ -19,7 +19,7 @@ export const getIconsView = iconset => {
const CoreUIIcons = () => { const CoreUIIcons = () => {
return ( return (
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Brand Icons Brand Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>

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

@ -6,7 +6,7 @@ import { DocsLink } from 'src/reusable'
const CoreUIIcons = () => { const CoreUIIcons = () => {
return ( return (
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Free Icons / as CIcon{' '} Free Icons / as CIcon{' '}
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>

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

@ -6,7 +6,7 @@ import { DocsLink } from 'src/reusable'
const CoreUIIcons = () => { const CoreUIIcons = () => {
return ( return (
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Flag Icons Flag Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/> <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>

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

@ -22,7 +22,7 @@ const Alerts = () => {
<> <>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<DocsLink name="CAlert"/> <DocsLink name="CAlert"/>
@ -56,7 +56,7 @@ const Alerts = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<small> use <code>.alert-link</code> to provide links</small> <small> use <code>.alert-link</code> to provide links</small>
@ -116,7 +116,7 @@ const Alerts = () => {
</CRow> </CRow>
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<small> additional content</small> <small> additional content</small>
@ -138,7 +138,7 @@ const Alerts = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Alerts Alerts
<small> dismissing</small> <small> dismissing</small>

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

@ -15,7 +15,7 @@ const Badges = () => {
return ( return (
<CRow> <CRow>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges Badges
<DocsLink name="CBadge"/> <DocsLink name="CBadge"/>
@ -36,52 +36,52 @@ const Badges = () => {
</CCard> </CCard>
</CCol> </CCol>
<CCol xs="12" md="6"> <CCol xs="12" md="6">
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges Badges
<small> contextual variations</small> <small> contextual variations</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="mr-1" color="primary">Primary</CBadge> <CBadge className="me-1" color="primary">Primary</CBadge>
<CBadge className="mr-1" color="secondary">Secondary</CBadge> <CBadge className="me-1" color="secondary">Secondary</CBadge>
<CBadge className="mr-1" color="success">Success</CBadge> <CBadge className="me-1" color="success">Success</CBadge>
<CBadge className="mr-1" color="danger">Danger</CBadge> <CBadge className="me-1" color="danger">Danger</CBadge>
<CBadge className="mr-1" color="warning">Warning</CBadge> <CBadge className="me-1" color="warning">Warning</CBadge>
<CBadge className="mr-1" color="info">Info</CBadge> <CBadge className="me-1" color="info">Info</CBadge>
<CBadge className="mr-1" color="light">Light</CBadge> <CBadge className="me-1" color="light">Light</CBadge>
<CBadge className="mr-1" color="dark">Dark</CBadge> <CBadge className="me-1" color="dark">Dark</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges Badges
<small> pill badges</small> <small> pill badges</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="mr-1" color="primary" shape="rounded-pill">Primary</CBadge> <CBadge className="me-1" color="primary" shape="rounded-pill">Primary</CBadge>
<CBadge className="mr-1" color="secondary" shape="rounded-pill">Secondary</CBadge> <CBadge className="me-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
<CBadge className="mr-1" color="success" shape="rounded-pill">Success</CBadge> <CBadge className="me-1" color="success" shape="rounded-pill">Success</CBadge>
<CBadge className="mr-1" color="danger" shape="rounded-pill">Danger</CBadge> <CBadge className="me-1" color="danger" shape="rounded-pill">Danger</CBadge>
<CBadge className="mr-1" color="warning" shape="rounded-pill">Warning</CBadge> <CBadge className="me-1" color="warning" shape="rounded-pill">Warning</CBadge>
<CBadge className="mr-1" color="info" shape="rounded-pill">Info</CBadge> <CBadge className="me-1" color="info" shape="rounded-pill">Info</CBadge>
<CBadge className="mr-1" color="light" shape="rounded-pill">Light</CBadge> <CBadge className="me-1" color="light" shape="rounded-pill">Light</CBadge>
<CBadge className="mr-1" color="dark" shape="rounded-pill">Dark</CBadge> <CBadge className="me-1" color="dark" shape="rounded-pill">Dark</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Badges Badges
<small> square badges</small> <small> square badges</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CBadge className="mr-1" color="primary" shape="rounded-0">Primary</CBadge> <CBadge className="me-1" color="primary" shape="rounded-0">Primary</CBadge>
<CBadge className="mr-1" color="secondary" shape="rounded-0">Secondary</CBadge> <CBadge className="me-1" color="secondary" shape="rounded-0">Secondary</CBadge>
<CBadge className="mr-1" color="success" shape="rounded-0">Success</CBadge> <CBadge className="me-1" color="success" shape="rounded-0">Success</CBadge>
<CBadge className="mr-1" color="danger" shape="rounded-0">Danger</CBadge> <CBadge className="me-1" color="danger" shape="rounded-0">Danger</CBadge>
<CBadge className="mr-1" color="warning" shape="rounded-0">Warning</CBadge> <CBadge className="me-1" color="warning" shape="rounded-0">Warning</CBadge>
<CBadge className="mr-1" color="info" shape="rounded-0">Info</CBadge> <CBadge className="me-1" color="info" shape="rounded-0">Info</CBadge>
<CBadge className="mr-1" color="light" shape="rounded-0">Light</CBadge> <CBadge className="me-1" color="light" shape="rounded-0">Light</CBadge>
<CBadge className="mr-1" color="dark" shape="rounded-0">Dark</CBadge> <CBadge className="me-1" color="dark" shape="rounded-0">Dark</CBadge>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>

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

@ -28,7 +28,7 @@ const Modals = () => {
return ( return (
<CRow> <CRow>
<CCol xs> <CCol xs>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Bootstrap Modals Bootstrap Modals
<DocsLink name="CModal"/> <DocsLink name="CModal"/>
@ -36,12 +36,12 @@ const Modals = () => {
<CCardBody> <CCardBody>
<CButton <CButton
onClick={() => setModal(!modal)} onClick={() => setModal(!modal)}
className="mr-1" className="me-1"
>Launch demo modal</CButton> >Launch demo modal</CButton>
<CButton onClick={() => setLarge(!large)} className="mr-1"> <CButton onClick={() => setLarge(!large)} className="me-1">
Launch large modal Launch large modal
</CButton> </CButton>
<CButton onClick={() => setSmall(!large)} className="mr-1"> <CButton onClick={() => setSmall(!large)} className="me-1">
Launch small modal Launch small modal
</CButton> </CButton>
<CModal <CModal
@ -112,13 +112,13 @@ const Modals = () => {
<hr /> <hr />
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1"> <CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1">
Primary modal Primary modal
</CButton> </CButton>
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton> <CButton color="success" onClick={() => setSuccess(!success)} className="me-1">Success modal</CButton>
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton> <CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">Warning modal</CButton>
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton> <CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">Danger modal</CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton> <CButton color="info" onClick={() => setInfo(!info)} className="me-1">Info modal</CButton>
<CModal <CModal
visible={primary} visible={primary}

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

@ -47,7 +47,7 @@ const Toaster = () => {
const addToast = () => { const addToast = () => {
setToasts([ setToasts([
...toasts, ...toasts,
{ position, autohide: autohide && autohideValue, closeButton, fade } { position, autohide: autohide && autohideValue, closeButton, fade }
]) ])
} }
@ -63,7 +63,7 @@ const Toaster = () => {
return ( return (
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Toasts. Toasts.
<DocsLink name="-Toast"/> <DocsLink name="-Toast"/>
@ -138,7 +138,7 @@ const Toaster = () => {
</CFormGroup> </CFormGroup>
<CButton <CButton
className="mr-1 w-25" className="me-1 w-25"
color="success" color="success"
onClick={addToast} onClick={addToast}
> >

4
src/views/pages/page404/Page404.js
View File

@ -19,9 +19,9 @@ const Page404 = () => {
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md="6">
<div className="clearfix"> <div className="clearfix">
<h1 className="float-left display-3 mr-4">404</h1> <h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{'\''}re lost.</h4> <h4 className="pt-3">Oops! You{'\''}re lost.</h4>
<p className="text-muted float-left">The page you are looking for was not found.</p> <p className="text-muted float-start">The page you are looking for was not found.</p>
</div> </div>
<CInputGroup className="input-prepend"> <CInputGroup className="input-prepend">
<CInputGroupPrepend> <CInputGroupPrepend>

4
src/views/pages/page500/Page500.js
View File

@ -19,9 +19,9 @@ const Page500 = () => {
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md="6">
<span className="clearfix"> <span className="clearfix">
<h1 className="float-left display-3 mr-4">500</h1> <h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4> <h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p> <p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p>
</span> </span>
<CInputGroup className="input-prepend"> <CInputGroup className="input-prepend">
<CInputGroupPrepend> <CInputGroupPrepend>

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

@ -51,7 +51,7 @@ const ThemeColor = ({className, children}) => {
const Colors = () => { const Colors = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Theme colors Theme colors
<DocsLink href="https://coreui.io/docs/utilities/colors/"/> <DocsLink href="https://coreui.io/docs/utilities/colors/"/>
@ -85,7 +85,7 @@ const Colors = () => {
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Grays Grays
</CCardHeader> </CCardHeader>

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

@ -9,7 +9,7 @@ import { DocsLink } from 'src/reusable'
const Typography = () => { const Typography = () => {
return ( return (
<> <>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Headings Headings
<DocsLink href="https://coreui.io/docs/content/typography/"/> <DocsLink href="https://coreui.io/docs/content/typography/"/>
@ -64,15 +64,15 @@ const Typography = () => {
</table> </table>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Headings Headings
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p><code className="highlighter-rouge">.h1</code> through <p><code className="highlighter-rouge">.h1</code> through
<code className="highlighter-rouge">.h6</code> <code className="highlighter-rouge">.h6</code>
classes are also available, for when you classes are also available, for when you
want to match the font styling of a heading but cannot use the want to match the font styling of a heading but cannot use the
associated HTML element.</p> associated HTML element.</p>
<div className="bd-example"> <div className="bd-example">
<p className="h1">h1. Bootstrap heading</p> <p className="h1">h1. Bootstrap heading</p>
@ -84,7 +84,7 @@ const Typography = () => {
</div> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<div className="card-header"> <div className="card-header">
Display headings Display headings
</div> </div>
@ -111,7 +111,7 @@ const Typography = () => {
</div> </div>
</div> </div>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Inline text elements Inline text elements
</CCardHeader> </CCardHeader>
@ -136,7 +136,7 @@ const Typography = () => {
</div> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Description list alignment Description list alignment
</CCardHeader> </CCardHeader>

4
src/views/users/User.js
View File

@ -6,13 +6,13 @@ import usersData from './UsersData'
const User = ({match}) => { const User = ({match}) => {
const user = usersData.find( user => user.id.toString() === match.params.id) const user = usersData.find( user => user.id.toString() === match.params.id)
const userDetails = user ? Object.entries(user) : const userDetails = user ? Object.entries(user) :
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]] [['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
return ( return (
<CRow> <CRow>
<CCol lg={6}> <CCol lg={6}>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
User id: {match.params.id} User id: {match.params.id}
</CCardHeader> </CCardHeader>

4
src/views/users/Users.js
View File

@ -40,7 +40,7 @@ const Users = () => {
return ( return (
<CRow> <CRow>
<CCol xl={6}> <CCol xl={6}>
<CCard> <CCard className="mb-4">
<CCardHeader> <CCardHeader>
Users Users
<small className="text-muted"> example</small> <small className="text-muted"> example</small>
@ -73,7 +73,7 @@ const Users = () => {
activePage={page} activePage={page}
onActivePageChange={pageChange} onActivePageChange={pageChange}
pages={5} pages={5}
doubleArrows={false} doubleArrows={false}
align="center" align="center"
/> />
</CCardBody> </CCardBody>

9
src/views/widgets/Widgets.js
View File

@ -3,8 +3,8 @@ import {
CCardFooter, CCardFooter,
CCol, CCol,
CRow, CRow,
CProgress, CProgress
} from '@coreui/react' } from '@coreui/react-ts'
import { import {
CCardGroup, CCardGroup,
@ -12,8 +12,7 @@ import {
CWidgetProgress, CWidgetProgress,
CWidgetIcon, CWidgetIcon,
CWidgetProgressIcon, CWidgetProgressIcon,
CWidgetSimple, CWidgetSimple
} from '@coreui/react' } from '@coreui/react'
import WidgetsBrand from './WidgetsBrand' import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown' import WidgetsDropdown from './WidgetsDropdown'
@ -125,7 +124,7 @@ const Widgets = () => {
target="_blank" target="_blank"
> >
View more View more
<CIcon name="cil-arrow-right" className="float-right" width="16"/> <CIcon name="cil-arrow-right" className="float-end" width="16"/>
</CLink> </CLink>
</CCardFooter> </CCardFooter>
} }

20
src/views/widgets/WidgetsDropdown.js
View File

@ -1,13 +1,13 @@
import React from 'react' import React from 'react'
import { CWidgetDropdown } from '@coreui/react'
import { import {
CWidgetDropdown,
CRow, CRow,
CCol, CCol,
CDropdown, CDropdown,
CDropdownMenu, CDropdownMenu,
CDropdownItem, CDropdownItem,
CDropdownToggle CDropdownToggle
} from '@coreui/react' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple' import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple' import ChartBarSimple from '../charts/ChartBarSimple'
@ -18,7 +18,7 @@ const WidgetsDropdown = () => {
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
color="gradient-primary" color="primary"
header="9.823" header="9.823"
text="Members online" text="Members online"
footerSlot={ footerSlot={
@ -37,7 +37,7 @@ const WidgetsDropdown = () => {
<CDropdownToggle color="transparent"> <CDropdownToggle color="transparent">
<CIcon name="cil-settings"/> <CIcon name="cil-settings"/>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -49,7 +49,7 @@ const WidgetsDropdown = () => {
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
color="gradient-info" color="info"
header="9.823" header="9.823"
text="Members online" text="Members online"
footerSlot={ footerSlot={
@ -69,7 +69,7 @@ const WidgetsDropdown = () => {
<CDropdownToggle caret={false} color="transparent"> <CDropdownToggle caret={false} color="transparent">
<CIcon name="cil-location-pin"/> <CIcon name="cil-location-pin"/>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -81,7 +81,7 @@ const WidgetsDropdown = () => {
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
color="gradient-warning" color="warning"
header="9.823" header="9.823"
text="Members online" text="Members online"
footerSlot={ footerSlot={
@ -101,7 +101,7 @@ const WidgetsDropdown = () => {
<CDropdownToggle color="transparent"> <CDropdownToggle color="transparent">
<CIcon name="cil-settings"/> <CIcon name="cil-settings"/>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -113,7 +113,7 @@ const WidgetsDropdown = () => {
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetDropdown <CWidgetDropdown
color="gradient-danger" color="danger"
header="9.823" header="9.823"
text="Members online" text="Members online"
footerSlot={ footerSlot={
@ -130,7 +130,7 @@ const WidgetsDropdown = () => {
<CDropdownToggle caret className="text-white" color="transparent"> <CDropdownToggle caret className="text-white" color="transparent">
<CIcon name="cil-settings"/> <CIcon name="cil-settings"/>
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu className="pt-0" placement="bottom-end"> <CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>

3191
yarn.lock
View File

File diff suppressed because it is too large Load Diff