refactor: migrate to CoreUI v4
This commit is contained in:
Łukasz Holeczek
parent
d5ba135d18
commit
e484c60e6f
17
migration.md
17
migration.md
@ -1,10 +1,27 @@
|
||||
# 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
|
||||
|
||||
- variant="pill" --> shape="rounded-pill"
|
||||
- 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
|
||||
|
||||
- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/chartjs": "^2.0.0",
|
||||
"@coreui/coreui": "^3.4.0",
|
||||
"@coreui/coreui": "next",
|
||||
"@coreui/icons": "^2.0.0-rc.0",
|
||||
"@coreui/icons-react": "^1.0.2",
|
||||
"@coreui/react": "^3.4.0",
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react'
|
||||
import { CFooter } from '@coreui/react'
|
||||
import { CFooter } from '@coreui/react-ts'
|
||||
|
||||
const TheFooter = () => {
|
||||
return (
|
||||
<CFooter fixed={false}>
|
||||
<div>
|
||||
<a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
|
||||
<span className="ml-1">© 2020 creativeLabs.</span>
|
||||
<span className="ms-1">© 2020 creativeLabs.</span>
|
||||
</div>
|
||||
<div className="mfs-auto">
|
||||
<span className="mr-1">Powered by</span>
|
||||
<div className="ms-auto">
|
||||
<span className="me-1">Powered by</span>
|
||||
<a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
|
||||
</div>
|
||||
</CFooter>
|
||||
|
||||
@ -1,100 +1,116 @@
|
||||
import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { CToggler, CBreadcrumbRouter, CLink } from "@coreui/react";
|
||||
import {
|
||||
CContainer,
|
||||
CHeader,
|
||||
CToggler,
|
||||
CHeaderBrand,
|
||||
CHeaderDivider,
|
||||
CHeaderNav,
|
||||
CHeaderNavItem,
|
||||
CHeaderNavLink,
|
||||
CSubheader,
|
||||
CBreadcrumbRouter,
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
CNavLink,
|
||||
CNavItem,
|
||||
} from "@coreui/react-ts";
|
||||
import CIcon from "@coreui/icons-react";
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
import routes from "../routes";
|
||||
|
||||
import {
|
||||
TheHeaderDropdown,
|
||||
TheHeaderDropdownMssg,
|
||||
TheHeaderDropdownNotif,
|
||||
TheHeaderDropdownTasks
|
||||
} from './index'
|
||||
TheHeaderDropdownTasks,
|
||||
} from "./index";
|
||||
|
||||
const TheHeader = () => {
|
||||
const dispatch = useDispatch()
|
||||
const sidebarShow = useSelector(state => state.sidebarShow)
|
||||
const dispatch = useDispatch();
|
||||
const sidebarShow = useSelector((state) => state.sidebarShow);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
const val = [true, "responsive"].includes(sidebarShow)
|
||||
? false
|
||||
: "responsive";
|
||||
dispatch({ type: "set", sidebarShow: val });
|
||||
};
|
||||
|
||||
const toggleSidebarMobile = () => {
|
||||
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
|
||||
dispatch({type: 'set', sidebarShow: val})
|
||||
}
|
||||
const val = [false, "responsive"].includes(sidebarShow)
|
||||
? true
|
||||
: "responsive";
|
||||
dispatch({ type: "set", sidebarShow: val });
|
||||
};
|
||||
|
||||
return (
|
||||
<CHeader withSubheader>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ml-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>
|
||||
<CHeader position="sticky" className="mb-4">
|
||||
<CContainer fluid>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ms-md-3 d-lg-none"
|
||||
onClick={toggleSidebarMobile}
|
||||
/>
|
||||
<CToggler
|
||||
inHeader
|
||||
className="ms-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="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 className="px-3">
|
||||
<TheHeaderDropdownNotif/>
|
||||
<TheHeaderDropdownTasks/>
|
||||
<TheHeaderDropdownMssg/>
|
||||
<TheHeaderDropdown/>
|
||||
</CHeaderNav>
|
||||
|
||||
<CSubheader className="px-3 justify-content-between">
|
||||
<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}
|
||||
/>
|
||||
<div className="d-md-down-none mfe-2 c-subheader-nav">
|
||||
<CLink className="c-subheader-nav-link"href="#">
|
||||
<CHeaderNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">
|
||||
<CIcon name="cil-speech" alt="Settings" />
|
||||
</CLink>
|
||||
<CLink
|
||||
className="c-subheader-nav-link"
|
||||
aria-current="page"
|
||||
to="/dashboard"
|
||||
>
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink to="/users" component={NavLink} activeClassName="active">
|
||||
<CIcon name="cil-graph" alt="Dashboard" /> Dashboard
|
||||
</CLink>
|
||||
<CLink className="c-subheader-nav-link" href="#">
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">
|
||||
<CIcon name="cil-settings" alt="Settings" /> Settings
|
||||
</CLink>
|
||||
</div>
|
||||
</CSubheader>
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CHeaderNav>
|
||||
</CContainer>
|
||||
</CHeader>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default TheHeader
|
||||
export default TheHeader;
|
||||
|
||||
@ -1,87 +1,71 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CAvatar,
|
||||
CBadge,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownHeader,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdown = () => {
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-items mx-2"
|
||||
direction="down"
|
||||
variant="nav-item"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/6.jpg'}
|
||||
className="c-avatar-img"
|
||||
alt="admin@bootstrapmaster.com"
|
||||
/>
|
||||
</div>
|
||||
<CDropdownToggle placement="bottom-end">
|
||||
<CAvatar image="avatars/6.jpg" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
className="text-center"
|
||||
>
|
||||
<strong>Account</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">
|
||||
Account
|
||||
</CDropdownHeader>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-bell" className="mfe-2" />
|
||||
<CIcon name="cil-bell" className="me-2" />
|
||||
Updates
|
||||
<CBadge color="info" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="info" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-envelope-open" className="mfe-2" />
|
||||
<CIcon name="cil-envelope-open" className="me-2" />
|
||||
Messages
|
||||
<CBadge color="success" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="success" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-task" className="mfe-2" />
|
||||
<CIcon name="cil-task" className="me-2" />
|
||||
Tasks
|
||||
<CBadge color="danger" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="danger" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-comment-square" className="mfe-2" />
|
||||
<CIcon name="cil-comment-square" className="me-2" />
|
||||
Comments
|
||||
<CBadge color="warning" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="warning" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
color="light"
|
||||
className="text-center"
|
||||
>
|
||||
<strong>Settings</strong>
|
||||
<CDropdownHeader className="bg-light fw-semibold py-2">
|
||||
Settings
|
||||
</CDropdownHeader>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-user" className="me-2" />Profile
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-user" className="mfe-2" />Profile
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-settings" className="mfe-2" />
|
||||
<CIcon name="cil-settings" className="me-2" />
|
||||
Settings
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-credit-card" className="mfe-2" />
|
||||
<CIcon name="cil-credit-card" className="me-2" />
|
||||
Payments
|
||||
<CBadge color="secondary" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="secondary" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-file" className="mfe-2" />
|
||||
<CIcon name="cil-file" className="me-2" />
|
||||
Projects
|
||||
<CBadge color="primary" className="mfs-auto">42</CBadge>
|
||||
<CBadge color="primary" className="ms-auto">42</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem divider />
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem>
|
||||
<CIcon name="cil-lock-locked" className="mfe-2" />
|
||||
<CIcon name="cil-lock-locked" className="me-2" />
|
||||
Lock Account
|
||||
</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
|
||||
@ -13,8 +13,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
const itemsCount = 4
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
variant="nav-item"
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
@ -30,7 +29,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
</CDropdownItem>
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/7.jpg'}
|
||||
@ -42,7 +41,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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 className="text-truncate font-weight-bold">
|
||||
<span className="fa fa-exclamation text-danger"></span> Important message
|
||||
@ -55,7 +54,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/6.jpg'}
|
||||
@ -67,7 +66,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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 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...
|
||||
@ -77,7 +76,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/5.jpg'}
|
||||
@ -89,7 +88,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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 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...
|
||||
@ -99,7 +98,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
|
||||
<CDropdownItem href="#">
|
||||
<div className="message">
|
||||
<div className="pt-3 mr-3 float-left">
|
||||
<div className="pt-3 me-3 float-start">
|
||||
<div className="c-avatar">
|
||||
<CImg
|
||||
src={'avatars/4.jpg'}
|
||||
@ -111,7 +110,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
</div>
|
||||
<div>
|
||||
<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 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...
|
||||
|
||||
@ -6,15 +6,14 @@ import {
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownNotif = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
variant="nav-item"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-bell"/>
|
||||
@ -29,11 +28,11 @@ const TheHeaderDropdownNotif = () => {
|
||||
>
|
||||
<strong>You have {itemsCount} notifications</strong>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-follow" className="mr-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-chart-pie" className="mr-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-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-basket" className="me-2 text-primary" /> New client</CDropdownItem>
|
||||
<CDropdownItem><CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||
<CDropdownItem
|
||||
header
|
||||
tag="div"
|
||||
|
||||
@ -6,17 +6,16 @@ import {
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownTasks = () => {
|
||||
const itemsCount = 5
|
||||
return (
|
||||
<CDropdown
|
||||
inNav
|
||||
className="c-header-nav-item mx-2"
|
||||
variant="nav-item"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CDropdownToggle>
|
||||
<CIcon name="cil-list" />
|
||||
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
@ -31,23 +30,23 @@ const TheHeaderDropdownTasks = () => {
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="d-block">
|
||||
<div className="small mb-1">Upgrade NPM & 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} />
|
||||
</CDropdownItem>
|
||||
<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} />
|
||||
</CDropdownItem>
|
||||
<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} />
|
||||
</CDropdownItem>
|
||||
<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} />
|
||||
</CDropdownItem>
|
||||
<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} />
|
||||
</CDropdownItem>
|
||||
<CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
|
||||
|
||||
@ -9,11 +9,11 @@ import {
|
||||
const TheLayout = () => {
|
||||
|
||||
return (
|
||||
<div className="c-app c-default-layout">
|
||||
<div className="d-flex">
|
||||
<TheSidebar/>
|
||||
<div className="c-wrapper">
|
||||
<div className="wrapper">
|
||||
<TheHeader/>
|
||||
<div className="c-body">
|
||||
<div className="body">
|
||||
<TheContent/>
|
||||
</div>
|
||||
<TheFooter/>
|
||||
|
||||
@ -2,9 +2,6 @@ import React from 'react'
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import {
|
||||
CCreateElement,
|
||||
CSidebar,
|
||||
CSidebarBrand,
|
||||
CSidebarNav,
|
||||
CSidebarNavDivider,
|
||||
CSidebarNavTitle,
|
||||
CSidebarMinimizer,
|
||||
@ -12,6 +9,12 @@ import {
|
||||
CSidebarNavItem,
|
||||
} from '@coreui/react'
|
||||
|
||||
import {
|
||||
CSidebar,
|
||||
CSidebarBrand,
|
||||
CSidebarNav,
|
||||
} from '@coreui/react-ts'
|
||||
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// sidebar nav config
|
||||
|
||||
@ -17,7 +17,7 @@ const Breadcrumbs = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bootstrap Breadcrumb
|
||||
<DocsLink name="CBreadcrumb"/>
|
||||
|
||||
@ -23,7 +23,7 @@ const Cards = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card title
|
||||
<DocsLink name="CCard"/>
|
||||
@ -36,7 +36,7 @@ const Cards = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardBody>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||
@ -46,11 +46,11 @@ const Cards = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card with icon
|
||||
<div className="card-header-actions">
|
||||
<CIcon name="cil-check" className="float-right"/>
|
||||
<CIcon name="cil-check" className="float-end"/>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -61,11 +61,11 @@ const Cards = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card with switch
|
||||
<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>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -76,11 +76,11 @@ const Cards = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<div className="card-header-actions">
|
||||
<CBadge color="success" className="float-right">Success</CBadge>
|
||||
<CBadge color="success" className="float-end">Success</CBadge>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -91,11 +91,11 @@ const Cards = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<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>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -380,7 +380,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6" md="4">
|
||||
<CFade in={showCard}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card actions
|
||||
<div className="card-header-actions">
|
||||
|
||||
@ -26,7 +26,7 @@ const Carousels = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Carousel with controls
|
||||
<DocsLink name="CCarousel"/>
|
||||
@ -51,7 +51,7 @@ const Carousels = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Carousel with controls, indicators and caption
|
||||
</CCardHeader>
|
||||
@ -79,7 +79,7 @@ const Carousels = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Carousel animation
|
||||
</CCardHeader>
|
||||
@ -107,7 +107,7 @@ const Carousels = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Carousel animation with autoSlide
|
||||
</CCardHeader>
|
||||
|
||||
@ -49,7 +49,7 @@ const Collapses = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<DocsLink name="CCollapse"/>
|
||||
@ -84,7 +84,7 @@ const Collapses = () => {
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> multi target</small>
|
||||
@ -101,7 +101,7 @@ const Collapses = () => {
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCollapse show={collapseMulti[0]}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<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.
|
||||
</CCardBody>
|
||||
@ -110,7 +110,7 @@ const Collapses = () => {
|
||||
</CCol>
|
||||
<CCol className="col-sm-12 col-md-6">
|
||||
<CCollapse show={collapseMulti[1]}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<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.
|
||||
</CCardBody>
|
||||
@ -123,7 +123,7 @@ const Collapses = () => {
|
||||
|
||||
<hr/>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Fade
|
||||
<DocsLink name="CFade"/>
|
||||
@ -139,7 +139,7 @@ const Collapses = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> accordion</small>
|
||||
|
||||
@ -42,7 +42,7 @@ const BasicForms = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="12" sm="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Credit Card
|
||||
<small> Form</small>
|
||||
@ -113,7 +113,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Company
|
||||
<small> Form</small>
|
||||
@ -155,7 +155,7 @@ const BasicForms = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Basic Form
|
||||
<small> Elements</small>
|
||||
@ -292,37 +292,37 @@ const BasicForms = () => {
|
||||
</CCol>
|
||||
<CCol sm="9">
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="success"
|
||||
defaultChecked
|
||||
variant="outline"
|
||||
/>
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="warning"
|
||||
defaultChecked
|
||||
variant="opposite"
|
||||
/>
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="danger"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
/>
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="info"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
variant="outline"
|
||||
/>
|
||||
<CSwitch
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
color="dark"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
@ -451,19 +451,19 @@ const BasicForms = () => {
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Inline
|
||||
<small> Form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm action="" method="post" inline>
|
||||
<CFormGroup className="pr-1">
|
||||
<CLabel htmlFor="exampleInputName2" className="pr-1">Name</CLabel>
|
||||
<CFormGroup className="pe-1">
|
||||
<CLabel htmlFor="exampleInputName2" className="pe-1">Name</CLabel>
|
||||
<CInput id="exampleInputName2" placeholder="Jane Doe" required />
|
||||
</CFormGroup>
|
||||
<CFormGroup className="pr-1">
|
||||
<CLabel htmlFor="exampleInputEmail2" className="pr-1">Email</CLabel>
|
||||
<CFormGroup className="pe-1">
|
||||
<CLabel htmlFor="exampleInputEmail2" className="pe-1">Email</CLabel>
|
||||
<CInput type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
|
||||
</CFormGroup>
|
||||
</CForm>
|
||||
@ -475,7 +475,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Horizontal
|
||||
<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>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Normal
|
||||
<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>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Input
|
||||
<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>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Input
|
||||
<small> Sizes</small>
|
||||
@ -628,7 +628,7 @@ const BasicForms = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" sm="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Form
|
||||
<small> validation feedback</small>
|
||||
@ -648,7 +648,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Validation feedback Form
|
||||
</CCardHeader>
|
||||
@ -674,7 +674,7 @@ const BasicForms = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Icon/Text Groups
|
||||
</CCardHeader>
|
||||
@ -728,7 +728,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Groups
|
||||
</CCardHeader>
|
||||
@ -776,7 +776,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Dropdowns Groups
|
||||
</CCardHeader>
|
||||
@ -860,7 +860,7 @@ const BasicForms = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Use the grid for big devices!
|
||||
<small> <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
@ -919,7 +919,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Input Grid for small devices!
|
||||
<small> <code>.col-*</code></small>
|
||||
@ -980,7 +980,7 @@ const BasicForms = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" sm="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
@ -1027,7 +1027,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
@ -1065,7 +1065,7 @@ const BasicForms = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" sm="4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
@ -1106,7 +1106,7 @@ const BasicForms = () => {
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CFade timeout={300} in={showElements} unmountOnExit={true}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Form Elements
|
||||
<div className="card-header-actions">
|
||||
|
||||
@ -19,7 +19,7 @@ const Jumbotrons = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Jumbotron
|
||||
<DocsLink name="CJumbotron"/>
|
||||
@ -39,7 +39,7 @@ const Jumbotrons = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Jumbotron
|
||||
<small> fluid</small>
|
||||
@ -57,7 +57,7 @@ const Jumbotrons = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Embed
|
||||
</CCardHeader>
|
||||
|
||||
@ -22,7 +22,7 @@ const ListGroups = () => {
|
||||
<CRow>
|
||||
<CCol sm="12" xl="6">
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<DocsLink name="CListGroup"/>
|
||||
@ -40,7 +40,7 @@ const ListGroups = () => {
|
||||
|
||||
</CCol>
|
||||
<CCol sm="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group links
|
||||
<small> with first item active and last item disabled</small>
|
||||
@ -61,7 +61,7 @@ const ListGroups = () => {
|
||||
<CRow>
|
||||
<CCol sm="12" xl="6">
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> contextual classes</small>
|
||||
@ -84,7 +84,7 @@ const ListGroups = () => {
|
||||
</CCol>
|
||||
<CCol sm="12" xl="6">
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> contextual classes with .action</small>
|
||||
@ -108,7 +108,7 @@ const ListGroups = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> accent</small>
|
||||
@ -128,7 +128,7 @@ const ListGroups = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> accent with color</small>
|
||||
@ -150,7 +150,7 @@ const ListGroups = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12" xl="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> with badges</small>
|
||||
@ -159,15 +159,15 @@ const ListGroups = () => {
|
||||
<CListGroup>
|
||||
<CListGroupItem className="justify-content-between">
|
||||
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 className="justify-content-between">
|
||||
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 className="justify-content-between">
|
||||
Morbi leo risus
|
||||
<CBadge className="float-right" shape="pill" color="primary">1</CBadge>
|
||||
<CBadge className="float-end" shape="pill" color="primary">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
@ -176,7 +176,7 @@ const ListGroups = () => {
|
||||
</CCol>
|
||||
<CCol sm="12" xl="6">
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> custom content</small>
|
||||
@ -216,7 +216,7 @@ const ListGroups = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
List group
|
||||
<small> tab Javascript plugin</small>
|
||||
|
||||
@ -29,7 +29,7 @@ const CNavbars = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar
|
||||
<DocsLink name="CNavbar"/>
|
||||
@ -45,10 +45,10 @@ const CNavbars = () => {
|
||||
<CNavLink>Home</CNavLink>
|
||||
<CNavLink>Link</CNavLink>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav className="ml-auto">
|
||||
<CNavbarNav className="ms-auto">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
className="mr-sm-2"
|
||||
className="me-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
@ -84,7 +84,7 @@ const CNavbars = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar brand
|
||||
</CCardHeader>
|
||||
@ -102,7 +102,7 @@ const CNavbars = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar text
|
||||
</CCardHeader>
|
||||
@ -122,7 +122,7 @@ const CNavbars = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar dropdown
|
||||
</CCardHeader>
|
||||
@ -163,7 +163,7 @@ const CNavbars = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar form
|
||||
</CCardHeader>
|
||||
@ -171,7 +171,7 @@ const CNavbars = () => {
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
className="mr-sm-2"
|
||||
className="me-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
@ -181,7 +181,7 @@ const CNavbars = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
CNavbar input group
|
||||
</CCardHeader>
|
||||
@ -189,7 +189,7 @@ const CNavbars = () => {
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
className="mr-sm-2"
|
||||
className="me-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
|
||||
@ -20,7 +20,7 @@ const Navs = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<DocsLink name="CNav"/>
|
||||
@ -66,7 +66,7 @@ const Navs = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="3">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> vertical / links</small>
|
||||
@ -82,7 +82,7 @@ const Navs = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="3">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> vertical / list</small>
|
||||
@ -109,7 +109,7 @@ const Navs = () => {
|
||||
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> tabs</small>
|
||||
@ -125,7 +125,7 @@ const Navs = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> pills</small>
|
||||
@ -151,7 +151,7 @@ const Navs = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> fill and justify</small>
|
||||
@ -214,7 +214,7 @@ const Navs = () => {
|
||||
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> with flex</small>
|
||||
@ -234,7 +234,7 @@ const Navs = () => {
|
||||
<CRow>
|
||||
|
||||
<CCol xs="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> tabs with dropdowns</small>
|
||||
@ -268,7 +268,7 @@ const Navs = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Navs
|
||||
<small> pills with dropdowns</small>
|
||||
|
||||
@ -13,7 +13,7 @@ const Paginations = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pagination
|
||||
<DocsLink name="CPagination"/>
|
||||
@ -50,7 +50,7 @@ const Paginations = () => {
|
||||
<div>currentPage: {currentPage}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
|
||||
@ -21,7 +21,7 @@ const Popovers = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Popovers
|
||||
<DocsLink name="CPopover"/>
|
||||
@ -64,7 +64,7 @@ const Popovers = () => {
|
||||
|
||||
<hr/>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Popovers
|
||||
<small> placement</small>
|
||||
|
||||
@ -11,7 +11,7 @@ import { DocsLink } from 'src/reusable'
|
||||
const ProgressBar = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<DocsLink name="CProgressBar"/>
|
||||
@ -24,7 +24,7 @@ const ProgressBar = () => {
|
||||
<CProgress value={100} className="mb-3" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> labels</small>
|
||||
@ -35,7 +35,7 @@ const ProgressBar = () => {
|
||||
<CProgress value={15} max={20} className="mb-3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> heights</small>
|
||||
@ -45,7 +45,7 @@ const ProgressBar = () => {
|
||||
<CProgress value={25} className="mb-3" height="30"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> backgrounds</small>
|
||||
@ -57,7 +57,7 @@ const ProgressBar = () => {
|
||||
<CProgress color="danger" value="100" className="mb-3" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> multiple bar</small>
|
||||
@ -70,7 +70,7 @@ const ProgressBar = () => {
|
||||
</CProgress>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> striped</small>
|
||||
@ -83,7 +83,7 @@ const ProgressBar = () => {
|
||||
<CProgress striped color="danger" value={100} className="mb-3" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Progress
|
||||
<small> animated</small>
|
||||
|
||||
@ -13,7 +13,7 @@ const Switches = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" md="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
<DocsLink name="CSwitch"/>
|
||||
@ -32,7 +32,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch default
|
||||
</CCardHeader>
|
||||
@ -47,7 +47,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch default - pills
|
||||
</CCardHeader>
|
||||
@ -67,7 +67,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch outline
|
||||
|
||||
@ -83,7 +83,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch outline pills
|
||||
|
||||
@ -104,7 +104,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch outline alternative
|
||||
|
||||
@ -120,7 +120,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch outline alternative - pills
|
||||
|
||||
@ -141,7 +141,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text
|
||||
|
||||
@ -157,7 +157,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text pills
|
||||
|
||||
@ -173,7 +173,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline
|
||||
|
||||
@ -189,7 +189,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline pills
|
||||
|
||||
@ -205,7 +205,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline alternative
|
||||
|
||||
@ -221,7 +221,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline alternative pills
|
||||
|
||||
@ -242,7 +242,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text
|
||||
|
||||
@ -258,7 +258,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text pills
|
||||
|
||||
@ -274,7 +274,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline
|
||||
|
||||
@ -290,7 +290,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline pills
|
||||
|
||||
@ -306,7 +306,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline alternative
|
||||
|
||||
@ -322,7 +322,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Switch with text outline alternative pills
|
||||
|
||||
@ -343,7 +343,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
@ -362,7 +362,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
@ -385,7 +385,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
@ -403,7 +403,7 @@ const Switches = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
@ -426,7 +426,7 @@ const Switches = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
|
||||
@ -28,7 +28,7 @@ const Tables = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Simple Table
|
||||
<DocsLink name="CModal"/>
|
||||
@ -56,7 +56,7 @@ const Tables = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Striped Table
|
||||
</CCardHeader>
|
||||
@ -87,7 +87,7 @@ const Tables = () => {
|
||||
<CRow>
|
||||
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Condensed Table
|
||||
</CCardHeader>
|
||||
@ -115,7 +115,7 @@ const Tables = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bordered Table
|
||||
</CCardHeader>
|
||||
@ -146,7 +146,7 @@ const Tables = () => {
|
||||
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Combined All Table
|
||||
</CCardHeader>
|
||||
@ -177,7 +177,7 @@ const Tables = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Combined All dark Table
|
||||
</CCardHeader>
|
||||
|
||||
@ -23,7 +23,7 @@ const Tabs = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" md="6" className="mb-4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Index indentifiers
|
||||
<DocsLink name="CTabs" />
|
||||
@ -49,7 +49,7 @@ const Tabs = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
{/* <CCol xs="12" md="6" className="mb-4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Id indentifiers</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs activeTab="home">
|
||||
@ -75,7 +75,7 @@ const Tabs = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6" className="mb-4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>No fade animation tabs</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
@ -107,7 +107,7 @@ const Tabs = () => {
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6" className="mb-4">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Controlled tabs</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs
|
||||
|
||||
@ -23,7 +23,7 @@ const Tooltips = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Tooltips
|
||||
<DocsLink name="CTooltip"/>
|
||||
@ -66,7 +66,7 @@ const Tooltips = () => {
|
||||
|
||||
<hr/>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Tooltips
|
||||
<small> placement</small>
|
||||
|
||||
@ -13,7 +13,7 @@ const BrandButtons = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Brand button
|
||||
</CCardHeader>
|
||||
@ -22,72 +22,72 @@ const BrandButtons = () => {
|
||||
<small> <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<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-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span className="mfs-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-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span className="mfs-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-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span className="mfs-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-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="mfs-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-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span className="mfs-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-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span className="mfs-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-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span className="mfs-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-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span className="mfs-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-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /><span className="ms-2">Facebook</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 me-1 mb-1"><CIcon name="cib-linkedin" /><span className="ms-2">LinkedIn</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 me-1 mb-1"><CIcon name="cib-tumblr" /><span className="ms-2">Tumblr</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 me-1 mb-1"><CIcon name="cib-github" /><span className="ms-2">Github</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 me-1 mb-1"><CIcon name="cib-youtube" /><span className="ms-2">YouTube</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 me-1 mb-1"><CIcon name="cib-instagram" /><span className="ms-2">Instagram</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 me-1 mb-1"><CIcon name="cib-vk" /><span className="ms-2">VK</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 me-1 mb-1"><CIcon name="cib-behance" /><span className="ms-2">Behance</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 me-1 mb-1"><CIcon name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small> <code>size="lg"</code></small>
|
||||
</h6>
|
||||
<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Brand button
|
||||
<small> only icons</small>
|
||||
@ -97,65 +97,65 @@ const BrandButtons = () => {
|
||||
<small> <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<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-twitter btn-brand mr-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-flickr btn-brand mr-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-xing btn-brand mr-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-stack-overflow btn-brand mr-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-dribbble btn-brand mr-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-pinterest btn-brand mr-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-yahoo btn-brand mr-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-reddit btn-brand mr-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-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /></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 me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></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 me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></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 me-1 mb-1"><CIcon size="sm" name="cib-github" /></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 me-1 mb-1"><CIcon size="sm" name="cib-youtube" /></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 me-1 mb-1"><CIcon size="sm" name="cib-instagram" /></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 me-1 mb-1"><CIcon size="sm" name="cib-vk" /></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 me-1 mb-1"><CIcon size="sm" name="cib-behance" /></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 me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<CButton className="btn-facebook btn-brand mr-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-linkedin btn-brand mr-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-tumblr btn-brand mr-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-github btn-brand mr-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-youtube btn-brand mr-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-instagram btn-brand mr-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-vk btn-brand mr-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-behance btn-brand mr-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-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
|
||||
<CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /></CButton>
|
||||
<CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /></CButton>
|
||||
<CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
|
||||
<CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /></CButton>
|
||||
<CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
|
||||
<CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /></CButton>
|
||||
<CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /></CButton>
|
||||
<CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
|
||||
<CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /></CButton>
|
||||
<CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
|
||||
<CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /></CButton>
|
||||
<CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
|
||||
<CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /></CButton>
|
||||
<CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
|
||||
<CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /></CButton>
|
||||
<CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /></CButton>
|
||||
<CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
|
||||
</p>
|
||||
<h6>Size Large
|
||||
<small> <code>size="lg"</code></small>
|
||||
</h6>
|
||||
<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-twitter btn-brand mr-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-flickr btn-brand mr-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-xing btn-brand mr-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-stack-overflow btn-brand mr-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-dribbble btn-brand mr-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-pinterest btn-brand mr-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-yahoo btn-brand mr-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-reddit btn-brand mr-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-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /></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 me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></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 me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></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 me-1 mb-1"><CIcon size="lg" name="cib-github" /></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 me-1 mb-1"><CIcon size="lg" name="cib-youtube" /></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 me-1 mb-1"><CIcon size="lg" name="cib-instagram" /></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 me-1 mb-1"><CIcon size="lg" name="cib-vk" /></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 me-1 mb-1"><CIcon size="lg" name="cib-behance" /></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 me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
@ -24,7 +24,7 @@ const ButtonDropdowns = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Dropdowns
|
||||
<DocsLink name="CDropdown"/>
|
||||
@ -276,7 +276,7 @@ const ButtonDropdowns = () => {
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Menus
|
||||
</CCardHeader>
|
||||
|
||||
@ -26,7 +26,7 @@ const ButtonGroups = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Callout
|
||||
<DocsLink name="CCallout"/>
|
||||
@ -38,7 +38,7 @@ const ButtonGroups = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<DocsLink name="-Button/#CButtonGroup"/>
|
||||
@ -52,20 +52,20 @@ const ButtonGroups = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> toolbar</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar className="mb-3">
|
||||
<CButtonGroup className="mr-2">
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
<CButton color="secondary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup className="mr-2">
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
@ -75,7 +75,7 @@ const ButtonGroups = () => {
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar className="mb-3">
|
||||
<CButtonGroup className="mr-2">
|
||||
<CButtonGroup className="me-2">
|
||||
<CButton color="secondary">1</CButton>
|
||||
<CButton color="secondary">2</CButton>
|
||||
<CButton color="secondary">3</CButton>
|
||||
@ -105,7 +105,7 @@ const ButtonGroups = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> vertical variation</small>
|
||||
@ -122,7 +122,7 @@ const ButtonGroups = () => {
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> sizing</small>
|
||||
@ -148,7 +148,7 @@ const ButtonGroups = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> nestingccc</small>
|
||||
@ -170,7 +170,7 @@ const ButtonGroups = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Button Group
|
||||
<small> vertical</small>
|
||||
|
||||
@ -13,7 +13,7 @@ import { DocsLink } from 'src/reusable'
|
||||
const Buttons = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Standard Buttons
|
||||
<DocsLink name="-Button"/>
|
||||
@ -117,7 +117,7 @@ const Buttons = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
layout="outline" Buttons
|
||||
</CCardHeader>
|
||||
@ -217,7 +217,7 @@ const Buttons = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
layout="ghost" Buttons
|
||||
</CCardHeader>
|
||||
@ -317,7 +317,7 @@ const Buttons = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Square Buttons
|
||||
</CCardHeader>
|
||||
@ -423,7 +423,7 @@ const Buttons = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pill Buttons
|
||||
</CCardHeader>
|
||||
@ -530,7 +530,7 @@ const Buttons = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
@ -599,7 +599,7 @@ const Buttons = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
With Icons
|
||||
</CCardHeader>
|
||||
@ -635,7 +635,7 @@ const Buttons = () => {
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Level Buttons
|
||||
</CCardHeader>
|
||||
@ -652,7 +652,7 @@ const Buttons = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Level Buttons
|
||||
</CCardHeader>
|
||||
|
||||
@ -19,7 +19,7 @@ const Charts = () => {
|
||||
|
||||
return (
|
||||
<CCardGroup columns className = "cols-2" >
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bar Chart
|
||||
<DocsLink href="http://www.chartjs.org"/>
|
||||
@ -43,7 +43,7 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Doughnut Chart
|
||||
</CCardHeader>
|
||||
@ -70,7 +70,7 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
</CCardHeader>
|
||||
@ -98,7 +98,7 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pie Chart
|
||||
</CCardHeader>
|
||||
@ -125,7 +125,7 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Polar Area Chart
|
||||
</CCardHeader>
|
||||
@ -165,7 +165,7 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Radar Chart
|
||||
</CCardHeader>
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
import React, { lazy } from 'react'
|
||||
import {
|
||||
CCallout
|
||||
} from '@coreui/react'
|
||||
|
||||
import {
|
||||
CAvatar,
|
||||
CBadge,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
@ -10,8 +15,7 @@ import {
|
||||
CCol,
|
||||
CProgress,
|
||||
CRow,
|
||||
CCallout
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
import MainChartExample from '../charts/MainChartExample.js'
|
||||
@ -23,7 +27,7 @@ const Dashboard = () => {
|
||||
return (
|
||||
<>
|
||||
<WidgetsDropdown />
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
@ -31,10 +35,10 @@ const Dashboard = () => {
|
||||
<div className="small text-muted">November 2017</div>
|
||||
</CCol>
|
||||
<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"/>
|
||||
</CButton>
|
||||
<CButtonGroup className="float-right mr-3">
|
||||
<CButtonGroup className="float-end me-3">
|
||||
{
|
||||
['Day', 'Month', 'Year'].map(value => (
|
||||
<CButton
|
||||
@ -111,7 +115,7 @@ const Dashboard = () => {
|
||||
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Traffic {' & '} Sales
|
||||
</CCardHeader>
|
||||
@ -251,7 +255,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="progress-group-icon" name="cil-user" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="warning" value="43" />
|
||||
@ -261,7 +265,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="progress-group-icon" name="cil-user-female" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="warning" value="37" />
|
||||
@ -271,7 +275,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon className="progress-group-icon" name="cil-globe-alt" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="56" />
|
||||
@ -283,7 +287,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon name="cib-facebook" className="progress-group-icon" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="15" />
|
||||
@ -293,7 +297,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon name="cib-twitter" className="progress-group-icon" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="11" />
|
||||
@ -303,7 +307,7 @@ const Dashboard = () => {
|
||||
<div className="progress-group-header">
|
||||
<CIcon name="cib-linkedin" className="progress-group-icon" />
|
||||
<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 className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="8" />
|
||||
@ -334,10 +338,7 @@ const Dashboard = () => {
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-success"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/1.jpg" status="success"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Yiorgos Avraamu</div>
|
||||
@ -350,10 +351,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>50%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -369,10 +370,7 @@ const Dashboard = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-danger"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/2.jpg" status="danger"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Avram Tarasios</div>
|
||||
@ -386,10 +384,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>10%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -405,10 +403,7 @@ const Dashboard = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-warning"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/3.jpg" status="warning"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Quintin Ed</div>
|
||||
@ -421,10 +416,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>74%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -440,10 +435,7 @@ const Dashboard = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-secondary"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/4.jpg" status="secondary"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Enéas Kwadwo</div>
|
||||
@ -456,10 +448,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>98%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -475,10 +467,7 @@ const Dashboard = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-success"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/5.jpg" status="success"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Agapetus Tadeáš</div>
|
||||
@ -491,10 +480,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>22%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -510,10 +499,7 @@ const Dashboard = () => {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-center">
|
||||
<div className="c-avatar">
|
||||
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
|
||||
<span className="c-avatar-status bg-danger"></span>
|
||||
</div>
|
||||
<CAvatar image="avatars/6.jpg" status="danger"/>
|
||||
</td>
|
||||
<td>
|
||||
<div>Friderik Dávid</div>
|
||||
@ -526,10 +512,10 @@ const Dashboard = () => {
|
||||
</td>
|
||||
<td>
|
||||
<div className="clearfix">
|
||||
<div className="float-left">
|
||||
<div className="float-start">
|
||||
<strong>43%</strong>
|
||||
</div>
|
||||
<div className="float-right">
|
||||
<div className="float-end">
|
||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ export const getIconsView = iconset => {
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Brand Icons
|
||||
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
|
||||
|
||||
@ -6,7 +6,7 @@ import { DocsLink } from 'src/reusable'
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Free Icons / as CIcon{' '}
|
||||
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
|
||||
|
||||
@ -6,7 +6,7 @@ import { DocsLink } from 'src/reusable'
|
||||
|
||||
const CoreUIIcons = () => {
|
||||
return (
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Flag Icons
|
||||
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
|
||||
|
||||
@ -22,7 +22,7 @@ const Alerts = () => {
|
||||
<>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Alerts
|
||||
<DocsLink name="CAlert"/>
|
||||
@ -56,7 +56,7 @@ const Alerts = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Alerts
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
@ -116,7 +116,7 @@ const Alerts = () => {
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Alerts
|
||||
<small> additional content</small>
|
||||
@ -138,7 +138,7 @@ const Alerts = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Alerts
|
||||
<small> dismissing</small>
|
||||
|
||||
@ -15,7 +15,7 @@ const Badges = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Badges
|
||||
<DocsLink name="CBadge"/>
|
||||
@ -36,52 +36,52 @@ const Badges = () => {
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Badges
|
||||
<small> contextual variations</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge className="mr-1" color="primary">Primary</CBadge>
|
||||
<CBadge className="mr-1" color="secondary">Secondary</CBadge>
|
||||
<CBadge className="mr-1" color="success">Success</CBadge>
|
||||
<CBadge className="mr-1" color="danger">Danger</CBadge>
|
||||
<CBadge className="mr-1" color="warning">Warning</CBadge>
|
||||
<CBadge className="mr-1" color="info">Info</CBadge>
|
||||
<CBadge className="mr-1" color="light">Light</CBadge>
|
||||
<CBadge className="mr-1" color="dark">Dark</CBadge>
|
||||
<CBadge className="me-1" color="primary">Primary</CBadge>
|
||||
<CBadge className="me-1" color="secondary">Secondary</CBadge>
|
||||
<CBadge className="me-1" color="success">Success</CBadge>
|
||||
<CBadge className="me-1" color="danger">Danger</CBadge>
|
||||
<CBadge className="me-1" color="warning">Warning</CBadge>
|
||||
<CBadge className="me-1" color="info">Info</CBadge>
|
||||
<CBadge className="me-1" color="light">Light</CBadge>
|
||||
<CBadge className="me-1" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Badges
|
||||
<small> pill badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge className="mr-1" color="primary" shape="rounded-pill">Primary</CBadge>
|
||||
<CBadge className="mr-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
|
||||
<CBadge className="mr-1" color="success" shape="rounded-pill">Success</CBadge>
|
||||
<CBadge className="mr-1" color="danger" shape="rounded-pill">Danger</CBadge>
|
||||
<CBadge className="mr-1" color="warning" shape="rounded-pill">Warning</CBadge>
|
||||
<CBadge className="mr-1" color="info" shape="rounded-pill">Info</CBadge>
|
||||
<CBadge className="mr-1" color="light" shape="rounded-pill">Light</CBadge>
|
||||
<CBadge className="mr-1" color="dark" shape="rounded-pill">Dark</CBadge>
|
||||
<CBadge className="me-1" color="primary" shape="rounded-pill">Primary</CBadge>
|
||||
<CBadge className="me-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
|
||||
<CBadge className="me-1" color="success" shape="rounded-pill">Success</CBadge>
|
||||
<CBadge className="me-1" color="danger" shape="rounded-pill">Danger</CBadge>
|
||||
<CBadge className="me-1" color="warning" shape="rounded-pill">Warning</CBadge>
|
||||
<CBadge className="me-1" color="info" shape="rounded-pill">Info</CBadge>
|
||||
<CBadge className="me-1" color="light" shape="rounded-pill">Light</CBadge>
|
||||
<CBadge className="me-1" color="dark" shape="rounded-pill">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Badges
|
||||
<small> square badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge className="mr-1" color="primary" shape="rounded-0">Primary</CBadge>
|
||||
<CBadge className="mr-1" color="secondary" shape="rounded-0">Secondary</CBadge>
|
||||
<CBadge className="mr-1" color="success" shape="rounded-0">Success</CBadge>
|
||||
<CBadge className="mr-1" color="danger" shape="rounded-0">Danger</CBadge>
|
||||
<CBadge className="mr-1" color="warning" shape="rounded-0">Warning</CBadge>
|
||||
<CBadge className="mr-1" color="info" shape="rounded-0">Info</CBadge>
|
||||
<CBadge className="mr-1" color="light" shape="rounded-0">Light</CBadge>
|
||||
<CBadge className="mr-1" color="dark" shape="rounded-0">Dark</CBadge>
|
||||
<CBadge className="me-1" color="primary" shape="rounded-0">Primary</CBadge>
|
||||
<CBadge className="me-1" color="secondary" shape="rounded-0">Secondary</CBadge>
|
||||
<CBadge className="me-1" color="success" shape="rounded-0">Success</CBadge>
|
||||
<CBadge className="me-1" color="danger" shape="rounded-0">Danger</CBadge>
|
||||
<CBadge className="me-1" color="warning" shape="rounded-0">Warning</CBadge>
|
||||
<CBadge className="me-1" color="info" shape="rounded-0">Info</CBadge>
|
||||
<CBadge className="me-1" color="light" shape="rounded-0">Light</CBadge>
|
||||
<CBadge className="me-1" color="dark" shape="rounded-0">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
@ -28,7 +28,7 @@ const Modals = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bootstrap Modals
|
||||
<DocsLink name="CModal"/>
|
||||
@ -36,12 +36,12 @@ const Modals = () => {
|
||||
<CCardBody>
|
||||
<CButton
|
||||
onClick={() => setModal(!modal)}
|
||||
className="mr-1"
|
||||
className="me-1"
|
||||
>Launch demo modal</CButton>
|
||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
||||
<CButton onClick={() => setLarge(!large)} className="me-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
<CButton onClick={() => setSmall(!large)} className="mr-1">
|
||||
<CButton onClick={() => setSmall(!large)} className="me-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<CModal
|
||||
@ -112,13 +112,13 @@ const Modals = () => {
|
||||
|
||||
<hr />
|
||||
|
||||
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
|
||||
<CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1">
|
||||
Primary modal
|
||||
</CButton>
|
||||
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
|
||||
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
|
||||
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
|
||||
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
||||
<CButton color="success" onClick={() => setSuccess(!success)} className="me-1">Success modal</CButton>
|
||||
<CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">Warning modal</CButton>
|
||||
<CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">Danger modal</CButton>
|
||||
<CButton color="info" onClick={() => setInfo(!info)} className="me-1">Info modal</CButton>
|
||||
|
||||
<CModal
|
||||
visible={primary}
|
||||
|
||||
@ -63,7 +63,7 @@ const Toaster = () => {
|
||||
|
||||
|
||||
return (
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Toasts.
|
||||
<DocsLink name="-Toast"/>
|
||||
@ -138,7 +138,7 @@ const Toaster = () => {
|
||||
</CFormGroup>
|
||||
|
||||
<CButton
|
||||
className="mr-1 w-25"
|
||||
className="me-1 w-25"
|
||||
color="success"
|
||||
onClick={addToast}
|
||||
>
|
||||
|
||||
@ -19,9 +19,9 @@ const Page404 = () => {
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md="6">
|
||||
<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>
|
||||
<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>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupPrepend>
|
||||
|
||||
@ -19,9 +19,9 @@ const Page500 = () => {
|
||||
<CRow className="justify-content-center">
|
||||
<CCol md="6">
|
||||
<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>
|
||||
<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>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupPrepend>
|
||||
|
||||
@ -51,7 +51,7 @@ const ThemeColor = ({className, children}) => {
|
||||
const Colors = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Theme colors
|
||||
<DocsLink href="https://coreui.io/docs/utilities/colors/"/>
|
||||
@ -85,7 +85,7 @@ const Colors = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Grays
|
||||
</CCardHeader>
|
||||
|
||||
@ -9,7 +9,7 @@ import { DocsLink } from 'src/reusable'
|
||||
const Typography = () => {
|
||||
return (
|
||||
<>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Headings
|
||||
<DocsLink href="https://coreui.io/docs/content/typography/"/>
|
||||
@ -64,7 +64,7 @@ const Typography = () => {
|
||||
</table>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Headings
|
||||
</CCardHeader>
|
||||
@ -84,7 +84,7 @@ const Typography = () => {
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<div className="card-header">
|
||||
Display headings
|
||||
</div>
|
||||
@ -111,7 +111,7 @@ const Typography = () => {
|
||||
</div>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Inline text elements
|
||||
</CCardHeader>
|
||||
@ -136,7 +136,7 @@ const Typography = () => {
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Description list alignment
|
||||
</CCardHeader>
|
||||
|
||||
@ -12,7 +12,7 @@ const User = ({match}) => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol lg={6}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
User id: {match.params.id}
|
||||
</CCardHeader>
|
||||
|
||||
@ -40,7 +40,7 @@ const Users = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xl={6}>
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Users
|
||||
<small className="text-muted"> example</small>
|
||||
|
||||
@ -3,8 +3,8 @@ import {
|
||||
CCardFooter,
|
||||
CCol,
|
||||
CRow,
|
||||
CProgress,
|
||||
} from '@coreui/react'
|
||||
CProgress
|
||||
} from '@coreui/react-ts'
|
||||
|
||||
import {
|
||||
CCardGroup,
|
||||
@ -12,8 +12,7 @@ import {
|
||||
CWidgetProgress,
|
||||
CWidgetIcon,
|
||||
CWidgetProgressIcon,
|
||||
CWidgetSimple,
|
||||
|
||||
CWidgetSimple
|
||||
} from '@coreui/react'
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
import WidgetsDropdown from './WidgetsDropdown'
|
||||
@ -125,7 +124,7 @@ const Widgets = () => {
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon name="cil-arrow-right" className="float-right" width="16"/>
|
||||
<CIcon name="cil-arrow-right" className="float-end" width="16"/>
|
||||
</CLink>
|
||||
</CCardFooter>
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react'
|
||||
import { CWidgetDropdown } from '@coreui/react'
|
||||
import {
|
||||
CWidgetDropdown,
|
||||
CRow,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownMenu,
|
||||
CDropdownItem,
|
||||
CDropdownToggle
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
@ -18,7 +18,7 @@ const WidgetsDropdown = () => {
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="gradient-primary"
|
||||
color="primary"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
footerSlot={
|
||||
@ -37,7 +37,7 @@ const WidgetsDropdown = () => {
|
||||
<CDropdownToggle color="transparent">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -49,7 +49,7 @@ const WidgetsDropdown = () => {
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="gradient-info"
|
||||
color="info"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
footerSlot={
|
||||
@ -69,7 +69,7 @@ const WidgetsDropdown = () => {
|
||||
<CDropdownToggle caret={false} color="transparent">
|
||||
<CIcon name="cil-location-pin"/>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -81,7 +81,7 @@ const WidgetsDropdown = () => {
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="gradient-warning"
|
||||
color="warning"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
footerSlot={
|
||||
@ -101,7 +101,7 @@ const WidgetsDropdown = () => {
|
||||
<CDropdownToggle color="transparent">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -113,7 +113,7 @@ const WidgetsDropdown = () => {
|
||||
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="gradient-danger"
|
||||
color="danger"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
footerSlot={
|
||||
@ -130,7 +130,7 @@ const WidgetsDropdown = () => {
|
||||
<CDropdownToggle caret className="text-white" color="transparent">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user