refactor: migrate part of components to CoreUI v4
This commit is contained in:
Łukasz Holeczek
parent
9d5ba97b4d
commit
d5ba135d18
31
migration.md
31
migration.md
@ -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.
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ const Collapses = () => {
|
||||
Both</CButton>{' '}
|
||||
</p>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCol xs>
|
||||
<CCollapse show={collapseMulti[0]}>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
@ -28,73 +29,45 @@ const Tabs = () => {
|
||||
<DocsLink name="CTabs" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
Home
|
||||
</CNavLink>
|
||||
<CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>Home</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
Profile
|
||||
</CNavLink>
|
||||
<CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>Profile</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink>
|
||||
Messages
|
||||
</CNavLink>
|
||||
<CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>Messages</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<CTabContent>
|
||||
<CTabPane>
|
||||
{`1. ${lorem}`}
|
||||
</CTabPane>
|
||||
<CTabPane>
|
||||
{`2. ${lorem}`}
|
||||
</CTabPane>
|
||||
<CTabPane>
|
||||
{`3. ${lorem}`}
|
||||
</CTabPane>
|
||||
<CTabPane visible={activeKey === 1}>{`1. ${lorem}`}</CTabPane>
|
||||
<CTabPane visible={activeKey === 2}>{`2. ${lorem}`}</CTabPane>
|
||||
<CTabPane visible={activeKey === 3}>{`3. ${lorem}`}</CTabPane>
|
||||
</CTabContent>
|
||||
</CTabs>
|
||||
</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">
|
||||
@ -126,15 +97,9 @@ const Tabs = () => {
|
||||
</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'}
|
||||
{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;
|
||||
|
||||
@ -7,6 +7,8 @@ import {
|
||||
CTooltip,
|
||||
CRow,
|
||||
CCol,
|
||||
} from '@coreui/react-ts'
|
||||
import {
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -110,7 +110,7 @@ const Dashboard = () => {
|
||||
<WidgetsBrand withCharts/>
|
||||
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Traffic {' & '} Sales
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
CModalHeader,
|
||||
CModalTitle,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
} from '@coreui/react-ts'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Modals = () => {
|
||||
@ -27,7 +27,7 @@ const Modals = () => {
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Bootstrap Modals
|
||||
@ -45,7 +45,7 @@ const Modals = () => {
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<CModal
|
||||
show={modal}
|
||||
visible={modal}
|
||||
onClose={setModal}
|
||||
>
|
||||
<CModalHeader closeButton>
|
||||
@ -69,7 +69,7 @@ const Modals = () => {
|
||||
|
||||
|
||||
<CModal
|
||||
show={large}
|
||||
visible={large}
|
||||
onClose={() => setLarge(!large)}
|
||||
size="lg"
|
||||
>
|
||||
@ -90,7 +90,7 @@ const Modals = () => {
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
show={small}
|
||||
visible={small}
|
||||
onClose={() => setSmall(!small)}
|
||||
size="sm"
|
||||
>
|
||||
@ -121,7 +121,7 @@ const Modals = () => {
|
||||
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
||||
|
||||
<CModal
|
||||
show={primary}
|
||||
visible={primary}
|
||||
onClose={() => setPrimary(!primary)}
|
||||
color="primary"
|
||||
>
|
||||
@ -146,7 +146,7 @@ const Modals = () => {
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
show={success}
|
||||
visible={success}
|
||||
onClose={() => setSuccess(!success)}
|
||||
color="success"
|
||||
>
|
||||
@ -167,7 +167,7 @@ const Modals = () => {
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
show={warning}
|
||||
visible={warning}
|
||||
onClose={() => setWarning(!warning)}
|
||||
color="warning"
|
||||
>
|
||||
@ -188,7 +188,7 @@ const Modals = () => {
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
show={danger}
|
||||
visible={danger}
|
||||
onClose={() => setDanger(!danger)}
|
||||
color="danger"
|
||||
>
|
||||
@ -209,7 +209,7 @@ const Modals = () => {
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
show={info}
|
||||
visible={info}
|
||||
onClose={() => setInfo(!info)}
|
||||
color="info"
|
||||
>
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user