refactor: update components to CoreUI 4
This commit is contained in:
parent
9870bfdf7e
commit
2a2fc79524
@ -4,11 +4,12 @@ import {
|
||||
Route,
|
||||
Switch
|
||||
} from 'react-router-dom'
|
||||
import { CContainer, CFade } from '@coreui/react'
|
||||
import { CFade } from '@coreui/react'
|
||||
import { CContainer } from '@coreui/react-ts'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
|
||||
|
||||
const loading = (
|
||||
<div className="pt-3 text-center">
|
||||
<div className="sk-spinner sk-spinner-pulse"></div>
|
||||
|
@ -5,6 +5,8 @@ import {
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
} from '@coreui/react-ts'
|
||||
import {
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
@ -17,7 +19,7 @@ const TheHeaderDropdownMssg = () => {
|
||||
direction="down"
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
|
||||
<CIcon name="cil-envelope-open" /><CBadge shape="rounded-pill" color="info">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu className="pt-0" placement="bottom-end">
|
||||
<CDropdownItem
|
||||
|
@ -17,7 +17,7 @@ const TheHeaderDropdownNotif = () => {
|
||||
>
|
||||
<CDropdownToggle className="c-header-nav-link" caret={false}>
|
||||
<CIcon name="cil-bell"/>
|
||||
<CBadge shape="pill" color="danger">{itemsCount}</CBadge>
|
||||
<CBadge shape="rounded-pill" color="danger">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
|
@ -17,7 +17,7 @@ const TheHeaderDropdownTasks = () => {
|
||||
>
|
||||
<CDropdownToggle>
|
||||
<CIcon name="cil-list" />
|
||||
<CBadge shape="pill" color="warning">{itemsCount}</CBadge>
|
||||
<CBadge shape="rounded-pill" color="warning">{itemsCount}</CBadge>
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end" className="pt-0">
|
||||
<CDropdownItem
|
||||
|
@ -8,7 +8,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Dashboard',
|
||||
to: '/dashboard',
|
||||
icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
|
||||
icon: <CIcon name="cil-speedometer" customClasses="nav-icon"/>,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -23,14 +23,14 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Colors',
|
||||
to: '/theme/colors',
|
||||
icon: 'cil-drop',
|
||||
icon: <CIcon name="cil-drop" customClasses="nav-icon"/>,
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Typography',
|
||||
to: '/theme/typography',
|
||||
icon: 'cil-pencil',
|
||||
icon: <CIcon name="cil-pencil" customClasses="nav-icon"/>,
|
||||
},
|
||||
{
|
||||
_component: 'CNavTitle',
|
||||
@ -41,7 +41,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Base',
|
||||
to: '/to',
|
||||
icon: 'cil-puzzle',
|
||||
icon: <CIcon name="cil-puzzle" customClasses="nav-icon"/>,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -145,7 +145,7 @@ const _nav = [
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Buttons',
|
||||
// route: '/buttons',
|
||||
icon: 'cil-cursor',
|
||||
icon: <CIcon name="cil-cursor" customClasses="nav-icon"/>,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -178,13 +178,13 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Charts',
|
||||
to: '/charts',
|
||||
icon: 'cil-chart-pie'
|
||||
icon: <CIcon name="cil-chart-pie" customClasses="nav-icon"/>
|
||||
},
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Icons',
|
||||
// route: '/icons',
|
||||
icon: 'cil-star',
|
||||
icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -214,7 +214,7 @@ const _nav = [
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Notifications',
|
||||
// route: '/notifications',
|
||||
icon: 'cil-bell',
|
||||
icon: <CIcon name="cil-bell" customClasses="nav-icon"/>,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -247,7 +247,7 @@ const _nav = [
|
||||
as: NavLink,
|
||||
anchor: 'Widgets',
|
||||
to: '/widgets',
|
||||
icon: 'cil-calculator',
|
||||
icon: <CIcon name="cil-calculator" customClasses="nav-icon"/>,
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW',
|
||||
@ -263,7 +263,7 @@ const _nav = [
|
||||
{
|
||||
_component: 'CNavGroup',
|
||||
anchor: 'Pages',
|
||||
icon: 'cil-star',
|
||||
icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
@ -294,7 +294,7 @@ const _nav = [
|
||||
// {
|
||||
// _component: 'CNavItem',
|
||||
// anchor: 'Disabled',
|
||||
// icon: 'cil-ban',
|
||||
// icon: <CIcon name="cil-ban" customClasses="nav-icon"/>,
|
||||
// badge: {
|
||||
// color: 'secondary',
|
||||
// text: 'NEW',
|
||||
@ -315,7 +315,7 @@ const _nav = [
|
||||
// anchor: 'Label danger',
|
||||
// to: '',
|
||||
// icon: {
|
||||
// anchor: 'cil-star',
|
||||
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
|
||||
// classanchor: 'text-danger'
|
||||
// },
|
||||
// label: true
|
||||
@ -325,7 +325,7 @@ const _nav = [
|
||||
// anchor: 'Label info',
|
||||
// to: '',
|
||||
// icon: {
|
||||
// anchor: 'cil-star',
|
||||
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
|
||||
// classanchor: 'text-info'
|
||||
// },
|
||||
// label: true
|
||||
@ -335,7 +335,7 @@ const _nav = [
|
||||
// anchor: 'Label warning',
|
||||
// to: '',
|
||||
// icon: {
|
||||
// anchor: 'cil-star',
|
||||
// anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
|
||||
// classanchor: 'text-warning'
|
||||
// },
|
||||
// label: true
|
||||
|
@ -88,7 +88,7 @@ const Cards = () => {
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge shape="pill" color="danger" className="float-end">42</CBadge>
|
||||
<CBadge shape="rounded-pill" color="danger" className="float-end">42</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||
|
@ -11,7 +11,7 @@ import {
|
||||
CCarouselItem,
|
||||
CCol,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const slides = [
|
||||
|
@ -7,8 +7,10 @@ import {
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CCollapse,
|
||||
CFade,
|
||||
CRow
|
||||
} from '@coreui/react-ts';
|
||||
import {
|
||||
CFade,
|
||||
} from '@coreui/react';
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
|
@ -309,20 +309,20 @@ const BasicForms = () => {
|
||||
className="me-1"
|
||||
color="danger"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
shape="rounded-pill"
|
||||
/>
|
||||
<CSwitch
|
||||
className="me-1"
|
||||
color="info"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
shape="rounded-pill"
|
||||
variant="outline"
|
||||
/>
|
||||
<CSwitch
|
||||
className="me-1"
|
||||
color="dark"
|
||||
defaultChecked
|
||||
shape="pill"
|
||||
shape="rounded-pill"
|
||||
variant="opposite"
|
||||
/>
|
||||
</CCol>
|
||||
|
@ -1,4 +1,9 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CJumbotron,
|
||||
CEmbed,
|
||||
CEmbedItem
|
||||
} from '@coreui/react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
@ -6,11 +11,8 @@ import {
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CContainer,
|
||||
CJumbotron,
|
||||
CRow,
|
||||
CEmbed,
|
||||
CEmbedItem
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Jumbotrons = () => {
|
||||
|
@ -159,15 +159,15 @@ const ListGroups = () => {
|
||||
<CListGroup>
|
||||
<CListGroupItem className="justify-content-between">
|
||||
Cras justo odio
|
||||
<CBadge className="float-end" shape="pill" color="primary">14</CBadge>
|
||||
<CBadge className="float-end" shape="rounded-pill" color="primary">14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem className="justify-content-between">
|
||||
Dapibus ac facilisis in
|
||||
<CBadge className="float-end" shape="pill" color="primary">2</CBadge>
|
||||
<CBadge className="float-end" shape="rounded-pill" color="primary">2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem className="justify-content-between">
|
||||
Morbi leo risus
|
||||
<CBadge className="float-end" shape="pill" color="primary">1</CBadge>
|
||||
<CBadge className="float-end" shape="rounded-pill" color="primary">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
|
@ -3,8 +3,9 @@ import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CPagination
|
||||
} from '@coreui/react'
|
||||
CPagination,
|
||||
CPaginationItem
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
|
||||
@ -20,11 +21,13 @@ const Paginations = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination
|
||||
activePage={currentPage}
|
||||
pages={10}
|
||||
onActivePageChange={setCurrentPage}
|
||||
/>
|
||||
<CPagination>
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
<br></br>
|
||||
|
||||
<h6>Small</h6>
|
||||
|
@ -4,11 +4,11 @@ import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CLink,
|
||||
CPopover,
|
||||
CRow,
|
||||
CCol,
|
||||
} from '@coreui/react-ts'
|
||||
import { CLink } from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Popovers = () => {
|
||||
|
@ -1,13 +1,15 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CDataTable,
|
||||
} from '@coreui/react'
|
||||
import {
|
||||
CBadge,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDataTable,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
import usersData from '../../users/UsersData'
|
||||
|
@ -4,13 +4,11 @@ import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CLink,
|
||||
CTooltip,
|
||||
CRow,
|
||||
CCol,
|
||||
} from '@coreui/react-ts'
|
||||
import {
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Tooltips = () => {
|
||||
|
@ -6,7 +6,7 @@ import {
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const BrandButtons = () => {
|
||||
|
@ -1,8 +1,10 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCallout,
|
||||
CDropdown,
|
||||
CButtonGroup,
|
||||
CButtonToolbar,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
@ -15,10 +17,6 @@ import {
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react-ts'
|
||||
import {
|
||||
CButtonToolbar,
|
||||
CCallout
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const ButtonGroups = () => {
|
||||
|
@ -436,31 +436,31 @@ const Buttons = () => {
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="pill" color="primary">Primary</CButton>
|
||||
<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="pill" color="secondary">Secondary</CButton>
|
||||
<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="pill" color="success">Success</CButton>
|
||||
<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="pill" color="warning">Warning</CButton>
|
||||
<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="pill" color="danger">Danger</CButton>
|
||||
<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="pill" color="info">Info</CButton>
|
||||
<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="pill" color="light">Light</CButton>
|
||||
<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="pill" color="dark">Dark</CButton>
|
||||
<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="pill" color="link">Link</CButton>
|
||||
<CButton shape="rounded-pill" color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
@ -468,31 +468,31 @@ const Buttons = () => {
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton active shape="pill" color="primary" aria-pressed="true">Primary</CButton>
|
||||
<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="pill" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
<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="pill" color="success" aria-pressed="true">Success</CButton>
|
||||
<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="pill" color="warning" aria-pressed="true">Warning</CButton>
|
||||
<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="pill" color="danger" aria-pressed="true">Danger</CButton>
|
||||
<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="pill" color="info" aria-pressed="true">Info</CButton>
|
||||
<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="pill" color="light" aria-pressed="true">Light</CButton>
|
||||
<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="pill" color="dark" aria-pressed="true">Dark</CButton>
|
||||
<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="pill" color="link" aria-pressed="true">Link</CButton>
|
||||
<CButton active shape="rounded-pill" color="link" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
@ -500,31 +500,31 @@ const Buttons = () => {
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
|
||||
<CButton shape="pill" color="primary" disabled>Primary</CButton>
|
||||
<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="pill" color="secondary" disabled>Secondary</CButton>
|
||||
<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="pill" color="success" disabled>Success</CButton>
|
||||
<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="pill" color="warning" disabled>Warning</CButton>
|
||||
<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="pill" color="danger" disabled>Danger</CButton>
|
||||
<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="pill" color="info" disabled>Info</CButton>
|
||||
<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="pill" color="light" disabled>Light</CButton>
|
||||
<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="pill" color="dark" disabled>Dark</CButton>
|
||||
<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="pill" color="link" disabled>Link</CButton>
|
||||
<CButton shape="rounded-pill" color="link" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
@ -553,7 +553,7 @@ const Buttons = () => {
|
||||
<CButton shape="square" color="warning" size="sm">Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
|
||||
<CButton shape="rounded-pill" color="danger" size="sm">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
@ -573,7 +573,7 @@ const Buttons = () => {
|
||||
<CButton shape="square" color="warning">Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="pill" color="danger">Pill Button</CButton>
|
||||
<CButton shape="rounded-pill" color="danger">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="align-items-center mt-3">
|
||||
@ -593,7 +593,7 @@ const Buttons = () => {
|
||||
<CButton shape="square" color="warning" size="lg">Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="mb-3 mb-xl-0 text-center">
|
||||
<CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
|
||||
<CButton shape="rounded-pill" color="danger" size="lg">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
@ -626,7 +626,7 @@ const Buttons = () => {
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" className="text-center mt-3">
|
||||
<CButton shape="pill" color="danger">
|
||||
<CButton shape="rounded-pill" color="danger">
|
||||
<CIcon name="cil-lightbulb" />Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
|
@ -4,7 +4,7 @@ import {
|
||||
CCardBody,
|
||||
CCardGroup,
|
||||
CCardHeader
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import {
|
||||
CChartBar,
|
||||
CChartLine,
|
||||
|
@ -1,13 +1,11 @@
|
||||
import React, { lazy } from 'react'
|
||||
import {
|
||||
CCallout
|
||||
} from '@coreui/react'
|
||||
|
||||
import {
|
||||
CAvatar,
|
||||
CBadge,
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCallout,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardFooter,
|
||||
@ -221,10 +219,10 @@ const Dashboard = () => {
|
||||
</div>
|
||||
<div className="legend text-center">
|
||||
<small>
|
||||
<sup className="px-1"><CBadge shape="pill" color="info"> </CBadge></sup>
|
||||
<sup className="px-1"><CBadge shape="rounded-pill" color="info"> </CBadge></sup>
|
||||
New clients
|
||||
|
||||
<sup className="px-1"><CBadge shape="pill" color="danger"> </CBadge></sup>
|
||||
<sup className="px-1"><CBadge shape="rounded-pill" color="danger"> </CBadge></sup>
|
||||
Recurring clients
|
||||
</small>
|
||||
</div>
|
||||
|
@ -1,7 +1,4 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CLink,
|
||||
} from '@coreui/react'
|
||||
import {
|
||||
CAlert,
|
||||
CAlertHeading,
|
||||
@ -10,6 +7,7 @@ import {
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CLink,
|
||||
CProgress,
|
||||
CRow,
|
||||
} from '@coreui/react-ts'
|
||||
|
@ -30,7 +30,7 @@ const Badges = () => {
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="secondary">
|
||||
Notifications <CBadge color="primary" shape="pill" style={{ position: 'static' }}>9</CBadge>
|
||||
Notifications <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>9</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
|
@ -3,13 +3,11 @@ import {
|
||||
CButton,
|
||||
CCol,
|
||||
CContainer,
|
||||
CInput,
|
||||
CFormControl,
|
||||
CInputGroup,
|
||||
CInputGroupPrepend,
|
||||
CInputGroupAppend,
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
CRow,
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Page404 = () => {
|
||||
@ -24,15 +22,13 @@ const Page404 = () => {
|
||||
<p className="text-muted float-start">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupPrepend>
|
||||
<CInputGroupText>
|
||||
<CIcon name="cil-magnifying-glass" />
|
||||
</CInputGroupText>
|
||||
</CInputGroupPrepend>
|
||||
<CInput size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CInputGroupAppend>
|
||||
<CInputGroupText>
|
||||
<CIcon name="cil-magnifying-glass" />
|
||||
</CInputGroupText>
|
||||
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CInputGroupText>
|
||||
<CButton color="info">Search</CButton>
|
||||
</CInputGroupAppend>
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
@ -3,13 +3,11 @@ import {
|
||||
CButton,
|
||||
CCol,
|
||||
CContainer,
|
||||
CInput,
|
||||
CFormControl,
|
||||
CInputGroup,
|
||||
CInputGroupAppend,
|
||||
CInputGroupPrepend,
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Page500 = () => {
|
||||
@ -24,15 +22,13 @@ const Page500 = () => {
|
||||
<p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p>
|
||||
</span>
|
||||
<CInputGroup className="input-prepend">
|
||||
<CInputGroupPrepend>
|
||||
<CInputGroupText>
|
||||
<CIcon name="cil-magnifying-glass" />
|
||||
</CInputGroupText>
|
||||
</CInputGroupPrepend>
|
||||
<CInput size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CInputGroupAppend>
|
||||
<CInputGroupText>
|
||||
<CIcon name="cil-magnifying-glass" />
|
||||
</CInputGroupText>
|
||||
<CFormControl size="16" type="text" placeholder="What are you looking for?" />
|
||||
<CInputGroupText>
|
||||
<CButton color="info">Search</CButton>
|
||||
</CInputGroupAppend>
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
@ -6,7 +6,7 @@ import {
|
||||
CCard,
|
||||
CCardHeader,
|
||||
CCardBody
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { rgbToHex } from '@coreui/utils'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
|
@ -3,7 +3,7 @@ import {
|
||||
CCard,
|
||||
CCardHeader,
|
||||
CCardBody
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Typography = () => {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
import usersData from './UsersData'
|
||||
|
@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CCardFooter,
|
||||
CCardGroup,
|
||||
CCol,
|
||||
CLink,
|
||||
CRow,
|
||||
CProgress
|
||||
} from '@coreui/react-ts'
|
||||
|
||||
import {
|
||||
CCardGroup,
|
||||
CLink,
|
||||
CWidgetProgress,
|
||||
CWidgetIcon,
|
||||
CWidgetProgressIcon,
|
||||
|
Loading…
Reference in New Issue
Block a user