+
diff --git a/src/routes.js b/src/routes.js
index 9934c2e..9a60c48 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,49 +1,51 @@
import React from 'react'
-const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
-const Tables = React.lazy(() => import('./views/base/tables/Tables'))
+// examples
-const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
-const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
-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 Colors = React.lazy(() => import('./views/examples/theme/colors/Colors'))
+const Typography = React.lazy(() => import('./views/examples/theme/typography/Typography'))
-const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
-const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
-const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
-const Navs = React.lazy(() => import('./views/base/navs/Navs'))
-const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
-const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
-const Progress = React.lazy(() => import('./views/base/progress/Progress'))
+const Accordion = React.lazy(() => import('./views/examples/base/accordion/Accordion'))
+const Breadcrumbs = React.lazy(() => import('./views/examples/base/breadcrumbs/Breadcrumbs'))
+const Cards = React.lazy(() => import('./views/examples/base/cards/Cards'))
+const Carousels = React.lazy(() => import('./views/examples/base/carousels/Carousels'))
+const Collapses = React.lazy(() => import('./views/examples/base/collapses/Collapses'))
+const ListGroups = React.lazy(() => import('./views/examples/base/list-groups/ListGroups'))
+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 Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
-const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
-const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
-const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
-const Charts = React.lazy(() => import('./views/charts/Charts'))
+const Buttons = React.lazy(() => import('./views/examples/buttons/buttons/Buttons'))
+const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-groups/ButtonGroups'))
+const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns'))
+
+const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios'))
+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 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 = [
{ path: '/', exact: true, name: 'Home' },
@@ -57,19 +59,16 @@ const routes = [
{ path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
{ 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/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress', name: 'Progress', component: Progress },
{ path: '/base/tables', name: 'Tables', component: Tables },
- { path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
{ 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: '/charts', name: 'Charts', component: Charts },
{ path: '/forms', name: 'Forms', component: FormControl, exact: true },
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3285dd3..65e3d38 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -6,6 +6,7 @@ $enable-rtl: true;
// Import styles
@import "@coreui/coreui/scss/coreui";
+@import "@coreui/chartjs/dist/css/coreui-chartjs.css";
@import "layout";
@import "example";
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
deleted file mode 100644
index 0994673..0000000
--- a/src/views/base/tables/Tables.js
+++ /dev/null
@@ -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 (
- <>
-
-
-
-
- Simple Table
-
-
-
-
-
- Username
- Date registered
- Role
- Status
-
-
-
-
- Samppa Nori
- 2012/01/01
- Member
-
- Active
-
-
-
- Estavan Lykos
- 2012/02/01
- Staff
-
- Banned
-
-
-
- Chetan Mohamed
- 2012/02/01
- Admin
-
- Inactive
-
-
-
- Derick Maximinus
- 2012/03/01
- Member
-
- Pending
-
-
-
- Friderik Dávid
- 2012/01/21
- Staff
-
- Active
-
-
-
-
-
-
-
-
-
-
- Striped Table
-
-
-
-
- Username
- Date registered
- Role
- Status
-
-
-
-
- Yiorgos Avraamu
- 2012/01/01
- Member
-
- Active
-
-
-
- Avram Tarasios
- 2012/02/01
- Staff
-
- Banned
-
-
-
- Quintin Ed
- 2012/02/01
- Admin
-
- Inactive
-
-
-
- Enéas Kwadwo
- 2012/03/01
- Member
-
- Pending
-
-
-
- Agapetus Tadeáš
- 2012/01/21
- Staff
-
- Active
-
-
-
-
-
-
-
-
-
-
-
-
- Condensed Table
-
-
-
-
- Username
- Date registered
- Role
- Status
-
-
-
-
- Carwyn Fachtna
- 2012/01/01
- Member
-
- Active
-
-
-
- Nehemiah Tatius
- 2012/02/01
- Staff
-
- Banned
-
-
-
- Ebbe Gemariah
- 2012/02/01
- Admin
-
- Inactive
-
-
-
- Eustorgios Amulius
- 2012/03/01
- Member
-
- Pending
-
-
-
- Leopold Gáspár
- 2012/01/21
- Staff
-
- Active
-
-
-
-
-
-
-
-
-
-
- Bordered Table
-
-
-
-
- Username
- Date registered
- Role
- Status
-
-
-
-
- Pompeius René
- 2012/01/01
- Member
-
- Active
-
-
-
- Paĉjo Jadon
- 2012/02/01
- Staff
-
- Banned
-
-
-
- Micheal Mercurius
- 2012/02/01
- Admin
-
- Inactive
-
-
-
- Ganesha Dubhghall
- 2012/03/01
- Member
-
- Pending
-
-
-
- Hiroto Šimun
- 2012/01/21
- Staff
-
- Active
-
-
-
-
-
-
-
-
-
-
-
-
- Combined All Table
-
-
-
-
- Username
- Date registered
- Role
- Status
-
-
-
-
- Vishnu Serghei
- 2012/01/01
- Member
-
- Active
-
-
-
- Zbyněk Phoibos
- 2012/02/01
- Staff
-
- Banned
-
-
-
- Einar Randall
- 2012/02/01
- Admin
-
- Inactive
-
-
-
- Félix Troels
- 2012/03/01
- Member
-
- Pending
-
-
-
- Aulus Agmundr
- 2012/01/21
- Staff
-
- Active
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default Tables
diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js
deleted file mode 100644
index ba6c8c7..0000000
--- a/src/views/base/tooltips/Tooltips.js
+++ /dev/null
@@ -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 (
- <>
-
-
- Tooltips
-
-
- Hover over the links below to see tooltips:
-
- Tight pants next level keffiyeh
-
- you probably
-
- 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
-
- have a
-
- 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
-
- whatever keytar
-
- scenester farm-to-table banksy Austin
-
- twitter handle
-
- freegan cred raw denim single-origin coffee viral.
-
-
-
-
-
-
-
-
- Tooltips
- placement
-
-
-
-
- {placements.map((placement) => {
- return (
-
-
- {placement}
-
-
- )
- })}
-
-
-
-
-
- )
-}
-
-export default Tooltips
diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js
deleted file mode 100644
index 49f58c2..0000000
--- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js
+++ /dev/null
@@ -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 (
-
-
-
-
- Dropdowns
-
-
-
- Dropdown button
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Primary
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Secondary
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Success
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Info
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Warning
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Danger
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Primary
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Secondary
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Success
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Info
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Warning
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Danger
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Large button
-
- Header
- Action Disabled
- Action
- Another Action
-
- {' '}
-
-
- Large split button
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Small button
-
-
- Header
- Action Disabled
- Action
- Another Action
-
- {' '}
-
-
- Small split button
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
- Dropup button
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Split dropup
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
-
- Menus
-
-
- Direction Up
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Direction Left
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Direction Right
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Default Down
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
-
- This dropdown{"'"}s menu is right-aligned
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
- Dropdown with header
-
- Header
- Action
- Another Action
-
-
-
-
- Dropdown with divider
-
- Action
- Another Action
-
-
-
-
- Dropdown with disabled item
-
- Action
- Disabled Action
-
-
-
-
- Dropdown with form
-
-
-
- Email address
-
-
- Password
-
-
-
-
-
- Sign in
-
-
-
- Register
- Forgot password?
-
-
-
-
-
-
- )
-}
-
-export default ButtonDropdowns
diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js
deleted file mode 100644
index 161fd10..0000000
--- a/src/views/buttons/button-groups/ButtonGroups.js
+++ /dev/null
@@ -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 (
-
-
-
-
- Callout
-
-
- Callout
-
-
-
-
-
- Button Group
-
-
-
- Left
- Middle
- Right
-
-
-
-
-
-
- Button Group
- toolbar
-
-
-
-
- 1
- 2
- 3
- 4
-
-
- 5
- 6
- 7
-
-
- 8
-
-
-
-
- 1
- 2
- 3
- 4
-
-
- @
-
-
-
-
- 1
- 2
- 3
- 4
-
-
- @
-
-
-
-
-
-
-
- Button Group
- vertical variation
-
-
-
- 1
- 2
- 3
-
-
-
-
-
-
-
- Button Group
- sizing
-
-
-
- Left
- Middle
- Right
-
-
- Left
- Middle
- Right
-
-
- Left
- Middle
- Right
-
-
-
-
-
-
- Button Group
- nestingccc
-
-
-
- 1
- 2
-
-
- Dropdown
-
-
- Dropdown Link
- Dropdown Link
-
-
-
-
-
-
-
-
- Button Group
- vertical
-
-
-
- 1
- 2
-
-
- Dropdown
-
-
- Dropdown Link
- Dropdown Link
-
-
-
-
-
-
-
- )
-}
-
-export default ButtonGroups
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
deleted file mode 100644
index 757f477..0000000
--- a/src/views/buttons/buttons/Buttons.js
+++ /dev/null
@@ -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 (
- <>
-
-
- Standard Buttons
-
-
-
-
- Normal
-
-
-
- Primary
-
-
-
- Secondary
-
-
- Success
-
-
- Warning
-
-
- Danger
-
-
- Info
-
-
- Light
-
-
- Dark
-
-
- Link
-
-
-
-
- Active State
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
- Disabled
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
-
- layout="outline" Buttons
-
-
- With outline prop.
-
-
-
- Normal
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
- Active State
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
- Disabled
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
-
- layout="ghost" Buttons
-
-
- Use .btn-ghost-* class for layout="ghost" buttons.
-
-
-
- Normal
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
- Active State
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
- Disabled
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
-
-
- Square Buttons
-
-
- Use .btn-square class for square buttons.
-
-
-
- Normal
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
- Active State
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
- Disabled
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
-
- Pill Buttons
-
-
- Use .btn-pill class for pill buttons.
-
-
-
- Normal
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
- Active State
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
- Disabled
-
-
-
- Primary
-
-
-
-
- Secondary
-
-
-
-
- Success
-
-
-
-
- Warning
-
-
-
-
- Danger
-
-
-
-
- Info
-
-
-
-
- Light
-
-
-
-
- Dark
-
-
-
-
- Link
-
-
-
-
-
-
-
- Sizes
-
-
- Fancy larger or smaller buttons? Add size="lg" or size="sm"{' '}
- for additional sizes.
-
-
-
- Small
-
-
-
- Standard Button
-
-
-
-
- Outline Button
-
-
-
-
- Ghost Button
-
-
-
-
- Square Button
-
-
-
-
- Pill Button
-
-
-
-
-
- Normal
-
-
- Standard Button
-
-
-
- Outline Button
-
-
-
-
- Ghost Button
-
-
-
-
- Square Button
-
-
-
-
- Pill Button
-
-
-
-
-
- Large
-
-
-
- Standard Button
-
-
-
-
- Outline Button
-
-
-
-
- Ghost Button
-
-
-
-
- Square Button
-
-
-
-
- Pill Button
-
-
-
-
-
-
-
- With Icons
-
-
-
- Standard Button
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Level Buttons
-
-
- Add prop block
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
-
-
-
-
- Level Buttons
-
-
- Add prop block
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
- Block level button
-
-
-
-
-
-
- )
-}
-
-export default Buttons
diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js
deleted file mode 100644
index 5f9b3ac..0000000
--- a/src/views/charts/Charts.js
+++ /dev/null
@@ -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 (
-
-
-
-
- Bar Chart
-
-
-
-
-
-
-
- Doughnut Chart
-
-
-
-
-
-
- Line Chart
-
-
-
-
-
-
- Pie Chart
-
-
-
-
-
-
- Polar Area Chart
-
-
-
-
-
-
- Radar Chart
-
-
-
-
-
- )
-}
-
-export default Charts
diff --git a/src/views/charts/MainChartExample.js b/src/views/charts/MainChartExample.js
deleted file mode 100644
index 5d107cf..0000000
--- a/src/views/charts/MainChartExample.js
+++ /dev/null
@@ -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 (
-
- )
-}
-
-export default MainChartExample
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 06dca11..8adef0f 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -2,7 +2,6 @@ import React, { lazy } from 'react'
import {
CAvatar,
- CBadge,
CButton,
CButtonGroup,
CCallout,
@@ -13,15 +12,21 @@ import {
CCol,
CProgress,
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 MainChartExample from '../charts/MainChartExample.js'
+import MainChartExample from '../examples/charts/MainChartExample.js'
-const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
-const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
+const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js'))
+const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js'))
const Dashboard = () => {
+ const random = (min, max) => {
+ return Math.floor(Math.random() * (max - min + 1) + min)
+ }
+
return (
<>
@@ -32,7 +37,7 @@ const Dashboard = () => {
Traffic
-
November 2017
+
January - July 2021
@@ -52,7 +57,91 @@ const Dashboard = () => {
-
+
@@ -96,18 +185,16 @@ const Dashboard = () => {
-
- New Clients
- 9,123
-
+
-
- Recurring Clients
- 22,643
-
+
+
Recurring Clients
+
22,643
+
@@ -181,18 +268,16 @@ const Dashboard = () => {
-
- Pageviews
- 78,623
-
+
-
- Organic
- 49,123
-
+
diff --git a/src/views/base/accordion/Accordion.js b/src/views/examples/base/accordion/Accordion.js
similarity index 100%
rename from src/views/base/accordion/Accordion.js
rename to src/views/examples/base/accordion/Accordion.js
diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/examples/base/breadcrumbs/Breadcrumbs.js
similarity index 100%
rename from src/views/base/breadcrumbs/Breadcrumbs.js
rename to src/views/examples/base/breadcrumbs/Breadcrumbs.js
diff --git a/src/views/base/cards/Cards.js b/src/views/examples/base/cards/Cards.js
similarity index 100%
rename from src/views/base/cards/Cards.js
rename to src/views/examples/base/cards/Cards.js
diff --git a/src/views/base/carousels/Carousels.js b/src/views/examples/base/carousels/Carousels.js
similarity index 100%
rename from src/views/base/carousels/Carousels.js
rename to src/views/examples/base/carousels/Carousels.js
diff --git a/src/views/base/collapses/Collapses.js b/src/views/examples/base/collapses/Collapses.js
similarity index 100%
rename from src/views/base/collapses/Collapses.js
rename to src/views/examples/base/collapses/Collapses.js
diff --git a/src/views/base/index.js b/src/views/examples/base/index.js
similarity index 100%
rename from src/views/base/index.js
rename to src/views/examples/base/index.js
diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/examples/base/jumbotrons/Jumbotrons.js
similarity index 100%
rename from src/views/base/jumbotrons/Jumbotrons.js
rename to src/views/examples/base/jumbotrons/Jumbotrons.js
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/examples/base/list-groups/ListGroups.js
similarity index 100%
rename from src/views/base/list-groups/ListGroups.js
rename to src/views/examples/base/list-groups/ListGroups.js
diff --git a/src/views/base/navbars/Navbars.js b/src/views/examples/base/navbars/Navbars.js
similarity index 100%
rename from src/views/base/navbars/Navbars.js
rename to src/views/examples/base/navbars/Navbars.js
diff --git a/src/views/base/navs/Navs.js b/src/views/examples/base/navs/Navs.js
similarity index 100%
rename from src/views/base/navs/Navs.js
rename to src/views/examples/base/navs/Navs.js
diff --git a/src/views/base/paginations/Paginations.js b/src/views/examples/base/paginations/Paginations.js
similarity index 100%
rename from src/views/base/paginations/Paginations.js
rename to src/views/examples/base/paginations/Paginations.js
diff --git a/src/views/base/popovers/Popovers.js b/src/views/examples/base/popovers/Popovers.js
similarity index 96%
rename from src/views/base/popovers/Popovers.js
rename to src/views/examples/base/popovers/Popovers.js
index 7dbad54..ded39a7 100644
--- a/src/views/base/popovers/Popovers.js
+++ b/src/views/examples/base/popovers/Popovers.js
@@ -1,5 +1,5 @@
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'
const Popovers = () => {
diff --git a/src/views/base/progress/Progress.js b/src/views/examples/base/progress/Progress.js
similarity index 100%
rename from src/views/base/progress/Progress.js
rename to src/views/examples/base/progress/Progress.js
diff --git a/src/views/examples/base/tables/Tables.js b/src/views/examples/base/tables/Tables.js
new file mode 100644
index 0000000..78d98b2
--- /dev/null
+++ b/src/views/examples/base/tables/Tables.js
@@ -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 (
+
+
+
+
+ React Table Basic example
+
+
+
+ Using the most basic table CoreUI, here's how{' '}
+ <CTable>-based tables look in CoreUI.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Variants
+
+
+
+ Use contextual classes to color tables, table rows or individual cells.
+
+
+
+
+
+ Class
+ Heading
+ Heading
+
+
+
+
+ Default
+ Cell
+ Cell
+
+
+ Primary
+ Cell
+ Cell
+
+
+ Secondary
+ Cell
+ Cell
+
+
+ Success
+ Cell
+ Cell
+
+
+ Danger
+ Cell
+ Cell
+
+
+ Warning
+ Cell
+ Cell
+
+
+ Info
+ Cell
+ Cell
+
+
+ Light
+ Cell
+ Cell
+
+
+ Dark
+ Cell
+ Cell
+
+
+
+
+
+
+
+
+
+
+ React Table Striped rows
+
+
+
+ Use striped property to add zebra-striping to any table row
+ within the <CTableBody>.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+ These classes can also be added to table variants:
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Hoverable rows
+
+
+
+ Use hover property to enable a hover state on table rows
+ within a <CTableBody>.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Active tables
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+
+ Larry the Bird
+
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+
+ Larry the Bird
+
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Bordered tables
+
+
+
+ Add bordered property for borders on all sides of the table
+ and cells.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+ Border color utilities
+ {' '}
+ can be added to change colors:
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Tables without borders
+
+
+
+ Add borderless property for a table without borders.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Small tables
+
+
+
+ Add small property to make any{' '}
+ <CTable> more compact by cutting all cell{' '}
+ padding in half.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Vertical alignment
+
+
+
+ Table cells of <CTableHead> are always vertical
+ aligned to the bottom. Table cells in <CTableBody>{' '}
+ inherit their alignment from <CTable> and are aligned
+ to the the top by default. Use the align property to re-align where needed.
+
+
+
+
+
+
+ Heading 1
+
+
+ Heading 2
+
+
+ Heading 3
+
+
+ Heading 4
+
+
+
+
+
+
+ This cell inherits vertical-align: middle; from the table
+
+
+ This cell inherits vertical-align: middle; from the table
+
+
+ This cell inherits vertical-align: middle; from the table
+
+
+ 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.
+
+
+
+
+ This cell inherits vertical-align: bottom; from the table row
+
+
+ This cell inherits vertical-align: bottom; from the table row
+
+
+ This cell inherits vertical-align: bottom; from the table row
+
+
+ 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.
+
+
+
+
+ This cell inherits vertical-align: middle; from the table
+
+
+ This cell inherits vertical-align: middle; from the table
+
+ This cell is aligned to the top.
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+ React Table Nesting
+
+
+
+ Border styles, active styles, and table variants are not inherited by nested tables.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+
+
+
+
+ Header
+ Header
+ Header
+
+
+
+
+ A
+ First
+ Last
+
+
+ B
+ First
+ Last
+
+
+ C
+ First
+ Last
+
+
+
+
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Table head
+
+
+
+ Similar to tables and dark tables, use the modifier prop{' '}
+ color="light" or color="dark" to
+ make <CTableHead>s appear light or dark gray.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ React Table Table foot
+
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+ Footer
+ Footer
+ Footer
+ Footer
+
+
+
+
+
+
+
+
+
+
+ React Table Captions
+
+
+
+ A <CTableCaption> 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.
+
+
+
+ List of users
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+ You can also put the <CTableCaption> on the top of
+ the table with caption="top".
+
+
+
+ List of users
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Tables
diff --git a/src/views/base/tabs/Tabs.js b/src/views/examples/base/tabs/Tabs.js
similarity index 100%
rename from src/views/base/tabs/Tabs.js
rename to src/views/examples/base/tabs/Tabs.js
diff --git a/src/views/examples/base/tooltips/Tooltips.js b/src/views/examples/base/tooltips/Tooltips.js
new file mode 100644
index 0000000..38be2d9
--- /dev/null
+++ b/src/views/examples/base/tooltips/Tooltips.js
@@ -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 (
+
+
+
+
+ React Tooltip Basic example
+
+
+
+ Hover over the links below to see tooltips:
+
+
+
+ Tight pants next level keffiyeh
+
+ you probably
+
+ 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
+
+ have a
+
+ 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
+
+ whatever keytar
+
+ scenester farm-to-table banksy Austin
+
+ twitter handle
+
+ freegan cred raw denim single-origin coffee viral.
+
+
+
+ Hover over the buttons below to see the four tooltips directions: top, right, bottom,
+ and left. Directions are mirrored when using CoreUI in RTL.
+
+
+
+ Tooltip on top
+
+
+ Tooltip on right
+
+
+ Tooltip on bottom
+
+
+ Tooltip on left
+
+
+
+
+
+
+ )
+}
+
+export default Tooltips
diff --git a/src/views/examples/buttons/button-groups/ButtonGroups.js b/src/views/examples/buttons/button-groups/ButtonGroups.js
new file mode 100644
index 0000000..5d22284
--- /dev/null
+++ b/src/views/examples/buttons/button-groups/ButtonGroups.js
@@ -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 (
+
+
+
+
+ React Button Group Basic example
+
+
+
+ Wrap a series of <CButton> components in{' '}
+ <CButtonGroup>.{' '}
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+ These classes can also be added to groups of links, as an alternative to the{' '}
+ <CNav> components.
+
+
+
+
+ Active link
+
+
+ Link
+
+
+ Link
+
+
+
+
+
+
+
+
+
+ React Button Group Mixed styles
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+
+
+
+
+
+ React Button Group Outlined styles
+
+
+
+
+
+ Left
+
+
+ Middle
+
+
+ Right
+
+
+
+
+
+
+
+
+
+ React Button Group Checkbox and radio button groups
+
+
+
+ Combine button-like checkbox and radio toggle buttons into a seamless looking button
+ group.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ React Button Group Button toolbar
+
+
+
+ Join sets of button groups into button toolbars for more complicated components. Use
+ utility classes as needed to space out groups, buttons, and more.
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+ 5
+ 6
+ 7
+
+
+ 8
+
+
+
+
+ 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.
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+ @
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+ @
+
+
+
+
+
+
+
+
+
+ React Button Group Sizing
+
+
+
+ Alternatively, of implementing button sizing classes to each button in a group, set{' '}
+ size property to all <CButtonGroup>'s, including each
+ one when nesting multiple groups.
+
+
+
+
+ Left
+
+
+ Middle
+
+
+ Right
+
+
+
+
+ Left
+
+
+ Middle
+
+
+ Right
+
+
+
+
+ Left
+
+
+ Middle
+
+
+ Right
+
+
+
+
+
+
+
+
+
+ React Button Group Nesting
+
+
+
+ Put a <CButtonGroup> inside another{' '}
+ <CButtonGroup> when you need dropdown menus combined with a series
+ of buttons.
+
+
+
+ 1
+ 2
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+
+ React Button Group Vertical variation
+
+
+
+ Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
+ Split button dropdowns are not supported here.
+
+
+
+ Button
+ Button
+ Button
+ Button
+ Button
+ Button
+ Button
+
+
+
+
+ Button
+ Button
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ Button
+ Button
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ButtonGroups
diff --git a/src/views/examples/buttons/buttons/Buttons.js b/src/views/examples/buttons/buttons/Buttons.js
new file mode 100644
index 0000000..f6f4c74
--- /dev/null
+++ b/src/views/examples/buttons/buttons/Buttons.js
@@ -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 (
+
+
+
+
+ React Button
+
+
+
+ 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.
+
+
+ {['normal', 'active', 'disabled'].map((state, index) => (
+
+
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+
+ ))}
+ Link
+
+
+ ))}
+
+
+
+
+
+
+
+ React Button with icons
+
+
+
+ You can combine button with our CoreUI Icons .
+
+
+ {['normal', 'active', 'disabled'].map((state, index) => (
+
+
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+
+ ))}
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ React Button Button components
+
+
+
+ The <CButton> component are designed for{' '}
+ <button> , <a> or <input>{' '}
+ elements (though some browsers may apply a slightly different rendering).
+
+
+ If you're using <CButton> component as <a>{' '}
+ elements that are used to trigger functionality ex. collapsing content, these links
+ should be given a role="button" to adequately communicate their meaning
+ to assistive technologies such as screen readers.
+
+
+
+ Link
+
+
+ Button
+
+
+
+
+
+
+
+
+ React Button outline
+
+
+
+ If you need a button, but without the strong background colors. Set{' '}
+ variant="outline" prop to remove all background colors.
+
+
+ {['normal', 'active', 'disabled'].map((state, index) => (
+
+
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+
+
+ React Button ghost
+
+
+
+ If you need a ghost variant of button, set variant="ghost" prop to remove
+ all background colors.
+
+
+ {['normal', 'active', 'disabled'].map((state, index) => (
+
+
+ {state.charAt(0).toUpperCase() + state.slice(1)}
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+
+
+ React Button Sizes
+
+
+
+ Larger or smaller buttons? Add size="lg" or size="sm" for
+ additional sizes.
+
+
+
+ Large button
+
+
+ Large button
+
+
+
+
+ Small button
+
+
+ Small button
+
+
+
+
+
+
+
+
+ React Button Pill
+
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+
+ ))}
+
+
+
+
+
+
+
+ React Button Square
+
+
+
+ {[
+ 'primary',
+ 'secondary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'light',
+ 'dark',
+ ].map((color, index) => (
+
+ {color.charAt(0).toUpperCase() + color.slice(1)}
+
+ ))}
+
+
+
+
+
+
+
+ React Button Disabled state
+
+
+
+ Add the disabled boolean prop to any <CButton>{' '}
+ component to make buttons look inactive. Disabled button has{' '}
+ pointer-events: none applied to, disabling hover and active states from
+ triggering.
+
+
+
+ Primary button
+
+
+ Button
+
+
+
+ Disabled buttons using the <a> component act a little different:
+
+
+ <a>s don't support the disabled attribute, so CoreUI
+ has to add .disabled className to make buttons look inactive. CoreUI also
+ has to add to the disabled button component aria-disabled="true"{' '}
+ attribute to show the state of the component to assistive technologies.
+
+
+
+ Primary link
+
+
+ Link
+
+
+
+
+
+
+
+
+ React Button Block buttons
+
+
+
+ Create buttons that span the full width of a parent—by using utilities.
+
+
+
+ Button
+ Button
+
+
+
+ Here we create a responsive variation, starting with vertically stacked buttons until
+ the md breakpoint, where .d-md-block replaces the{' '}
+ .d-grid class, thus nullifying the gap-2 utility. Resize
+ your browser to see them change.
+
+
+
+ Button
+ Button
+
+
+
+ You can adjust the width of your block buttons with grid column width classes. For
+ example, for a half-width "block button", use .col-6. Center it
+ horizontally with .mx-auto, too.
+
+
+
+ Button
+ Button
+
+
+
+ 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.
+
+
+
+
+ Button
+
+ Button
+
+
+
+
+
+
+ )
+}
+
+export default Buttons
diff --git a/src/views/examples/buttons/dropdowns/Dropdowns.js b/src/views/examples/buttons/dropdowns/Dropdowns.js
new file mode 100644
index 0000000..7ec42fd
--- /dev/null
+++ b/src/views/examples/buttons/dropdowns/Dropdowns.js
@@ -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 (
+
+
+
+
+ React Dropdown Single button
+
+
+
+ Here's how you can put them to work with either{' '}
+ <button> elements:
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+
+
+
+ The best part is you can do this with any button variant, too:
+
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+ (color, index) => (
+
+ {color}
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ ),
+ )}
+
+
+
+
+
+
+
+
+ React Dropdown Split button
+
+
+
+ Similarly, create split button dropdowns with virtually the same markup as single
+ button dropdowns, but with the addition of boolean prop{' '}
+ split for proper spacing around the dropdown caret.
+
+
+ We use this extra class to reduce the horizontal padding on
+ either side of the caret by 25% and remove the margin-left{' '}
+ 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.
+
+
+ <>
+ {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
+ (color, index) => (
+
+ {color}
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ ),
+ )}
+
+
+
+
+
+
+
+
+ React Dropdown Sizing
+
+
+
+ Button dropdowns work with buttons of all sizes, including default and split dropdown
+ buttons.
+
+
+
+
+ Large button
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Large split button
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+ Small button
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Small split button
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+ React Dropdown Single button
+
+
+
+ Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
+ dark property. No changes are required to the dropdown
+ items.
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ And putting it to use in a navbar:
+
+
+
+
+ Navbar
+
+
+
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+
+
+
+ React Dropdown Dropup
+
+
+
+ Trigger dropdown menus above elements by adding{' '}
+ direction="dropup" to the{' '}
+ <CDropdown> component.
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Small split button
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+ React Dropdown Dropright
+
+
+
+ Trigger dropdown menus at the right of the elements by adding{' '}
+ direction="dropend" to the{' '}
+ <CDropdown> component.
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Small split button
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+ React Dropdown Dropleft
+
+
+
+ Trigger dropdown menus at the left of the elements by adding{' '}
+ direction="dropstart" to the{' '}
+ <CDropdown> component.
+
+
+
+ Dropdown
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+ Small split button
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+ )
+}
+
+export default Dropdowns
diff --git a/src/views/buttons/index.js b/src/views/examples/buttons/index.js
similarity index 100%
rename from src/views/buttons/index.js
rename to src/views/examples/buttons/index.js
diff --git a/src/views/charts/ChartBarSimple.js b/src/views/examples/charts/ChartBarSimple.js
similarity index 61%
rename from src/views/charts/ChartBarSimple.js
rename to src/views/examples/charts/ChartBarSimple.js
index 105a3c1..7f1e2d1 100644
--- a/src/views/charts/ChartBarSimple.js
+++ b/src/views/examples/charts/ChartBarSimple.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { getColor } from '@coreui/utils'
-import { CChartBar } from '@coreui/react-chartjs'
+import { CChart } from '@coreui/react-chartjs'
const ChartBarSimple = (props) => {
const {
@@ -13,8 +13,8 @@ const ChartBarSimple = (props) => {
...attributes
} = props
- const defaultDatasets = (() => {
- return [
+ const defaultDatasets = {
+ datasets: [
{
data: dataPoints,
backgroundColor: getColor(backgroundColor),
@@ -23,33 +23,48 @@ const ChartBarSimple = (props) => {
barPercentage: 0.5,
categoryPercentage: 1,
},
- ]
- })()
+ ],
+ }
- const defaultOptions = (() => {
- return {
- maintainAspectRatio: false,
+ const defaultOptions = {
+ maintainAspectRatio: false,
+ plugins: {
legend: {
display: false,
},
- scales: {
- xAxes: [
- {
- display: false,
- },
- ],
- yAxes: [
- {
- display: false,
- },
- ],
+ },
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
},
- }
- })()
+ y: {
+ grid: {
+ display: false,
+ drawBorder: false,
+ drawTicks: false,
+ },
+ ticks: {
+ display: false,
+ },
+ },
+ },
+ }
// render
return (
- {
+ const random = () => Math.round(Math.random() * 100)
+
+ return (
+
+
+
+
+ Bar Chart
+
+
+
+
+
+
+
+ Doughnut Chart
+
+
+
+
+
+
+ Line Chart
+
+
+
+
+
+
+ Pie Chart
+
+
+
+
+
+
+ Polar Area Chart
+
+
+
+
+
+
+ Radar Chart
+
+
+
+
+
+ )
+}
+
+export default Charts
diff --git a/src/views/examples/charts/MainChartExample.js b/src/views/examples/charts/MainChartExample.js
new file mode 100644
index 0000000..5b5954a
--- /dev/null
+++ b/src/views/examples/charts/MainChartExample.js
@@ -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
-
-
-
-
-
-
diff --git a/src/views/examples/widgets/WidgetsBrand.js b/src/views/examples/widgets/WidgetsBrand.js
new file mode 100644
index 0000000..82e42c0
--- /dev/null
+++ b/src/views/examples/widgets/WidgetsBrand.js
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+WidgetsBrand.propTypes = {
+ withCharts: PropTypes.bool,
+}
+
+export default WidgetsBrand
diff --git a/src/views/examples/widgets/WidgetsDropdown.js b/src/views/examples/widgets/WidgetsDropdown.js
new file mode 100644
index 0000000..ab0d33d
--- /dev/null
+++ b/src/views/examples/widgets/WidgetsDropdown.js
@@ -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 (
+
+
+
+
+
+ {/* TODO: placement doesn't work */}
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+ }
+ chart={
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+ }
+ chart={
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+ }
+ chart={
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+ }
+ chart={
+
+
+ )
+}
+
+export default WidgetsDropdown
diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
deleted file mode 100644
index 471d753..0000000
--- a/src/views/widgets/WidgetsBrand.js
+++ /dev/null
@@ -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 ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-WidgetsBrand.propTypes = {
- withCharts: PropTypes.bool,
-}
-
-export default WidgetsBrand
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
deleted file mode 100644
index 4ab99a2..0000000
--- a/src/views/widgets/WidgetsDropdown.js
+++ /dev/null
@@ -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 (
-
-
-
-
-
- {/* TODO: placement doesn't work */}
-
- Action
- Another action
- Something else here...
- Disabled action
-
-
- }
- chart={
-
-
-
-
-
-
-
- Action
- Another action
- Something else here...
- Disabled action
-
-
- }
- chart={
-
-
-
-
-
-
-
- Action
- Another action
- Something else here...
- Disabled action
-
-
- }
- chart={
-
-
-
-
-
-
-
- Action
- Another action
- Something else here...
- Disabled action
-
-
- }
- chart={
-
-
- )
-}
-
-export default WidgetsDropdown