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

refactor: migrate part of components to CoreUI v4

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-02-11 16:42:45 +01:00
parent 9d5ba97b4d
commit d5ba135d18
20 changed files with 12752 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
migration.md
View File

@ -1,3 +1,34 @@
# Migration from version 3
## Badges
- variant="pill" --> shape="rounded-pill"
- variant="square" --> shape="rounded-0"
## List Group
- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.
## Modal
- Depracated prop `show` Use `visible` instead of.
## Popover
- Depracated prop `header` Use `title` instead of.
## Progress Bar
- Depracated prop `precision`
- Depracated prop `showLabel`
- Depracated prop `showPercentage`
- Depracated prop `showValue`
## Tabs
- Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`
# Migration from version 2
Migration from version 2 must be performed manually because the components library `@coreui/coreui-react` has been completely rewritten.

20
src/views/base/breadcrumbs/Breadcrumbs.js
View File

@ -6,10 +6,10 @@ import {
CCard,
CCardBody,
CCardHeader,
CLink,
CCol,
CRow
} from '@coreui/react'
CRow,
CLink
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
import routes from '../../../routes'
@ -28,31 +28,31 @@ const Breadcrumbs = () => {
<h6>Manual</h6>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink>Home</CLink>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Library</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink>Home</CLink>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink>Library</CLink>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Data</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink>Home</CLink>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink>Library</CLink>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink>Data</CLink>
<CLink href="#">Data</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>
<span>Bootstrap</span>
Bootstrap
</CBreadcrumbItem>
</CBreadcrumb>
</CCardBody>

5
src/views/base/cards/Cards.js
View File

@ -8,10 +8,9 @@ import {
CCol,
CRow,
CCollapse,
CFade,
CSwitch,
CLink
} from '@coreui/react'
} from '@coreui/react-ts'
import { CFade, CSwitch } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'

28
src/views/base/collapses/Collapses.js
View File

@ -8,7 +8,7 @@ import {
CCol,
CCollapse,
CFade,
CRow
CRow
} from '@coreui/react';
import { DocsLink } from 'src/reusable'
@ -99,7 +99,7 @@ const Collapses = () => {
Both</CButton>{' '}
</p>
<CRow>
<CCol>
<CCol xs>
<CCollapse show={collapseMulti[0]}>
<CCard>
<CCardBody>
@ -148,10 +148,10 @@ const Collapses = () => {
<div id="accordion">
<CCard className="mb-0">
<CCardHeader id="headingOne">
<CButton
block
color="link"
className="text-left m-0 p-0"
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 0 ? null : 0)}
>
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
@ -169,10 +169,10 @@ const Collapses = () => {
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingTwo">
<CButton
block
color="link"
className="text-left m-0 p-0"
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 1 ? null : 1)}
>
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
@ -190,10 +190,10 @@ const Collapses = () => {
</CCard>
<CCard className="mb-0">
<CCardHeader id="headingThree">
<CButton
block
color="link"
className="text-left m-0 p-0"
<CButton
block
color="link"
className="text-left m-0 p-0"
onClick={() => setAccordion(accordion === 2 ? null : 2)}
>
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>

6
src/views/base/jumbotrons/Jumbotrons.js
View File

@ -18,7 +18,7 @@ const Jumbotrons = () => {
return (
<>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Jumbotron
@ -38,7 +38,7 @@ const Jumbotrons = () => {
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Jumbotron
@ -56,7 +56,7 @@ const Jumbotrons = () => {
</CCol>
</CRow>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Embed

44
src/views/base/list-groups/ListGroups.js
View File

@ -10,7 +10,7 @@ import {
CRow,
CTabContent,
CTabPane
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
@ -91,15 +91,15 @@ const ListGroups = () => {
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem action>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem action color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem action color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem action color="success">This is a success list group item</CListGroupItem>
<CListGroupItem action color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem action color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem action color="info">This is a info list group item</CListGroupItem>
<CListGroupItem action color="light">This is a light list group item</CListGroupItem>
<CListGroupItem action color="dark">This is a dark list group item</CListGroupItem>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="button" color="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem component="button" color="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem component="button" color="success">This is a success list group item</CListGroupItem>
<CListGroupItem component="button" color="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem component="button" color="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem component="button" color="info">This is a info list group item</CListGroupItem>
<CListGroupItem component="button" color="light">This is a light list group item</CListGroupItem>
<CListGroupItem component="button" color="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
@ -184,7 +184,7 @@ const ListGroups = () => {
<CCardBody>
<CListGroup>
<CListGroupItem action active>
<CListGroupItem component="a" active>
<h5 className="d-flex w-100 justify-content-between">
List group item heading
<small>3 days ago</small>
@ -194,14 +194,14 @@ const ListGroups = () => {
<small>Donec id elit non mi porta.</small>
</div>
</CListGroupItem>
<CListGroupItem action>
<CListGroupItem component="a">
<h5>List group item heading</h5>
<div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</div>
<small>Small.</small>
</CListGroupItem>
<CListGroupItem action>
<CListGroupItem component="a">
<h5>List group item heading</h5>
<div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
@ -215,7 +215,7 @@ const ListGroups = () => {
</CCol>
</CRow>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
List group
@ -225,34 +225,34 @@ const ListGroups = () => {
<CRow>
<CCol xs="4">
<CListGroup id="list-tab" role="tablist">
<CListGroupItem onClick={() => setActiveTab(0)} action active={activeTab === 0} >Home</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(1)} action active={activeTab === 1} >Profile</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(2)} action active={activeTab === 2} >Messages</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(3)} action active={activeTab === 3} >Settings</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(0)} component="button" active={activeTab === 0} >Home</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(1)} component="button" active={activeTab === 1} >Profile</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(2)} component="button" active={activeTab === 2} >Messages</CListGroupItem>
<CListGroupItem onClick={() => setActiveTab(3)} component="button" active={activeTab === 3} >Settings</CListGroupItem>
</CListGroup>
</CCol>
<CCol xs="8">
<CTabContent>
<CTabPane active={activeTab === 0} >
<CTabPane visible={activeTab === 0} >
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
</CTabPane>
<CTabPane active={activeTab === 1}>
<CTabPane visible={activeTab === 1}>
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
</CTabPane>
<CTabPane active={activeTab === 2}>
<CTabPane visible={activeTab === 2}>
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
laborum elit adipisicing pariatur cillum.</p>
</CTabPane>
<CTabPane active={activeTab === 3}>
<CTabPane visible={activeTab === 3}>
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco

10
src/views/base/navs/Navs.js
View File

@ -12,7 +12,7 @@ import {
CNav,
CNavItem,
CNavLink
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Navs = () => {
@ -244,8 +244,8 @@ const Navs = () => {
<CNavItem>
<CNavLink active>Link</CNavLink>
</CNavItem>
<CDropdown inNav>
<CDropdownToggle caret>
<CDropdown variant="nav-item">
<CDropdownToggle>
Dropdown
</CDropdownToggle>
<CDropdownMenu>
@ -278,8 +278,8 @@ const Navs = () => {
<CNavItem>
<CNavLink active>Link</CNavLink>
</CNavItem>
<CDropdown inNav>
<CDropdownToggle caret>
<CDropdown variant="nav-item">
<CDropdownToggle>
Dropdown
</CDropdownToggle>
<CDropdownMenu>

15
src/views/base/popovers/Popovers.js
View File

@ -7,8 +7,8 @@ import {
CPopover,
CRow,
CCol,
CLink
} from '@coreui/react'
} from '@coreui/react-ts'
import { CLink } from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Popovers = () => {
@ -35,25 +35,25 @@ const Popovers = () => {
<p className="muted">
Tight pants next level keffiyeh
<CPopover header="Popover header" content="Popover text">
<CPopover title="Popover header" content="Popover text">
<CLink> you probably </CLink>
</CPopover>
haven't heard of them.
Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
sustainable quinoa 8-bit american apparel
<CPopover header="Popover header" content="Popover text">
<CPopover title="Popover header" content="Popover text">
<CLink> have a </CLink>
</CPopover>
terry richardson vinyl chambray. Beard stumptown,
cardigans banh mi lomo thundercats. Tofu biodiesel
williamsburg marfa, four loko mcsweeney''s cleanse
vegan chambray. A really ironic artisan
<CPopover header="Popover header" content="Popover text">
<CPopover title="Popover header" content="Popover text">
<CLink> whatever keytar </CLink>
</CPopover>
scenester farm-to-table banksy Austin
<CPopover header="Popover header" content="Popover text">
<CPopover title="Popover header" content="Popover text">
<CLink> twitter handle </CLink>
</CPopover>
@ -78,10 +78,9 @@ const Popovers = () => {
className="py-4 text-center"
key={placement}
>
<CPopover header="Popover header"
<CPopover title="Popover header"
content={`Popover with placement: ${placement}`}
placement={placement}
interactive={true}
trigger="click"
>
<CButton color="primary">

12
src/views/base/progress-bar/ProgressBar.js
View File

@ -5,7 +5,7 @@ import {
CCardHeader,
CProgress,
CProgressBar
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const ProgressBar = () => {
@ -30,9 +30,9 @@ const ProgressBar = () => {
<small> labels</small>
</CCardHeader>
<CCardBody>
<CProgress value={25.3746472} showPercentage precision={2} className="mb-3"/>
<CProgress value={50.45} showValue className="mb-3"/>
<CProgress value={15} max={20} showPercentage className="mb-3"/>
<CProgress value={25.3746472} className="mb-3"/>
<CProgress value={50.45} className="mb-3"/>
<CProgress value={15} max={20} className="mb-3"/>
</CCardBody>
</CCard>
<CCard>
@ -41,8 +41,8 @@ const ProgressBar = () => {
<small> heights</small>
</CCardHeader>
<CCardBody>
<CProgress value={25} className="mb-3" style={{height: "3px"}}/>
<CProgress value={25} className="mb-3" style={{height: "30px"}}/>
<CProgress value={25} className="mb-3" height="3"/>
<CProgress value={25} className="mb-3" height="30"/>
</CCardBody>
</CCard>
<CCard>

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

@ -145,7 +145,7 @@ const Tables = () => {
</CRow>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Combined All Table
@ -176,7 +176,7 @@ const Tables = () => {
</CCol>
</CRow>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Combined All dark Table

150
src/views/base/tabs/Tabs.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React, { useState } from "react";
import {
CCol,
CNav,
@ -9,15 +9,16 @@ import {
CTabPane,
CCard,
CCardBody,
CTabs,
CCardHeader
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
CCardHeader,
} from "@coreui/react-ts";
import CIcon from "@coreui/icons-react";
import { DocsLink } from "src/reusable";
const Tabs = () => {
const [active, setActive] = useState(1)
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
const [activeKey, setActiveKey] = useState(1)
const [active, setActive] = useState(1);
const lorem =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.";
return (
<CRow>
@ -25,76 +26,48 @@ const Tabs = () => {
<CCard>
<CCardHeader>
Index indentifiers
<DocsLink name="CTabs"/>
<DocsLink name="CTabs" />
</CCardHeader>
<CCardBody>
<CTabs>
<CNav variant="tabs">
<CNavItem>
<CNavLink>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
Profile
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
Messages
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane>
{`1. ${lorem}`}
</CTabPane>
<CTabPane>
{`2. ${lorem}`}
</CTabPane>
<CTabPane>
{`3. ${lorem}`}
</CTabPane>
</CTabContent>
</CTabs>
<CNav variant="tabs">
<CNavItem>
<CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>Home</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>Profile</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>Messages</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane visible={activeKey === 1}>{`1. ${lorem}`}</CTabPane>
<CTabPane visible={activeKey === 2}>{`2. ${lorem}`}</CTabPane>
<CTabPane visible={activeKey === 3}>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6" className="mb-4">
{/* <CCol xs="12" md="6" className="mb-4">
<CCard>
<CCardHeader>
Id indentifiers
</CCardHeader>
<CCardHeader>Id indentifiers</CCardHeader>
<CCardBody>
<CTabs activeTab="home">
<CNav variant="tabs">
<CNavItem>
<CNavLink data-tab="home">
Home
</CNavLink>
<CNavLink data-tab="home">Home</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink data-tab="profile">
Profile
</CNavLink>
<CNavLink data-tab="profile">Profile</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink data-tab="messages">
Messages
</CNavLink>
<CNavLink data-tab="messages">Messages</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane data-tab="home">
{`1. ${lorem}`}
</CTabPane>
<CTabPane data-tab="profile">
{`2. ${lorem}`}
</CTabPane>
<CTabPane data-tab="messages">
{`3. ${lorem}`}
</CTabPane>
<CTabPane data-tab="home">{`1. ${lorem}`}</CTabPane>
<CTabPane data-tab="profile">{`2. ${lorem}`}</CTabPane>
<CTabPane data-tab="messages">{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
@ -103,9 +76,7 @@ const Tabs = () => {
<CCol xs="12" md="6" className="mb-4">
<CCard>
<CCardHeader>
No fade animation tabs
</CCardHeader>
<CCardHeader>No fade animation tabs</CCardHeader>
<CCardBody>
<CTabs>
<CNav variant="tabs">
@ -121,20 +92,14 @@ const Tabs = () => {
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-chart-pie"/>
<CIcon name="cil-chart-pie" />
</CNavLink>
</CNavItem>
</CNav>
<CTabContent fade={false}>
<CTabPane>
{`1. ${lorem}`}
</CTabPane>
<CTabPane>
{`2. ${lorem}`}
</CTabPane>
<CTabPane>
{`3. ${lorem}`}
</CTabPane>
<CTabPane>{`1. ${lorem}`}</CTabPane>
<CTabPane>{`2. ${lorem}`}</CTabPane>
<CTabPane>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
@ -143,48 +108,43 @@ const Tabs = () => {
<CCol xs="12" md="6" className="mb-4">
<CCard>
<CCardHeader>
Controlled tabs
</CCardHeader>
<CCardHeader>Controlled tabs</CCardHeader>
<CCardBody>
<CTabs activeTab={active} onActiveTabChange={idx => setActive(idx)}>
<CTabs
activeTab={active}
onActiveTabChange={(idx) => setActive(idx)}
>
<CNav variant="tabs">
<CNavItem>
<CNavLink>
<CIcon name="cil-calculator" />
{ active === 0 && ' Home'}
{active === 0 && " Home"}
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-basket" />
{ active === 1 && ' Profile'}
{active === 1 && " Profile"}
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink>
<CIcon name="cil-chart-pie"/>
{ active === 2 && ' Messages'}
<CIcon name="cil-chart-pie" />
{active === 2 && " Messages"}
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane>
{`1. ${lorem}`}
</CTabPane>
<CTabPane>
{`2. ${lorem}`}
</CTabPane>
<CTabPane>
{`3. ${lorem}`}
</CTabPane>
<CTabPane>{`1. ${lorem}`}</CTabPane>
<CTabPane>{`2. ${lorem}`}</CTabPane>
<CTabPane>{`3. ${lorem}`}</CTabPane>
</CTabContent>
</CTabs>
</CCardBody>
</CCard>
</CCol>
</CCol> */}
</CRow>
)
}
);
};
export default Tabs
export default Tabs;

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

@ -7,6 +7,8 @@ import {
CTooltip,
CRow,
CCol,
} from '@coreui/react-ts'
import {
CLink
} from '@coreui/react'
import { DocsLink } from 'src/reusable'

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

@ -3,7 +3,6 @@ import {
CButton,
CDropdown,
CButtonGroup,
CButtonToolbar,
CCard,
CCardBody,
CCardHeader,
@ -11,11 +10,14 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CRow,
} from '@coreui/react-ts'
import {
CButtonToolbar,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow,
CCallout
} from '@coreui/react'
import { DocsLink } from 'src/reusable'

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

@ -6,7 +6,7 @@ import {
CCardHeader,
CCol,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
@ -24,31 +24,31 @@ const Buttons = () => {
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="primary">Primary</CButton>
<CButton href="#" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="secondary">Secondary</CButton>
<CButton color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="success">Success</CButton>
<CButton color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="warning">Warning</CButton>
<CButton color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="danger">Danger</CButton>
<CButton color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="info">Info</CButton>
<CButton color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="light">Light</CButton>
<CButton color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="dark">Dark</CButton>
<CButton color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="link">Link</CButton>
<CButton color="link">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -56,31 +56,31 @@ const Buttons = () => {
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block color="primary" aria-pressed="true">Primary</CButton>
<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 block color="secondary" aria-pressed="true">Secondary</CButton>
<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 block color="success" aria-pressed="true">Success</CButton>
<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 block color="warning" aria-pressed="true">Warning</CButton>
<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 block color="danger" aria-pressed="true">Danger</CButton>
<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 block color="info" aria-pressed="true">Info</CButton>
<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 block color="light" aria-pressed="true">Light</CButton>
<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 block color="dark" aria-pressed="true">Dark</CButton>
<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 block color="link" aria-pressed="true">Link</CButton>
<CButton active color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -88,38 +88,38 @@ const Buttons = () => {
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="primary" disabled>Primary</CButton>
<CButton color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="secondary" disabled>Secondary</CButton>
<CButton color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="success" disabled>Success</CButton>
<CButton color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="warning" disabled>Warning</CButton>
<CButton color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="danger" disabled>Danger</CButton>
<CButton color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="info" disabled>Info</CButton>
<CButton color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="light" disabled>Light</CButton>
<CButton color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="dark" disabled>Dark</CButton>
<CButton color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block color="link" disabled>Link</CButton>
<CButton color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
variant="outline" Buttons
layout="outline" Buttons
</CCardHeader>
<CCardBody>
<p>
@ -130,28 +130,28 @@ const Buttons = () => {
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="primary">Primary</CButton>
<CButton layout="outline" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="secondary">Secondary</CButton>
<CButton layout="outline" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="success">Success</CButton>
<CButton layout="outline" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="warning">Warning</CButton>
<CButton layout="outline" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="danger">Danger</CButton>
<CButton layout="outline" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="info">Info</CButton>
<CButton layout="outline" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="light">Light</CButton>
<CButton layout="outline" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="dark">Dark</CButton>
<CButton layout="outline" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
</CRow>
@ -160,28 +160,28 @@ const Buttons = () => {
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" active color="primary" aria-pressed="true">Primary</CButton>
<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 block variant="outline" active color="secondary" aria-pressed="true">Secondary</CButton>
<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 block variant="outline" active color="success" aria-pressed="true">Success</CButton>
<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 block variant="outline" active color="warning" aria-pressed="true">Warning</CButton>
<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 block variant="outline" active color="danger" aria-pressed="true">Danger</CButton>
<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 block variant="outline" active color="info" aria-pressed="true">Info</CButton>
<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 block variant="outline" active color="light" aria-pressed="true">Light</CButton>
<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 block variant="outline" active color="dark" aria-pressed="true">Dark</CButton>
<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>
@ -190,28 +190,28 @@ const Buttons = () => {
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
<CButton layout="outline" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
<CButton layout="outline" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="success" disabled>Success</CButton>
<CButton layout="outline" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
<CButton layout="outline" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
<CButton layout="outline" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="info" disabled>Info</CButton>
<CButton layout="outline" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="light" disabled>Light</CButton>
<CButton layout="outline" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
<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>
@ -219,39 +219,39 @@ const Buttons = () => {
</CCard>
<CCard>
<CCardHeader>
variant="ghost" Buttons
layout="ghost" Buttons
</CCardHeader>
<CCardBody>
<p>
Use <code>.btn-ghost-*</code> class for variant="ghost" buttons.
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 block variant="ghost" color="primary">Primary</CButton>
<CButton layout="ghost" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="secondary">Secondary</CButton>
<CButton layout="ghost" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="success">Success</CButton>
<CButton layout="ghost" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="warning">Warning</CButton>
<CButton layout="ghost" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="danger">Danger</CButton>
<CButton layout="ghost" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="info">Info</CButton>
<CButton layout="ghost" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="light">Light</CButton>
<CButton layout="ghost" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="dark">Dark</CButton>
<CButton layout="ghost" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></CCol>
</CRow>
@ -260,28 +260,28 @@ const Buttons = () => {
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block active variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
<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 block active variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
<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 block active variant="ghost" color="success" aria-pressed="true">Success</CButton>
<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 block active variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
<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 block active variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
<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 block active variant="ghost" color="info" aria-pressed="true">Info</CButton>
<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 block active variant="ghost" color="light" aria-pressed="true">Light</CButton>
<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 block active variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
<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>
@ -290,28 +290,28 @@ const Buttons = () => {
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
<CButton layout="ghost" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
<CButton layout="ghost" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="success" disabled>Success</CButton>
<CButton layout="ghost" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
<CButton layout="ghost" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
<CButton layout="ghost" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="info" disabled>Info</CButton>
<CButton layout="ghost" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="light" disabled>Light</CButton>
<CButton layout="ghost" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
<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>
@ -330,31 +330,31 @@ const Buttons = () => {
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="primary">Primary</CButton>
<CButton shape="square" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="secondary">Secondary</CButton>
<CButton shape="square" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="success">Success</CButton>
<CButton shape="square" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="warning">Warning</CButton>
<CButton shape="square" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="danger">Danger</CButton>
<CButton shape="square" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="info">Info</CButton>
<CButton shape="square" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="light">Light</CButton>
<CButton shape="square" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="dark">Dark</CButton>
<CButton shape="square" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="link">Link</CButton>
<CButton shape="square" color="link">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -362,31 +362,31 @@ const Buttons = () => {
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="square" color="primary" aria-pressed="true">Primary</CButton>
<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 block shape="square" color="secondary" aria-pressed="true">Secondary</CButton>
<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 block shape="square" color="success" aria-pressed="true">Success</CButton>
<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 block shape="square" color="warning" aria-pressed="true">Warning</CButton>
<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 block shape="square" color="danger" aria-pressed="true">Danger</CButton>
<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 block shape="square" color="info" aria-pressed="true">Info</CButton>
<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 block shape="square" color="light" aria-pressed="true">Light</CButton>
<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 block shape="square" color="dark" aria-pressed="true">Dark</CButton>
<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 block shape="square" color="link" aria-pressed="true">Link</CButton>
<CButton active shape="square" color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow className="align-items-center mt-3">
@ -394,31 +394,31 @@ const Buttons = () => {
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="primary" disabled>Primary</CButton>
<CButton shape="square" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="secondary" disabled>Secondary</CButton>
<CButton shape="square" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="success" disabled>Success</CButton>
<CButton shape="square" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="warning" disabled>Warning</CButton>
<CButton shape="square" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="danger" disabled>Danger</CButton>
<CButton shape="square" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="info" disabled>Info</CButton>
<CButton shape="square" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="light" disabled>Light</CButton>
<CButton shape="square" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="dark" disabled>Dark</CButton>
<CButton shape="square" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="square" color="link" disabled>Link</CButton>
<CButton shape="square" color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@ -436,31 +436,31 @@ const Buttons = () => {
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="primary" className="">Primary</CButton>
<CButton shape="pill" color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="secondary">Secondary</CButton>
<CButton shape="pill" color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="success">Success</CButton>
<CButton shape="pill" color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="warning">Warning</CButton>
<CButton shape="pill" color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="danger">Danger</CButton>
<CButton shape="pill" color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="info">Info</CButton>
<CButton shape="pill" color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="light">Light</CButton>
<CButton shape="pill" color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="dark">Dark</CButton>
<CButton shape="pill" color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="link">Link</CButton>
<CButton shape="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 block shape="pill" color="primary" aria-pressed="true">Primary</CButton>
<CButton active shape="pill" color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
<CButton active shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="success" aria-pressed="true">Success</CButton>
<CButton active shape="pill" color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="warning" aria-pressed="true">Warning</CButton>
<CButton active shape="pill" color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="danger" aria-pressed="true">Danger</CButton>
<CButton active shape="pill" color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="info" aria-pressed="true">Info</CButton>
<CButton active shape="pill" color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="light" aria-pressed="true">Light</CButton>
<CButton active shape="pill" color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="dark" aria-pressed="true">Dark</CButton>
<CButton active shape="pill" color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton active block shape="pill" color="link" aria-pressed="true">Link</CButton>
<CButton active shape="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 block shape="pill" color="primary" disabled>Primary</CButton>
<CButton shape="pill" color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="secondary" disabled>Secondary</CButton>
<CButton shape="pill" color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="success" disabled>Success</CButton>
<CButton shape="pill" color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="warning" disabled>Warning</CButton>
<CButton shape="pill" color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="danger" disabled>Danger</CButton>
<CButton shape="pill" color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="info" disabled>Info</CButton>
<CButton shape="pill" color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="light" disabled>Light</CButton>
<CButton shape="pill" color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="dark" disabled>Dark</CButton>
<CButton shape="pill" color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<CButton block shape="pill" color="link" disabled>Link</CButton>
<CButton shape="pill" color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@ -544,10 +544,10 @@ const Buttons = () => {
<CButton color="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton color="secondary" variant="outline" size="sm">Outline Button</CButton>
<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" variant="ghost" color="ghost">Ghost Button</CButton>
<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>
@ -564,10 +564,10 @@ const Buttons = () => {
<CButton color="primary">Standard Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton variant="outline" color="secondary" >Outline Button</CButton>
<CButton layout="outline" color="secondary" >Outline Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton variant="ghost" color="success">Ghost Button</CButton>
<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>
@ -584,10 +584,10 @@ const Buttons = () => {
<CButton color="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2"className="mb-3 mb-xl-0 text-center">
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
<CButton layout="outline" color="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" className="mb-3 mb-xl-0 text-center">
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
<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>
@ -611,12 +611,12 @@ const Buttons = () => {
</CButton>
</CCol>
<CCol col="2" className="text-center mt-3">
<CButton color="secondary" variant='outline'>
<CButton color="secondary" layout='outline'>
<CIcon name="cil-lightbulb" />Outline Button
</CButton>
</CCol>
<CCol col="2" className="text-center mt-3">
<CButton variant="ghost" color="success">
<CButton layout="ghost" color="success">
<CIcon name="cil-lightbulb" />Ghost Button
</CButton>
</CCol>
@ -637,34 +637,34 @@ const Buttons = () => {
<CCol xs="12" md="6">
<CCard>
<CCardHeader>
Block Level Buttons
Level Buttons
</CCardHeader>
<CCardBody>
<p>Add prop <code>block</code></p>
<CButton color="secondary" size="lg" block>Block level button</CButton>
<CButton color="primary" size="lg" block>Block level button</CButton>
<CButton color="success" size="lg" block>Block level button</CButton>
<CButton color="info" size="lg" block>Block level button</CButton>
<CButton color="warning" size="lg" block>Block level button</CButton>
<CButton color="danger" size="lg" block>Block level button</CButton>
<CButton color="link" size="lg" block>Block level button</CButton>
<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>
<CCardHeader>
Block Level Buttons
Level Buttons
</CCardHeader>
<CCardBody>
<p>Add prop <code>block</code></p>
<CButton variant="outline" color="secondary" size="lg" block>Block level button</CButton>
<CButton variant="outline" color="primary" size="lg" block>Block level button</CButton>
<CButton variant="outline" color="success" size="lg" block>Block level button</CButton>
<CButton variant="outline" color="info" size="lg" block>Block level button</CButton>
<CButton variant="outline" color="warning" size="lg" block>Block level button</CButton>
<CButton variant="outline" color="danger" size="lg" block>Block level button</CButton>
<CButton variant="ghost" color="info" size="lg" block>Block level button</CButton>
<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>

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

@ -110,7 +110,7 @@ const Dashboard = () => {
<WidgetsBrand withCharts/>
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Traffic {' & '} Sales

13
src/views/notifications/alerts/Alerts.js
View File

@ -1,15 +1,18 @@
import React from 'react'
import {
CLink,
} from '@coreui/react'
import {
CAlert,
CAlertHeading,
CButton,
CCard,
CCardBody,
CCardHeader,
CCol,
CLink,
CProgress,
CRow
} from '@coreui/react'
CRow,
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Alerts = () => {
@ -120,7 +123,7 @@ const Alerts = () => {
</CCardHeader>
<CCardBody>
<CAlert color="success">
<h4 className="alert-heading">Well done!</h4>
<CAlertHeading>Well done!</CAlertHeading>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
@ -143,7 +146,7 @@ const Alerts = () => {
<CCardBody>
<CAlert
color="info"
closeButton
dismissible
>
I am an dismissible alert!
</CAlert>

38
src/views/notifications/badges/Badges.js
View File

@ -1,14 +1,14 @@
import React from 'react'
import {
CBadge,
CButton,
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CBadge,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Badges = () => {
@ -58,30 +58,30 @@ const Badges = () => {
<small> pill badges</small>
</CCardHeader>
<CCardBody>
<CBadge className="mr-1" color="primary" shape="pill">Primary</CBadge>
<CBadge className="mr-1" color="secondary" shape="pill">Secondary</CBadge>
<CBadge className="mr-1" color="success" shape="pill">Success</CBadge>
<CBadge className="mr-1" color="danger" shape="pill">Danger</CBadge>
<CBadge className="mr-1" color="warning" shape="pill">Warning</CBadge>
<CBadge className="mr-1" color="info" shape="pill">Info</CBadge>
<CBadge className="mr-1" color="light" shape="pill">Light</CBadge>
<CBadge className="mr-1" color="dark" shape="pill">Dark</CBadge>
<CBadge className="mr-1" color="primary" shape="rounded-pill">Primary</CBadge>
<CBadge className="mr-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
<CBadge className="mr-1" color="success" shape="rounded-pill">Success</CBadge>
<CBadge className="mr-1" color="danger" shape="rounded-pill">Danger</CBadge>
<CBadge className="mr-1" color="warning" shape="rounded-pill">Warning</CBadge>
<CBadge className="mr-1" color="info" shape="rounded-pill">Info</CBadge>
<CBadge className="mr-1" color="light" shape="rounded-pill">Light</CBadge>
<CBadge className="mr-1" color="dark" shape="rounded-pill">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Badges
<small> links</small>
<small> square badges</small>
</CCardHeader>
<CCardBody>
<CBadge className="mr-1" href="#" color="primary">Primary</CBadge>
<CBadge className="mr-1" href="#" color="secondary">Secondary</CBadge>
<CBadge className="mr-1" href="#" color="success">Success</CBadge>
<CBadge className="mr-1" href="#" color="danger">Danger</CBadge>
<CBadge className="mr-1" href="#" color="warning">Warning</CBadge>
<CBadge className="mr-1" href="#" color="info">Info</CBadge>
<CBadge className="mr-1" href="#" color="light">Light</CBadge>
<CBadge className="mr-1" href="#" color="dark" shape="pill">Dark</CBadge>
<CBadge className="mr-1" color="primary" shape="rounded-0">Primary</CBadge>
<CBadge className="mr-1" color="secondary" shape="rounded-0">Secondary</CBadge>
<CBadge className="mr-1" color="success" shape="rounded-0">Success</CBadge>
<CBadge className="mr-1" color="danger" shape="rounded-0">Danger</CBadge>
<CBadge className="mr-1" color="warning" shape="rounded-0">Warning</CBadge>
<CBadge className="mr-1" color="info" shape="rounded-0">Info</CBadge>
<CBadge className="mr-1" color="light" shape="rounded-0">Light</CBadge>
<CBadge className="mr-1" color="dark" shape="rounded-0">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>

44
src/views/notifications/modals/Modals.js
View File

@ -11,7 +11,7 @@ import {
CModalHeader,
CModalTitle,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const Modals = () => {
@ -27,15 +27,15 @@ const Modals = () => {
return (
<CRow>
<CCol>
<CCol xs>
<CCard>
<CCardHeader>
Bootstrap Modals
<DocsLink name="CModal"/>
</CCardHeader>
<CCardBody>
<CButton
onClick={() => setModal(!modal)}
<CButton
onClick={() => setModal(!modal)}
className="mr-1"
>Launch demo modal</CButton>
<CButton onClick={() => setLarge(!large)} className="mr-1">
@ -44,8 +44,8 @@ const Modals = () => {
<CButton onClick={() => setSmall(!large)} className="mr-1">
Launch small modal
</CButton>
<CModal
show={modal}
<CModal
visible={modal}
onClose={setModal}
>
<CModalHeader closeButton>
@ -60,16 +60,16 @@ const Modals = () => {
</CModalBody>
<CModalFooter>
<CButton color="primary">Do Something</CButton>{' '}
<CButton
color="secondary"
<CButton
color="secondary"
onClick={() => setModal(false)}
>Cancel</CButton>
</CModalFooter>
</CModal>
<CModal
show={large}
<CModal
visible={large}
onClose={() => setLarge(!large)}
size="lg"
>
@ -89,8 +89,8 @@ const Modals = () => {
</CModalFooter>
</CModal>
<CModal
show={small}
<CModal
visible={small}
onClose={() => setSmall(!small)}
size="sm"
>
@ -120,8 +120,8 @@ const Modals = () => {
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
<CModal
show={primary}
<CModal
visible={primary}
onClose={() => setPrimary(!primary)}
color="primary"
>
@ -145,8 +145,8 @@ const Modals = () => {
</CModalFooter>
</CModal>
<CModal
show={success}
<CModal
visible={success}
onClose={() => setSuccess(!success)}
color="success"
>
@ -166,8 +166,8 @@ const Modals = () => {
</CModalFooter>
</CModal>
<CModal
show={warning}
<CModal
visible={warning}
onClose={() => setWarning(!warning)}
color="warning"
>
@ -187,8 +187,8 @@ const Modals = () => {
</CModalFooter>
</CModal>
<CModal
show={danger}
<CModal
visible={danger}
onClose={() => setDanger(!danger)}
color="danger"
>
@ -208,8 +208,8 @@ const Modals = () => {
</CModalFooter>
</CModal>
<CModal
show={info}
<CModal
visible={info}
onClose={() => setInfo(!info)}
color="info"
>

22
src/views/widgets/Widgets.js
View File

@ -1,15 +1,19 @@
import React from 'react'
import {
CCardGroup,
CCardFooter,
CCol,
CLink,
CRow,
CProgress,
} from '@coreui/react'
import {
CCardGroup,
CLink,
CWidgetProgress,
CWidgetIcon,
CWidgetProgressIcon,
CWidgetSimple,
CProgress,
} from '@coreui/react'
import WidgetsBrand from './WidgetsBrand'
import WidgetsDropdown from './WidgetsDropdown'
@ -94,7 +98,7 @@ const Widgets = () => {
<CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
<CIcon width={24} name="cil-bell"/>
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
@ -107,17 +111,17 @@ const Widgets = () => {
</CWidgetIcon>
</CCol>
<CCol xs="12" sm="6" lg="4">
<CWidgetIcon
text="income"
header="$1.999,50"
color="warning"
<CWidgetIcon
text="income"
header="$1.999,50"
color="warning"
iconPadding={false}
footerSlot={
<CCardFooter className="card-footer px-3 py-2">
<CLink
className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
rel="noopener norefferer"
target="_blank"
>
View more

12369
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff