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

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-05-21 12:32:04 +02:00
parent 730bd301c2
commit d7c4c3bc6d
23 changed files with 595 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/icons/index.js
View File

@ -23,10 +23,11 @@ import {
cibVimeo, cibVimeo,
cibCcMastercard, cibCcMastercard,
cibCcVisa, cibCcVisa,
cibStripe, cibCcStripe,
cibPaypal, cibCcPaypal,
cibGooglePay, cibCcApplePay,
cibCcAmex, cibCcAmex,
cibGoogle,
} from '@coreui/icons' } from '@coreui/icons'
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons' import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
import { import {
@ -254,9 +255,10 @@ export const icons = Object.assign(
cibVimeo, cibVimeo,
cibCcMastercard, cibCcMastercard,
cibCcVisa, cibCcVisa,
cibStripe, cibCcStripe,
cibPaypal, cibCcPaypal,
cibGooglePay, cibCcApplePay,
cibCcAmex, cibCcAmex,
cibGoogle,
}, },
) )

12
src/containers/_nav.js
View File

@ -103,6 +103,12 @@ const _nav = [
anchor: 'Progress', anchor: 'Progress',
to: '/base/progress', to: '/base/progress',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Spinners',
to: '/base/spinners',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,
@ -178,6 +184,12 @@ const _nav = [
anchor: 'Input Group', anchor: 'Input Group',
to: '/forms/input-group', to: '/forms/input-group',
}, },
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Floating Labels',
to: '/forms/floating-labels',
},
{ {
_component: 'CNavItem', _component: 'CNavItem',
as: NavLink, as: NavLink,

14
src/routes.js
View File

@ -15,6 +15,7 @@ const Navs = React.lazy(() => import('./views/examples/base/navs/Navs'))
const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations')) const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations'))
const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers')) const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers'))
const Progress = React.lazy(() => import('./views/examples/base/progress/Progress')) const Progress = React.lazy(() => import('./views/examples/base/progress/Progress'))
const Spinners = React.lazy(() => import('./views/examples/base/spinners/Spinners'))
const Tables = React.lazy(() => import('./views/examples/base/tables/Tables')) const Tables = React.lazy(() => import('./views/examples/base/tables/Tables'))
const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips')) const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips'))
@ -23,6 +24,9 @@ const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-gr
const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns')) const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns'))
const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios')) const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios'))
const FloatingLabels = React.lazy(() =>
import('./views/examples/forms/floating-labels/FloatingLabels'),
)
const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl')) const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl'))
const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup')) const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup'))
const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout')) const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout'))
@ -39,10 +43,10 @@ const Badges = React.lazy(() => import('./views/examples/notifications/badges/Ba
const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals')) const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals'))
const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts')) const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts'))
const Login = React.lazy(() => import('./views/examples/pages/login/Login')) // const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
const Register = React.lazy(() => import('./views/examples/pages/register/Register')) // const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) // const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) // const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets')) const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
@ -66,6 +70,7 @@ const routes = [
{ path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress', name: 'Progress', component: Progress }, { path: '/base/progress', name: 'Progress', component: Progress },
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
{ path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', name: 'Buttons', component: Buttons, exact: true }, { path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
@ -79,6 +84,7 @@ const routes = [
{ path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios }, { path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios },
{ path: '/forms/range', name: 'Range', component: Range }, { path: '/forms/range', name: 'Range', component: Range },
{ path: '/forms/input-group', name: 'Input Group', component: InputGroup }, { path: '/forms/input-group', name: 'Input Group', component: InputGroup },
{ path: '/forms/floating-labels', name: 'Floating Labels', component: FloatingLabels },
{ path: '/forms/layout', name: 'Layout', component: Layout }, { path: '/forms/layout', name: 'Layout', component: Layout },
{ path: '/forms/validation', name: 'Validation', component: Validation }, { path: '/forms/validation', name: 'Validation', component: Validation },
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },

3
src/scss/_example.scss
View File

@ -26,7 +26,8 @@
} }
// Components examples // Components examples
.preview { .preview,
.preview .col {
+ p { + p {
margin-top: 2rem; margin-top: 2rem;
} }

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

@ -210,8 +210,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Monday</span> <span className="text-medium-emphasis small">Monday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" /> <CProgress className="progress-xs" color="info" value={34} />
<CProgress className="progress-xs" color="danger" value="78" /> <CProgress className="progress-xs" color="danger" value={78} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -219,8 +219,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Tuesday</span> <span className="text-medium-emphasis small">Tuesday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" /> <CProgress className="progress-xs" color="info" value={56} />
<CProgress className="progress-xs" color="danger" value="94" /> <CProgress className="progress-xs" color="danger" value={94} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -228,8 +228,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Wednesday</span> <span className="text-medium-emphasis small">Wednesday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" /> <CProgress className="progress-xs" color="info" value={12} />
<CProgress className="progress-xs" color="danger" value="67" /> <CProgress className="progress-xs" color="danger" value={67} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -237,8 +237,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Thursday</span> <span className="text-medium-emphasis small">Thursday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" /> <CProgress className="progress-xs" color="info" value={43} />
<CProgress className="progress-xs" color="danger" value="91" /> <CProgress className="progress-xs" color="danger" value={91} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -246,8 +246,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Friday</span> <span className="text-medium-emphasis small">Friday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" /> <CProgress className="progress-xs" color="info" value={22} />
<CProgress className="progress-xs" color="danger" value="73" /> <CProgress className="progress-xs" color="danger" value={73} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -255,8 +255,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Saturday</span> <span className="text-medium-emphasis small">Saturday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" /> <CProgress className="progress-xs" color="info" value={53} />
<CProgress className="progress-xs" color="danger" value="82" /> <CProgress className="progress-xs" color="danger" value={82} />
</div> </div>
</div> </div>
<div className="progress-group mb-4"> <div className="progress-group mb-4">
@ -264,8 +264,8 @@ const Dashboard = () => {
<span className="text-medium-emphasis small">Sunday</span> <span className="text-medium-emphasis small">Sunday</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" /> <CProgress className="progress-xs" color="info" value={9} />
<CProgress className="progress-xs" color="danger" value="69" /> <CProgress className="progress-xs" color="danger" value={69} />
</div> </div>
</div> </div>
</CCol> </CCol>
@ -295,7 +295,7 @@ const Dashboard = () => {
<span className="ms-auto font-semibold">43%</span> <span className="ms-auto font-semibold">43%</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" /> <CProgress className="progress-xs" color="warning" value={43} />
</div> </div>
</div> </div>
<div className="progress-group mb-5"> <div className="progress-group mb-5">
@ -305,7 +305,7 @@ const Dashboard = () => {
<span className="ms-auto font-semibold">37%</span> <span className="ms-auto font-semibold">37%</span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" /> <CProgress className="progress-xs" color="warning" value={37} />
</div> </div>
</div> </div>
@ -318,7 +318,7 @@ const Dashboard = () => {
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" /> <CProgress className="progress-xs" color="success" value={56} />
</div> </div>
</div> </div>
<div className="progress-group"> <div className="progress-group">
@ -330,7 +330,7 @@ const Dashboard = () => {
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="15" /> <CProgress className="progress-xs" color="success" value={15} />
</div> </div>
</div> </div>
<div className="progress-group"> <div className="progress-group">
@ -342,7 +342,7 @@ const Dashboard = () => {
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="11" /> <CProgress className="progress-xs" color="success" value={11} />
</div> </div>
</div> </div>
<div className="progress-group"> <div className="progress-group">
@ -354,7 +354,7 @@ const Dashboard = () => {
</span> </span>
</div> </div>
<div className="progress-group-bars"> <div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="8" /> <CProgress className="progress-xs" color="success" value={8} />
</div> </div>
</div> </div>
</CCol> </CCol>
@ -362,7 +362,7 @@ const Dashboard = () => {
<br /> <br />
<CTable hover responsive className="mb-0 border"> <CTable hover responsive align="middle" className="mb-0 border">
<CTableHead color="light"> <CTableHead color="light">
<CTableRow> <CTableRow>
<CTableHeaderCell className="text-center"> <CTableHeaderCell className="text-center">
@ -400,7 +400,7 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="success" value="50" /> <CProgress className="progress-xs" color="success" value={50} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-cc-mastercard" /> <CIcon size="xl" name="cib-cc-mastercard" />
@ -434,7 +434,7 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="info" value="10" /> <CProgress className="progress-xs" color="info" value={10} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-cc-visa" /> <CIcon size="xl" name="cib-cc-visa" />
@ -468,10 +468,10 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="warning" value="74" /> <CProgress className="progress-xs" color="warning" value={74} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-stripe" /> <CIcon size="xl" name="cib-cc-stripe" />
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div className="small text-medium-emphasis">Last login</div> <div className="small text-medium-emphasis">Last login</div>
@ -502,10 +502,10 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="danger" value="98" /> <CProgress className="progress-xs" color="danger" value={98} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-paypal" /> <CIcon size="xl" name="cib-cc-paypal" />
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div className="small text-medium-emphasis">Last login</div> <div className="small text-medium-emphasis">Last login</div>
@ -536,10 +536,10 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="info" value="22" /> <CProgress className="progress-xs" color="info" value={22} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-google-pay" /> <CIcon size="xl" name="cib-cc-apple-pay" />
</CTableDataCell> </CTableDataCell>
<CTableDataCell> <CTableDataCell>
<div className="small text-medium-emphasis">Last login</div> <div className="small text-medium-emphasis">Last login</div>
@ -570,7 +570,7 @@ const Dashboard = () => {
</small> </small>
</div> </div>
</div> </div>
<CProgress className="progress-xs" color="success" value="43" /> <CProgress className="progress-xs" color="success" value={43} />
</CTableDataCell> </CTableDataCell>
<CTableDataCell className="text-center"> <CTableDataCell className="text-center">
<CIcon size="xl" name="cib-cc-amex" /> <CIcon size="xl" name="cib-cc-amex" />

20
src/views/examples/base/cards/Cards.js
View File

@ -639,13 +639,8 @@ const Cards = () => {
{ color: 'light' }, { color: 'light' },
{ color: 'dark', textColor: 'white' }, { color: 'dark', textColor: 'white' },
].map((item, index) => ( ].map((item, index) => (
<CCol lg={4}> <CCol lg={4} key={index}>
<CCard <CCard color={item.color} textColor={item.textColor} className="mb-3">
color={item.color}
textColor={item.textColor}
className="mb-3"
key={index}
>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
<CCardTitle>{item.color} card title</CCardTitle> <CCardTitle>{item.color} card title</CCardTitle>
@ -678,12 +673,8 @@ const Cards = () => {
{ color: 'light' }, { color: 'light' },
{ color: 'dark' }, { color: 'dark' },
].map((item, index) => ( ].map((item, index) => (
<CCol lg={4}> <CCol lg={4} key={index}>
<CCard <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
textColor={item.textColor}
className={`mb-3 border-${item.color}`}
key={index}
>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
<CCardTitle>{item.color} card title</CCardTitle> <CCardTitle>{item.color} card title</CCardTitle>
@ -716,11 +707,10 @@ const Cards = () => {
{ color: 'light' }, { color: 'light' },
{ color: 'dark' }, { color: 'dark' },
].map((item, index) => ( ].map((item, index) => (
<CCol lg={4}> <CCol lg={4} key={index}>
<CCard <CCard
textColor={item.textColor} textColor={item.textColor}
className={`mb-3 border-top-${item.color} border-top-3`} className={`mb-3 border-top-${item.color} border-top-3`}
key={index}
> >
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>

22
src/views/examples/base/paginations/Paginations.js
View File

@ -34,7 +34,7 @@ const Paginations = () => {
could be <code>aria-label="Search results pages"</code>. could be <code>aria-label="Search results pages"</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination"> <Example href="https://coreui.io/react/docs/4.0/components/pagination">
<CPagination ariaLabel="Page navigation example"> <CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
@ -56,14 +56,14 @@ const Paginations = () => {
to provide proper screen reader support with <code>aria</code> attributes. to provide proper screen reader support with <code>aria</code> attributes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#working-with-icons"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#working-with-icons">
<CPagination ariaLabel="Page navigation example"> <CPagination aria-label="Page navigation example">
<CPaginationItem ariaLabel="Previous"> <CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
</CPaginationItem> </CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next"> <CPaginationItem aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</CPaginationItem> </CPaginationItem>
</CPagination> </CPagination>
@ -90,14 +90,14 @@ const Paginations = () => {
to fully disable their functionality. to fully disable their functionality.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#disabled-and-active-states"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#disabled-and-active-states">
<CPagination ariaLabel="Page navigation example"> <CPagination aria-label="Page navigation example">
<CPaginationItem ariaLabel="Previous" disabled> <CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
</CPaginationItem> </CPaginationItem>
<CPaginationItem active>1</CPaginationItem> <CPaginationItem active>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem> <CPaginationItem>3</CPaginationItem>
<CPaginationItem ariaLabel="Next"> <CPaginationItem aria-label="Next">
<span aria-hidden="true">&raquo;</span> <span aria-hidden="true">&raquo;</span>
</CPaginationItem> </CPaginationItem>
</CPagination> </CPagination>
@ -116,7 +116,7 @@ const Paginations = () => {
<code>size="sm"</code> for additional sizes. <code>size="sm"</code> for additional sizes.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<CPagination size="lg" ariaLabel="Page navigation example"> <CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
@ -125,7 +125,7 @@ const Paginations = () => {
</CPagination> </CPagination>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#sizing">
<CPagination size="sm" ariaLabel="Page navigation example"> <CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem> <CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
@ -147,7 +147,7 @@ const Paginations = () => {
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>. <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<CPagination className="justify-content-center" ariaLabel="Page navigation example"> <CPagination className="justify-content-center" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem> <CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>
@ -156,7 +156,7 @@ const Paginations = () => {
</CPagination> </CPagination>
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment"> <Example href="https://coreui.io/react/docs/4.0/components/pagination#aligment">
<CPagination className="justify-content-end" ariaLabel="Page navigation example"> <CPagination className="justify-content-end" aria-label="Page navigation example">
<CPaginationItem disabled>Previous</CPaginationItem> <CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem> <CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem> <CPaginationItem>2</CPaginationItem>

50
src/views/examples/base/progress/Progress.js
View File

@ -21,19 +21,19 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress"> <Example href="https://coreui.io/react/docs/4.0/components/progress">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="0" /> <CProgressBar value={0} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="25" /> <CProgressBar value={25} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="50" /> <CProgressBar value={50} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="75" /> <CProgressBar value={75} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="100" /> <CProgressBar value={100} />
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -51,7 +51,7 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#labels"> <Example href="https://coreui.io/react/docs/4.0/components/progress#labels">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="25">25%</CProgressBar> <CProgressBar value={25}>25%</CProgressBar>
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -69,11 +69,11 @@ const Progress = () => {
resize accordingly. resize accordingly.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#height"> <Example href="https://coreui.io/react/docs/4.0/components/progress#height">
<CProgress height="1" className="mb-3"> <CProgress height={1} className="mb-3">
<CProgressBar value="25"></CProgressBar> <CProgressBar value={25}></CProgressBar>
</CProgress> </CProgress>
<CProgress height="20" className="mb-3"> <CProgress height={20} className="mb-3">
<CProgressBar value="25"></CProgressBar> <CProgressBar value={25}></CProgressBar>
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -90,16 +90,16 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#backgrounds"> <Example href="https://coreui.io/react/docs/4.0/components/progress#backgrounds">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" value="25" /> <CProgressBar color="success" value={25} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="info" value="50" /> <CProgressBar color="info" value={50} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="warning" value="75" /> <CProgressBar color="warning" value={75} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" value="100" /> <CProgressBar color="danger" value={100} />
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -116,9 +116,9 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars"> <Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar value="15" /> <CProgressBar value={15} />
<CProgressBar color="success" value="30" /> <CProgressBar color="success" value={30} />
<CProgressBar color="info" value="20" /> <CProgressBar color="info" value={20} />
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -136,16 +136,16 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#striped"> <Example href="https://coreui.io/react/docs/4.0/components/progress#striped">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" variant="striped" value="25" /> <CProgressBar color="success" variant="striped" value={25} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="info" variant="striped" value="50" /> <CProgressBar color="info" variant="striped" value={50} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="warning" variant="striped" value="75" /> <CProgressBar color="warning" variant="striped" value={75} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" value="100" /> <CProgressBar color="danger" variant="striped" value={100} />
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>
@ -164,16 +164,16 @@ const Progress = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes"> <Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes">
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="success" variant="striped" animated value="25" /> <CProgressBar color="success" variant="striped" animated value={25} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="info" variant="striped" animated value="50" /> <CProgressBar color="info" variant="striped" animated value={50} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="warning" variant="striped" animated value="75" /> <CProgressBar color="warning" variant="striped" animated value={75} />
</CProgress> </CProgress>
<CProgress className="mb-3"> <CProgress className="mb-3">
<CProgressBar color="danger" variant="striped" animated value="100" /> <CProgressBar color="danger" variant="striped" animated value={100} />
</CProgress> </CProgress>
</Example> </Example>
</CCardBody> </CCardBody>

123
src/views/examples/base/spinners/Spinners.js Normal file
View File

@ -0,0 +1,123 @@
import React, { useState } from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
import { Example } from 'src/reusable'
const Accordion = () => {
const [activeKey, setActiveKey] = useState(0)
const [activeKey2, setActiveKey2] = useState(0)
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Spinner</strong> <small>Border</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner">
<CSpinner />
</Example>
<p className="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
You can use any of our text color utilities on the standard spinner.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
<CSpinner color="danger" />
<CSpinner color="warning" />
<CSpinner color="info" />
<CSpinner color="light" />
<CSpinner color="dark" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Spinner</strong> <small>Growing</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't
technically spin, it does repeatedly grow!
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#growing-spinner">
<CSpinner variant="grow" />
</Example>
<p className="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so you can easily
change its appearance. Here it is in blue, along with the supported variants.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
<CSpinner color="danger" variant="grow" />
<CSpinner color="warning" variant="grow" />
<CSpinner color="info" variant="grow" />
<CSpinner color="light" variant="grow" />
<CSpinner color="dark" variant="grow" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Spinner</strong> <small>Size</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Add <code>size="sm"</code> property to make a smaller spinner that can quickly be used
within other components.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Spinner</strong> <small>Buttons</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Use spinners within buttons to indicate an action is currently processing or taking
place. You may also swap the text out of the spinner element and utilize button text
as needed.
</p>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</Example>
<Example href="https://coreui.io/react/docs/4.0/components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
</CButton>
<CButton disabled>
<CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
Loading...
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Accordion

86
src/views/examples/base/tables/Tables.js
View File

@ -25,8 +25,8 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Using the most basic table CoreUI, here's how{' '} Using the most basic table CoreUI, here's how <code>&lt;CTable&gt;</code>-based tables
<code class="css-0">&lt;CTable&gt;</code>-based tables look in CoreUI. look in CoreUI.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table"> <Example href="https://coreui.io/react/docs/4.0/components/table">
<CTable> <CTable>
@ -53,7 +53,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -139,8 +139,8 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code class="css-0">striped</code> property to add zebra-striping to any table row Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
within the <code class="css-0">&lt;CTableBody&gt;</code>. <code>&lt;CTableBody&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows"> <Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
<CTable striped> <CTable striped>
@ -167,7 +167,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -201,7 +201,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -232,7 +232,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -248,8 +248,8 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Use <code class="css-0">hover</code> property to enable a hover state on table rows Use <code>hover</code> property to enable a hover state on table rows within a{' '}
within a <code class="css-0">&lt;CTableBody&gt;</code>. <code>&lt;CTableBody&gt;</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows"> <Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
<CTable hover> <CTable hover>
@ -276,7 +276,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -307,7 +307,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -338,7 +338,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -378,7 +378,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2" active> <CTableDataCell colSpan="2" active>
Larry the Bird Larry the Bird
</CTableDataCell> </CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
@ -411,7 +411,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2" active> <CTableDataCell colSpan="2" active>
Larry the Bird Larry the Bird
</CTableDataCell> </CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
@ -429,8 +429,7 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">bordered</code> property for borders on all sides of the table Add <code>bordered</code> property for borders on all sides of the table and cells.
and cells.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables"> <Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
<CTable bordered> <CTable bordered>
@ -457,14 +456,14 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color" class="css-0"> <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities Border color utilities
</a>{' '} </a>{' '}
can be added to change colors: can be added to change colors:
@ -494,7 +493,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -510,7 +509,7 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">borderless</code> property for a table without borders. Add <code>borderless</code> property for a table without borders.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders"> <Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
<CTable borderless> <CTable borderless>
@ -537,7 +536,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -568,7 +567,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -584,9 +583,8 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Add <code class="css-0">small</code> property to make any{' '} Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
<code class="css-0">&lt;CTable&gt;</code> more compact by cutting all cell{' '} by cutting all cell <code>padding</code> in half.
<code class="css-0">padding</code> in half.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#small-tables"> <Example href="https://coreui.io/react/docs/4.0/components/table#small-tables">
<CTable small> <CTable small>
@ -613,7 +611,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -629,13 +627,13 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Table cells of <code class="css-0">&lt;CTableHead&gt;</code> are always vertical Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the
aligned to the bottom. Table cells in <code class="css-0">&lt;CTableBody&gt;</code>{' '} bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from{' '}
inherit their alignment from <code class="css-0">&lt;CTable&gt;</code> and are aligned <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
to the the top by default. Use the align property to re-align where needed. property to re-align where needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment"> <Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment">
<CTable align="middle" reponsive> <CTable align="middle" responsive>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="col" className="w-25"> <CTableHeaderCell scope="col" className="w-25">
@ -732,7 +730,7 @@ const Tables = () => {
<CTableDataCell>@mdo</CTableDataCell> <CTableDataCell>@mdo</CTableDataCell>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell colspan="4"> <CTableHeaderCell colSpan="4">
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@ -763,7 +761,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -779,9 +777,9 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
Similar to tables and dark tables, use the modifier prop{' '} Similar to tables and dark tables, use the modifier prop <code>color="light"</code> or{' '}
<code class="css-0">color="light"</code> or <code class="css-0">color="dark"</code> to <code>color="dark"</code> to make <code>&lt;CTableHead&gt;</code>s appear light or
make <code class="css-0">&lt;CTableHead&gt;</code>s appear light or dark gray. dark gray.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head"> <Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
<CTable> <CTable>
@ -840,7 +838,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -880,7 +878,7 @@ const Tables = () => {
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell> <CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell> <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell> <CTableDataCell>@twitter</CTableDataCell>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
@ -904,9 +902,9 @@ const Tables = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
A <code class="css-0">&lt;CTableCaption&gt;</code> functions like a heading for a A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps
table. It helps users with screen readers to find a table and understand what it's users with screen readers to find a table and understand what it's about and decide if
about and decide if they want to read it. they want to read it.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions"> <Example href="https://coreui.io/react/docs/4.0/components/table#captions">
<CTable> <CTable>
@ -942,8 +940,8 @@ const Tables = () => {
</CTable> </CTable>
</Example> </Example>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can also put the <code class="css-0">&lt;CTableCaption&gt;</code> on the top of You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '}
the table with <code class="css-0">caption="top"</code>. <code>caption="top"</code>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/table#captions"> <Example href="https://coreui.io/react/docs/4.0/components/table#captions">
<CTable caption="top"> <CTable caption="top">

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

@ -54,7 +54,7 @@ const Tooltips = () => {
freegan cred raw denim single-origin coffee viral. freegan cred raw denim single-origin coffee viral.
</p> </p>
</Example> </Example>
<p class="css-0"> <p className="text-medium-emphasis small">
Hover over the buttons below to see the four tooltips directions: top, right, bottom, Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left. Directions are mirrored when using CoreUI in RTL. and left. Directions are mirrored when using CoreUI in RTL.
</p> </p>

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

@ -114,21 +114,21 @@ const ButtonGroups = () => {
button button
buttonVariant="outline" buttonVariant="outline"
id="btncheck1" id="btncheck1"
autocomplete="off" autoComplete="off"
label="Checkbox 1" label="Checkbox 1"
/> />
<CFormCheck <CFormCheck
button button
buttonVariant="outline" buttonVariant="outline"
id="btncheck2" id="btncheck2"
autocomplete="off" autoComplete="off"
label="Checkbox 2" label="Checkbox 2"
/> />
<CFormCheck <CFormCheck
button button
buttonVariant="outline" buttonVariant="outline"
id="btncheck3" id="btncheck3"
autocomplete="off" autoComplete="off"
label="Checkbox 3" label="Checkbox 3"
/> />
</CButtonGroup> </CButtonGroup>
@ -141,7 +141,7 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio1" id="btnradio1"
autocomplete="off" autoComplete="off"
label="Radio 1" label="Radio 1"
/> />
<CFormCheck <CFormCheck
@ -150,7 +150,7 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio2" id="btnradio2"
autocomplete="off" autoComplete="off"
label="Radio 2" label="Radio 2"
/> />
<CFormCheck <CFormCheck
@ -159,7 +159,7 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="btnradio" name="btnradio"
id="btnradio3" id="btnradio3"
autocomplete="off" autoComplete="off"
label="Radio 3" label="Radio 3"
/> />
</CButtonGroup> </CButtonGroup>
@ -415,9 +415,9 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio1" id="vbtnradio1"
autocomplete="off" autoComplete="off"
label="Radio 1" label="Radio 1"
checked defaultChecked
/> />
<CFormCheck <CFormCheck
type="radio" type="radio"
@ -426,7 +426,7 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio2" id="vbtnradio2"
autocomplete="off" autoComplete="off"
label="Radio 2" label="Radio 2"
/> />
<CFormCheck <CFormCheck
@ -436,7 +436,7 @@ const ButtonGroups = () => {
buttonVariant="outline" buttonVariant="outline"
name="vbtnradio" name="vbtnradio"
id="vbtnradio3" id="vbtnradio3"
autocomplete="off" autoComplete="off"
label="Radio 3" label="Radio 3"
/> />
</CButtonGroup> </CButtonGroup>

10
src/views/examples/buttons/buttons/Buttons.js
View File

@ -58,7 +58,7 @@ const Buttons = () => {
<strong>React Button</strong> <small>with icons</small> <strong>React Button</strong> <small>with icons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p className="text-medium-emphasis small">
You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>. You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons"> <Example href="https://coreui.io/react/docs/4.0/components/buttons">
@ -347,7 +347,7 @@ const Buttons = () => {
Create buttons that span the full width of a parent—by using utilities. Create buttons that span the full width of a parent—by using utilities.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons"> <Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2"> <div className="d-grid gap-2">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
@ -359,7 +359,7 @@ const Buttons = () => {
your browser to see them change. your browser to see them change.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons"> <Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-block"> <div className="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
@ -370,7 +370,7 @@ const Buttons = () => {
horizontally with <code>.mx-auto</code>, too. horizontally with <code>.mx-auto</code>, too.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons"> <Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto"> <div className="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton> <CButton color="primary">Button</CButton>
</div> </div>
@ -382,7 +382,7 @@ const Buttons = () => {
stacked. stacked.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons"> <Example href="https://coreui.io/react/docs/4.0/components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-flex justify-content-md-end"> <div className="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" className="me-md-2"> <CButton color="primary" className="me-md-2">
Button Button
</CButton> </CButton>

83
src/views/examples/buttons/dropdowns/Dropdowns.js
View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import { import {
CButton, CButton,
CButtonGroup,
CCard, CCard,
CCardBody, CCardBody,
CCardHeader, CCardHeader,
@ -23,9 +24,8 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Single button</small> <strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Here's how you can put them to work with either{' '} Here's how you can put them to work with either <code>&lt;button&gt;</code> elements:
<code class="css-0">&lt;button&gt;</code> elements:
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<CDropdown> <CDropdown>
@ -37,7 +37,9 @@ const Dropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </Example>
<p class="css-0">The best part is you can do this with any button variant, too:</p> <p className="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
<> <>
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
@ -65,17 +67,16 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Split button</small> <strong>React Dropdown</strong> <small>Split button</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Similarly, create split button dropdowns with virtually the same markup as single Similarly, create split button dropdowns with virtually the same markup as single
button dropdowns, but with the addition of boolean prop{' '} button dropdowns, but with the addition of boolean prop <code>split</code> for proper
<code class="css-0">split</code> for proper spacing around the dropdown caret. spacing around the dropdown caret.
</p> </p>
<p class="css-0"> <p className="text-medium-emphasis small">
We use this extra class to reduce the horizontal <code class="css-0">padding</code> on We use this extra class to reduce the horizontal <code>padding</code> on either side
either side of the caret by 25% and remove the <code class="css-0">margin-left</code>{' '} of the caret by 25% and remove the <code>margin-left</code> that's attached for normal
that's attached for normal button dropdowns. Those additional changes hold the caret button dropdowns. Those additional changes hold the caret centered in the split button
centered in the split button and implement a more properly sized hit area next to the and implement a more properly sized hit area next to the main button.
main button.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#split-button"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#split-button">
<> <>
@ -172,10 +173,9 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Single button</small> <strong>React Dropdown</strong> <small>Single button</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Opt into darker dropdowns to match a dark navbar or custom style by set{' '} Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
<code class="css-0">dark</code> property. No changes are required to the dropdown <code>dark</code> property. No changes are required to the dropdown items.
items.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<CDropdown dark> <CDropdown dark>
@ -189,7 +189,7 @@ const Dropdowns = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</Example> </Example>
<p class="css-0">And putting it to use in a navbar:</p> <p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
<nav className="navbar navbar-expand-lg navbar-dark bg-dark"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid"> <div className="container-fluid">
@ -233,10 +233,9 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Dropup</small> <strong>React Dropdown</strong> <small>Dropup</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Trigger dropdown menus above elements by adding{' '} Trigger dropdown menus above elements by adding <code>direction="dropup"</code> to the{' '}
<code class="css-0">direction="dropup"</code> to the{' '} <code>&lt;CDropdown&gt;</code> component.
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup"> <CDropdown variant="btn-group" direction="dropup">
@ -270,10 +269,9 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Dropright</small> <strong>React Dropdown</strong> <small>Dropright</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Trigger dropdown menus at the right of the elements by adding{' '} Trigger dropdown menus at the right of the elements by adding{' '}
<code class="css-0">direction="dropend"</code> to the{' '} <code>direction="dropend"</code> to the <code>&lt;CDropdown&gt;</code> component.
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend"> <CDropdown variant="btn-group" direction="dropend">
@ -307,33 +305,24 @@ const Dropdowns = () => {
<strong>React Dropdown</strong> <small>Dropleft</small> <strong>React Dropdown</strong> <small>Dropleft</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="css-0"> <p className="text-medium-emphasis small">
Trigger dropdown menus at the left of the elements by adding{' '} Trigger dropdown menus at the left of the elements by adding{' '}
<code class="css-0">direction="dropstart"</code> to the{' '} <code>direction="dropstart"</code> to the <code>&lt;CDropdown&gt;</code> component.
<code class="css-0">&lt;CDropdown&gt;</code> component.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft"> <Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft">
<CDropdown variant="btn-group" direction="dropstart"> <CButtonGroup>
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle> <CDropdown variant="btn-group" direction="dropstart">
<CDropdownMenu> <CDropdownToggle color="secondary" split />
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownMenu>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownDivider />
</CDropdownMenu> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdown> </CDropdownMenu>
<CDropdown variant="btn-group" direction="dropstart"> </CDropdown>
<CDropdownToggle color="secondary" split />
<CButton color="secondary">Small split button</CButton> <CButton color="secondary">Small split button</CButton>
<CDropdownMenu> </CButtonGroup>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example> </Example>
</CCardBody> </CCardBody>
</CCard> </CCard>

38
src/views/examples/charts/Charts.js
View File

@ -32,25 +32,6 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody>
<CChart
type="doughnut"
data={{
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}> <CCol xs={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Line Chart</CCardHeader> <CCardHeader>Line Chart</CCardHeader>
@ -82,6 +63,25 @@ const Charts = () => {
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs={6}>
<CCard className="mb-4">
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody>
<CChart
type="doughnut"
data={{
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
data: [40, 20, 80, 10],
},
],
}}
/>
</CCardBody>
</CCard>
</CCol>
<CCol xs={6}> <CCol xs={6}>
<CCard className="mb-4"> <CCard className="mb-4">
<CCardHeader>Pie Chart</CCardHeader> <CCardHeader>Pie Chart</CCardHeader>

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

@ -291,19 +291,19 @@ const ChecksRadios = () => {
further be grouped in a button group if needed. further be grouped in a button group if needed.
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check" autocomplete="off" label="Single toggle" /> <CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<CFormCheck <CFormCheck
button button
id="btn-check-2" id="btn-check-2"
autocomplete="off" autoComplete="off"
label="Checked" label="Checked"
defaultChecked defaultChecked
/> />
</Example> </Example>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
<CFormCheck button id="btn-check-3" autocomplete="off" label="Disabled" disabled /> <CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
</Example> </Example>
<h3>Radio toggle buttons</h3> <h3>Radio toggle buttons</h3>
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
@ -313,7 +313,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options" name="options"
id="option1" id="option1"
autocomplete="off" autoComplete="off"
label="Checked" label="Checked"
defaultChecked defaultChecked
/> />
@ -323,7 +323,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options" name="options"
id="option2" id="option2"
autocomplete="off" autoComplete="off"
label="Radio" label="Radio"
/> />
<CFormCheck <CFormCheck
@ -332,7 +332,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options" name="options"
id="option3" id="option3"
autocomplete="off" autoComplete="off"
label="Radio" label="Radio"
disabled disabled
/> />
@ -342,7 +342,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options" name="options"
id="option4" id="option4"
autocomplete="off" autoComplete="off"
label="Radio" label="Radio"
/> />
</Example> </Example>
@ -357,7 +357,7 @@ const ChecksRadios = () => {
buttonColor="primary" buttonColor="primary"
buttonVariant="outline" buttonVariant="outline"
id="btn-check-outlined" id="btn-check-outlined"
autocomplete="off" autoComplete="off"
label="Single toggle" label="Single toggle"
/> />
</div> </div>
@ -367,7 +367,7 @@ const ChecksRadios = () => {
buttonColor="secondary" buttonColor="secondary"
buttonVariant="outline" buttonVariant="outline"
id="btn-check-2-outlined" id="btn-check-2-outlined"
autocomplete="off" autoComplete="off"
label="Checked" label="Checked"
defaultChecked defaultChecked
/> />
@ -380,7 +380,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options-outlined" name="options-outlined"
id="success-outlined" id="success-outlined"
autocomplete="off" autoComplete="off"
label="Radio" label="Radio"
defaultChecked defaultChecked
/> />
@ -391,7 +391,7 @@ const ChecksRadios = () => {
type="radio" type="radio"
name="options-outlined" name="options-outlined"
id="danger-outlined" id="danger-outlined"
autocomplete="off" autoComplete="off"
label="Radio" label="Radio"
/> />
</div> </div>

172
src/views/examples/forms/floating-labels/FloatingLabels.js Normal file
View File

@ -0,0 +1,172 @@
import React from 'react'
import {
CCard,
CCardBody,
CCardHeader,
CCol,
CFormControl,
CFormLabel,
CFormFloating,
CFormSelect,
CRow,
} from '@coreui/react'
import { Example } from 'src/reusable'
const FloatingLabels = () => {
return (
<CRow>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Floating labels</strong>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormControl&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each{' '}
<code>&lt;CFormControl&gt;</code> as our method of CSS-only floating labels uses the{' '}
<code>:placeholder-shown</code> pseudo-element. Also note that the{' '}
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
(e.g., <code>~</code>).
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels">
<CFormFloating className="mb-3">
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormControl type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
When there's a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>s
will automatically adjust to their floated position.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels">
<CFormFloating>
<CFormControl
type="email"
id="floatingInputValue"
placeholder="name@example.com"
defaultValue="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Floating labels</strong> <small>Textareas</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
By default, <code>&lt;CFormControl component="textarea"&gt;</code>s will be the same
height as <code>&lt;CFormControl&gt;</code>s.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormControl>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
<p className="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormControl component="textarea"&gt;</code>,
do not use the <code>rows</code> attribute. Instead, set an explicit{' '}
<code>height</code> (either inline or via custom CSS).
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#textareas">
<CFormFloating>
<CFormControl
component="textarea"
placeholder="Leave a comment here"
id="floatingTextarea2"
style={{ height: '100px' }}
></CFormControl>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Floating labels</strong> <small>Selects</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '}
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
<code>&lt;CFormControl&gt;</code>s, they'll always show the{' '}
<code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs={12}>
<CCard className="mb-4">
<CCardHeader>
<strong>React Floating labels</strong> <small>Layout</small>
</CCardHeader>
<CCardBody>
<p className="text-medium-emphasis small">
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<Example href="https://coreui.io/react/docs/4.0/forms/floating-labels#layout">
<CRow xs={{ gutter: 2 }}>
<CCol md>
<CFormFloating>
<CFormControl
type="email"
id="floatingInputGrid"
placeholder="name@example.com"
defaultValue="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
</CFormFloating>
</CCol>
<CCol md>
<CFormFloating>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
</CFormFloating>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default FloatingLabels

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

@ -150,7 +150,7 @@ const FormControl = () => {
<CFormControl <CFormControl
type="text" type="text"
id="staticEmail" id="staticEmail"
value="email@example.com" defaultValue="email@example.com"
readOnly readOnly
plainText plainText
/> />
@ -174,7 +174,7 @@ const FormControl = () => {
<CFormControl <CFormControl
type="text" type="text"
id="staticEmail2" id="staticEmail2"
value="email@example.com" defaultValue="email@example.com"
readOnly readOnly
plainText plainText
/> />
@ -237,7 +237,7 @@ const FormControl = () => {
<CFormControl <CFormControl
type="color" type="color"
id="exampleColorInput" id="exampleColorInput"
value="#563d7c" defaultValue="#563d7c"
title="Choose your color" title="Choose your color"
/> />
</Example> </Example>

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

@ -282,7 +282,7 @@ const Select = () => {
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#buttons-with-dropdowns"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#buttons-with-dropdowns">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CDropdown> <CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
</CDropdownToggle> </CDropdownToggle>
@ -298,7 +298,7 @@ const Select = () => {
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormControl aria-label="Text input with dropdown button" /> <CFormControl aria-label="Text input with dropdown button" />
<CDropdown alignment="end"> <CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
</CDropdownToggle> </CDropdownToggle>
@ -312,7 +312,7 @@ const Select = () => {
</CDropdown> </CDropdown>
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CDropdown> <CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
</CDropdownToggle> </CDropdownToggle>
@ -325,7 +325,7 @@ const Select = () => {
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormControl aria-label="Text input with 2 dropdown buttons" /> <CFormControl aria-label="Text input with 2 dropdown buttons" />
<CDropdown alignment="end"> <CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline"> <CDropdownToggle color="secondary" variant="outline">
Dropdown Dropdown
</CDropdownToggle> </CDropdownToggle>
@ -350,7 +350,7 @@ const Select = () => {
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#segmented-buttons"> <Example href="https://coreui.io/react/docs/4.0/forms/input-group#segmented-buttons">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CDropdown> <CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Action Action
</CButton> </CButton>
@ -367,7 +367,7 @@ const Select = () => {
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormControl aria-label="Text input with segmented dropdown button" /> <CFormControl aria-label="Text input with segmented dropdown button" />
<CDropdown alignment="end"> <CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Action Action
</CButton> </CButton>
@ -397,7 +397,7 @@ const Select = () => {
Options Options
</CInputGroupText> </CInputGroupText>
<CFormSelect id="inputGroupSelect01"> <CFormSelect id="inputGroupSelect01">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -405,7 +405,7 @@ const Select = () => {
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CFormSelect id="inputGroupSelect02"> <CFormSelect id="inputGroupSelect02">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -419,7 +419,7 @@ const Select = () => {
Button Button
</CButton> </CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon"> <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -427,7 +427,7 @@ const Select = () => {
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon"> <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>

8
src/views/examples/forms/layout/Layout.js
View File

@ -90,7 +90,7 @@ const Layout = () => {
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="inputState">State</CFormLabel> <CFormLabel htmlFor="inputState">State</CFormLabel>
<CFormSelect id="inputState"> <CFormSelect id="inputState">
<option selected>Choose...</option> <option>Choose...</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
</CCol> </CCol>
@ -303,7 +303,7 @@ const Layout = () => {
Preference Preference
</CFormLabel> </CFormLabel>
<CFormSelect id="autoSizingSelect"> <CFormSelect id="autoSizingSelect">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -342,7 +342,7 @@ const Layout = () => {
Preference Preference
</CFormLabel> </CFormLabel>
<CFormSelect id="specificSizeSelect"> <CFormSelect id="specificSizeSelect">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -388,7 +388,7 @@ const Layout = () => {
Preference Preference
</CFormLabel> </CFormLabel>
<CFormSelect id="inlineFormSelectPref"> <CFormSelect id="inlineFormSelectPref">
<option selected>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>

12
src/views/examples/forms/select/Select.js
View File

@ -13,7 +13,7 @@ const Select = () => {
<CCardBody> <CCardBody>
<Example href="https://coreui.io/react/docs/4.0/forms/select"> <Example href="https://coreui.io/react/docs/4.0/forms/select">
<CFormSelect aria-label="Default select example"> <CFormSelect aria-label="Default select example">
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -34,13 +34,13 @@ const Select = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<CFormSelect size="lg" className="mb-3" aria-label="Large select example"> <CFormSelect size="lg" className="mb-3" aria-label="Large select example">
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
<CFormSelect size="sm" className="mb-3" aria-label="Small select example"> <CFormSelect size="sm" className="mb-3" aria-label="Small select example">
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -51,7 +51,7 @@ const Select = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -62,7 +62,7 @@ const Select = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing"> <Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
<CFormSelect size="lg" multiple aria-label="Multiple select example"> <CFormSelect size="lg" multiple aria-label="Multiple select example">
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -83,7 +83,7 @@ const Select = () => {
</p> </p>
<Example href="https://coreui.io/react/docs/4.0/forms/select#disabled"> <Example href="https://coreui.io/react/docs/4.0/forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled> <CFormSelect aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>

70
src/views/examples/forms/validation/Validation.js
View File

@ -36,12 +36,12 @@ const CustomStyles = () => {
> >
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationCustom01">Email</CFormLabel> <CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
<CFormControl type="text" id="validationCustom01" value="Mark" required /> <CFormControl type="text" id="validationCustom01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationCustom02">Email</CFormLabel> <CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
<CFormControl type="text" id="validationCustom02" value="Otto" required /> <CFormControl type="text" id="validationCustom02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
@ -51,7 +51,7 @@ const CustomStyles = () => {
<CFormControl <CFormControl
type="text" type="text"
id="validationCustomUsername" id="validationCustomUsername"
value="" defaultValue=""
aria-describedby="inputGroupPrepend" aria-describedby="inputGroupPrepend"
required required
/> />
@ -66,9 +66,7 @@ const CustomStyles = () => {
<CCol md="3"> <CCol md="3">
<CFormLabel htmlFor="validationCustom04">City</CFormLabel> <CFormLabel htmlFor="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04"> <CFormSelect id="validationCustom04">
<option selected disabled> <option disabled>Choose...</option>
Choose...
</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
@ -110,12 +108,12 @@ const BrowserDefaults = () => {
<CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}> <CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationDefault01">Email</CFormLabel> <CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
<CFormControl type="text" id="validationDefault01" value="Mark" required /> <CFormControl type="text" id="validationDefault01" defaultValue="Mark" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationDefault02">Email</CFormLabel> <CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
<CFormControl type="text" id="validationDefault02" value="Otto" required /> <CFormControl type="text" id="validationDefault02" defaultValue="Otto" required />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
@ -125,7 +123,7 @@ const BrowserDefaults = () => {
<CFormControl <CFormControl
type="text" type="text"
id="validationDefaultUsername" id="validationDefaultUsername"
value="" defaultValue=""
aria-describedby="inputGroupPrepend02" aria-describedby="inputGroupPrepend02"
required required
/> />
@ -140,9 +138,7 @@ const BrowserDefaults = () => {
<CCol md="3"> <CCol md="3">
<CFormLabel htmlFor="validationDefault04">City</CFormLabel> <CFormLabel htmlFor="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04"> <CFormSelect id="validationDefault04">
<option selected disabled> <option disabled>Choose...</option>
Choose...
</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
@ -189,14 +185,14 @@ const Tooltips = () => {
> >
<CCol md="4" className="position-relative"> <CCol md="4" className="position-relative">
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel> <CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip01" value="Mark" required /> <CFormControl type="text" id="validationTooltip01" defaultValue="Mark" required />
<CFormFeedback tooltip valid> <CFormFeedback tooltip valid>
Looks good! Looks good!
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="4" className="position-relative"> <CCol md="4" className="position-relative">
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel> <CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
<CFormControl type="text" id="validationTooltip02" value="Otto" required /> <CFormControl type="text" id="validationTooltip02" defaultValue="Otto" required />
<CFormFeedback tooltip valid> <CFormFeedback tooltip valid>
Looks good! Looks good!
</CFormFeedback> </CFormFeedback>
@ -208,7 +204,7 @@ const Tooltips = () => {
<CFormControl <CFormControl
type="text" type="text"
id="validationTooltipUsername" id="validationTooltipUsername"
value="" defaultValue=""
aria-describedby="inputGroupPrepend" aria-describedby="inputGroupPrepend"
required required
/> />
@ -227,7 +223,7 @@ const Tooltips = () => {
<CCol md="3" className="position-relative"> <CCol md="3" className="position-relative">
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel> <CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required> <CFormSelect id="validationTooltip04" required>
<option selected disabled value=""> <option disabled defaultValue="">
Choose... Choose...
</option> </option>
<option>...</option> <option>...</option>
@ -310,8 +306,8 @@ const Validation = () => {
<CCardBody> <CCardBody>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
We recommend using client-side validation, but in case you require server-side We recommend using client-side validation, but in case you require server-side
validation, you can indicate invalid and valid form fields with <code>isInvalid</code>{' '} validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
and <code>isValid</code> boolean properties. and <code>valid</code> boolean properties.
</p> </p>
<p className="text-medium-emphasis small"> <p className="text-medium-emphasis small">
For invalid fields, ensure that the invalid feedback/error message is associated with For invalid fields, ensure that the invalid feedback/error message is associated with
@ -323,12 +319,24 @@ const Validation = () => {
<CForm className="row g-3 needs-validation"> <CForm className="row g-3 needs-validation">
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel> <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormControl type="text" id="validationServer01" value="Mark" isValid required /> <CFormControl
type="text"
id="validationServer01"
defaultValue="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel> <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormControl type="text" id="validationServer02" value="Otto" isValid required /> <CFormControl
type="text"
id="validationServer02"
defaultValue="Otto"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol md="4">
@ -338,9 +346,9 @@ const Validation = () => {
<CFormControl <CFormControl
type="text" type="text"
id="validationServerUsername" id="validationServerUsername"
value="" defaultValue=""
aria-describedby="inputGroupPrepend03" aria-describedby="inputGroupPrepend03"
isInvalid invalid
required required
/> />
<CFormFeedback invalid>Please choose a username.</CFormFeedback> <CFormFeedback invalid>Please choose a username.</CFormFeedback>
@ -348,22 +356,20 @@ const Validation = () => {
</CCol> </CCol>
<CCol md="6"> <CCol md="6">
<CFormLabel htmlFor="validationServer03">City</CFormLabel> <CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormControl type="text" id="validationServer03" isInvalid required /> <CFormControl type="text" id="validationServer03" invalid required />
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md="3">
<CFormLabel htmlFor="validationServer04">City</CFormLabel> <CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" isInvalid> <CFormSelect id="validationServer04" invalid>
<option selected disabled> <option disabled>Choose...</option>
Choose...
</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback> <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol md="3">
<CFormLabel htmlFor="validationServer05">City</CFormLabel> <CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormControl type="text" id="validationServer05" isInvalid required /> <CFormControl type="text" id="validationServer05" invalid required />
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback> <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
</CCol> </CCol>
<CCol xs="12"> <CCol xs="12">
@ -371,7 +377,7 @@ const Validation = () => {
type="checkbox" type="checkbox"
id="invalidCheck" id="invalidCheck"
label="Agree to terms and conditions" label="Agree to terms and conditions"
isInvalid invalid
required required
/> />
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback> <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
@ -409,14 +415,14 @@ const Validation = () => {
<Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements"> <Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements">
<CForm validated={true}> <CForm validated={true}>
<div className="mb-3"> <div className="mb-3">
<CFormLabel for="validationTextarea" className="form-label"> <CFormLabel htmlFor="validationTextarea" className="form-label">
Textarea Textarea
</CFormLabel> </CFormLabel>
<CFormControl <CFormControl
component="textarea" component="textarea"
id="validationTextarea" id="validationTextarea"
placeholder="Required example textarea" placeholder="Required example textarea"
isInvalid invalid
required required
></CFormControl> ></CFormControl>
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback> <CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
@ -449,7 +455,7 @@ const Validation = () => {
<div className="mb-3"> <div className="mb-3">
<CFormSelect required aria-label="select example"> <CFormSelect required aria-label="select example">
<option value="">Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>

25
src/views/examples/widgets/WidgetsDropdown.js
View File

@ -23,12 +23,11 @@ const WidgetsDropdown = () => {
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon name="cil-options" className="text-high-emphasis-inverse" /> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
{/* TODO: placement doesn't work */} <CDropdownMenu>
<CDropdownMenu placement="bottom-end">
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -106,11 +105,11 @@ const WidgetsDropdown = () => {
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon name="cil-options" className="text-high-emphasis-inverse" /> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -187,11 +186,11 @@ const WidgetsDropdown = () => {
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon name="cil-options" className="text-high-emphasis-inverse" /> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
@ -255,11 +254,11 @@ const WidgetsDropdown = () => {
value="9.823" value="9.823"
title="Members online" title="Members online"
action={ action={
<CDropdown> <CDropdown alignment="end">
<CDropdownToggle color="transparent" caret={false}> <CDropdownToggle color="transparent" caret={false} className="p-0">
<CIcon name="cil-options" className="text-high-emphasis-inverse" /> <CIcon name="cil-options" className="text-high-emphasis-inverse" />
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu placement="bottom-end"> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>