refactor: temporarily delete views folder
This commit is contained in:
woothu
parent
5aa0cc3ce1
commit
cb4433a3e3
File diff suppressed because it is too large
Load Diff
@ -1,73 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBreadcrumb,
|
|
||||||
CBreadcrumbItem,
|
|
||||||
CBreadcrumbRouter,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CLink,
|
|
||||||
CCol,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import routes from '../../../routes'
|
|
||||||
|
|
||||||
const Breadcrumbs = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Bootstrap Breadcrumb
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a
|
|
||||||
href="https://coreui.github.io/components/breadcrumbs/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
className="card-header-action"
|
|
||||||
>
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>CBreadcrumbRouter wrapper component</h6>
|
|
||||||
<CBreadcrumbRouter routes={routes}/>
|
|
||||||
<h6>Manual</h6>
|
|
||||||
<CBreadcrumb>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Home</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem active>Library</CBreadcrumbItem>
|
|
||||||
</CBreadcrumb>
|
|
||||||
<CBreadcrumb>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Home</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Library</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem active>Data</CBreadcrumbItem>
|
|
||||||
</CBreadcrumb>
|
|
||||||
<CBreadcrumb>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Home</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Library</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem>
|
|
||||||
<CLink>Data</CLink>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
<CBreadcrumbItem active>
|
|
||||||
<span>Bootstrap</span>
|
|
||||||
</CBreadcrumbItem>
|
|
||||||
</CBreadcrumb>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Breadcrumbs
|
|
||||||
@ -1,411 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardFooter,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CRow,
|
|
||||||
CCollapse,
|
|
||||||
CFade,
|
|
||||||
CSwitch,
|
|
||||||
CLink
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Cards = () => {
|
|
||||||
const [collapsed, setCollapsed] = React.useState(true)
|
|
||||||
const [showCard, setShowCard] = React.useState(true)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card title
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
<CCardFooter>Card footer</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card with icon
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<CIcon name="cil-check" className="float-right"/>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card with switch
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<CSwitch className={'float-right mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card with label
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<CBadge color="success" className="float-right">Success</CBadge>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card with label
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<CBadge shape="pill" color="danger" className="float-right">42</CBadge>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="primary">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline primary
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="secondary">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline secondary
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="success">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline success
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="info">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline info
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="warning">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline warning
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard borderColor="danger">
|
|
||||||
<CCardHeader>
|
|
||||||
Card outline danger
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="primary">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="secondary">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="success">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="info">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="warning">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard accentColor="danger">
|
|
||||||
<CCardHeader>
|
|
||||||
Card with accent
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="primary" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="success" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="info" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="warning" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="danger" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="primary" className="text-white text-center">
|
|
||||||
<CCardBody>
|
|
||||||
<blockquote className="card-bodyquote">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
||||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
||||||
</blockquote>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="primary" className="text-white">
|
|
||||||
<CCardHeader>
|
|
||||||
Card title
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="success" className="text-white">
|
|
||||||
<CCardHeader>
|
|
||||||
Card title
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="info" className="text-white">
|
|
||||||
<CCardHeader>
|
|
||||||
Card title
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="warning" className="text-white">
|
|
||||||
<CCardHeader>
|
|
||||||
Card title
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CCard color="gradient-secondary">
|
|
||||||
<CCardHeader>
|
|
||||||
Card title - gradient
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" md="4">
|
|
||||||
<CFade in={showCard}>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Card actions
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<CLink className="card-header-action">
|
|
||||||
<CIcon name="cil-settings" />
|
|
||||||
</CLink>
|
|
||||||
<CLink className="card-header-action" onClick={() => setCollapsed(!collapsed)}>
|
|
||||||
<CIcon name={collapsed ? 'cil-chevron-bottom':'cil-chevron-top'} />
|
|
||||||
</CLink>
|
|
||||||
<CLink className="card-header-action" onClick={() => setShowCard(false)}>
|
|
||||||
<CIcon name="cil-x-circle" />
|
|
||||||
</CLink>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCollapse show={collapsed}>
|
|
||||||
<CCardBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</CCard>
|
|
||||||
</CFade>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Cards
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCarousel,
|
|
||||||
CCarouselCaption,
|
|
||||||
CCarouselControl,
|
|
||||||
CCarouselIndicators,
|
|
||||||
CCarouselInner,
|
|
||||||
CCarouselItem,
|
|
||||||
CCol,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const slides = [
|
|
||||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
||||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
||||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
|
||||||
]
|
|
||||||
|
|
||||||
const Carousels = () => {
|
|
||||||
const [activeIndex] = useState(1)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Carousel with controls
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCarousel>
|
|
||||||
<CCarouselInner>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
||||||
</CCarouselItem>
|
|
||||||
</CCarouselInner>
|
|
||||||
<CCarouselControl direction="prev"/>
|
|
||||||
<CCarouselControl direction="next"/>
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Carousel with controls, indicators and caption
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCarousel activeIndex={activeIndex}>
|
|
||||||
<CCarouselIndicators/>
|
|
||||||
<CCarouselInner>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
||||||
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
||||||
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
||||||
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
</CCarouselInner>
|
|
||||||
<CCarouselControl direction="prev"/>
|
|
||||||
<CCarouselControl direction="next"/>
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Carousel animation
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCarousel animate>
|
|
||||||
<CCarouselIndicators/>
|
|
||||||
<CCarouselInner>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
||||||
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
||||||
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
||||||
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
</CCarouselInner>
|
|
||||||
<CCarouselControl direction="prev"/>
|
|
||||||
<CCarouselControl direction="next"/>
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Carousel animation with autoSlide
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCarousel animate autoSlide={3000}>
|
|
||||||
<CCarouselIndicators/>
|
|
||||||
<CCarouselInner>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1"/>
|
|
||||||
<CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2"/>
|
|
||||||
<CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
<CCarouselItem>
|
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3"/>
|
|
||||||
<CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
|
||||||
</CCarouselInner>
|
|
||||||
<CCarouselControl direction="prev"/>
|
|
||||||
<CCarouselControl direction="next"/>
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Carousels
|
|
||||||
@ -1,227 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardFooter,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CCollapse,
|
|
||||||
CFade,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react';
|
|
||||||
|
|
||||||
const Collapses = () => {
|
|
||||||
|
|
||||||
const [collapse, setCollapse] = useState(false)
|
|
||||||
const [collapseMulti, setCollapseMulti] = useState([false, false])
|
|
||||||
const [accordion, setAccordion] = useState(1)
|
|
||||||
const [fade, setFade] = useState(true)
|
|
||||||
|
|
||||||
const toggle = (e) => {
|
|
||||||
setCollapse(!collapse)
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleMulti = (type) => {
|
|
||||||
let newCollapse = collapseMulti.slice()
|
|
||||||
switch (type) {
|
|
||||||
case "left":
|
|
||||||
newCollapse[0] = !collapseMulti[0];
|
|
||||||
break;
|
|
||||||
case "right":
|
|
||||||
newCollapse[1] = !collapseMulti[1];
|
|
||||||
break;
|
|
||||||
case "both":
|
|
||||||
newCollapse[0] = !collapseMulti[0];
|
|
||||||
newCollapse[1] = !collapseMulti[1];
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
setCollapseMulti(newCollapse)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleFade = () => {
|
|
||||||
setFade(!fade)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Collapse
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCollapse show={collapse}>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
|
|
||||||
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
|
|
||||||
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
|
|
||||||
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
|
|
||||||
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
|
|
||||||
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
|
|
||||||
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
|
|
||||||
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
|
|
||||||
vehicula sagittis elit leo id nisi.
|
|
||||||
</p>
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
<CCardFooter>
|
|
||||||
<CButton
|
|
||||||
color="primary"
|
|
||||||
onClick={toggle}
|
|
||||||
className={'mb-1'}
|
|
||||||
>Toggling button</CButton>
|
|
||||||
</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Collapse
|
|
||||||
<small> multi target</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
<CButton color="primary" onClick={()=>{toggleMulti('left')}}>
|
|
||||||
Left</CButton>{' '}
|
|
||||||
<CButton color="primary" onClick={()=>{toggleMulti('right')}}>
|
|
||||||
Right</CButton>{' '}
|
|
||||||
<CButton color="primary" onClick={()=>{toggleMulti('both')}}>
|
|
||||||
Both</CButton>{' '}
|
|
||||||
</p>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCollapse show={collapseMulti[0]}>
|
|
||||||
<CCard>
|
|
||||||
<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>
|
|
||||||
</CCard>
|
|
||||||
</CCollapse>
|
|
||||||
</CCol>
|
|
||||||
<CCol className="col-sm-12 col-md-6">
|
|
||||||
<CCollapse show={collapseMulti[1]}>
|
|
||||||
<CCard>
|
|
||||||
<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>
|
|
||||||
</CCard>
|
|
||||||
</CCollapse>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Fade
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CFade timeout={300} in={fade} tag="h5" className="mt-3">
|
|
||||||
This content will fade in and out as the button is pressed...
|
|
||||||
</CFade>
|
|
||||||
</CCardBody>
|
|
||||||
<CCardFooter>
|
|
||||||
<CButton color="primary" onClick={toggleFade}>Toggle Fade</CButton>
|
|
||||||
</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Collapse
|
|
||||||
<small> accordion</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div id="accordion">
|
|
||||||
<CCard className="mb-0">
|
|
||||||
<CCardHeader id="headingOne">
|
|
||||||
<CButton
|
|
||||||
block
|
|
||||||
color="link"
|
|
||||||
className="text-left m-0 p-0"
|
|
||||||
onClick={() => setAccordion(accordion === 0 ? null : 0)}
|
|
||||||
>
|
|
||||||
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
|
|
||||||
</CButton>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCollapse show={accordion === 0}>
|
|
||||||
<CCardBody>
|
|
||||||
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
|
||||||
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
|
||||||
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
|
||||||
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
||||||
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</CCard>
|
|
||||||
<CCard className="mb-0">
|
|
||||||
<CCardHeader id="headingTwo">
|
|
||||||
<CButton
|
|
||||||
block
|
|
||||||
color="link"
|
|
||||||
className="text-left m-0 p-0"
|
|
||||||
onClick={() => setAccordion(accordion === 1 ? null : 1)}
|
|
||||||
>
|
|
||||||
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
|
|
||||||
</CButton>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCollapse show={accordion === 1}>
|
|
||||||
<CCardBody>
|
|
||||||
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
|
||||||
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
|
||||||
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
|
||||||
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
||||||
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</CCard>
|
|
||||||
<CCard className="mb-0">
|
|
||||||
<CCardHeader id="headingThree">
|
|
||||||
<CButton
|
|
||||||
block
|
|
||||||
color="link"
|
|
||||||
className="text-left m-0 p-0"
|
|
||||||
onClick={() => setAccordion(accordion === 2 ? null : 2)}
|
|
||||||
>
|
|
||||||
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
|
|
||||||
</CButton>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCollapse show={accordion === 2}>
|
|
||||||
<CCardBody>
|
|
||||||
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
|
|
||||||
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
|
|
||||||
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
|
|
||||||
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
|
|
||||||
beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</CCard>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Collapses
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CContainer,
|
|
||||||
CJumbotron,
|
|
||||||
CRow,
|
|
||||||
CEmbed,
|
|
||||||
CEmbedItem
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Jumbotrons = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Jumbotron
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CJumbotron className="border">
|
|
||||||
<h1 className="display-3">Hello, world!</h1>
|
|
||||||
<p className="lead">This is a simple hero unit, a simple Jumbotron - style component for calling extra
|
|
||||||
attention to featured content or information.</p>
|
|
||||||
<hr className="my-2" />
|
|
||||||
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
|
|
||||||
<p className="lead">
|
|
||||||
<CButton color="primary" size="lg">Learn More</CButton>
|
|
||||||
</p>
|
|
||||||
</CJumbotron>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Jumbotron
|
|
||||||
<small> fluid</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CJumbotron fluid>
|
|
||||||
<CContainer fluid>
|
|
||||||
<h1 className="display-3">Fluid jumbotron</h1>
|
|
||||||
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
|
||||||
</CContainer>
|
|
||||||
</CJumbotron>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Embed
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CEmbed>
|
|
||||||
<CEmbedItem src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"/>
|
|
||||||
</CEmbed>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Jumbotrons
|
|
||||||
@ -1,277 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CListGroup,
|
|
||||||
CListGroupItem,
|
|
||||||
CListGroupItemHeading,
|
|
||||||
CListGroupItemText,
|
|
||||||
CRow,
|
|
||||||
CTabContent,
|
|
||||||
CTabPane
|
|
||||||
} from '@coreui/react';
|
|
||||||
|
|
||||||
const ListGroups = () => {
|
|
||||||
const [activeTab, setActiveTab] = useState(1)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
|
||||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
||||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
||||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
||||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group links
|
|
||||||
<small> with first item active and last item disabled</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem href="#" active>Cras justo odio</CListGroupItem>
|
|
||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
|
||||||
<CListGroupItem href="#">Morbi leo risus</CListGroupItem>
|
|
||||||
<CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
|
|
||||||
<CListGroupItem href="#" disabled>Vestibulum at eros</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> contextual classes</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
||||||
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
|
||||||
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> contextual classes with .action</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem action>Dapibus ac facilisis in</CListGroupItem>
|
|
||||||
<CListGroupItem action color="primary">This is a primary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="secondary">This is a secondary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="success">This is a success list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="danger">This is a danger list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="warning">This is a warning list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="info">This is a info list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="light">This is a light list group item</CListGroupItem>
|
|
||||||
<CListGroupItem action color="dark">This is a dark list group item</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> accent</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup accent>
|
|
||||||
<CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="secondary">This is a secondary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="success">This is a success list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="info">This is a info list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="light">This is a light list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="dark">This is a dark list group item</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> accent with color</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup accent>
|
|
||||||
<CListGroupItem accent="primary" color="primary">This is a primary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="secondary" color="secondary">This is a secondary list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="success" color="success">This is a success list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="danger" color="danger">This is a danger list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="warning" color="warning">This is a warning list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="info" color="info">This is a info list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="light" color="light">This is a light list group item</CListGroupItem>
|
|
||||||
<CListGroupItem accent="dark" color="dark">This is a dark list group item</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> with badges</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem className="justify-content-between">
|
|
||||||
Cras justo odio
|
|
||||||
<CBadge className="float-right" 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>
|
|
||||||
</CListGroupItem>
|
|
||||||
<CListGroupItem className="justify-content-between">
|
|
||||||
Morbi leo risus
|
|
||||||
<CBadge className="float-right" shape="pill" color="primary">1</CBadge>
|
|
||||||
</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" xl="6">
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> custom content</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
|
|
||||||
<CListGroup>
|
|
||||||
<CListGroupItem action active>
|
|
||||||
<CListGroupItemHeading className="d-flex w-100 justify-content-between">
|
|
||||||
List group item heading
|
|
||||||
<small>3 days ago</small>
|
|
||||||
</CListGroupItemHeading>
|
|
||||||
<CListGroupItemText className="mb-1">
|
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
||||||
<small>Donec id elit non mi porta.</small>
|
|
||||||
</CListGroupItemText>
|
|
||||||
</CListGroupItem>
|
|
||||||
<CListGroupItem action>
|
|
||||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
|
||||||
<CListGroupItemText>
|
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
||||||
</CListGroupItemText>
|
|
||||||
<small>Small.</small>
|
|
||||||
</CListGroupItem>
|
|
||||||
<CListGroupItem action>
|
|
||||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
|
||||||
<CListGroupItemText>
|
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
||||||
</CListGroupItemText>
|
|
||||||
<small>Small.</small>
|
|
||||||
</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
List group
|
|
||||||
<small> tab Javascript plugin</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="4">
|
|
||||||
<CListGroup id="list-tab" role="tablist">
|
|
||||||
<CListGroupItem onClick={() => setActiveTab(0)} action active={activeTab === 0} >Home</CListGroupItem>
|
|
||||||
<CListGroupItem onClick={() => setActiveTab(1)} action active={activeTab === 1} >Profile</CListGroupItem>
|
|
||||||
<CListGroupItem onClick={() => setActiveTab(2)} action active={activeTab === 2} >Messages</CListGroupItem>
|
|
||||||
<CListGroupItem onClick={() => setActiveTab(3)} action active={activeTab === 3} >Settings</CListGroupItem>
|
|
||||||
</CListGroup>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="8">
|
|
||||||
<CTabContent>
|
|
||||||
<CTabPane active={activeTab === 0} >
|
|
||||||
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
|
|
||||||
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
|
|
||||||
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
|
|
||||||
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane active={activeTab === 1}>
|
|
||||||
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
|
|
||||||
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
|
|
||||||
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
|
|
||||||
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane active={activeTab === 2}>
|
|
||||||
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
|
|
||||||
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
|
|
||||||
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
|
|
||||||
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
|
|
||||||
laborum elit adipisicing pariatur cillum.</p>
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane active={activeTab === 3}>
|
|
||||||
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
|
|
||||||
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
|
|
||||||
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
|
|
||||||
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
|
|
||||||
eiusmod eu pariatur culpa mollit in irure.</p>
|
|
||||||
</CTabPane>
|
|
||||||
</CTabContent>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ListGroups
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCollapse,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CNavbar,
|
|
||||||
CNavbarNav,
|
|
||||||
CNavbarBrand,
|
|
||||||
CNavbarText,
|
|
||||||
CToggler,
|
|
||||||
CNavLink,
|
|
||||||
CDropdown,
|
|
||||||
CForm,
|
|
||||||
CInput,
|
|
||||||
CButton,
|
|
||||||
CImg
|
|
||||||
} from '@coreui/react'
|
|
||||||
// import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const CNavbars = () => {
|
|
||||||
const [isOpen, setIsOpen] = useState(false)
|
|
||||||
const [isOpenDropdown, setIsOpenDropdown] = useState(false)
|
|
||||||
const [navbarText, setNavbarText] = useState(false)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar expandable="sm" color="info" >
|
|
||||||
<CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
|
|
||||||
<CNavbarBrand>
|
|
||||||
NavbarBrand
|
|
||||||
</CNavbarBrand>
|
|
||||||
<CCollapse show={isOpen} navbar>
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavLink>Home</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CNavbarNav className="ml-auto">
|
|
||||||
<CForm inline>
|
|
||||||
<CInput
|
|
||||||
className="mr-sm-2"
|
|
||||||
placeholder="Search"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
<CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
|
|
||||||
</CForm>
|
|
||||||
<CDropdown
|
|
||||||
inNav
|
|
||||||
>
|
|
||||||
<CDropdownToggle color="primary">
|
|
||||||
Lang
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
|
||||||
<CDropdownItem>ES</CDropdownItem>
|
|
||||||
<CDropdownItem>RU</CDropdownItem>
|
|
||||||
<CDropdownItem>FA</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown
|
|
||||||
inNav
|
|
||||||
>
|
|
||||||
<CDropdownToggle color="primary">
|
|
||||||
User
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Account</CDropdownItem>
|
|
||||||
<CDropdownItem>Settings</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar brand
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar color="faded" light>
|
|
||||||
<CNavbarBrand>
|
|
||||||
<CImg
|
|
||||||
src="https://placekitten.com/g/30/30"
|
|
||||||
className="d-inline-block align-top"
|
|
||||||
alt="CoreuiVue"
|
|
||||||
/>
|
|
||||||
CoreUI React
|
|
||||||
</CNavbarBrand>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar text
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar toggleable="sm" light color="light">
|
|
||||||
<CToggler
|
|
||||||
inNavbar
|
|
||||||
onClick={()=>{ setNavbarText(!navbarText)}}
|
|
||||||
/>
|
|
||||||
<CNavbarBrand>NavbarBrand</CNavbarBrand>
|
|
||||||
<CCollapse show={navbarText}>
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavbarText>Navbar text</CNavbarText>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar dropdown
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar expandable="false" color="primary" >
|
|
||||||
<CToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
|
|
||||||
<CCollapse show={isOpenDropdown} navbar>
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavLink>Home</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CDropdown
|
|
||||||
inNav
|
|
||||||
>
|
|
||||||
<CDropdownToggle color="primary">
|
|
||||||
Lang
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
|
||||||
<CDropdownItem>ES</CDropdownItem>
|
|
||||||
<CDropdownItem>RU</CDropdownItem>
|
|
||||||
<CDropdownItem>FA</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown
|
|
||||||
inNav
|
|
||||||
>
|
|
||||||
<CDropdownToggle color="primary">
|
|
||||||
User
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Account</CDropdownItem>
|
|
||||||
<CDropdownItem>Settings</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar form
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar light color="light">
|
|
||||||
<CForm inline>
|
|
||||||
<CInput
|
|
||||||
className="mr-sm-2"
|
|
||||||
placeholder="Search"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
<CButton color="outline-success" className="my-2 my-sm-0" type="submit">Search</CButton>
|
|
||||||
</CForm>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
CNavbar input group
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar light color="light">
|
|
||||||
<CForm inline>
|
|
||||||
<CInput
|
|
||||||
className="mr-sm-2"
|
|
||||||
placeholder="Username"
|
|
||||||
/>
|
|
||||||
</CForm>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CNavbars
|
|
||||||
@ -1,311 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CRow,
|
|
||||||
CCol,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CNav,
|
|
||||||
CNavItem,
|
|
||||||
CNavLink
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Navs = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<small>List Based</small>
|
|
||||||
<CNav>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Active</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
<hr />
|
|
||||||
<small>Link Based</small>
|
|
||||||
<CNav>
|
|
||||||
<CNavLink>Active</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
<hr />
|
|
||||||
<small>Link Base</small>
|
|
||||||
<CNav className="justify-content-center">
|
|
||||||
<CNavLink>Active</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
<hr />
|
|
||||||
<small>Link Based</small>
|
|
||||||
<CNav className="justify-content-end">
|
|
||||||
<CNavLink>Active</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="3">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> vertical / links</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav vertical>
|
|
||||||
<CNavLink className="nav-item">Active</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="3">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> vertical / list</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav vertical>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Another Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> tabs</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavLink active>Active</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> pills</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav variant="pills">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> fill and justify</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav fill variant="pills">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Active</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Longer nav link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CNav fill variant="pills">
|
|
||||||
<CNavLink active className="nav-item">Active</CNavLink>
|
|
||||||
<CNavLink className="nav-item">Link</CNavLink>
|
|
||||||
<CNavLink className="nav-item">Link</CNavLink>
|
|
||||||
<CNavLink className="nav-item" disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CNav justified variant="pills">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Active</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Longer nav link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CNav justified variant="pills">
|
|
||||||
<CNavLink className="nav-item" active>Active</CNavLink>
|
|
||||||
<CNavLink className="nav-item">Link</CNavLink>
|
|
||||||
<CNavLink className="nav-item">Link</CNavLink>
|
|
||||||
<CNavLink className="nav-item" disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> with flex</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav variant="pills" className="flex-sm-row">
|
|
||||||
<CNavLink className="flex-sm-fill text-sm-center" active>Active</CNavLink>
|
|
||||||
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
|
|
||||||
<CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
|
|
||||||
<CNavLink className="flex-sm-fill text-sm-center" disabled>Disabled</CNavLink>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
|
|
||||||
<CCol xs="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> tabs with dropdowns</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown inNav>
|
|
||||||
<CDropdownToggle caret>
|
|
||||||
Dropdown
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
<CDropdownItem divider />
|
|
||||||
<CDropdownItem>Separated link</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Navs
|
|
||||||
<small> pills with dropdowns</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNav variant="pills">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink active>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CDropdown inNav>
|
|
||||||
<CDropdownToggle caret>
|
|
||||||
Dropdown
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
<CDropdownItem divider />
|
|
||||||
<CDropdownItem>Separated link</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>Link</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink disabled>Disabled</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navs
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CPagination
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Paginations = () => {
|
|
||||||
const [currentPage, setCurrentPage] = useState(2)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Pagination
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>Default</h6>
|
|
||||||
<CPagination
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
|
|
||||||
<h6>Small</h6>
|
|
||||||
<CPagination
|
|
||||||
size="sm"
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
|
|
||||||
<div className="d-md-down-none">
|
|
||||||
<h6>Large</h6>
|
|
||||||
<CPagination
|
|
||||||
size="lg"
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>currentPage: {currentPage}</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<strong> Pagination </strong>
|
|
||||||
<small>alignment</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>Left alignment (default)</h6>
|
|
||||||
<CPagination
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
|
|
||||||
<h6>Center alignment</h6>
|
|
||||||
<CPagination
|
|
||||||
align="center"
|
|
||||||
addListClass="some-class"
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
|
|
||||||
<h6>Right (end) alignment</h6>
|
|
||||||
<CPagination
|
|
||||||
align="end"
|
|
||||||
activePage={currentPage}
|
|
||||||
pages={10}
|
|
||||||
onActivePageChange={setCurrentPage}
|
|
||||||
/>
|
|
||||||
<br></br>
|
|
||||||
|
|
||||||
<div>currentPage: {currentPage}</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Paginations
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CPopover,
|
|
||||||
CRow,
|
|
||||||
CCol,
|
|
||||||
CLink
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Popovers = () => {
|
|
||||||
const placements = [
|
|
||||||
'top-start', 'top', 'top-end',
|
|
||||||
'bottom-start', 'bottom', 'bottom-end',
|
|
||||||
'right-start', 'right', 'right-end',
|
|
||||||
'left-start', 'left', 'left-end'
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Popovers
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a
|
|
||||||
href="https://coreui.github.io/components/popovers/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
className="card-header-action"
|
|
||||||
>
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
|
|
||||||
<p className="text-muted">
|
|
||||||
Hover over the links below to see popover:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="muted">
|
|
||||||
Tight pants next level keffiyeh
|
|
||||||
<CPopover header="Popover header" content="Popover text">
|
|
||||||
<CLink> you probably </CLink>
|
|
||||||
</CPopover>
|
|
||||||
haven't heard of them.
|
|
||||||
Photo booth beard raw denim letterpress vegan messenger
|
|
||||||
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
|
|
||||||
sustainable quinoa 8-bit american apparel
|
|
||||||
<CPopover header="Popover header" content="Popover text">
|
|
||||||
<CLink> have a </CLink>
|
|
||||||
</CPopover>
|
|
||||||
terry richardson vinyl chambray. Beard stumptown,
|
|
||||||
cardigans banh mi lomo thundercats. Tofu biodiesel
|
|
||||||
williamsburg marfa, four loko mcsweeney''s cleanse
|
|
||||||
vegan chambray. A really ironic artisan
|
|
||||||
<CPopover header="Popover header" content="Popover text">
|
|
||||||
<CLink> whatever keytar </CLink>
|
|
||||||
</CPopover>
|
|
||||||
scenester farm-to-table banksy Austin
|
|
||||||
<CPopover header="Popover header" content="Popover text">
|
|
||||||
<CLink> twitter handle </CLink>
|
|
||||||
</CPopover>
|
|
||||||
|
|
||||||
freegan cred raw denim single-origin coffee viral.
|
|
||||||
</p>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Popovers
|
|
||||||
<small> placement</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div className="my-3">
|
|
||||||
<CRow>
|
|
||||||
{placements.map(placement => {
|
|
||||||
return (<CCol
|
|
||||||
md="4"
|
|
||||||
className="py-4 text-center"
|
|
||||||
key={placement}
|
|
||||||
>
|
|
||||||
<CPopover header="Popover header"
|
|
||||||
content={`Popover with placement: ${placement}`}
|
|
||||||
placement={placement}
|
|
||||||
>
|
|
||||||
<CButton color="primary">
|
|
||||||
{ placement }
|
|
||||||
</CButton>
|
|
||||||
</CPopover>
|
|
||||||
</CCol>)
|
|
||||||
})}
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Popovers
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CProgress,
|
|
||||||
CProgressBar
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const ProgressBar = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress className="mb-3" />
|
|
||||||
<CProgress value={25} className="mb-3" />
|
|
||||||
<CProgress value={50} className="mb-3" />
|
|
||||||
<CProgress value={75} className="mb-3" />
|
|
||||||
<CProgress value={100} className="mb-3" />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> labels</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress value={25.3746472} showPercentage precision={2} className="mb-3"/>
|
|
||||||
<CProgress value={50.45} showValue className="mb-3"/>
|
|
||||||
<CProgress value={15} max={20} showPercentage className="mb-3"/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> heights</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress value={25} className="mb-3" style={{height: "3px"}}/>
|
|
||||||
<CProgress value={25} className="mb-3" style={{height: "30px"}}/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> backgrounds</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress color="success" value="25" className="mb-3" />
|
|
||||||
<CProgress color="info" value={50} className="mb-3" />
|
|
||||||
<CProgress color="warning" value={75} className="mb-3" />
|
|
||||||
<CProgress color="danger" value="100" className="mb-3" />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> multiple bar</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress size="xs">
|
|
||||||
<CProgressBar value={10}/>
|
|
||||||
<CProgressBar color="success" value={30}/>
|
|
||||||
<CProgressBar color="danger" value={20}/>
|
|
||||||
</CProgress>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> striped</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress striped value={2 * 5} className="mb-3" />
|
|
||||||
<CProgress striped color="success" value={25} className="mb-3" />
|
|
||||||
<CProgress striped color="info" value={50} className="mb-3" />
|
|
||||||
<CProgress striped color="warning" value={75} className="mb-3" />
|
|
||||||
<CProgress striped color="danger" value={100} className="mb-3" />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Progress
|
|
||||||
<small> animated</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CProgress animated value={75} className="mb-3" />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ProgressBar
|
|
||||||
@ -1,483 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CRow,
|
|
||||||
CSwitch
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Switches = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
3d Switch
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch default
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch default - pills
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>Outline</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch outline
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant="outline" defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch outline pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>Opposite</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch outline alternative
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant="opposite" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant="opposite" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant="opposite" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant="opposite" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant="opposite" defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant="opposite" defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch outline alternative - pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>With text</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline alternative
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline alternative pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>With icon</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline alternative
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Switch with text outline alternative pills
|
|
||||||
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>Disabled</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
3d Switch
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked disabled />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
3d Switch
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'secondary'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'success'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'warning'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'info'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'danger'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'light'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'dark'} defaultChecked variant="opposite" />
|
|
||||||
<CSwitch className={'mx-1'} color={'primary'} variant="opposite" disabled />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>3D</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
3d Switch
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
3d Switch
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'} />
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'}/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol md="12">
|
|
||||||
<h4>Sizes</h4>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Sizes
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody className="p-0">
|
|
||||||
<table className="table table-hover table-striped table-align-middle mb-0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Size</th>
|
|
||||||
<th>Example</th>
|
|
||||||
<th>Props</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Large
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'lg'} />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Add <code>size={'lg'}</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Normal
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
-
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Small
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'sm'} />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Add <code>size={'sm'}</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Switches
|
|
||||||
@ -1,212 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CDataTable,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
import usersData from '../../Users/UsersData'
|
|
||||||
|
|
||||||
const getBadge = status => {
|
|
||||||
switch (status) {
|
|
||||||
case 'Active': return 'success'
|
|
||||||
case 'Inactive': return 'secondary'
|
|
||||||
case 'Pending': return 'warning'
|
|
||||||
case 'Banned': return 'danger'
|
|
||||||
default: return 'primary'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const fields = ['name','registered', 'role', 'status']
|
|
||||||
|
|
||||||
const Tables = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" lg="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Simple Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
itemsPerPage={5}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" lg="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Striped Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
striped
|
|
||||||
itemsPerPage={5}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
|
|
||||||
<CCol xs="12" lg="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Condensed Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
size="sm"
|
|
||||||
itemsPerPage={5}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" lg="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Bordered Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
bordered
|
|
||||||
itemsPerPage={5}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Combined All Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
hover
|
|
||||||
striped
|
|
||||||
bordered
|
|
||||||
size="sm"
|
|
||||||
itemsPerPage={10}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Combined All dark Table
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={fields}
|
|
||||||
dark
|
|
||||||
hover
|
|
||||||
striped
|
|
||||||
bordered
|
|
||||||
size="sm"
|
|
||||||
itemsPerPage={10}
|
|
||||||
pagination
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Tables
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CCol,
|
|
||||||
CNav,
|
|
||||||
CNavItem,
|
|
||||||
CNavLink,
|
|
||||||
CRow,
|
|
||||||
CTabContent,
|
|
||||||
CTabPane,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CTabs,
|
|
||||||
CCardHeader
|
|
||||||
} from '@coreui/react'
|
|
||||||
import {
|
|
||||||
CIcon
|
|
||||||
} from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Tabs = () => {
|
|
||||||
const [active, setActive] = useState(1)
|
|
||||||
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6" className="mb-4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Index indentifiers
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CTabs>
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
Home
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
Profile
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
Messages
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
<CTabContent>
|
|
||||||
<CTabPane>
|
|
||||||
{`1. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`2. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`3. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
</CTabContent>
|
|
||||||
</CTabs>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6" className="mb-4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Id indentifiers
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CTabs activeTab="home">
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink data-tab="home">
|
|
||||||
Home
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink data-tab="profile">
|
|
||||||
Profile
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink data-tab="messages">
|
|
||||||
Messages
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
<CTabContent>
|
|
||||||
<CTabPane data-tab="home">
|
|
||||||
{`1. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane data-tab="profile">
|
|
||||||
{`2. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane data-tab="messages">
|
|
||||||
{`3. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
</CTabContent>
|
|
||||||
</CTabs>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6" className="mb-4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
No fade animation tabs
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CTabs>
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-calculator" />
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-basket" />
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-chart-pie"/>
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
<CTabContent fade={false}>
|
|
||||||
<CTabPane>
|
|
||||||
{`1. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`2. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`3. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
</CTabContent>
|
|
||||||
</CTabs>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6" className="mb-4">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Controlled tabs
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CTabs activeTab={active} onActiveTabChange={idx => setActive(idx)}>
|
|
||||||
<CNav variant="tabs">
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-calculator" />
|
|
||||||
{ active === 0 && ' Home'}
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-basket" />
|
|
||||||
{ active === 1 && ' Profile'}
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem>
|
|
||||||
<CNavLink>
|
|
||||||
<CIcon name="cil-chart-pie"/>
|
|
||||||
{ active === 2 && ' Messages'}
|
|
||||||
</CNavLink>
|
|
||||||
</CNavItem>
|
|
||||||
</CNav>
|
|
||||||
<CTabContent>
|
|
||||||
<CTabPane>
|
|
||||||
{`1. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`2. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
<CTabPane>
|
|
||||||
{`3. ${lorem}`}
|
|
||||||
</CTabPane>
|
|
||||||
</CTabContent>
|
|
||||||
</CTabs>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Tabs
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CTooltip,
|
|
||||||
CRow,
|
|
||||||
CCol,
|
|
||||||
CLink
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Tooltips = () => {
|
|
||||||
const placements = [
|
|
||||||
'top-start', 'top', 'top-end',
|
|
||||||
'bottom-start', 'bottom', 'bottom-end',
|
|
||||||
'right-start', 'right', 'right-end',
|
|
||||||
'left-start', 'left', 'left-end'
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Tooltips
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a
|
|
||||||
href="https://coreui.github.io/components/tooltips/"
|
|
||||||
rel="noreferrer noopener"
|
|
||||||
target="_blank"
|
|
||||||
className="card-header-action"
|
|
||||||
>
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
|
|
||||||
<p className="text-muted">
|
|
||||||
Hover over the links below to see tooltips:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p className="muted">
|
|
||||||
Tight pants next level keffiyeh
|
|
||||||
<CTooltip content="Tooltip text">
|
|
||||||
<CLink> you probably </CLink>
|
|
||||||
</CTooltip>
|
|
||||||
haven't heard of them.
|
|
||||||
Photo booth beard raw denim letterpress vegan messenger
|
|
||||||
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
|
|
||||||
sustainable quinoa 8-bit american apparel
|
|
||||||
<CTooltip content="Tooltip text">
|
|
||||||
<CLink> have a </CLink>
|
|
||||||
</CTooltip>
|
|
||||||
terry richardson vinyl chambray. Beard stumptown,
|
|
||||||
cardigans banh mi lomo thundercats. Tofu biodiesel
|
|
||||||
williamsburg marfa, four loko mcsweeney''s cleanse
|
|
||||||
vegan chambray. A really ironic artisan
|
|
||||||
<CTooltip content="Tooltip text">
|
|
||||||
<CLink> whatever keytar </CLink>
|
|
||||||
</CTooltip>
|
|
||||||
scenester farm-to-table banksy Austin
|
|
||||||
<CTooltip content="Tooltip text">
|
|
||||||
<CLink> twitter handle </CLink>
|
|
||||||
</CTooltip>
|
|
||||||
|
|
||||||
freegan cred raw denim single-origin coffee viral.
|
|
||||||
</p>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Tooltips
|
|
||||||
<small> placement</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div className="my-3">
|
|
||||||
<CRow>
|
|
||||||
{placements.map(placement => {
|
|
||||||
return (<CCol
|
|
||||||
md="4"
|
|
||||||
className="py-4 text-center"
|
|
||||||
key={placement}
|
|
||||||
>
|
|
||||||
<CTooltip
|
|
||||||
content={`Tooltip with placement: ${placement}`}
|
|
||||||
placement={placement}
|
|
||||||
>
|
|
||||||
<CButton color="primary">
|
|
||||||
{ placement }
|
|
||||||
</CButton>
|
|
||||||
</CTooltip>
|
|
||||||
</CCol>)
|
|
||||||
})}
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Tooltips;
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const BrandButtons = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Brand button
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>Size Small
|
|
||||||
<small> Add this class <code>.btn-sm</code></small>
|
|
||||||
</h6>
|
|
||||||
<p>
|
|
||||||
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton>
|
|
||||||
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton>
|
|
||||||
</p>
|
|
||||||
<h6>Size Normal</h6>
|
|
||||||
<p>
|
|
||||||
<CButton className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton>
|
|
||||||
<CButton className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton>
|
|
||||||
<CButton className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton>
|
|
||||||
<CButton className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton>
|
|
||||||
<CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
|
|
||||||
<CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
|
|
||||||
<CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
|
|
||||||
<CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
|
|
||||||
<CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
|
|
||||||
<CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
|
|
||||||
<CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
|
|
||||||
<CButton className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton>
|
|
||||||
<CButton className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton>
|
|
||||||
<CButton className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton>
|
|
||||||
<CButton className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton>
|
|
||||||
<CButton className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton>
|
|
||||||
<CButton className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton>
|
|
||||||
</p>
|
|
||||||
<h6>Size Large
|
|
||||||
<small> Add this class <code>.btn-lg</code></small>
|
|
||||||
</h6>
|
|
||||||
<p>
|
|
||||||
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /><span>Facebook</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /><span>Twitter</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /><span>LinkedIn</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /><span>Flickr</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /><span>Pinterest</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /><span>VK</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /><span>Yahoo</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /><span>Behance</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /><span>Reddit</span></CButton>
|
|
||||||
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /><span>Vimeo</span></CButton>
|
|
||||||
</p>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Brand button
|
|
||||||
<small> only icons</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>Size Small
|
|
||||||
<small> Add this class <code>.btn-sm</code></small>
|
|
||||||
</h6>
|
|
||||||
<p>
|
|
||||||
<CButton size="sm" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton>
|
|
||||||
<CButton size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon 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-stack-overflow" /></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>
|
|
||||||
</p>
|
|
||||||
<h6>Size Large
|
|
||||||
<small> Add this class <code>.btn-lg</code></small>
|
|
||||||
</h6>
|
|
||||||
<p>
|
|
||||||
<CButton size="lg" className="btn-facebook btn-brand mr-1 mb-1"><CIcon name="cib-facebook" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-twitter btn-brand mr-1 mb-1"><CIcon name="cib-twitter" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-flickr btn-brand mr-1 mb-1"><CIcon name="cib-flickr" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-vk btn-brand mr-1 mb-1"><CIcon name="cib-vk" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-behance btn-brand mr-1 mb-1"><CIcon name="cib-behance" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-reddit btn-brand mr-1 mb-1"><CIcon name="cib-reddit" /></CButton>
|
|
||||||
<CButton size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
|
|
||||||
</p>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BrandButtons
|
|
||||||
@ -1,428 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CForm,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownDivider,
|
|
||||||
CDropdownHeader,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CRow,
|
|
||||||
CFormGroup,
|
|
||||||
CLabel,
|
|
||||||
CInput,
|
|
||||||
CInputCheckbox
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const ButtonDropdowns = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Dropdowns
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle>
|
|
||||||
Dropdown button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="primary">
|
|
||||||
Primary
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Secondary
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="success">
|
|
||||||
Success
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="info">
|
|
||||||
Info
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="warning">
|
|
||||||
Warning
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1 btn-group">
|
|
||||||
<CDropdownToggle color="danger">
|
|
||||||
Danger
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="primary">
|
|
||||||
Primary
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="secondary">
|
|
||||||
Secondary
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="success">
|
|
||||||
Success
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="info">
|
|
||||||
Info
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="warning">
|
|
||||||
Warning
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="danger">
|
|
||||||
Danger
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CDropdown className="m-1" size="lg">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Large button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
{' '}
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="secondary" size="lg">
|
|
||||||
Large split button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary" size="sm">
|
|
||||||
Small button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
{' '}
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary" size="sm" split>
|
|
||||||
Small split button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Dropup button
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="top">
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle split color="secondary">
|
|
||||||
Split dropup
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="top">
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Menus
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
|
|
||||||
<CDropdown className="m-1 d-inline-block">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Direction Up
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="top">
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<CDropdown className="m-1 d-inline-block">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Direction Left
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="left">
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<CDropdown className="m-1 d-inline-block">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Direction Right
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="right">
|
|
||||||
<CDropdownHeader>Header</CDropdownHeader>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<CDropdown className="m-1 d-inline-block">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Default Down
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu
|
|
||||||
placement="bottom"
|
|
||||||
modifiers={[{name: 'flip', enabled: false }]}
|
|
||||||
>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
This dropdown{'\''}s menu is right-aligned
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu placement="right">
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Action Disabled</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Dropdown with header
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem header>Header</CDropdownItem>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Dropdown with divider
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownDivider />
|
|
||||||
<CDropdownItem>Another Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="secondary">
|
|
||||||
Dropdown with disabled item
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled Action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CDropdown className="m-1">
|
|
||||||
<CDropdownToggle color="info">
|
|
||||||
Dropdown with form
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CForm className="px-4 py-3" >
|
|
||||||
<CFormGroup>
|
|
||||||
<CLabel htmlFor="exampleDropdownFormEmail1">Email address</CLabel>
|
|
||||||
<CInput className="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
|
|
||||||
</CFormGroup>
|
|
||||||
<CFormGroup>
|
|
||||||
<CLabel htmlFor="exampleDropdownFormPassword1">Password</CLabel>
|
|
||||||
<CInput className="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
|
|
||||||
</CFormGroup>
|
|
||||||
<CFormGroup variant="custom-checkbox" className="form-group">
|
|
||||||
<CInputCheckbox custom id="exampleDropdownFormCheckbox1" />
|
|
||||||
<CLabel variant="custom-checkbox" htmlFor="exampleDropdownFormCheckbox1">Remember me</CLabel>
|
|
||||||
</CFormGroup>
|
|
||||||
<CFormGroup className="mt-2">
|
|
||||||
<CButton color="primary" type="submit">Sign in</CButton>
|
|
||||||
</CFormGroup>
|
|
||||||
</CForm>
|
|
||||||
<CDropdownDivider/>
|
|
||||||
<CDropdownItem to="/register" >Register</CDropdownItem>
|
|
||||||
<CDropdownItem>Forgot password?</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ButtonDropdowns
|
|
||||||
@ -1,204 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CDropdown,
|
|
||||||
CButtonGroup,
|
|
||||||
CButtonToolbar,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownToggle,
|
|
||||||
CInput,
|
|
||||||
CInputGroup,
|
|
||||||
CInputGroupPrepend,
|
|
||||||
CInputGroupText,
|
|
||||||
CRow,
|
|
||||||
CCallout
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const ButtonGroups = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Callout
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCallout color="primary">
|
|
||||||
Callout
|
|
||||||
</CCallout>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonGroup>
|
|
||||||
<CButton color="secondary">Left</CButton>
|
|
||||||
<CButton color="secondary">Middle</CButton>
|
|
||||||
<CButton color="secondary">Right</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<small> toolbar</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonToolbar className="mb-3">
|
|
||||||
<CButtonGroup className="mr-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">
|
|
||||||
<CButton color="secondary">5</CButton>
|
|
||||||
<CButton color="secondary">6</CButton>
|
|
||||||
<CButton color="secondary">7</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
<CButtonGroup>
|
|
||||||
<CButton color="secondary">8</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CButtonToolbar>
|
|
||||||
<CButtonToolbar className="mb-3">
|
|
||||||
<CButtonGroup className="mr-2">
|
|
||||||
<CButton color="secondary">1</CButton>
|
|
||||||
<CButton color="secondary">2</CButton>
|
|
||||||
<CButton color="secondary">3</CButton>
|
|
||||||
<CButton color="secondary">4</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
<CInputGroup>
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>@</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput placeholder="Input group example" />
|
|
||||||
</CInputGroup>
|
|
||||||
</CButtonToolbar>
|
|
||||||
<CButtonToolbar justify="between">
|
|
||||||
<CButtonGroup>
|
|
||||||
<CButton color="secondary">1</CButton>
|
|
||||||
<CButton color="secondary">2</CButton>
|
|
||||||
<CButton color="secondary">3</CButton>
|
|
||||||
<CButton color="secondary">4</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
<CInputGroup>
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>@</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput placeholder="Input group example" />
|
|
||||||
</CInputGroup>
|
|
||||||
</CButtonToolbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<small> vertical variation</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonGroup vertical>
|
|
||||||
<CButton color="secondary">1</CButton>
|
|
||||||
<CButton color="secondary">2</CButton>
|
|
||||||
<CButton color="secondary">3</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
<CCol md={6}>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<small> sizing</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonGroup size="lg">
|
|
||||||
<CButton color="secondary">Left</CButton>
|
|
||||||
<CButton color="secondary">Middle</CButton>
|
|
||||||
<CButton color="secondary">Right</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
<br /><br />
|
|
||||||
<CButtonGroup>
|
|
||||||
<CButton color="secondary">Left</CButton>
|
|
||||||
<CButton color="secondary">Middle</CButton>
|
|
||||||
<CButton color="secondary">Right</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
<br /><br />
|
|
||||||
<CButtonGroup size="sm">
|
|
||||||
<CButton color="secondary">Left</CButton>
|
|
||||||
<CButton color="secondary">Middle</CButton>
|
|
||||||
<CButton color="secondary">Right</CButton>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<small> nestingccc</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonGroup>
|
|
||||||
<CButton color="secondary">1</CButton>
|
|
||||||
<CButton color="secondary">2</CButton>
|
|
||||||
<CDropdown color="secondary">
|
|
||||||
<CDropdownToggle caret color="secondary">
|
|
||||||
Dropdown
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
|
||||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Button Group
|
|
||||||
<small> vertical</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButtonGroup vertical>
|
|
||||||
<CButton color="secondary">1</CButton>
|
|
||||||
<CButton color="secondary">2</CButton>
|
|
||||||
<CDropdown>
|
|
||||||
<CDropdownToggle color="secondary" caret>
|
|
||||||
Dropdown
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu>
|
|
||||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
|
||||||
<CDropdownItem>Dropdown Link</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ButtonGroups
|
|
||||||
@ -1,674 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Buttons = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Standard Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="primary">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="secondary">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="success">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="warning">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="danger">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="info">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="light">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="dark">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="link">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Active State
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="primary" aria-pressed="true">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="secondary" aria-pressed="true">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="success" aria-pressed="true">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="warning" aria-pressed="true">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="danger" aria-pressed="true">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="info" aria-pressed="true">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="light" aria-pressed="true">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="dark" aria-pressed="true">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block color="link" aria-pressed="true">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Disabled
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="primary" disabled>Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="secondary" disabled>Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="success" disabled>Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="warning" disabled>Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="danger" disabled>Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="info" disabled>Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="light" disabled>Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="dark" disabled>Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block color="link" disabled>Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
variant="outline" Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
With <code>outline</code> prop.
|
|
||||||
</p>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="primary">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="secondary">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="success">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="warning">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="danger">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="info">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="light">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="dark">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Active State
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="primary" aria-pressed="true">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="success" aria-pressed="true">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="warning" aria-pressed="true">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="danger" aria-pressed="true">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="info" aria-pressed="true">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="light" aria-pressed="true">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" active color="dark" aria-pressed="true">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Disabled
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="success" disabled>Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="info" disabled>Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="light" disabled>Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
variant="ghost" Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
Use <code>.btn-ghost-*</code> class for variant="ghost" buttons.
|
|
||||||
</p>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="primary">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="secondary">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="success">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="warning">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="danger">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="info">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="light">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="dark">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Active State
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="success" aria-pressed="true">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="info" aria-pressed="true">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="light" aria-pressed="true">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block active variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Disabled
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="success" disabled>Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="info" disabled>Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="light" disabled>Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Square Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
Use <code>.btn-square</code> class for square buttons.
|
|
||||||
</p>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="primary">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="secondary">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="success">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="warning">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="danger">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="info">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="light">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="dark">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="link">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Active State
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="primary" aria-pressed="true">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="success" aria-pressed="true">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="warning" aria-pressed="true">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="danger" aria-pressed="true">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="info" aria-pressed="true">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="light" aria-pressed="true">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="dark" aria-pressed="true">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="square" color="link" aria-pressed="true">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Disabled
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="primary" disabled>Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="secondary" disabled>Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="success" disabled>Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="warning" disabled>Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="danger" disabled>Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="info" disabled>Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="light" disabled>Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="dark" disabled>Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="square" color="link" disabled>Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Pill Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>
|
|
||||||
Use <code>.btn-pill</code> class for pill buttons.
|
|
||||||
</p>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="primary" className="">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="secondary">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="success">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="warning">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="danger">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="info">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="light">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="dark">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="link">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Active State
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="primary" aria-pressed="true">Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="success" aria-pressed="true">Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="warning" aria-pressed="true">Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="danger" aria-pressed="true">Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="info" aria-pressed="true">Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="light" aria-pressed="true">Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="dark" aria-pressed="true">Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton active block shape="pill" color="link" aria-pressed="true">Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="12" xl className="mb-3 mb-xl-0">
|
|
||||||
Disabled
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="primary" disabled>Primary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="secondary" disabled>Secondary</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="success" disabled>Success</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="warning" disabled>Warning</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="danger" disabled>Danger</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="info" disabled>Info</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="light" disabled>Light</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="dark" disabled>Dark</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
|
||||||
<CButton block shape="pill" color="link" disabled>Link</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Sizes
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
|
|
||||||
<CRow className="align-items-center">
|
|
||||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
|
||||||
Small
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton color="primary" size="sm">Standard Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton color="secondary" variant="outline" size="sm">Outline Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton size="sm" variant="ghost" color="ghost">Ghost Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="square" color="warning" size="sm">Square Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
|
||||||
Normal
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton color="primary">Standard Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton variant="outline" color="secondary" >Outline Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton variant="ghost" color="success">Ghost Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="square" color="warning">Square Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="pill" color="danger">Pill Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="2" xl className="mb-3 mb-xl-0">
|
|
||||||
Large
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton color="primary" size="lg">Standard Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2"className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="square" color="warning" size="lg">Square Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
|
||||||
<CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
With Icons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow className="align-items-center mt-3">
|
|
||||||
<CCol col="2" className="text-center mt-3">
|
|
||||||
<CButton color="primary">
|
|
||||||
Standard Button
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="text-center mt-3">
|
|
||||||
<CButton color="secondary" variant='outline'>
|
|
||||||
<CIcon name="cil-lightbulb" />Outline Button
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="text-center mt-3">
|
|
||||||
<CButton variant="ghost" color="success">
|
|
||||||
<CIcon name="cil-lightbulb" />Ghost Button
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="text-center mt-3">
|
|
||||||
<CButton shape="square" color="warning">
|
|
||||||
<CIcon name="cil-lightbulb" />Square Button
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="2" className="text-center mt-3">
|
|
||||||
<CButton shape="pill" color="danger">
|
|
||||||
<CIcon name="cil-lightbulb" />Pill Button
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Block Level Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>Add prop <code>block</code></p>
|
|
||||||
<CButton color="secondary" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="primary" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="success" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="info" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="warning" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="danger" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton color="link" size="lg" block>Block level button</CButton>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Block Level Buttons
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<p>Add prop <code>block</code></p>
|
|
||||||
<CButton variant="outline" color="secondary" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="outline" color="primary" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="outline" color="success" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="outline" color="info" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="outline" color="warning" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="outline" color="danger" size="lg" block>Block level button</CButton>
|
|
||||||
<CButton variant="ghost" color="info" size="lg" block>Block level button</CButton>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Buttons
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { getColor } from '@coreui/utils/src'
|
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
|
||||||
|
|
||||||
const ChartBarSimple = props => {
|
|
||||||
|
|
||||||
const {
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const defaultDatasets = (()=>{
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
data: dataPoints,
|
|
||||||
backgroundColor: getColor(backgroundColor),
|
|
||||||
pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
|
|
||||||
label: label,
|
|
||||||
barPercentage: 0.5,
|
|
||||||
categoryPercentage: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultOptions = (()=>{
|
|
||||||
return {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
// render
|
|
||||||
return (
|
|
||||||
<CCharts
|
|
||||||
{...attributes}
|
|
||||||
type="bar"
|
|
||||||
datasets={defaultDatasets}
|
|
||||||
options={defaultOptions}
|
|
||||||
labels={label}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartBarSimple.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
ChartBarSimple.defaultProps = {
|
|
||||||
backgroundColor: 'rgba(0,0,0,.2)',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChartBarSimple
|
|
||||||
@ -1,153 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
|
||||||
|
|
||||||
const ChartLineSimple = props => {
|
|
||||||
|
|
||||||
const {
|
|
||||||
borderColor,
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const pointHoverColor = (()=>{
|
|
||||||
if (pointHoverBackgroundColor) {
|
|
||||||
return pointHoverBackgroundColor
|
|
||||||
} else if (backgroundColor !== 'transparent') {
|
|
||||||
return backgroundColor
|
|
||||||
}
|
|
||||||
return borderColor
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultDatasets = (()=>{
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
data: dataPoints,
|
|
||||||
borderColor: getColor(borderColor),
|
|
||||||
backgroundColor: getColor(backgroundColor),
|
|
||||||
pointBackgroundColor: getColor(pointHoverColor),
|
|
||||||
pointHoverBackgroundColor: getColor(pointHoverColor),
|
|
||||||
label
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})()
|
|
||||||
|
|
||||||
const pointedOptions = (()=>{
|
|
||||||
return {
|
|
||||||
scales: {
|
|
||||||
xAxes: [
|
|
||||||
{
|
|
||||||
offset: true,
|
|
||||||
gridLines: {
|
|
||||||
color: 'transparent',
|
|
||||||
zeroLineColor: 'transparent'
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
fontSize: 2,
|
|
||||||
fontColor: 'transparent'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxes: [
|
|
||||||
{
|
|
||||||
display: false,
|
|
||||||
ticks: {
|
|
||||||
display: false,
|
|
||||||
min: Math.min.apply(Math, dataPoints) - 5,
|
|
||||||
max: Math.max.apply(Math, dataPoints) + 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 1
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 4,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
const straightOptions = (()=>{
|
|
||||||
return {
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
display: false
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
display: false
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
line: {
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultOptions = (()=>{
|
|
||||||
const options = pointed ? pointedOptions : straightOptions
|
|
||||||
return Object.assign({}, options, {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})()
|
|
||||||
|
|
||||||
const computedDatasets = (() => {
|
|
||||||
return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
|
|
||||||
})()
|
|
||||||
|
|
||||||
const computedOptions = (() => {
|
|
||||||
return deepObjectsMerge(defaultOptions, attributes.options || {})
|
|
||||||
})()
|
|
||||||
|
|
||||||
// render
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CCharts
|
|
||||||
{...attributes}
|
|
||||||
type="line"
|
|
||||||
datasets={computedDatasets}
|
|
||||||
options={computedOptions}
|
|
||||||
labels={label}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
ChartLineSimple.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
borderColor: PropTypes.string,
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
ChartLineSimple.defaultProps = {
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChartLineSimple
|
|
||||||
@ -1,217 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardGroup,
|
|
||||||
CCardHeader
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
|
||||||
|
|
||||||
const Charts = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CCardGroup columns className = "cols-2" >
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Bar Chart
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="http://www.chartjs.org" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="bar"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
label: 'GitHub Commits',
|
|
||||||
backgroundColor: '#f87979',
|
|
||||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
labels="months"
|
|
||||||
options={{
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Doughnut Chart
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="doughnut"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
backgroundColor: [
|
|
||||||
'#41B883',
|
|
||||||
'#E46651',
|
|
||||||
'#00D8FF',
|
|
||||||
'#DD1B16'
|
|
||||||
],
|
|
||||||
data: [40, 20, 80, 10]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
|
||||||
options={{
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Line Chart
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="line"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
label: 'Data One',
|
|
||||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
|
||||||
data: [30, 39, 10, 50, 30, 70, 35]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Data Two',
|
|
||||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
|
||||||
data: [39, 80, 40, 35, 40, 20, 45]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
options={{
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Pie Chart
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="pie"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
backgroundColor: [
|
|
||||||
'#41B883',
|
|
||||||
'#E46651',
|
|
||||||
'#00D8FF',
|
|
||||||
'#DD1B16'
|
|
||||||
],
|
|
||||||
data: [40, 20, 80, 10]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
|
||||||
options={{
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Polar Area Chart
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="polarArea"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
label: 'My First dataset',
|
|
||||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
|
||||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
|
||||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
|
||||||
data: [65, 59, 90, 81, 56, 55, 40]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Second dataset',
|
|
||||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
|
||||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
|
||||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
|
||||||
data: [28, 48, 40, 19, 96, 27, 100]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
options={{
|
|
||||||
aspectRatio: 1.5,
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
labels={[
|
|
||||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
|
||||||
'Coding', 'Cycling', 'Running'
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Radar Chart
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CCharts
|
|
||||||
type="radar"
|
|
||||||
datasets={[
|
|
||||||
{
|
|
||||||
label: '2019',
|
|
||||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
|
||||||
borderColor: 'rgba(179,181,198,1)',
|
|
||||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointHoverBackgroundColor: '#fff',
|
|
||||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
|
||||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
|
||||||
data: [65, 59, 90, 81, 56, 55, 40]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2020',
|
|
||||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
|
||||||
borderColor: 'rgba(255,99,132,1)',
|
|
||||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointHoverBackgroundColor: '#fff',
|
|
||||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
|
||||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
|
||||||
data: [28, 48, 40, 19, 96, 27, 100]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
options={{
|
|
||||||
aspectRatio: 1.5,
|
|
||||||
tooltips: {
|
|
||||||
enabled: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
labels={[
|
|
||||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
|
||||||
'Coding', 'Cycling', 'Running'
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCardGroup>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Charts
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { CCharts } from '@coreui/react-chartjs'
|
|
||||||
import { getColor, hexToRgba } from '@coreui/utils/src'
|
|
||||||
|
|
||||||
const MainChartExample = props => {
|
|
||||||
|
|
||||||
const {
|
|
||||||
borderColor,
|
|
||||||
backgroundColor,
|
|
||||||
pointHoverBackgroundColor,
|
|
||||||
dataPoints,
|
|
||||||
label,
|
|
||||||
pointed,
|
|
||||||
...attributes
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const random = (min, max)=>{
|
|
||||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultDatasets = (()=>{
|
|
||||||
const brandSuccess = getColor('success') || '#4dbd74'
|
|
||||||
const brandInfo = getColor('info') || '#20a8d8'
|
|
||||||
const brandDanger = getColor('danger') || '#f86c6b'
|
|
||||||
let elements = 27
|
|
||||||
const data1 = []
|
|
||||||
const data2 = []
|
|
||||||
const data3 = []
|
|
||||||
for (let i = 0; i <= elements; i++) {
|
|
||||||
data1.push(random(50, 200))
|
|
||||||
data2.push(random(80, 100))
|
|
||||||
data3.push(65)
|
|
||||||
}
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: 'My First dataset',
|
|
||||||
backgroundColor: hexToRgba(brandInfo, 10),
|
|
||||||
borderColor: brandInfo,
|
|
||||||
pointHoverBackgroundColor: brandInfo,
|
|
||||||
borderWidth: 2,
|
|
||||||
data: data1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Second dataset',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: brandSuccess,
|
|
||||||
pointHoverBackgroundColor: brandSuccess,
|
|
||||||
borderWidth: 2,
|
|
||||||
data: data2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'My Third dataset',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderColor: brandDanger,
|
|
||||||
pointHoverBackgroundColor: brandDanger,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderDash: [8, 5],
|
|
||||||
data: data3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})()
|
|
||||||
|
|
||||||
const defaultOptions = (()=>{
|
|
||||||
return {
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
legend: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
gridLines: {
|
|
||||||
drawOnChartArea: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true,
|
|
||||||
maxTicksLimit: 5,
|
|
||||||
stepSize: Math.ceil(250 / 5),
|
|
||||||
max: 250
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: true
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0,
|
|
||||||
hitRadius: 10,
|
|
||||||
hoverRadius: 4,
|
|
||||||
hoverBorderWidth: 3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)()
|
|
||||||
|
|
||||||
// render
|
|
||||||
return (
|
|
||||||
<CCharts
|
|
||||||
{...attributes}
|
|
||||||
type="line"
|
|
||||||
datasets={defaultDatasets}
|
|
||||||
options={defaultOptions}
|
|
||||||
labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
MainChartExample.propTypes = {
|
|
||||||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
||||||
className: PropTypes.string,
|
|
||||||
//
|
|
||||||
borderColor: PropTypes.string,
|
|
||||||
backgroundColor: PropTypes.string,
|
|
||||||
pointHoverBackgroundColor: PropTypes.string,
|
|
||||||
dataPoints: PropTypes.array,
|
|
||||||
label: PropTypes.string,
|
|
||||||
pointed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
MainChartExample.defaultProps = {
|
|
||||||
borderColor: 'rgba(255,255,255,.55)',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
|
|
||||||
label: 'Sales'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MainChartExample
|
|
||||||
@ -1,557 +0,0 @@
|
|||||||
import React, { lazy } from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CButton,
|
|
||||||
CButtonGroup,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardFooter,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CProgress,
|
|
||||||
CRow,
|
|
||||||
CCallout
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
import MainChartExample from '../Charts/MainChartExample.js'
|
|
||||||
|
|
||||||
const WidgetsDropdown = lazy(() => import('../Widgets/WidgetsDropdown.js'))
|
|
||||||
const WidgetsBrand = lazy(() => import('../Widgets/WidgetsBrand.js'))
|
|
||||||
|
|
||||||
const Dashboard = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<WidgetsDropdown />
|
|
||||||
<CCard>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="5">
|
|
||||||
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
|
|
||||||
<div className="small text-muted">November 2017</div>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="7" className="d-none d-md-block">
|
|
||||||
<CButton color="primary" className="float-right">
|
|
||||||
<CIcon name="cil-cloud-download"/>
|
|
||||||
</CButton>
|
|
||||||
<CButtonGroup className="float-right mr-3">
|
|
||||||
{
|
|
||||||
['Day', 'Month', 'Year'].map(value => (
|
|
||||||
<CButton
|
|
||||||
color="outline-secondary"
|
|
||||||
key={value}
|
|
||||||
className="mx-0"
|
|
||||||
active={value === 'Month'}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</CButton>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</CButtonGroup>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<MainChartExample style={{height: '300px', marginTop: '40px'}}/>
|
|
||||||
</CCardBody>
|
|
||||||
<CCardFooter>
|
|
||||||
<CRow className="text-center">
|
|
||||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
|
||||||
<div className="text-muted">Visits</div>
|
|
||||||
<strong>29.703 Users (40%)</strong>
|
|
||||||
<CProgress
|
|
||||||
className="progress-xs mt-2"
|
|
||||||
precision={1}
|
|
||||||
color="success"
|
|
||||||
value={40}
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
|
|
||||||
<div className="text-muted">Unique</div>
|
|
||||||
<strong>24.093 Users (20%)</strong>
|
|
||||||
<CProgress
|
|
||||||
className="progress-xs mt-2"
|
|
||||||
precision={1}
|
|
||||||
color="info"
|
|
||||||
value={40}
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
|
||||||
<div className="text-muted">Pageviews</div>
|
|
||||||
<strong>78.706 Views (60%)</strong>
|
|
||||||
<CProgress
|
|
||||||
className="progress-xs mt-2"
|
|
||||||
precision={1}
|
|
||||||
color="warning"
|
|
||||||
value={40}
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol md sm="12" className="mb-sm-2 mb-0">
|
|
||||||
<div className="text-muted">New Users</div>
|
|
||||||
<strong>22.123 Users (80%)</strong>
|
|
||||||
<CProgress
|
|
||||||
className="progress-xs mt-2"
|
|
||||||
precision={1}
|
|
||||||
color="danger"
|
|
||||||
value={40}
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
|
|
||||||
<div className="text-muted">Bounce Rate</div>
|
|
||||||
<strong>Average Rate (40.15%)</strong>
|
|
||||||
<CProgress
|
|
||||||
className="progress-xs mt-2"
|
|
||||||
precision={1}
|
|
||||||
value={40}
|
|
||||||
/>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
|
|
||||||
<WidgetsBrand withCharts/>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Traffic {' & '} Sales
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6" xl="6">
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="info">
|
|
||||||
<small className="text-muted">New Clients</small>
|
|
||||||
<br />
|
|
||||||
<strong className="h4">9,123</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="danger">
|
|
||||||
<small className="text-muted">Recurring Clients</small>
|
|
||||||
<br />
|
|
||||||
<strong className="h4">22,643</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<hr className="mt-0" />
|
|
||||||
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Monday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="34" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="78" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Tuesday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="56" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="94" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Wednesday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="12" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="67" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Thursday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="43" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="91" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Friday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="22" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="73" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Saturday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="53" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="82" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<div className="progress-group-prepend">
|
|
||||||
<span className="progress-group-text">
|
|
||||||
Sunday
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="info" value="9" />
|
|
||||||
<CProgress className="progress-xs" color="danger" value="69" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="legend text-center">
|
|
||||||
<small>
|
|
||||||
<sup className="px-1"><CBadge shape="pill" color="info"> </CBadge></sup>
|
|
||||||
New clients
|
|
||||||
|
|
||||||
<sup className="px-1"><CBadge shape="pill" color="danger"> </CBadge></sup>
|
|
||||||
Recurring clients
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" md="6" xl="6">
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="warning">
|
|
||||||
<small className="text-muted">Pageviews</small>
|
|
||||||
<br />
|
|
||||||
<strong className="h4">78,623</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6">
|
|
||||||
<CCallout color="success">
|
|
||||||
<small className="text-muted">Organic</small>
|
|
||||||
<br />
|
|
||||||
<strong className="h4">49,123</strong>
|
|
||||||
</CCallout>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<hr className="mt-0" />
|
|
||||||
|
|
||||||
<div className="progress-group mb-4">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="warning" value="43" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group mb-5">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="warning" value="37" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="success" value="56" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="progress-group">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="success" value="15" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="success" value="11" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div className="progress-group-bars">
|
|
||||||
<CProgress className="progress-xs" color="success" value="8" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="divider text-center">
|
|
||||||
<CButton color="link" size="sm" className="text-muted">
|
|
||||||
<CIcon name="cil-options" />
|
|
||||||
</CButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<table className="table table-hover table-outline mb-0 d-none d-sm-table">
|
|
||||||
<thead className="thead-light">
|
|
||||||
<tr>
|
|
||||||
<th className="text-center"><CIcon name="cil-people" /></th>
|
|
||||||
<th>User</th>
|
|
||||||
<th className="text-center">Country</th>
|
|
||||||
<th>Usage</th>
|
|
||||||
<th className="text-center">Payment Method</th>
|
|
||||||
<th>Activity</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Yiorgos Avraamu</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
<span>New</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-us" title="us" id="us" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>50%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="success" value="50" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cib-mastercard" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>10 sec ago</strong>
|
|
||||||
</td>
|
|
||||||
</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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Avram Tarasios</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
|
|
||||||
<span>Recurring</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-br" title="br" id="br" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>10%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="info" value="10" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cib-visa" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>5 minutes ago</strong>
|
|
||||||
</td>
|
|
||||||
</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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Quintin Ed</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
<span>New</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-in" title="in" id="in" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>74%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="warning" value="74" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cib-stripe" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>1 hour ago</strong>
|
|
||||||
</td>
|
|
||||||
</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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Enéas Kwadwo</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
<span>New</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>98%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="danger" value="98" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cib-paypal" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>Last month</strong>
|
|
||||||
</td>
|
|
||||||
</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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Agapetus Tadeáš</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
<span>New</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-es" title="es" id="es" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>22%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="info" value="22" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cil-wallet"/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>Last week</strong>
|
|
||||||
</td>
|
|
||||||
</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>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div>Friderik Dávid</div>
|
|
||||||
<div className="small text-muted">
|
|
||||||
<span>New</span> | Registered: Jan 1, 2015
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="clearfix">
|
|
||||||
<div className="float-left">
|
|
||||||
<strong>43%</strong>
|
|
||||||
</div>
|
|
||||||
<div className="float-right">
|
|
||||||
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<CProgress className="progress-xs" color="success" value="43" />
|
|
||||||
</td>
|
|
||||||
<td className="text-center">
|
|
||||||
<CIcon height={25} name="cib-cc-amex" />
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="small text-muted">Last login</div>
|
|
||||||
<strong>Yesterday</strong>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Dashboard
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
|
||||||
import { CIconRaw } from '@coreui/icons-react'
|
|
||||||
import { brandSet } from '@coreui/icons'
|
|
||||||
|
|
||||||
const toKebabCase = (str) => {
|
|
||||||
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getIconsView = iconset => {
|
|
||||||
return Object.keys(iconset).map(name => (
|
|
||||||
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
|
|
||||||
<CIconRaw name={name} size="2xl"/>
|
|
||||||
<div>{toKebabCase(name)}</div>
|
|
||||||
</CCol>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
const CoreUIIcons = () => {
|
|
||||||
return (
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Brand Icons / as CIconRaw{' '}
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">Github</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow className="text-center">
|
|
||||||
{getIconsView(brandSet)}
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CoreUIIcons
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
|
|
||||||
import { freeSet } from '@coreui/icons'
|
|
||||||
import { getIconsView } from '../Brands/Brands.js'
|
|
||||||
|
|
||||||
const CoreUIIcons = () => {
|
|
||||||
return (
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Free Icons / as CIcon{' '}
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">Github</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow className="text-center">
|
|
||||||
{getIconsView(freeSet)}
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CoreUIIcons
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
|
|
||||||
import { getIconsView } from '../Brands/Brands.js'
|
|
||||||
import { flagSet } from '@coreui/icons'
|
|
||||||
|
|
||||||
const CoreUIIcons = () => {
|
|
||||||
return (
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Flag Icons / as CIconRaw{' '}
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">Github</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow className="text-center">
|
|
||||||
{getIconsView(flagSet)}
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CoreUIIcons
|
|
||||||
@ -1,180 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CAlert,
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CLink,
|
|
||||||
CProgress,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Alerts = () => {
|
|
||||||
const [visible, setVisible] = React.useState(10)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Alerts
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/alerts/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CAlert color="primary">
|
|
||||||
This is a primary alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="secondary">
|
|
||||||
This is a secondary alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="success">
|
|
||||||
This is a success alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="danger">
|
|
||||||
This is a danger alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="warning">
|
|
||||||
This is a warning alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="info">
|
|
||||||
This is a info alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="light">
|
|
||||||
This is a light alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="dark">
|
|
||||||
This is a dark alert — check it out!
|
|
||||||
</CAlert>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Alerts
|
|
||||||
<small> use <code>.alert-link</code> to provide links</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CAlert color="primary">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a primary alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="secondary">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a secondary alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="success">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a success alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="danger">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a danger alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="warning">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a warning alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="info">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a info alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="light">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a light alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
<CAlert color="dark">
|
|
||||||
{/*eslint-disable-next-line*/}
|
|
||||||
This is a dark alert with
|
|
||||||
<CLink className="alert-link">an example link</CLink>.
|
|
||||||
Give it a click if you like.
|
|
||||||
</CAlert>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Alerts
|
|
||||||
<small> additional content</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CAlert color="success">
|
|
||||||
<h4 className="alert-heading">Well done!</h4>
|
|
||||||
<p>
|
|
||||||
Aww yeah, you successfully read this important alert message. This example text is going
|
|
||||||
to run a bit longer so that you can see how spacing within an alert works with this kind
|
|
||||||
of content.
|
|
||||||
</p>
|
|
||||||
<hr />
|
|
||||||
<p className="mb-0">
|
|
||||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
|
||||||
</p>
|
|
||||||
</CAlert>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Alerts
|
|
||||||
<small> dismissing</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CAlert
|
|
||||||
color="info"
|
|
||||||
closeButton
|
|
||||||
>
|
|
||||||
I am an dismissible alert!
|
|
||||||
</CAlert>
|
|
||||||
<CAlert
|
|
||||||
color="warning"
|
|
||||||
show={visible}
|
|
||||||
closeButton
|
|
||||||
onShowChange={setVisible}
|
|
||||||
>
|
|
||||||
I will be closed in {visible} seconds!
|
|
||||||
<CProgress
|
|
||||||
striped
|
|
||||||
color="warning"
|
|
||||||
value={Number(visible) * 10}
|
|
||||||
size="xs"
|
|
||||||
className="mb-3"
|
|
||||||
/>
|
|
||||||
</CAlert>
|
|
||||||
|
|
||||||
<CButton onClick={() => setVisible(10)}>
|
|
||||||
Reset timer
|
|
||||||
</CButton>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Alerts
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardFooter,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Badges = () => {
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Badges
|
|
||||||
<div className="card-header-actions">
|
|
||||||
<a href="https://coreui.github.io/components/badge/" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
|
||||||
<small className="text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
|
|
||||||
<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
|
|
||||||
<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
|
|
||||||
<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
|
|
||||||
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
|
|
||||||
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
|
|
||||||
</CCardBody>
|
|
||||||
<CCardFooter>
|
|
||||||
<CButton color="secondary">
|
|
||||||
Notifications <CBadge color="primary" shape="pill" style={{ position: 'static' }}>9</CBadge>
|
|
||||||
</CButton>
|
|
||||||
</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<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>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Badges
|
|
||||||
<small> pill badges</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CBadge className="mr-1" color="primary" shape="pill">Primary</CBadge>
|
|
||||||
<CBadge className="mr-1" color="secondary" shape="pill">Secondary</CBadge>
|
|
||||||
<CBadge className="mr-1" color="success" shape="pill">Success</CBadge>
|
|
||||||
<CBadge className="mr-1" color="danger" shape="pill">Danger</CBadge>
|
|
||||||
<CBadge className="mr-1" color="warning" shape="pill">Warning</CBadge>
|
|
||||||
<CBadge className="mr-1" color="info" shape="pill">Info</CBadge>
|
|
||||||
<CBadge className="mr-1" color="light" shape="pill">Light</CBadge>
|
|
||||||
<CBadge className="mr-1" color="dark" shape="pill">Dark</CBadge>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Badges
|
|
||||||
<small> links</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CBadge className="mr-1" href="#" color="primary">Primary</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="secondary">Secondary</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="success">Success</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="danger">Danger</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="warning">Warning</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="info">Info</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="light">Light</CBadge>
|
|
||||||
<CBadge className="mr-1" href="#" color="dark" shape="pill">Dark</CBadge>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Badges
|
|
||||||
@ -1,235 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CModal,
|
|
||||||
CModalBody,
|
|
||||||
CModalFooter,
|
|
||||||
CModalHeader,
|
|
||||||
CModalTitle,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Modals = () => {
|
|
||||||
|
|
||||||
const [modal, setModal] = useState(true)
|
|
||||||
const [large, setLarge] = useState(false)
|
|
||||||
const [small, setSmall] = useState(false)
|
|
||||||
const [primary, setPrimary] = useState(false)
|
|
||||||
const [success, setSuccess] = useState(false)
|
|
||||||
const [warning, setWarning] = useState(false)
|
|
||||||
const [danger, setDanger] = useState(false)
|
|
||||||
const [info, setInfo] = useState(false)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Bootstrap Modals
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CButton
|
|
||||||
onClick={() => setModal(!modal)}
|
|
||||||
className="mr-1"
|
|
||||||
>Launch demo modal</CButton>
|
|
||||||
<CModal
|
|
||||||
show={modal}
|
|
||||||
onClose={setModal}
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="primary">Do Something</CButton>{' '}
|
|
||||||
<CButton
|
|
||||||
color="secondary"
|
|
||||||
onClick={() => setModal(false)}
|
|
||||||
>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
|
||||||
Launch large modal
|
|
||||||
</CButton>
|
|
||||||
<CModal
|
|
||||||
show={large}
|
|
||||||
onClose={() => setLarge(!large)}
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="primary" onClick={() => setLarge(!large)}>Do Something</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setLarge(!large)}>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
|
||||||
Launch small modal
|
|
||||||
</CButton>
|
|
||||||
<CModal
|
|
||||||
show={small}
|
|
||||||
onClose={() => setSmall(!small)}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="primary" onClick={() => setSmall(!small)}>Do Something</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setSmall(!small)}>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
|
|
||||||
Primary modal
|
|
||||||
</CButton>
|
|
||||||
<CModal
|
|
||||||
show={primary}
|
|
||||||
onClose={() => setPrimary(!primary)}
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="primary" onClick={() => setPrimary(!primary)}>
|
|
||||||
Do Something
|
|
||||||
</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setPrimary(!primary)}>
|
|
||||||
Cancel
|
|
||||||
</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
|
|
||||||
<CModal
|
|
||||||
show={success}
|
|
||||||
onClose={() => setSuccess(!success)}
|
|
||||||
color="success"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="success" onClick={() => setSuccess(!success)}>Do Something</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setSuccess(!success)}>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
|
|
||||||
<CModal
|
|
||||||
show={warning}
|
|
||||||
onClose={() => setWarning(!warning)}
|
|
||||||
color="warning"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="warning" onClick={() => setWarning(!warning)}>Do Something</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setWarning(!warning)}>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
|
|
||||||
<CModal
|
|
||||||
show={danger}
|
|
||||||
onClose={() => setDanger(!danger)}
|
|
||||||
color="danger"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="danger" onClick={() => setDanger(!danger)}>Do Something</CButton>{' '}
|
|
||||||
<CButton color="secondary" onClick={() => setDanger(!danger)}>Cancel</CButton>
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
|
||||||
<CModal
|
|
||||||
show={info}
|
|
||||||
onClose={() => setInfo(!info)}
|
|
||||||
color="info"
|
|
||||||
>
|
|
||||||
<CModalHeader closeButton>
|
|
||||||
<CModalTitle>Modal title</CModalTitle>
|
|
||||||
</CModalHeader>
|
|
||||||
<CModalBody>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
|
||||||
culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</CModalBody>
|
|
||||||
<CModalFooter>
|
|
||||||
<CButton color="secondary" onClick={() => setInfo(!info)}>Cancel</CButton>
|
|
||||||
<CButton color="info" onClick={() => setInfo(!info)}>Do Something</CButton>{' '}
|
|
||||||
</CModalFooter>
|
|
||||||
</CModal>
|
|
||||||
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Modals
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
import React, { useState } from 'react'
|
|
||||||
import {
|
|
||||||
CCard,
|
|
||||||
CCardHeader,
|
|
||||||
CCardBody,
|
|
||||||
CToast,
|
|
||||||
CToastBody,
|
|
||||||
CToastHeader,
|
|
||||||
CToaster,
|
|
||||||
CForm,
|
|
||||||
CInput,
|
|
||||||
CInputCheckbox,
|
|
||||||
CButton,
|
|
||||||
CContainer,
|
|
||||||
CRow,
|
|
||||||
CCol,
|
|
||||||
CFormGroup,
|
|
||||||
CLabel
|
|
||||||
} from '@coreui/react'
|
|
||||||
|
|
||||||
const Toaster = () => {
|
|
||||||
|
|
||||||
const positions = [
|
|
||||||
'static',
|
|
||||||
'top-left',
|
|
||||||
'top-center',
|
|
||||||
'top-right',
|
|
||||||
'top-full',
|
|
||||||
'bottom-left',
|
|
||||||
'bottom-center',
|
|
||||||
'bottom-right',
|
|
||||||
'bottom-full'
|
|
||||||
]
|
|
||||||
|
|
||||||
const [toasts, setToasts] = useState([
|
|
||||||
{ position: 'static'},
|
|
||||||
{ position: 'static'},
|
|
||||||
{ position: 'top-right', autohide: 3000 }
|
|
||||||
])
|
|
||||||
|
|
||||||
const [position, setPosition] = useState('top-right')
|
|
||||||
const [autohide, setAutohide] = useState(true)
|
|
||||||
const [autohideValue, setAutohideValue] = useState(5000)
|
|
||||||
const [closeButton, setCloseButton] = useState(true)
|
|
||||||
const [fade, setFade] = useState(true)
|
|
||||||
|
|
||||||
const addToast = () => {
|
|
||||||
setToasts([
|
|
||||||
...toasts,
|
|
||||||
{ position, autohide: autohide && autohideValue, closeButton, fade }
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const toasters = (()=>{
|
|
||||||
return toasts.reduce((toasters, toast) => {
|
|
||||||
toasters[toast.position] = toasters[toast.position] || []
|
|
||||||
toasters[toast.position].push(toast)
|
|
||||||
return toasters
|
|
||||||
}, {})
|
|
||||||
})()
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Toasts.
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CContainer>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="12" lg="6">
|
|
||||||
<CForm>
|
|
||||||
<h5>Add toast with following props:</h5>
|
|
||||||
|
|
||||||
<CFormGroup variant="custom-checkbox" className="my-2 mt-4">
|
|
||||||
<CInputCheckbox
|
|
||||||
id="autohide"
|
|
||||||
checked={autohide}
|
|
||||||
onChange={e => { setAutohide(e.target.checked) }}
|
|
||||||
custom
|
|
||||||
/>
|
|
||||||
<CLabel variant="custom-checkbox" htmlFor="autohide">
|
|
||||||
Autohide of the toast
|
|
||||||
</CLabel>
|
|
||||||
</CFormGroup>
|
|
||||||
{
|
|
||||||
autohide &&
|
|
||||||
<CFormGroup className="my-2">
|
|
||||||
<CLabel htmlFor="ccyear">Time to autohide</CLabel>
|
|
||||||
<CInput
|
|
||||||
type="number"
|
|
||||||
value={autohideValue}
|
|
||||||
onChange={e => {
|
|
||||||
setAutohideValue(Number(e.target.value))
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CFormGroup>
|
|
||||||
}
|
|
||||||
|
|
||||||
<CFormGroup className="my-2">
|
|
||||||
<CLabel htmlFor="ccyear">Position</CLabel>
|
|
||||||
<select
|
|
||||||
className="form-control"
|
|
||||||
value={position}
|
|
||||||
onChange={e => {setPosition(e.target.value)}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
positions.map((position, i)=>(
|
|
||||||
<option key={i}>{position}</option>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</CFormGroup>
|
|
||||||
|
|
||||||
<CFormGroup variant="custom-checkbox" className="my-2">
|
|
||||||
<CInputCheckbox
|
|
||||||
id="fade"
|
|
||||||
checked={fade}
|
|
||||||
onChange={e => { setFade(e.target.checked) }}
|
|
||||||
custom
|
|
||||||
/>
|
|
||||||
<CLabel variant="custom-checkbox" htmlFor="fade">fade</CLabel>
|
|
||||||
</CFormGroup>
|
|
||||||
|
|
||||||
<CFormGroup variant="custom-checkbox" className="my-2">
|
|
||||||
<CInputCheckbox
|
|
||||||
id="close"
|
|
||||||
custom
|
|
||||||
checked={closeButton}
|
|
||||||
onChange={e=> { setCloseButton(e.target.checked) }}
|
|
||||||
/>
|
|
||||||
<CLabel variant="custom-checkbox" htmlFor="close">
|
|
||||||
closeButton
|
|
||||||
</CLabel>
|
|
||||||
</CFormGroup>
|
|
||||||
|
|
||||||
<CButton
|
|
||||||
className="mr-1 w-25"
|
|
||||||
color="success"
|
|
||||||
onClick={addToast}
|
|
||||||
>
|
|
||||||
Add toast
|
|
||||||
</CButton>
|
|
||||||
|
|
||||||
</CForm>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="12" lg="6">
|
|
||||||
{Object.keys(toasters).map((toasterKey) => (
|
|
||||||
<CToaster
|
|
||||||
position={toasterKey}
|
|
||||||
key={'toaster' + toasterKey}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
toasters[toasterKey].map((toast, key)=>{
|
|
||||||
return(
|
|
||||||
<CToast
|
|
||||||
key={'toast' + key}
|
|
||||||
show={true}
|
|
||||||
autohide={toast.autohide}
|
|
||||||
fade={toast.fade}
|
|
||||||
>
|
|
||||||
<CToastHeader closeButton={toast.closeButton}>
|
|
||||||
Toast title
|
|
||||||
</CToastHeader>
|
|
||||||
<CToastBody>
|
|
||||||
{`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
|
|
||||||
</CToastBody>
|
|
||||||
</CToast>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</CToaster>
|
|
||||||
))}
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CContainer>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Toaster
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardGroup,
|
|
||||||
CCol,
|
|
||||||
CContainer,
|
|
||||||
CForm,
|
|
||||||
CInput,
|
|
||||||
CInputGroup,
|
|
||||||
CInputGroupPrepend,
|
|
||||||
CInputGroupText,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Login = () => {
|
|
||||||
return (
|
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
|
||||||
<CContainer>
|
|
||||||
<CRow className="justify-content-center">
|
|
||||||
<CCol md="8">
|
|
||||||
<CCardGroup>
|
|
||||||
<CCard className="p-4">
|
|
||||||
<CCardBody>
|
|
||||||
<CForm>
|
|
||||||
<h1>Login</h1>
|
|
||||||
<p className="text-muted">Sign In to your account</p>
|
|
||||||
<CInputGroup className="mb-3">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-user" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="text" placeholder="Username" autoComplete="username" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CInputGroup className="mb-4">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-lock-locked" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="password" placeholder="Password" autoComplete="current-password" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="6">
|
|
||||||
<CButton color="primary" className="px-4">Login</CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="6" className="text-right">
|
|
||||||
<CButton color="link" className="px-0">Forgot password?</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CForm>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
|
|
||||||
<CCardBody className="text-center">
|
|
||||||
<div>
|
|
||||||
<h2>Sign up</h2>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
|
||||||
labore et dolore magna aliqua.</p>
|
|
||||||
<Link to="/register">
|
|
||||||
<CButton color="primary" className="mt-3" active tabIndex={-1}>Register Now!</CButton>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCardGroup>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CContainer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Login
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCol,
|
|
||||||
CContainer,
|
|
||||||
CInput,
|
|
||||||
CInputGroup,
|
|
||||||
CInputGroupPrepend,
|
|
||||||
CInputGroupAppend,
|
|
||||||
CInputGroupText,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Page404 = () => {
|
|
||||||
return (
|
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
|
||||||
<CContainer>
|
|
||||||
<CRow className="justify-content-center">
|
|
||||||
<CCol md="6">
|
|
||||||
<div className="clearfix">
|
|
||||||
<h1 className="float-left display-3 mr-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>
|
|
||||||
</div>
|
|
||||||
<CInputGroup className="input-prepend">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-magnifying-glass" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput size="16" type="text" placeholder="What are you looking for?" />
|
|
||||||
<CInputGroupAppend>
|
|
||||||
<CButton color="info">Search</CButton>
|
|
||||||
</CInputGroupAppend>
|
|
||||||
</CInputGroup>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CContainer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Page404
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCol,
|
|
||||||
CContainer,
|
|
||||||
CInput,
|
|
||||||
CInputGroup,
|
|
||||||
CInputGroupAppend,
|
|
||||||
CInputGroupPrepend,
|
|
||||||
CInputGroupText,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Page500 = () => {
|
|
||||||
return (
|
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
|
||||||
<CContainer>
|
|
||||||
<CRow className="justify-content-center">
|
|
||||||
<CCol md="6">
|
|
||||||
<span className="clearfix">
|
|
||||||
<h1 className="float-left display-3 mr-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>
|
|
||||||
</span>
|
|
||||||
<CInputGroup className="input-prepend">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-magnifying-glass" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput size="16" type="text" placeholder="What are you looking for?" />
|
|
||||||
<CInputGroupAppend>
|
|
||||||
<CButton color="info">Search</CButton>
|
|
||||||
</CInputGroupAppend>
|
|
||||||
</CInputGroup>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CContainer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Page500
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CButton,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardFooter,
|
|
||||||
CCol,
|
|
||||||
CContainer,
|
|
||||||
CForm,
|
|
||||||
CInput,
|
|
||||||
CInputGroup,
|
|
||||||
CInputGroupPrepend,
|
|
||||||
CInputGroupText,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Register = () => {
|
|
||||||
return (
|
|
||||||
<div className="c-app c-default-layout flex-row align-items-center">
|
|
||||||
<CContainer>
|
|
||||||
<CRow className="justify-content-center">
|
|
||||||
<CCol md="9" lg="7" xl="6">
|
|
||||||
<CCard className="mx-4">
|
|
||||||
<CCardBody className="p-4">
|
|
||||||
<CForm>
|
|
||||||
<h1>Register</h1>
|
|
||||||
<p className="text-muted">Create your account</p>
|
|
||||||
<CInputGroup className="mb-3">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-user" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="text" placeholder="Username" autoComplete="username" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CInputGroup className="mb-3">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>@</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="text" placeholder="Email" autoComplete="email" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CInputGroup className="mb-3">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-lock-locked" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="password" placeholder="Password" autoComplete="new-password" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CInputGroup className="mb-4">
|
|
||||||
<CInputGroupPrepend>
|
|
||||||
<CInputGroupText>
|
|
||||||
<CIcon name="cil-lock-locked" />
|
|
||||||
</CInputGroupText>
|
|
||||||
</CInputGroupPrepend>
|
|
||||||
<CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
|
|
||||||
</CInputGroup>
|
|
||||||
<CButton color="success" block>Create Account</CButton>
|
|
||||||
</CForm>
|
|
||||||
</CCardBody>
|
|
||||||
<CCardFooter className="p-4">
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6">
|
|
||||||
<CButton className="btn-facebook mb-1" block><span>facebook</span></CButton>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6">
|
|
||||||
<CButton className="btn-twitter mb-1" block><span>twitter</span></CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardFooter>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CContainer>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Register
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
import React, { useEffect, useState, createRef } from 'react'
|
|
||||||
import classNames from 'classnames'
|
|
||||||
import { CRow, CCol } from '@coreui/react'
|
|
||||||
import { rgbToHex } from '@coreui/utils/src'
|
|
||||||
|
|
||||||
const ThemeView = () => {
|
|
||||||
const [color, setColor] = useState('rgb(255, 255, 255)')
|
|
||||||
const ref = createRef()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const el = ref.current.parentNode.firstChild
|
|
||||||
const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
|
|
||||||
setColor(varColor)
|
|
||||||
}, [ref])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<table className="table w-100" ref={ref}>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td className="text-muted">HEX:</td>
|
|
||||||
<td className="font-weight-bold">{ rgbToHex(color) }</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className="text-muted">RGB:</td>
|
|
||||||
<td className="font-weight-bold">{ color }</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const ThemeColor = ({className, children}) => {
|
|
||||||
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
|
|
||||||
return (
|
|
||||||
<CCol xl="2" md="4" sm="6" xs="12" className="mb-4">
|
|
||||||
<div className={classes} style={{paddingTop: '75%'}}></div>
|
|
||||||
{children}
|
|
||||||
<ThemeView/>
|
|
||||||
</CCol>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Colors = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Theme colors
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<CRow>
|
|
||||||
<ThemeColor className="bg-primary">
|
|
||||||
<h6>Brand Primary Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-secondary">
|
|
||||||
<h6>Brand Secondary Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-success">
|
|
||||||
<h6>Brand Success Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-danger">
|
|
||||||
<h6>Brand Danger Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-warning">
|
|
||||||
<h6>Brand Warning Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-info">
|
|
||||||
<h6>Brand Info Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-light">
|
|
||||||
<h6>Brand Light Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-dark">
|
|
||||||
<h6>Brand Dark Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Grays
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<CRow className="mb-3">
|
|
||||||
<ThemeColor className="bg-gray-100">
|
|
||||||
<h6>Gray 100 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-200">
|
|
||||||
<h6>Gray 200 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-300">
|
|
||||||
<h6>Gray 300 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-400">
|
|
||||||
<h6>Gray 400 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-500">
|
|
||||||
<h6>Gray 500 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-600">
|
|
||||||
<h6>Gray 600 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-700">
|
|
||||||
<h6>Gray 700 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-800">
|
|
||||||
<h6>Gray 800 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
<ThemeColor className="bg-gray-900">
|
|
||||||
<h6>Gray 900 Color</h6>
|
|
||||||
</ThemeColor>
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Colors
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
const Typography = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Headings
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
|
||||||
<table className="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Heading</th>
|
|
||||||
<th>Example</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h1></h1></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h1">h1. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h2></h2></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h2">h2. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h3></h3></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h3">h3. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h4></h4></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h4">h4. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h5></h5></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h5">h5. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p><code className="highlighter-rouge"><h6></h6></code></p>
|
|
||||||
</td>
|
|
||||||
<td><span className="h6">h6. Bootstrap heading</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Headings
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
|
|
||||||
want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
|
||||||
<div className="bd-example">
|
|
||||||
<p className="h1">h1. Bootstrap heading</p>
|
|
||||||
<p className="h2">h2. Bootstrap heading</p>
|
|
||||||
<p className="h3">h3. Bootstrap heading</p>
|
|
||||||
<p className="h4">h4. Bootstrap heading</p>
|
|
||||||
<p className="h5">h5. Bootstrap heading</p>
|
|
||||||
<p className="h6">h6. Bootstrap heading</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Display headings
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
|
|
||||||
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
|
||||||
<div className="bd-example bd-example-type">
|
|
||||||
<table className="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><span className="display-1">Display 1</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><span className="display-2">Display 2</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><span className="display-3">Display 3</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><span className="display-4">Display 4</span></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Inline text elements
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
|
|
||||||
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
|
||||||
<div className="bd-example">
|
|
||||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
|
||||||
<p>
|
|
||||||
<del>This line of text is meant to be treated as deleted text.</del>
|
|
||||||
</p>
|
|
||||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
|
||||||
<p>
|
|
||||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
|
||||||
</p>
|
|
||||||
<p><u>This line of text will render as underlined</u></p>
|
|
||||||
<p>
|
|
||||||
<small>This line of text is meant to be treated as fine print.</small>
|
|
||||||
</p>
|
|
||||||
<p><strong>This line rendered as bold text.</strong></p>
|
|
||||||
<p><em>This line rendered as italicized text.</em></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-header">
|
|
||||||
Description list alignment
|
|
||||||
</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
|
|
||||||
optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
|
||||||
<div className="bd-example">
|
|
||||||
<dl className="row">
|
|
||||||
<dt className="col-sm-3">Description lists</dt>
|
|
||||||
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
|
|
||||||
|
|
||||||
<dt className="col-sm-3">Euismod</dt>
|
|
||||||
<dd className="col-sm-9">
|
|
||||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
|
||||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
|
||||||
</dd>
|
|
||||||
|
|
||||||
<dt className="col-sm-3">Malesuada porta</dt>
|
|
||||||
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
||||||
|
|
||||||
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
|
||||||
<dd className="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
|
||||||
|
|
||||||
<dt className="col-sm-3">Nesting</dt>
|
|
||||||
<dd className="col-sm-9">
|
|
||||||
<dl className="row">
|
|
||||||
<dt className="col-sm-4">Nested definition list</dt>
|
|
||||||
<dd className="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
|
||||||
</dl>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Typography
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
import usersData from './UsersData'
|
|
||||||
|
|
||||||
const User = ({match}) => {
|
|
||||||
const user = usersData.find( user => user.id.toString() === match.params.id)
|
|
||||||
const userDetails = user ? Object.entries(user) :
|
|
||||||
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol lg={6}>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
User id: {match.params.id}
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<table className="table table-striped table-hover">
|
|
||||||
<tbody>
|
|
||||||
{
|
|
||||||
userDetails.map(([key, value], index) => {
|
|
||||||
return (
|
|
||||||
<tr key={index.toString()}>
|
|
||||||
<td>{`${key}:`}</td>
|
|
||||||
<td><strong>{value}</strong></td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default User
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { useHistory } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
CBadge,
|
|
||||||
CCard,
|
|
||||||
CCardBody,
|
|
||||||
CCardHeader,
|
|
||||||
CCol,
|
|
||||||
CDataTable,
|
|
||||||
CRow
|
|
||||||
} from '@coreui/react';
|
|
||||||
|
|
||||||
import usersData from './UsersData'
|
|
||||||
|
|
||||||
const getBadge = (status) => {
|
|
||||||
switch (status) {
|
|
||||||
case 'Active': return 'success'
|
|
||||||
case 'Inactive': return 'secondary'
|
|
||||||
case 'Pending': return 'warning'
|
|
||||||
case 'Banned': return 'danger'
|
|
||||||
default: return 'primary'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Users = () => {
|
|
||||||
const history = useHistory()
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol xl={6}>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
Users
|
|
||||||
<small className="text-muted"> example</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDataTable
|
|
||||||
items={usersData}
|
|
||||||
fields={[
|
|
||||||
{ key: 'name', _classes: 'font-weight-bold' },
|
|
||||||
'registered', 'role', 'status']}
|
|
||||||
hover
|
|
||||||
striped
|
|
||||||
pagination={{ doubleArrows: false, align: 'center' }}
|
|
||||||
itemsPerPage={5}
|
|
||||||
clickableRows
|
|
||||||
onRowClick={(item, index) => history.push(`/users/${item.id}`)}
|
|
||||||
scopedSlots = {{
|
|
||||||
'status':
|
|
||||||
(item)=>(
|
|
||||||
<td>
|
|
||||||
<CBadge color={getBadge(item.status)}>
|
|
||||||
{item.status}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Users
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
const usersData = [
|
|
||||||
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
|
|
||||||
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
|
||||||
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default usersData
|
|
||||||
@ -1,370 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CCardGroup,
|
|
||||||
CCardFooter,
|
|
||||||
CCol,
|
|
||||||
CLink,
|
|
||||||
CRow,
|
|
||||||
CWidgetProgress,
|
|
||||||
CWidgetIcon,
|
|
||||||
CWidgetProgressIcon,
|
|
||||||
CWidgetSimple,
|
|
||||||
CProgress,
|
|
||||||
} from '@coreui/react'
|
|
||||||
import WidgetsBrand from './WidgetsBrand'
|
|
||||||
import WidgetsDropdown from './WidgetsDropdown'
|
|
||||||
|
|
||||||
import ChartLineSimple from '../Charts/ChartLineSimple'
|
|
||||||
import ChartBarSimple from '../Charts/ChartBarSimple'
|
|
||||||
|
|
||||||
import { CIcon } from '@coreui/icons-react'
|
|
||||||
|
|
||||||
const Widgets = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<WidgetsDropdown />
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
|
||||||
<CProgress color="danger" animated size="xs" className="my-3" value={75}/>
|
|
||||||
</CWidgetProgress>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetProgress inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
</CRow>
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="primary">
|
|
||||||
<CIcon width={24} name="cil-settings"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="info">
|
|
||||||
<CIcon width={24} name="cil-user"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="warning">
|
|
||||||
<CIcon width={24} name="cil-moon"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="danger">
|
|
||||||
<CIcon width={24} name="cil-bell"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-settings"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-laptop"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="warning" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-moon"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="3">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-bell"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="4">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-settings" className="mx-5"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="4">
|
|
||||||
<CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
|
|
||||||
<CIcon width={24} name="cil-laptop" className="mx-5"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol xs="12" sm="6" lg="4">
|
|
||||||
<CWidgetIcon
|
|
||||||
text="income"
|
|
||||||
header="$1.999,50"
|
|
||||||
color="warning"
|
|
||||||
iconPadding={false}
|
|
||||||
footerSlot={
|
|
||||||
<CCardFooter className="card-footer px-3 py-2">
|
|
||||||
<CLink
|
|
||||||
className="font-weight-bold font-xs btn-block text-muted"
|
|
||||||
href="https://coreui.io/"
|
|
||||||
rel="noopener norefferer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
View more
|
|
||||||
<CIcon name="cil-arrow-right" className="float-right" width="16"/>
|
|
||||||
</CLink>
|
|
||||||
</CCardFooter>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<CIcon width={24} name="cil-moon" className="mx-5"/>
|
|
||||||
</CWidgetIcon>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<WidgetsBrand/>
|
|
||||||
<WidgetsBrand withCharts/>
|
|
||||||
<CCardGroup className="mb-4">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="87.500"
|
|
||||||
text="Visitors"
|
|
||||||
color="gradient-info"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-people" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="385"
|
|
||||||
text="New Clients"
|
|
||||||
color="gradient-success"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-userFollow" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="1238"
|
|
||||||
text="Products sold"
|
|
||||||
color="gradient-warning"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-basket" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="28%"
|
|
||||||
text="Returning Visitors"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-chartPie" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="5:34:11"
|
|
||||||
text="Avg. Time"
|
|
||||||
color="gradient-danger"
|
|
||||||
progressSlot={
|
|
||||||
<CProgress color="danger" size="xs" value={75} animated className="my-3"
|
|
||||||
/>}
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speedometer" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCardGroup>
|
|
||||||
<CCardGroup className="mb-4">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="87.500"
|
|
||||||
text="Visitors"
|
|
||||||
color="gradient-info"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-people" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="385"
|
|
||||||
text="New Clients"
|
|
||||||
color="gradient-success"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-userFollow" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="1238"
|
|
||||||
text="Products sold"
|
|
||||||
color="gradient-warning"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-basket" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="28%"
|
|
||||||
text="Returning Visitors"
|
|
||||||
color="gradient-primary"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-chartPie" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="5:34:11"
|
|
||||||
text="Avg. Time"
|
|
||||||
color="gradient-danger"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speedometer" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCardGroup>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="87.500"
|
|
||||||
text="Visitors"
|
|
||||||
color="gradient-info"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-people" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="385"
|
|
||||||
text="New Clients"
|
|
||||||
color="gradient-success"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-userFollow" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="1238"
|
|
||||||
text="Products sold"
|
|
||||||
color="gradient-warning"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-basket" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="28%"
|
|
||||||
text="Returning Visitors"
|
|
||||||
color="gradient-primary"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-chartPie" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="5:34:11"
|
|
||||||
text="Avg. Time"
|
|
||||||
color="gradient-danger"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speedometer" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="972"
|
|
||||||
text="comments"
|
|
||||||
color="gradient-info"
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speech" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="87.500"
|
|
||||||
text="Visitors"
|
|
||||||
color="gradient-info"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-people" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="385"
|
|
||||||
text="New Clients"
|
|
||||||
color="gradient-success"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-userFollow" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="1238"
|
|
||||||
text="Products sold"
|
|
||||||
color="gradient-warning"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-basket" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="28%"
|
|
||||||
text="Returning Visitors"
|
|
||||||
color="gradient-primary"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-chartPie" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="5:34:11"
|
|
||||||
text="Avg. Time"
|
|
||||||
color="gradient-danger"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speedometer" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="6" md="2">
|
|
||||||
<CWidgetProgressIcon
|
|
||||||
header="972"
|
|
||||||
text="comments"
|
|
||||||
color="gradient-info"
|
|
||||||
inverse
|
|
||||||
>
|
|
||||||
<CIcon name="cil-speech" height="36"/>
|
|
||||||
</CWidgetProgressIcon>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
<CCol sm="4" lg="2">
|
|
||||||
<CWidgetSimple header="title" text="1,123">
|
|
||||||
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
|
|
||||||
</CWidgetSimple>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Widgets
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
|
|
||||||
import { CIcon } from '@coreui/icons-react';
|
|
||||||
import ChartLineSimple from '../Charts/ChartLineSimple';
|
|
||||||
|
|
||||||
const WidgetsBrand = ({withCharts})=>{
|
|
||||||
|
|
||||||
// render
|
|
||||||
|
|
||||||
return withCharts ?
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="facebook"
|
|
||||||
rightHeader="89k"
|
|
||||||
rightFooter="friends"
|
|
||||||
leftHeader="459"
|
|
||||||
leftFooter="feeds"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-facebook"
|
|
||||||
height="52"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
<ChartLineSimple
|
|
||||||
className="position-absolute w-100 h-100"
|
|
||||||
backgroundColor="rgba(255,255,255,.1)"
|
|
||||||
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
|
|
||||||
label="Friends"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="twitter"
|
|
||||||
rightHeader="973k"
|
|
||||||
rightFooter="followers"
|
|
||||||
leftHeader="1.792"
|
|
||||||
leftFooter="tweets"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-twitter"
|
|
||||||
height="52"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
<ChartLineSimple
|
|
||||||
className="position-absolute w-100 h-100"
|
|
||||||
backgroundColor="rgba(255,255,255,.1)"
|
|
||||||
dataPoints={[1, 13, 9, 17, 34, 41, 38]}
|
|
||||||
label="Followers"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="linkedin"
|
|
||||||
rightHeader="500+"
|
|
||||||
rightFooter="contracts"
|
|
||||||
leftHeader="292"
|
|
||||||
leftFooter="feeds"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-linkedin"
|
|
||||||
height="52"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
<ChartLineSimple
|
|
||||||
className="position-absolute w-100 h-100"
|
|
||||||
backgroundColor="rgba(255,255,255,.1)"
|
|
||||||
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
|
|
||||||
label="Contracts"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
rightHeader="12"
|
|
||||||
rightFooter="events"
|
|
||||||
leftHeader="4"
|
|
||||||
leftFooter="meetings"
|
|
||||||
color="gradient-warning"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cil-calendar"
|
|
||||||
height="52"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
<ChartLineSimple
|
|
||||||
className="position-absolute w-100 h-100"
|
|
||||||
backgroundColor="rgba(255,255,255,.1)"
|
|
||||||
dataPoints={[35, 23, 56, 22, 97, 23, 64]}
|
|
||||||
label="Followers"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
</CRow> :
|
|
||||||
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="facebook"
|
|
||||||
rightHeader="89k"
|
|
||||||
rightFooter="friends"
|
|
||||||
leftHeader="459"
|
|
||||||
leftFooter="feeds"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-facebook"
|
|
||||||
height="56"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="twitter"
|
|
||||||
rightHeader="973k"
|
|
||||||
rightFooter="followers"
|
|
||||||
leftHeader="1.792"
|
|
||||||
leftFooter="tweets"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-twitter"
|
|
||||||
height="56"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
color="linkedin"
|
|
||||||
rightHeader="500+"
|
|
||||||
rightFooter="contracts"
|
|
||||||
leftHeader="292"
|
|
||||||
leftFooter="feeds"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cib-linkedin"
|
|
||||||
height="56"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetBrand
|
|
||||||
rightHeader="12"
|
|
||||||
rightFooter="events"
|
|
||||||
leftHeader="4"
|
|
||||||
leftFooter="meetings"
|
|
||||||
color="gradient-warning"
|
|
||||||
>
|
|
||||||
<CIcon
|
|
||||||
name="cil-calendar"
|
|
||||||
height="56"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
</CWidgetBrand>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
}
|
|
||||||
|
|
||||||
WidgetsBrand.propTypes = {
|
|
||||||
withCharts: PropTypes.bool
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WidgetsBrand
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {
|
|
||||||
CWidgetDropdown,
|
|
||||||
CRow,
|
|
||||||
CCol,
|
|
||||||
CDropdown,
|
|
||||||
CDropdownMenu,
|
|
||||||
CDropdownItem,
|
|
||||||
CDropdownToggle
|
|
||||||
} from '@coreui/react'
|
|
||||||
import {
|
|
||||||
CIcon
|
|
||||||
} from '@coreui/icons-react'
|
|
||||||
import ChartLineSimple from '../Charts/ChartLineSimple'
|
|
||||||
import ChartBarSimple from '../Charts/ChartBarSimple'
|
|
||||||
|
|
||||||
const WidgetsDropdown = () => {
|
|
||||||
// render
|
|
||||||
return (
|
|
||||||
<CRow>
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetDropdown
|
|
||||||
color="gradient-primary"
|
|
||||||
header="9.823"
|
|
||||||
text="Members online"
|
|
||||||
footerSlot={
|
|
||||||
<ChartLineSimple
|
|
||||||
pointed
|
|
||||||
className="c-chart-wrapper mt-3 mx-3"
|
|
||||||
style={{height: '70px'}}
|
|
||||||
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
|
|
||||||
pointHoverBackgroundColor="primary"
|
|
||||||
label="Members"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<CDropdown>
|
|
||||||
<CDropdownToggle color="transparent">
|
|
||||||
<CIcon name="cil-settings"/>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CWidgetDropdown>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetDropdown
|
|
||||||
color="gradient-info"
|
|
||||||
header="9.823"
|
|
||||||
text="Members online"
|
|
||||||
footerSlot={
|
|
||||||
<ChartLineSimple
|
|
||||||
pointed
|
|
||||||
className="mt-3 mx-3"
|
|
||||||
style={{height: '70px'}}
|
|
||||||
dataPoints={[1, 18, 9, 17, 34, 22, 11]}
|
|
||||||
pointHoverBackgroundColor="info"
|
|
||||||
options={{ elements: { line: { tension: 0.00001 }}}}
|
|
||||||
label="Members"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<CDropdown>
|
|
||||||
<CDropdownToggle caret={false} color="transparent">
|
|
||||||
<CIcon name="cil-location-pin"/>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CWidgetDropdown>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetDropdown
|
|
||||||
color="gradient-warning"
|
|
||||||
header="9.823"
|
|
||||||
text="Members online"
|
|
||||||
footerSlot={
|
|
||||||
<ChartLineSimple
|
|
||||||
className="mt-3"
|
|
||||||
style={{height: '70px'}}
|
|
||||||
backgroundColor="rgba(255,255,255,.2)"
|
|
||||||
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
|
|
||||||
options={{ elements: { line: { borderWidth: 2.5 }}}}
|
|
||||||
pointHoverBackgroundColor="warning"
|
|
||||||
label="Members"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<CDropdown>
|
|
||||||
<CDropdownToggle color="transparent">
|
|
||||||
<CIcon name="cil-settings"/>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CWidgetDropdown>
|
|
||||||
</CCol>
|
|
||||||
|
|
||||||
<CCol sm="6" lg="3">
|
|
||||||
<CWidgetDropdown
|
|
||||||
color="gradient-danger"
|
|
||||||
header="9.823"
|
|
||||||
text="Members online"
|
|
||||||
footerSlot={
|
|
||||||
<ChartBarSimple
|
|
||||||
className="mt-3 mx-3"
|
|
||||||
style={{height: '70px'}}
|
|
||||||
backgroundColor="rgb(250, 152, 152)"
|
|
||||||
label="Members"
|
|
||||||
labels="months"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<CDropdown>
|
|
||||||
<CDropdownToggle caret className="text-white" color="transparent">
|
|
||||||
<CIcon name="cil-settings"/>
|
|
||||||
</CDropdownToggle>
|
|
||||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
||||||
</CDropdownMenu>
|
|
||||||
</CDropdown>
|
|
||||||
</CWidgetDropdown>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WidgetsDropdown
|
|
||||||
Loading…
Reference in New Issue
Block a user