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

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-05-17 23:31:45 +02:00
parent 35be1eac55
commit c5421714ba
65 changed files with 3637 additions and 2777 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -12,10 +12,10 @@ const loading = (
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
// Pages // Pages
const Login = React.lazy(() => import('./views/pages/login/Login')) const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register')) const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
class App extends Component { class App extends Component {
render() { render() {

2
src/App.test.js
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { shallow } from 'enzyme/build' import { shallow } from 'enzyme/build'
import App from './App' import App from './App'
import ChartLineSimple from './views/charts/ChartLineSimple' import ChartLineSimple from './views/examples/charts/ChartLineSimple'
import Dashboard from './views/dashboard/Dashboard.js' import Dashboard from './views/dashboard/Dashboard.js'
it('mounts App without crashing', () => { it('mounts App without crashing', () => {

20
src/containers/_nav.js
View File

@ -73,12 +73,6 @@ const _nav = [
anchor: 'Collapse', anchor: 'Collapse',
to: '/base/collapses', to: '/base/collapses',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Jumbotron',
to: '/base/jumbotrons',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
@ -88,15 +82,9 @@ const _nav = [
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
anchor: 'Navs', anchor: 'Navs & Tabs',
to: '/base/navs', to: '/base/navs',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Navbars',
to: '/base/navbars',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
@ -121,12 +109,6 @@ const _nav = [
anchor: 'Tables', anchor: 'Tables',
to: '/base/tables', to: '/base/tables',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Tabs',
to: '/base/tabs',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,

2
src/layout/DefaultLayout.js
View File

@ -7,7 +7,7 @@ const DefaultLayout = () => {
<AppSidebar /> <AppSidebar />
<div className="wrapper d-flex flex-column min-vh-100 bg-light"> <div className="wrapper d-flex flex-column min-vh-100 bg-light">
<AppHeader /> <AppHeader />
<div className="body"> <div className="body flex-grow-1 px-3">
<TheContent /> <TheContent />
</div> </div>
<AppFooter /> <AppFooter />

87
src/routes.js
View File

@ -1,49 +1,51 @@
import React from 'react' import React from 'react'
const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts')) // examples
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) const Colors = React.lazy(() => import('./views/examples/theme/colors/Colors'))
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')) const Typography = React.lazy(() => import('./views/examples/theme/typography/Typography'))
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')) const Accordion = React.lazy(() => import('./views/examples/base/accordion/Accordion'))
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')) const Breadcrumbs = React.lazy(() => import('./views/examples/base/breadcrumbs/Breadcrumbs'))
const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')) const Cards = React.lazy(() => import('./views/examples/base/cards/Cards'))
const Navs = React.lazy(() => import('./views/base/navs/Navs')) const Carousels = React.lazy(() => import('./views/examples/base/carousels/Carousels'))
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations')) const Collapses = React.lazy(() => import('./views/examples/base/collapses/Collapses'))
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')) const ListGroups = React.lazy(() => import('./views/examples/base/list-groups/ListGroups'))
const Progress = React.lazy(() => import('./views/base/progress/Progress')) const Navs = React.lazy(() => import('./views/examples/base/navs/Navs'))
const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations'))
const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers'))
const Progress = React.lazy(() => import('./views/examples/base/progress/Progress'))
const Tables = React.lazy(() => import('./views/examples/base/tables/Tables'))
const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips'))
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) const Buttons = React.lazy(() => import('./views/examples/buttons/buttons/Buttons'))
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-groups/ButtonGroups'))
const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')) const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns'))
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')) const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios'))
const Charts = React.lazy(() => import('./views/charts/Charts')) const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl'))
const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup'))
const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout'))
const Range = React.lazy(() => import('./views/examples/forms/range/Range'))
const Select = React.lazy(() => import('./views/examples/forms/select/Select'))
const Validation = React.lazy(() => import('./views/examples/forms/validation/Validation'))
const CoreUIIcons = React.lazy(() => import('./views/examples/icons/coreui-icons/CoreUIIcons'))
const Flags = React.lazy(() => import('./views/examples/icons/flags/Flags'))
const Brands = React.lazy(() => import('./views/examples/icons/brands/Brands'))
const Alerts = React.lazy(() => import('./views/examples/notifications/alerts/Alerts'))
const Badges = React.lazy(() => import('./views/examples/notifications/badges/Badges'))
const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals'))
const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts'))
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
const Charts = React.lazy(() => import('./views/examples/charts/Charts'))
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')) const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl'))
const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup'))
const Layout = React.lazy(() => import('./views/forms/layout/Layout'))
const Range = React.lazy(() => import('./views/forms/range/Range'))
const Select = React.lazy(() => import('./views/forms/select/Select'))
const Validation = React.lazy(() => import('./views/forms/validation/Validation'))
const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Register'))
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
@ -57,19 +59,16 @@ const routes = [
{ path: '/base/cards', name: 'Cards', component: Cards }, { path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/carousels', name: 'Carousel', component: Carousels }, { path: '/base/carousels', name: 'Carousel', component: Carousels },
{ path: '/base/collapses', name: 'Collapse', component: Collapses }, { path: '/base/collapses', name: 'Collapse', component: Collapses },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups }, { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs }, { path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress', name: 'Progress', component: Progress }, { path: '/base/progress', name: 'Progress', component: Progress },
{ path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true }, { path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons }, { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, { path: '/buttons/dropdowns', name: 'Dropdowns', component: Dropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ path: '/charts', name: 'Charts', component: Charts }, { path: '/charts', name: 'Charts', component: Charts },
{ path: '/forms', name: 'Forms', component: FormControl, exact: true }, { path: '/forms', name: 'Forms', component: FormControl, exact: true },

1
src/scss/style.scss
View File

@ -6,6 +6,7 @@ $enable-rtl: true;
// Import styles // Import styles
@import "@coreui/coreui/scss/coreui"; @import "@coreui/coreui/scss/coreui";
@import "@coreui/chartjs/dist/css/coreui-chartjs.css";
@import "layout"; @import "layout";
@import "example"; @import "example";

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

@ -1,333 +0,0 @@
import React from 'react'
import {
CBadge,
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CTable,
CTableBody,
CTableDataCell,
CTableHead,
CTableHeaderCell,
CTableRow,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Tables = () => {
return (
<>
<CRow>
<CCol xs="12" lg="6">
<CCard className="mb-4">
<CCardHeader>
Simple Table
<DocsLink name="CModal" />
</CCardHeader>
<CCardBody>
<CTable responsive="sm">
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Samppa Nori</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Estavan Lykos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Chetan Mohamed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Derick Maximinus</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Friderik Dávid</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard className="mb-4">
<CCardHeader>Striped Table</CCardHeader>
<CCardBody>
<CTable responsive="sm" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Yiorgos Avraamu</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Avram Tarasios</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Quintin Ed</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Enéas Kwadwo</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Agapetus Tadeáš</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" lg="6">
<CCard className="mb-4">
<CCardHeader>Condensed Table</CCardHeader>
<CCardBody>
<CTable responsive="sm" small>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Carwyn Fachtna</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Nehemiah Tatius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Ebbe Gemariah</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Eustorgios Amulius</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Leopold Gáspár</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard className="mb-4">
<CCardHeader>Bordered Table</CCardHeader>
<CCardBody>
<CTable responsive="sm" bordered>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Pompeius René</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Paĉjo Jadon</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Micheal Mercurius</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Ganesha Dubhghall</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Hiroto Šimun</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs>
<CCard className="mb-4">
<CCardHeader>Combined All Table</CCardHeader>
<CCardBody>
<CTable responsive="sm" bordered striped small>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Username</CTableHeaderCell>
<CTableHeaderCell>Date registered</CTableHeaderCell>
<CTableHeaderCell>Role</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>Vishnu Serghei</CTableDataCell>
<CTableDataCell>2012/01/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Zbyněk Phoibos</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="danger">Banned</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Einar Randall</CTableDataCell>
<CTableDataCell>2012/02/01</CTableDataCell>
<CTableDataCell>Admin</CTableDataCell>
<CTableDataCell>
<CBadge color="secondary">Inactive</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Félix Troels</CTableDataCell>
<CTableDataCell>2012/03/01</CTableDataCell>
<CTableDataCell>Member</CTableDataCell>
<CTableDataCell>
<CBadge color="warning">Pending</CBadge>
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>Aulus Agmundr</CTableDataCell>
<CTableDataCell>2012/01/21</CTableDataCell>
<CTableDataCell>Staff</CTableDataCell>
<CTableDataCell>
<CBadge color="success">Active</CBadge>
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
)
}
export default Tables

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

@ -1,86 +0,0 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
import { DocsLink } from 'src/reusable'
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 className="mb-4">
<CCardHeader>
Tooltips
<DocsLink name="CTooltip" />
</CCardHeader>
<CCardBody>
<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 className="mb-4">
<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

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

@ -1,381 +0,0 @@
import React from 'react'
import {
CButton,
CForm,
CCard,
CCardBody,
CCardHeader,
CCol,
CDropdown,
CDropdownDivider,
CDropdownHeader,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CRow,
CFormLabel,
CFormControl,
CFormCheck,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ButtonDropdowns = () => {
return (
<CRow>
<CCol xs="12">
<CCard className="mb-4">
<CCardHeader>
Dropdowns
<DocsLink name="CDropdown" />
</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 className="mb-4">
<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">
<div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormControl
id="exampleDropdownFormEmail1"
type="email"
placeholder="email@example.com"
autoComplete="email"
/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormControl
id="exampleDropdownFormPassword1"
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</div>
<div className="mb-3">
<CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me" />
</div>
<div className="mb-3">
<CButton color="primary" type="submit">
Sign in
</CButton>
</div>
</CForm>
<CDropdownDivider />
<CDropdownItem href="#/pages/register">Register</CDropdownItem>
<CDropdownItem>Forgot password?</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default ButtonDropdowns

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

@ -1,190 +0,0 @@
import React from 'react'
import {
CButton,
CCallout,
CDropdown,
CButtonGroup,
CButtonToolbar,
CCard,
CCardBody,
CCardHeader,
CCol,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CFormControl,
CInputGroup,
CInputGroupText,
CRow,
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ButtonGroups = () => {
return (
<CRow>
<CCol md="6">
<CCard className="mb-4">
<CCardHeader>
Callout
<DocsLink name="CCallout" />
</CCardHeader>
<CCardBody>
<CCallout color="primary">Callout</CCallout>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Button Group
<DocsLink name="-Button/#CButtonGroup" />
</CCardHeader>
<CCardBody>
<CButtonGroup>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>
Button Group
<small> toolbar</small>
</CCardHeader>
<CCardBody>
<CButtonToolbar className="mb-3">
<CButtonGroup className="me-2">
<CButton color="secondary">1</CButton>
<CButton color="secondary">2</CButton>
<CButton color="secondary">3</CButton>
<CButton color="secondary">4</CButton>
</CButtonGroup>
<CButtonGroup className="me-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="me-2">
<CButton color="secondary">1</CButton>
<CButton color="secondary">2</CButton>
<CButton color="secondary">3</CButton>
<CButton color="secondary">4</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl 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>
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Input group example" />
</CInputGroup>
</CButtonToolbar>
</CCardBody>
</CCard>
<CCard className="mb-4">
<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 className="mb-4">
<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 className="mb-4">
<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 className="mb-4">
<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

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

@ -1,960 +0,0 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const Buttons = () => {
return (
<>
<CCard className="mb-4">
<CCardHeader>
Standard Buttons
<DocsLink name="-Button" />
</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 href="#" color="primary">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton 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 color="primary" aria-pressed="true">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="secondary" aria-pressed="true">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="success" aria-pressed="true">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="warning" aria-pressed="true">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="danger" aria-pressed="true">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="info" aria-pressed="true">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="light" aria-pressed="true">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active color="dark" aria-pressed="true">
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active 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 color="primary" disabled>
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="secondary" disabled>
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="success" disabled>
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="warning" disabled>
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="danger" disabled>
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="info" disabled>
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="light" disabled>
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="dark" disabled>
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton color="link" disabled>
Link
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard className="mb-4">
<CCardHeader>layout="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 layout="outline" color="primary">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="secondary">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="success">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="warning">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="danger">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="info">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="light">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="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 layout="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 layout="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 layout="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 layout="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 layout="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 layout="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 layout="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 layout="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 layout="outline" color="primary" disabled>
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="secondary" disabled>
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="success" disabled>
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="warning" disabled>
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="danger" disabled>
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="info" disabled>
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="outline" color="light" disabled>
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="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 className="mb-4">
<CCardHeader>layout="ghost" Buttons</CCardHeader>
<CCardBody>
<p>
Use <code>.btn-ghost-*</code> class for layout="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 layout="ghost" color="primary">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="secondary">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="success">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="warning">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="danger">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="info">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="light">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="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 active layout="ghost" color="primary" aria-pressed="true">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="secondary" aria-pressed="true">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="success" aria-pressed="true">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="warning" aria-pressed="true">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="danger" aria-pressed="true">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="info" aria-pressed="true">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="ghost" color="light" aria-pressed="true">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active layout="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 layout="ghost" color="primary" disabled>
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="secondary" disabled>
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="success" disabled>
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="warning" disabled>
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="danger" disabled>
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="info" disabled>
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="ghost" color="light" disabled>
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton layout="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 className="mb-4">
<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 shape="square" color="primary">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="secondary">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="success">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="warning">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="danger">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="info">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="light">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="dark">
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton 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 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 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 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 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 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 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 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 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 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 shape="square" color="primary" disabled>
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="secondary" disabled>
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="success" disabled>
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="warning" disabled>
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="danger" disabled>
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="info" disabled>
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="light" disabled>
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="dark" disabled>
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="square" color="link" disabled>
Link
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard className="mb-4">
<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 shape="rounded-pill" color="primary">
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="secondary">
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="success">
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="warning">
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="danger">
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="info">
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="light">
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="dark">
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-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 shape="rounded-pill" color="primary" disabled>
Primary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="secondary" disabled>
Secondary
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="success" disabled>
Success
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="warning" disabled>
Warning
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="danger" disabled>
Danger
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="info" disabled>
Info
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="light" disabled>
Light
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="dark" disabled>
Dark
</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton shape="rounded-pill" color="link" disabled>
Link
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard className="mb-4">
<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" layout="outline" size="sm">
Outline Button
</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton size="sm" layout="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="rounded-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 layout="outline" color="secondary">
Outline Button
</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton layout="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="rounded-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 layout="outline" color="secondary" size="lg">
Outline Button
</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton layout="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="rounded-pill" color="danger" size="lg">
Pill Button
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard className="mb-4">
<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" layout="outline">
<CIcon name="cil-lightbulb" />
Outline Button
</CButton>
</CCol>
<CCol col="2" className="text-center mt-3">
<CButton layout="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="rounded-pill" color="danger">
<CIcon name="cil-lightbulb" />
Pill Button
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CRow>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>Level Buttons</CCardHeader>
<CCardBody>
<p>
Add prop <code>block</code>
</p>
<CButton color="secondary" size="lg">
Block level button
</CButton>
<CButton color="primary" size="lg">
Block level button
</CButton>
<CButton color="success" size="lg">
Block level button
</CButton>
<CButton color="info" size="lg">
Block level button
</CButton>
<CButton color="warning" size="lg">
Block level button
</CButton>
<CButton color="danger" size="lg">
Block level button
</CButton>
<CButton color="link" size="lg">
Block level button
</CButton>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard className="mb-4">
<CCardHeader>Level Buttons</CCardHeader>
<CCardBody>
<p>
Add prop <code>block</code>
</p>
<CButton layout="outline" color="secondary" size="lg">
Block level button
</CButton>
<CButton layout="outline" color="primary" size="lg">
Block level button
</CButton>
<CButton layout="outline" color="success" size="lg">
Block level button
</CButton>
<CButton layout="outline" color="info" size="lg">
Block level button
</CButton>
<CButton layout="outline" color="warning" size="lg">
Block level button
</CButton>
<CButton layout="outline" color="danger" size="lg">
Block level button
</CButton>
<CButton layout="ghost" color="info" size="lg">
Block level button
</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
</>
)
}
export default Buttons

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

@ -1,206 +0,0 @@
import React from 'react'
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
import {
CChartBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea,
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
const Charts = () => {
return (
<CRow>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>
Bar Chart
<DocsLink href="http://www.chartjs.org" />
</CCardHeader>
<CCardBody>
<CChartBar
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>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody>
<CChartDoughnut
datasets={[
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{
tooltips: {
enabled: true,
},
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Line Chart</CCardHeader>
<CCardBody>
<CChartLine
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>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody>
<CChartPie
datasets={[
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
]}
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
options={{
tooltips: {
enabled: true,
},
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody>
<CChartPolarArea
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>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody>
<CChartRadar
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>
</CCol>
</CRow>
)
}
export default Charts

132
src/views/charts/MainChartExample.js
View File

@ -1,132 +0,0 @@
import React from 'react'
import { CChartLine } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils'
const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b'
const MainChartExample = (attributes) => {
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
const defaultDatasets = (() => {
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 (
<CChartLine
{...attributes}
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',
]}
/>
)
}
export default MainChartExample

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

@ -2,7 +2,6 @@ import React, { lazy } from 'react'
import { import {
CAvatar, CAvatar,
CBadge,
CButton, CButton,
CButtonGroup, CButtonGroup,
CCallout, CCallout,
@ -13,15 +12,21 @@ import {
CCol, CCol,
CProgress, CProgress,
CRow, CRow,
} from '@coreui/react-ts' } from '@coreui/react'
import { CChart } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import MainChartExample from '../charts/MainChartExample.js' import MainChartExample from '../examples/charts/MainChartExample.js'
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js'))
const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js')) const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js'))
const Dashboard = () => { const Dashboard = () => {
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
return ( return (
<> <>
<WidgetsDropdown /> <WidgetsDropdown />
@ -32,7 +37,7 @@ const Dashboard = () => {
<h4 id="traffic" className="card-title mb-0"> <h4 id="traffic" className="card-title mb-0">
Traffic Traffic
</h4> </h4>
<div className="small text-muted">November 2017</div> <div className="small text-muted">January - July 2021</div>
</CCol> </CCol>
<CCol sm="7" className="d-none d-md-block"> <CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-end"> <CButton color="primary" className="float-end">
@ -52,7 +57,91 @@ const Dashboard = () => {
</CButtonGroup> </CButtonGroup>
</CCol> </CCol>
</CRow> </CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} /> <CChart
type="line"
style={{ height: '300px', marginTop: '40px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
fill: true,
},
{
label: 'My Second dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
random(50, 200),
],
},
{
label: 'My Third dataset',
backgroundColor: 'transparent',
borderColor: getStyle('--cui-danger'),
pointHoverBackgroundColor: getStyle('--cui-danger'),
borderWidth: 1,
borderDash: [8, 5],
data: [65, 65, 65, 65, 65, 65, 65],
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
drawOnChartArea: false,
},
},
y: {
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250,
},
},
},
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
}}
/>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CRow className="text-center"> <CRow className="text-center">
@ -96,18 +185,16 @@ const Dashboard = () => {
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout color="info"> <div className="border-start border-start-3 border-start-info py-1 px-3">
<small className="text-muted">New Clients</small> <div className="text-medium-emphasis small">New Clients</div>
<br /> <div className="fs-3 fw-semibold">9,123</div>
<strong className="h4">9,123</strong> </div>
</CCallout>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<CCallout color="danger"> <div className="border-start border-start-3 border-start-danger py-1 px-3 mb-3">
<small className="text-muted">Recurring Clients</small> <div className="text-medium-emphasis small">Recurring Clients</div>
<br /> <div className="fs-3 fw-semibold">22,643</div>
<strong className="h4">22,643</strong> </div>
</CCallout>
</CCol> </CCol>
</CRow> </CRow>
@ -181,18 +268,16 @@ const Dashboard = () => {
<CCol xs="12" md="6" xl="6"> <CCol xs="12" md="6" xl="6">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout color="warning"> <div className="border-start border-start-3 border-start-warning py-1 px-3 mb-3">
<small className="text-muted">Pageviews</small> <div className="text-medium-emphasis small">Pageviews</div>
<br /> <div className="fs-3 fw-semibold">78,623</div>
<strong className="h4">78,623</strong> </div>
</CCallout>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<CCallout color="success"> <div className="border-start border-start-3 border-start-success py-1 px-3 mb-3">
<small className="text-muted">Organic</small> <div className="text-medium-emphasis small">Organic</div>
<br /> <div className="fs-3 fw-semibold">49,123</div>
<strong className="h4">49,123</strong> </div>
</CCallout>
</CCol> </CCol>
</CRow> </CRow>

0
src/views/base/accordion/Accordion.js → src/views/examples/base/accordion/Accordion.js
View File

0
src/views/base/breadcrumbs/Breadcrumbs.js → src/views/examples/base/breadcrumbs/Breadcrumbs.js
View File

0
src/views/base/cards/Cards.js → src/views/examples/base/cards/Cards.js
View File

0
src/views/base/carousels/Carousels.js → src/views/examples/base/carousels/Carousels.js
View File

0
src/views/base/collapses/Collapses.js → src/views/examples/base/collapses/Collapses.js
View File

0
src/views/base/index.js → src/views/examples/base/index.js
View File

0
src/views/base/jumbotrons/Jumbotrons.js → src/views/examples/base/jumbotrons/Jumbotrons.js
View File

0
src/views/base/list-groups/ListGroups.js → src/views/examples/base/list-groups/ListGroups.js
View File

0
src/views/base/navbars/Navbars.js → src/views/examples/base/navbars/Navbars.js
View File

0
src/views/base/navs/Navs.js → src/views/examples/base/navs/Navs.js
View File

0
src/views/base/paginations/Paginations.js → src/views/examples/base/paginations/Paginations.js
View File

2
src/views/base/popovers/Popovers.js → src/views/examples/base/popovers/Popovers.js
View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react' import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
import { Example } from 'src/reusable' import { Example } from 'src/reusable'
const Popovers = () => { const Popovers = () => {

0
src/views/base/progress/Progress.js → src/views/examples/base/progress/Progress.js
View File

988
src/views/examples/base/tables/Tables.js Normal file
View File

@ -0,0 +1,988 @@
import React from 'react'
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CRow,
CTable,
CTableBody,
CTableCaption,
CTableDataCell,
CTableHead,
CTableHeaderCell,
CTableRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const Tables = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Using the most basic table CoreUI, here's how{' '}
<code class="css-0">&lt;CTable&gt;</code>-based tables look in CoreUI.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Variants</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use contextual classes to color tables, table rows or individual cells.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="primary">
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="secondary">
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="success">
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="danger">
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="warning">
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="info">
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="light">
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="dark">
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Striped rows</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use <code class="css-0">striped</code> property to add zebra-striping to any table row
within the <code class="css-0">&lt;CTableBody&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p className="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Hoverable rows</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use <code class="css-0">hover</code> property to enable a hover state on table rows
within a <code class="css-0">&lt;CTableBody&gt;</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow active>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow active>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Bordered tables</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code class="css-0">bordered</code> property for borders on all sides of the table
and cells.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p className="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color" class="css-0">
Border color utilities
</a>{' '}
can be added to change colors:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Tables without borders</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code class="css-0">borderless</code> property for a table without borders.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Small tables</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code class="css-0">small</code> property to make any{' '}
<code class="css-0">&lt;CTable&gt;</code> more compact by cutting all cell{' '}
<code class="css-0">padding</code> in half.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Vertical alignment</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Table cells of <code class="css-0">&lt;CTableHead&gt;</code> are always vertical
aligned to the bottom. Table cells in <code class="css-0">&lt;CTableBody&gt;</code>{' '}
inherit their alignment from <code class="css-0">&lt;CTable&gt;</code> and are aligned
to the the top by default. Use the align property to re-align where needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment">
<CTable align="middle" reponsive>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col" className="w-25">
Heading 1
</CTableHeaderCell>
<CTableHeaderCell scope="col" className="w-25">
Heading 2
</CTableHeaderCell>
<CTableHeaderCell scope="col" className="w-25">
Heading 3
</CTableHeaderCell>
<CTableHeaderCell scope="col" className="w-25">
Heading 4
</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonsCTableRowate how the vertical alignment works in the
preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRow align="bottom">
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</CTableDataCell>
<CTableDataCell>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonsCTableRowate how the vertical alignment works in the
preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from the table
</CTableDataCell>
<CTableDataCell align="top">This cell is aligned to the top.</CTableDataCell>
<CTableDataCell>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonsCTableRowate how the vertical alignment works in the
preceding cells.
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Nesting</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Border styles, active styles, and table variants are not inherited by nested tables.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell colspan="4">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
<CTableHeaderCell scope="col">Header</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">A</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">B</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">C</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CTableHeaderCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Table head</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Similar to tables and dark tables, use the modifier prop{' '}
<code class="css-0">color="light"</code> or <code class="css-0">color="dark"</code> to
make <code class="css-0">&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
<CTableHead>
<CTableRow>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
</CTableRow>
</CTableHead>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Table</strong> <small>Captions</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
A <code class="css-0">&lt;CTableCaption&gt;</code> functions like a heading for a
table. It helps users with screen readers to find a table and understand what it's
about and decide if they want to read it.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p className="text-medium-emphasis small">
You can also put the <code class="css-0">&lt;CTableCaption&gt;</code> on the top of
the table with <code class="css-0">caption="top"</code>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Tables

0
src/views/base/tabs/Tabs.js → src/views/examples/base/tabs/Tabs.js
View File

94
src/views/examples/base/tooltips/Tooltips.js Normal file
View File

@ -0,0 +1,94 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
import { Example } from 'src/reusable'
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 (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Tooltip</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/tooltip">
<p className="text-medium-emphasis">
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>
</Example>
<p class="css-0">
Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left. Directions are mirrored when using CoreUI in RTL.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/tooltip">
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
>
<CButton color="secondary">Tooltip on top</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="end"
>
<CButton color="secondary">Tooltip on right</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="bottom"
>
<CButton color="secondary">Tooltip on bottom</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="start"
>
<CButton color="secondary">Tooltip on left</CButton>
</CTooltip>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Tooltips

451
src/views/examples/buttons/button-groups/ButtonGroups.js Normal file
View File

@ -0,0 +1,451 @@
import React from 'react'
import {
CButton,
CDropdown,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CButtonGroup,
CButtonToolbar,
CCard,
CCardBody,
CCardHeader,
CCol,
CFormCheck,
CFormControl,
CInputGroup,
CInputGroupText,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const ButtonGroups = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Basic example</span>
</CCardHeader>
<CCardBody>
<p>
Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
<code>&lt;CButtonGroup&gt;</code>.{' '}
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
<CButton color="primary">Right</CButton>
</CButtonGroup>
</Example>
<p>
These classes can also be added to groups of links, as an alternative to the{' '}
<code>&lt;CNav&gt;</code> components.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group">
<CButtonGroup>
<CButton href="#" color="primary" active>
Active link
</CButton>
<CButton href="#" color="primary">
Link
</CButton>
<CButton href="#" color="primary">
Link
</CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Mixed styles</span>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#mixed-styles">
<CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton>
<CButton color="success">Right</CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline">
Left
</CButton>
<CButton color="primary" variant="outline">
Middle
</CButton>
<CButton color="primary" variant="outline">
Right
</CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Checkbox and radio button groups</span>
</CCardHeader>
<CCardBody>
<p>
Combine button-like checkbox and radio toggle buttons into a seamless looking button
group.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
button
buttonVariant="outline"
id="btncheck1"
autocomplete="off"
label="Checkbox 1"
/>
<CFormCheck
button
buttonVariant="outline"
id="btncheck2"
autocomplete="off"
label="Checkbox 2"
/>
<CFormCheck
button
buttonVariant="outline"
id="btncheck3"
autocomplete="off"
label="Checkbox 3"
/>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck
type="radio"
button
buttonVariant="outline"
name="btnradio"
id="btnradio1"
autocomplete="off"
label="Radio 1"
/>
<CFormCheck
type="radio"
button
buttonVariant="outline"
name="btnradio"
id="btnradio2"
autocomplete="off"
label="Radio 2"
/>
<CFormCheck
type="radio"
button
buttonVariant="outline"
name="btnradio"
id="btnradio3"
autocomplete="off"
label="Radio 3"
/>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Button toolbar</span>
</CCardHeader>
<CCardBody>
<p>
Join sets of button groups into button toolbars for more complicated components. Use
utility classes as needed to space out groups, buttons, and more.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
<CButton color="primary">3</CButton>
<CButton color="primary">4</CButton>
</CButtonGroup>
<CButtonGroup className="me-2" role="group" aria-label="Second group">
<CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton>
</CButtonGroup>
<CButtonGroup className="me-2" role="group" aria-label="Third group">
<CButton color="info">8</CButton>
</CButtonGroup>
</CButtonToolbar>
</Example>
<p>
Feel free to combine input groups with button groups in your toolbars. Similar to the
example above, you’ll likely need some utilities through to space items correctly.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#button-toolbar">
<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
<CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline">
1
</CButton>
<CButton color="secondary" variant="outline">
2
</CButton>
<CButton color="secondary" variant="outline">
3
</CButton>
<CButton color="secondary" variant="outline">
4
</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</CInputGroup>
</CButtonToolbar>
<CButtonToolbar
className="justify-content-between"
role="group"
aria-label="Toolbar with button groups"
>
<CButtonGroup className="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline">
1
</CButton>
<CButton color="secondary" variant="outline">
2
</CButton>
<CButton color="secondary" variant="outline">
3
</CButton>
<CButton color="secondary" variant="outline">
4
</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormControl
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</CInputGroup>
</CButtonToolbar>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Sizing</span>
</CCardHeader>
<CCardBody>
<p>
Alternatively, of implementing button sizing classes to each button in a group, set{' '}
<code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>'s, including each
one when nesting multiple groups.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#sizing">
<CButtonGroup size="lg" role="group" aria-label="Large button group">
<CButton color="dark" variant="outline">
Left
</CButton>
<CButton color="dark" variant="outline">
Middle
</CButton>
<CButton color="dark" variant="outline">
Right
</CButton>
</CButtonGroup>
<br />
<CButtonGroup role="group" aria-label="Default button group">
<CButton color="dark" variant="outline">
Left
</CButton>
<CButton color="dark" variant="outline">
Middle
</CButton>
<CButton color="dark" variant="outline">
Right
</CButton>
</CButtonGroup>
<br />
<CButtonGroup size="sm" role="group" aria-label="Small button group">
<CButton color="dark" variant="outline">
Left
</CButton>
<CButton color="dark" variant="outline">
Middle
</CButton>
<CButton color="dark" variant="outline">
Right
</CButton>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Nesting</span>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Put a <code>&lt;CButtonGroup&gt;</code> inside another{' '}
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
of buttons.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group#nesting">
<CButtonGroup role="group" aria-label="Button group with nested dropdown">
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button Group</strong> <span>Vertical variation</span>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
<strong>Split button dropdowns are not supported here.</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/list-group/#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck
type="radio"
button
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio"
id="vbtnradio1"
autocomplete="off"
label="Radio 1"
checked
/>
<CFormCheck
type="radio"
button
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio"
id="vbtnradio2"
autocomplete="off"
label="Radio 2"
/>
<CFormCheck
type="radio"
button
buttonColor="danger"
buttonVariant="outline"
name="vbtnradio"
id="vbtnradio3"
autocomplete="off"
label="Radio 3"
/>
</CButtonGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default ButtonGroups

399
src/views/examples/buttons/buttons/Buttons.js Normal file
View File

@ -0,0 +1,399 @@
import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { Example } from 'src/reusable'
const Buttons = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
CoreUI includes a bunch of predefined buttons components, each serving its own
semantic purpose. Buttons show what action will happen when the user clicks or touches
it. CoreUI buttons are used to initialize operations, both in the background or
foreground of an experience.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
{state.charAt(0).toUpperCase() + state.slice(1)}
</CCol>
<CCol xs>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton
color={color}
key={index}
active={state === 'active'}
disabled={state === 'disabled'}
>
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
<CButton color="link">Link</CButton>
</CCol>
</CRow>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>with icons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
{state.charAt(0).toUpperCase() + state.slice(1)}
</CCol>
<CCol xs>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton
color={color}
key={index}
active={state === 'active'}
disabled={state === 'disabled'}
>
<CIcon name="cil-bell" className="me-2" />
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
<CButton color="link">
<CIcon name="cil-bell" className="me-2" />
Link
</CButton>
</CCol>
</CRow>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Button components</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
The <code>&lt;CButton&gt;</code> component are designed for{' '}
<code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code>{' '}
elements (though some browsers may apply a slightly different rendering).
</p>
<p className="text-medium-emphasis small">
If you're using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
elements that are used to trigger functionality ex. collapsing content, these links
should be given a <code>role="button"</code> to adequately communicate their meaning
to assistive technologies such as screen readers.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
<CButton type="submit" color="primary">
Button
</CButton>
<CButton component="input" type="button" color="primary" value="Input" />
<CButton component="input" type="submit" color="primary" value="Submit" />
<CButton component="input" type="reset" color="primary" value="Reset" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>outline</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you need a button, but without the strong background colors. Set{' '}
<code>variant="outline"</code> prop to remove all background colors.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#outline-buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
{state.charAt(0).toUpperCase() + state.slice(1)}
</CCol>
<CCol xs>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton
color={color}
variant="outline"
key={index}
active={state === 'active'}
disabled={state === 'disabled'}
>
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</CCol>
</CRow>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>ghost</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you need a ghost variant of button, set <code>variant="ghost"</code> prop to remove
all background colors.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#ghost-buttons">
{['normal', 'active', 'disabled'].map((state, index) => (
<CRow className="align-items-center mb-3" key={index}>
<CCol xs={12} xl={2} className="mb-3 mb-xl-0">
{state.charAt(0).toUpperCase() + state.slice(1)}
</CCol>
<CCol xs>
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton
color={color}
variant="ghost"
key={index}
active={state === 'active'}
disabled={state === 'disabled'}
>
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</CCol>
</CRow>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for
additional sizes.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
<CButton color="primary" size="lg">
Large button
</CButton>
<CButton color="secondary" size="lg">
Large button
</CButton>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#sizes">
<CButton color="primary" size="sm">
Small button
</CButton>
<CButton color="secondary" size="sm">
Small button
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#pill-buttons">
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton color={color} shape="rounded-pill" key={index}>
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#square">
{[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
].map((color, index) => (
<CButton color={color} shape="rounded-0" key={index}>
{color.charAt(0).toUpperCase() + color.slice(1)}
</CButton>
))}
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Disabled state</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code>{' '}
component to make buttons look inactive. Disabled button has{' '}
<code>pointer-events: none</code> applied to, disabling hover and active states from
triggering.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
<CButton color="secondary" size="lg" disabled>
Button
</CButton>
</Example>
<p className="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
</p>
<p className="text-medium-emphasis small">
<code>&lt;a&gt;</code>s don't support the <code>disabled</code> attribute, so CoreUI
has to add <code>.disabled</code> className to make buttons look inactive. CoreUI also
has to add to the disabled button component <code>aria-disabled="true"</code>{' '}
attribute to show the state of the component to assistive technologies.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
<CButton component="a" href="#" color="secondary" size="lg" disabled>
Link
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Button</strong> <small>Block buttons</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Create buttons that span the full width of a parent—by using utilities.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p className="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically stacked buttons until
the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
<code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
your browser to see them change.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p className="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column width classes. For
example, for a half-width "block button", use <code>.col-6</code>. Center it
horizontally with <code>.mx-auto</code>, too.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
<p className="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons when horizontal.
Here we've taken our previous responsive example and added some flex utilities and a
margin utility on the button to right align the buttons when they're no longer
stacked.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" className="me-md-2">
Button
</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Buttons

345
src/views/examples/buttons/dropdowns/Dropdowns.js Normal file
View File

@ -0,0 +1,345 @@
import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardHeader,
CCol,
CDropdown,
CDropdownDivider,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const Dropdowns = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Here's how you can put them to work with either{' '}
<code class="css-0">&lt;button&gt;</code> elements:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<CDropdown>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p class="css-0">The best part is you can do this with any button variant, too:</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
<CDropdown variant="btn-group" key={index}>
<CDropdownToggle color={color}>{color}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
),
)}
</>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Split button</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Similarly, create split button dropdowns with virtually the same markup as single
button dropdowns, but with the addition of boolean prop{' '}
<code class="css-0">split</code> for proper spacing around the dropdown caret.
</p>
<p class="css-0">
We use this extra class to reduce the horizontal <code class="css-0">padding</code> on
either side of the caret by 25% and remove the <code class="css-0">margin-left</code>{' '}
that's attached for normal button dropdowns. Those additional changes hold the caret
centered in the split button and implement a more properly sized hit area next to the
main button.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#split-button">
<>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
(color, index) => (
<CDropdown variant="btn-group" key={index}>
<CButton color={color}>{color}</CButton>
<CDropdownToggle color={color} split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
),
)}
</>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Button dropdowns work with buttons of all sizes, including default and split dropdown
buttons.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="lg">
Large split button
</CButton>
<CDropdownToggle color="secondary" size="lg" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="sm">
Small split button
</CButton>
<CDropdownToggle color="secondary" size="sm" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
<code class="css-0">dark</code> property. No changes are required to the dropdown
items.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p class="css-0">And putting it to use in a navbar:</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-coreui-toggle="collapse"
data-coreui-target="#navbarNavDarkDropdown"
aria-controls="navbarNavDarkDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul className="navbar-nav">
<CDropdown dark component="li" variant="nav-item">
<CDropdownToggle>Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</ul>
</div>
</div>
</nav>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropup</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Trigger dropdown menus above elements by adding{' '}
<code class="css-0">direction="dropup"</code> to the{' '}
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group" direction="dropup">
<CButton color="secondary">Small split button</CButton>
<CDropdownToggle color="secondary" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropright</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Trigger dropdown menus at the right of the elements by adding{' '}
<code class="css-0">direction="dropend"</code> to the{' '}
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group" direction="dropend">
<CButton color="secondary">Small split button</CButton>
<CDropdownToggle color="secondary" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropleft</small>
</CCardHeader>
<CCardBody>
<p class="css-0">
Trigger dropdown menus at the left of the elements by adding{' '}
<code class="css-0">direction="dropstart"</code> to the{' '}
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft">
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />
<CButton color="secondary">Small split button</CButton>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Dropdowns

0
src/views/buttons/index.js → src/views/examples/buttons/index.js
View File

59
src/views/charts/ChartBarSimple.js → src/views/examples/charts/ChartBarSimple.js
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { getColor } from '@coreui/utils' import { getColor } from '@coreui/utils'
import { CChartBar } from '@coreui/react-chartjs' import { CChart } from '@coreui/react-chartjs'
const ChartBarSimple = (props) => { const ChartBarSimple = (props) => {
const { const {
@ -13,8 +13,8 @@ const ChartBarSimple = (props) => {
...attributes ...attributes
} = props } = props
const defaultDatasets = (() => { const defaultDatasets = {
return [ datasets: [
{ {
data: dataPoints, data: dataPoints,
backgroundColor: getColor(backgroundColor), backgroundColor: getColor(backgroundColor),
@ -23,33 +23,48 @@ const ChartBarSimple = (props) => {
barPercentage: 0.5, barPercentage: 0.5,
categoryPercentage: 1, categoryPercentage: 1,
}, },
] ],
})() }
const defaultOptions = (() => { const defaultOptions = {
return { maintainAspectRatio: false,
maintainAspectRatio: false, plugins: {
legend: { legend: {
display: false, display: false,
}, },
scales: { },
xAxes: [ scales: {
{ x: {
display: false, grid: {
}, display: false,
], drawTicks: false,
yAxes: [ },
{ ticks: {
display: false, display: false,
}, },
],
}, },
} y: {
})() grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
}
// render // render
return ( return (
<CChartBar {...attributes} datasets={defaultDatasets} options={defaultOptions} labels={label} /> <CChart
type="bar"
{...attributes}
data={defaultDatasets}
options={defaultOptions}
labels={label}
/>
) )
} }

79
src/views/charts/ChartLineSimple.js → src/views/examples/charts/ChartLineSimple.js
View File

@ -1,7 +1,12 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { getColor, deepObjectsMerge } from '@coreui/utils' import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils'
import { CChartLine } from '@coreui/react-chartjs'
import { CChart } from '@coreui/react-chartjs'
const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b'
const ChartLineSimple = (props) => { const ChartLineSimple = (props) => {
const { const {
@ -38,34 +43,36 @@ const ChartLineSimple = (props) => {
const pointedOptions = (() => { const pointedOptions = (() => {
return { return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: { scales: {
xAxes: [ x: {
{ grid: {
offset: true,
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent',
},
ticks: {
fontSize: 2,
fontColor: 'transparent',
},
},
],
yAxes: [
{
display: false, display: false,
ticks: { drawBorder: false,
display: false,
min: Math.min.apply(Math, dataPoints) - 5,
max: Math.max.apply(Math, dataPoints) + 5,
},
}, },
], ticks: {
display: false,
},
},
y: {
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
}, },
elements: { elements: {
line: { line: {
borderWidth: 1, borderWidth: 1,
tension: 0.4,
}, },
point: { point: {
radius: 4, radius: 4,
@ -78,21 +85,24 @@ const ChartLineSimple = (props) => {
const straightOptions = (() => { const straightOptions = (() => {
return { return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: { scales: {
xAxes: [ x: {
{ display: false,
display: false, },
}, y: {
], display: false,
yAxes: [ },
{
display: false,
},
],
}, },
elements: { elements: {
line: { line: {
borderWidth: 2, borderWidth: 2,
tension: 0.4,
}, },
point: { point: {
radius: 0, radius: 0,
@ -124,7 +134,8 @@ const ChartLineSimple = (props) => {
// render // render
return ( return (
<CChartLine <CChart
type="line"
{...attributes} {...attributes}
datasets={computedDatasets} datasets={computedDatasets}
options={computedOptions} options={computedOptions}

171
src/views/examples/charts/Charts.js Normal file
View File

@ -0,0 +1,171 @@
import React from 'react'
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
import { CChart } from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
const Charts = () => {
const random = () => Math.round(Math.random() * 100)
return (
<CRow>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>
Bar Chart
<DocsLink href="http://www.chartjs.org" />
</CCardHeader>
<CCardBody>
<CChart
type="bar"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
},
],
}}
labels="months"
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody>
<CChart
type="doughnut"
data={{
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Line Chart</CCardHeader>
<CCardBody>
<CChart
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(220, 220, 220, 0.2)',
borderColor: 'rgba(220, 220, 220, 1)',
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
pointBorderColor: '#fff',
data: [random(), random(), random(), random(), random(), random(), random()],
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(151, 187, 205, 0.2)',
borderColor: 'rgba(151, 187, 205, 1)',
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
pointBorderColor: '#fff',
data: [random(), random(), random(), random(), random(), random(), random()],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody>
<CChart
type="pie"
data={{
labels: ['Red', 'Green', 'Yellow'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody>
<CChart
type="polarArea"
data={{
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
datasets: [
{
data: [11, 16, 7, 3, 14],
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody>
<CChart
type="radar"
data={{
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(220, 220, 220, 0.2)',
borderColor: 'rgba(220, 220, 220, 1)',
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
pointBorderColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220, 220, 220, 1)',
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(151, 187, 205, 0.2)',
borderColor: 'rgba(151, 187, 205, 1)',
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
pointBorderColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151, 187, 205, 1)',
data: [28, 48, 40, 19, 96, 27, 100],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Charts

95
src/views/examples/charts/MainChartExample.js Normal file
View File

@ -0,0 +1,95 @@
import React from 'react'
import { CChart } from '@coreui/react-chartjs'
import { getStyle, hexToRgba } from '@coreui/utils'
const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const brandDanger = getStyle('danger') || '#f86c6b'
const MainChartExample = (attributes) => {
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
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)
}
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: hexToRgba(brandInfo, 10),
borderColor: brandInfo,
pointHoverBackgroundColor: brandInfo,
borderWidth: 2,
data: data1,
fill: true,
},
{
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 options = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
drawOnChartArea: false,
},
},
y: {
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
stepSize: Math.ceil(250 / 5),
max: 250,
},
},
},
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
}
return <CChart type="line" data={data} options={options} {...attributes} />
}
export default MainChartExample

0
src/views/forms/checks-radios/ChecksRadios.js → src/views/examples/forms/checks-radios/ChecksRadios.js
View File

0
src/views/forms/form-control/FormControl.js → src/views/examples/forms/form-control/FormControl.js
View File

0
src/views/forms/input-group/InputGroup.js → src/views/examples/forms/input-group/InputGroup.js
View File

0
src/views/forms/layout/Layout.js → src/views/examples/forms/layout/Layout.js
View File

0
src/views/forms/range/Range.js → src/views/examples/forms/range/Range.js
View File

0
src/views/forms/select/Select.js → src/views/examples/forms/select/Select.js
View File

0
src/views/forms/validation/Validation.js → src/views/examples/forms/validation/Validation.js
View File

0
src/views/icons/brands/Brands.js → src/views/examples/icons/brands/Brands.js
View File

0
src/views/icons/coreui-icons/CoreUIIcons.js → src/views/examples/icons/coreui-icons/CoreUIIcons.js
View File

0
src/views/icons/flags/Flags.js → src/views/examples/icons/flags/Flags.js
View File

0
src/views/icons/index.js → src/views/examples/icons/index.js
View File

0
src/views/notifications/alerts/Alerts.js → src/views/examples/notifications/alerts/Alerts.js
View File

0
src/views/notifications/badges/Badges.js → src/views/examples/notifications/badges/Badges.js
View File

0
src/views/notifications/index.js → src/views/examples/notifications/index.js
View File

0
src/views/notifications/modals/Modals.js → src/views/examples/notifications/modals/Modals.js
View File

0
src/views/notifications/toasts/Toasts.js → src/views/examples/notifications/toasts/Toasts.js
View File

0
src/views/pages/login/Login.js → src/views/examples/pages/login/Login.js
View File

0
src/views/pages/page404/Page404.js → src/views/examples/pages/page404/Page404.js
View File

0
src/views/pages/page500/Page500.js → src/views/examples/pages/page500/Page500.js
View File

0
src/views/pages/register/Register.js → src/views/examples/pages/register/Register.js
View File

0
src/views/theme/colors/Colors.js → src/views/examples/theme/colors/Colors.js
View File

0
src/views/theme/typography/Typography.js → src/views/examples/theme/typography/Typography.js
View File

320
src/views/widgets/Widgets.js → src/views/examples/widgets/Widgets.js
View File

@ -9,16 +9,20 @@ import {
CWidgetProgressIcon, CWidgetProgressIcon,
CWidgetSimple, CWidgetSimple,
} from '@coreui/react' } from '@coreui/react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import WidgetsBrand from './WidgetsBrand' import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown' import WidgetsDropdown from './WidgetsDropdown'
import ChartLineSimple from '../charts/ChartLineSimple' // import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple' // import ChartBarSimple from '../charts/ChartBarSimple'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Widgets = () => { const Widgets = () => {
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
return ( return (
<> <>
<WidgetsDropdown /> <WidgetsDropdown />
@ -442,32 +446,332 @@ const Widgets = () => {
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="danger" /> <CChart
type="bar"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: getStyle('--cui-danger'),
borderColor: 'transparent',
borderWidth: 1,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="primary" /> <CChart
type="bar"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: getStyle('--cui-primary'),
borderColor: 'transparent',
borderWidth: 1,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartLineSimple style={{ height: '40px' }} borderColor="success" /> <CChart
type="bar"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: getStyle('--cui-success'),
borderColor: 'transparent',
borderWidth: 1,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="danger" /> <CChart
type="line"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-danger'),
borderWidth: 2,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="primary" /> <CChart
type="line"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple title="title" value="1,123"> <CWidgetSimple title="title" value="1,123">
<ChartBarSimple style={{ height: '40px' }} backgroundColor="success" /> <CChart
type="line"
style={{ height: '40px' }}
data={{
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
random(40, 100),
],
},
],
}}
options={{
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}}
/>
</CWidgetSimple> </CWidgetSimple>
</CCol> </CCol>
</CRow> </CRow>

195
src/views/examples/widgets/WidgetsBrand.js Normal file
View File

@ -0,0 +1,195 @@
import React from 'react'
import PropTypes from 'prop-types'
import { CWidgetBrand, CRow, CCol } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { CChart } from '@coreui/react-chartjs'
const WidgetsBrand = ({ withCharts }) => {
const chartOptions = {
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
}
return (
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-facebook" height="52" className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
values={[
['89k', 'friends'],
['459', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#3b5998',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-twitter" height="52" className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
values={[
['973k', 'followers'],
['1.792', 'tweets'],
]}
style={{
'--cui-card-cap-bg': '#00aced',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
values={[
['500+', 'contacts'],
['292', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#4875b4',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
color="warning"
headerChildren={
<>
<CIcon name="cil-calendar" height="52" className="my-4 text-white" />
{withCharts && (
<CChart
className="position-absolute w-100 h-100"
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
},
],
}}
options={chartOptions}
/>
)}
</>
}
values={[
['12+', 'events'],
['4', 'meetings'],
]}
/>
</CCol>
</CRow>
)
}
WidgetsBrand.propTypes = {
withCharts: PropTypes.bool,
}
export default WidgetsBrand

341
src/views/examples/widgets/WidgetsDropdown.js Normal file
View File

@ -0,0 +1,341 @@
import React from 'react'
import {
CRow,
CCol,
CDropdown,
CDropdownMenu,
CDropdownItem,
CDropdownToggle,
CWidgetDropdown,
} from '@coreui/react'
import { getStyle } from '@coreui/utils'
import { CChart } from '@coreui/react-chartjs'
import CIcon from '@coreui/icons-react'
const WidgetsDropdown = () => {
// render
return (
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="primary"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
{/* TODO: placement doesn't work */}
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChart
className="mt-3 mx-3"
style={{ height: '70px' }}
type="line"
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: getStyle('--cui-primary'),
data: [65, 59, 84, 84, 51, 55, 40],
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: 30,
max: 89,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
tension: 0.4,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="info"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChart
type="line"
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: getStyle('--cui-info'),
data: [1, 18, 9, 17, 34, 22, 11],
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: -9,
max: 39,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="warning"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChart
type="line"
className="mt-3"
style={{ height: '70px' }}
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}}
options={{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
elements: {
line: {
borderWidth: 2,
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
},
}}
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="danger"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<CChart
type="bar"
className="mt-3 mx-3"
style={{ height: '70px' }}
data={{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
'January',
'February',
'March',
'April',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
barPercentage: 0.6,
},
],
}}
options={{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
}}
/>
}
/>
</CCol>
</CRow>
)
}
export default WidgetsDropdown

173
src/views/widgets/WidgetsBrand.js
View File

@ -1,173 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple'
const WidgetsBrand = ({ withCharts }) => {
// render
return withCharts ? (
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-facebook" height="52" className="my-4 text-white" />
<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"
/>
</>
}
values={[
['89k', 'friends'],
['459', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#3b5998',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-twitter" height="52" className="my-4 text-white" />
<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"
/>
</>
}
values={[
['973k', 'followers'],
['1.792', 'tweets'],
]}
style={{
'--cui-card-cap-bg': '#00aced',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={
<>
<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
<ChartLineSimple
className="position-absolute w-100 h-100"
backgroundColor="rgba(255,255,255,.1)"
dataPoints={[78, 81, 80, 45, 34, 12, 40]}
label="Contacts"
labels="months"
/>
</>
}
values={[
['500+', 'contacts'],
['292', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#4875b4',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
color="warning"
headerChildren={
<>
<CIcon name="cil-calendar" height="52" className="my-4 text-white" />
<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"
/>
</>
}
values={[
['12+', 'events'],
['4', 'meetings'],
]}
/>
</CCol>
</CRow>
) : (
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
values={[
['89k', 'friends'],
['459', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#3b5998',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
values={[
['973k', 'followers'],
['1.792', 'tweets'],
]}
style={{
'--cui-card-cap-bg': '#00aced',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
headerChildren={<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />}
values={[
['500+', 'contacts'],
['292', 'feeds'],
]}
style={{
'--cui-card-cap-bg': '#4875b4',
}}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
color="warning"
headerChildren={<CIcon name="cil-calendar" height="52" className="my-4 text-white" />}
values={[
['12+', 'events'],
['4', 'meetings'],
]}
/>
</CCol>
</CRow>
)
}
WidgetsBrand.propTypes = {
withCharts: PropTypes.bool,
}
export default WidgetsBrand

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

@ -1,155 +0,0 @@
import React from 'react'
import {
CRow,
CCol,
CDropdown,
CDropdownMenu,
CDropdownItem,
CDropdownToggle,
CWidgetDropdown,
} from '@coreui/react-ts'
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
className="mb-4"
color="primary"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
{/* TODO: placement doesn't work */}
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<ChartLineSimple
pointed
className="chart-wrapper mt-3 mx-3"
style={{ height: '70px' }}
dataPoints={[65, 59, 84, 84, 51, 55, 40]}
pointHoverBackgroundColor="primary"
label="Members"
labels="months"
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="info"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<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"
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="warning"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<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"
/>
}
/>
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
className="mb-4"
color="danger"
value="9.823"
title="Members online"
action={
<CDropdown>
<CDropdownToggle color="transparent" caret={false}>
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdownMenu>
</CDropdown>
}
chart={
<ChartBarSimple
className="mt-3 mx-3"
style={{ height: '70px' }}
backgroundColor="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
}
/>
</CCol>
</CRow>
)
}
export default WidgetsDropdown