refactor: update example views
This commit is contained in:
Łukasz Holeczek
parent
730bd301c2
commit
d7c4c3bc6d
@ -23,10 +23,11 @@ import {
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibStripe,
|
||||
cibPaypal,
|
||||
cibGooglePay,
|
||||
cibCcStripe,
|
||||
cibCcPaypal,
|
||||
cibCcApplePay,
|
||||
cibCcAmex,
|
||||
cibGoogle,
|
||||
} from '@coreui/icons'
|
||||
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
|
||||
import {
|
||||
@ -254,9 +255,10 @@ export const icons = Object.assign(
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibStripe,
|
||||
cibPaypal,
|
||||
cibGooglePay,
|
||||
cibCcStripe,
|
||||
cibCcPaypal,
|
||||
cibCcApplePay,
|
||||
cibCcAmex,
|
||||
cibGoogle,
|
||||
},
|
||||
)
|
||||
|
||||
@ -103,6 +103,12 @@ const _nav = [
|
||||
anchor: 'Progress',
|
||||
to: '/base/progress',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Spinners',
|
||||
to: '/base/spinners',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
@ -178,6 +184,12 @@ const _nav = [
|
||||
anchor: 'Input Group',
|
||||
to: '/forms/input-group',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Floating Labels',
|
||||
to: '/forms/floating-labels',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
|
||||
@ -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 Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers'))
|
||||
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 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 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 InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup'))
|
||||
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 Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts'))
|
||||
|
||||
const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
|
||||
const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
|
||||
// const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
|
||||
// const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
|
||||
// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
|
||||
// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets'))
|
||||
|
||||
@ -66,6 +70,7 @@ const routes = [
|
||||
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
|
||||
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
|
||||
{ path: '/base/progress', name: 'Progress', component: Progress },
|
||||
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
|
||||
{ path: '/base/tables', name: 'Tables', component: Tables },
|
||||
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
|
||||
{ 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/range', name: 'Range', component: Range },
|
||||
{ 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/validation', name: 'Validation', component: Validation },
|
||||
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
|
||||
|
||||
@ -26,7 +26,8 @@
|
||||
}
|
||||
|
||||
// Components examples
|
||||
.preview {
|
||||
.preview,
|
||||
.preview .col {
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@ -210,8 +210,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Monday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="34" />
|
||||
<CProgress className="progress-xs" color="danger" value="78" />
|
||||
<CProgress className="progress-xs" color="info" value={34} />
|
||||
<CProgress className="progress-xs" color="danger" value={78} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -219,8 +219,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Tuesday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="56" />
|
||||
<CProgress className="progress-xs" color="danger" value="94" />
|
||||
<CProgress className="progress-xs" color="info" value={56} />
|
||||
<CProgress className="progress-xs" color="danger" value={94} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -228,8 +228,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Wednesday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="12" />
|
||||
<CProgress className="progress-xs" color="danger" value="67" />
|
||||
<CProgress className="progress-xs" color="info" value={12} />
|
||||
<CProgress className="progress-xs" color="danger" value={67} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -237,8 +237,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Thursday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="43" />
|
||||
<CProgress className="progress-xs" color="danger" value="91" />
|
||||
<CProgress className="progress-xs" color="info" value={43} />
|
||||
<CProgress className="progress-xs" color="danger" value={91} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -246,8 +246,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Friday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="22" />
|
||||
<CProgress className="progress-xs" color="danger" value="73" />
|
||||
<CProgress className="progress-xs" color="info" value={22} />
|
||||
<CProgress className="progress-xs" color="danger" value={73} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -255,8 +255,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Saturday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="53" />
|
||||
<CProgress className="progress-xs" color="danger" value="82" />
|
||||
<CProgress className="progress-xs" color="info" value={53} />
|
||||
<CProgress className="progress-xs" color="danger" value={82} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-4">
|
||||
@ -264,8 +264,8 @@ const Dashboard = () => {
|
||||
<span className="text-medium-emphasis small">Sunday</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="info" value="9" />
|
||||
<CProgress className="progress-xs" color="danger" value="69" />
|
||||
<CProgress className="progress-xs" color="info" value={9} />
|
||||
<CProgress className="progress-xs" color="danger" value={69} />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
@ -295,7 +295,7 @@ const Dashboard = () => {
|
||||
<span className="ms-auto font-semibold">43%</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="warning" value="43" />
|
||||
<CProgress className="progress-xs" color="warning" value={43} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group mb-5">
|
||||
@ -305,7 +305,7 @@ const Dashboard = () => {
|
||||
<span className="ms-auto font-semibold">37%</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="warning" value="37" />
|
||||
<CProgress className="progress-xs" color="warning" value={37} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -318,7 +318,7 @@ const Dashboard = () => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="56" />
|
||||
<CProgress className="progress-xs" color="success" value={56} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
@ -330,7 +330,7 @@ const Dashboard = () => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="15" />
|
||||
<CProgress className="progress-xs" color="success" value={15} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
@ -342,7 +342,7 @@ const Dashboard = () => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="11" />
|
||||
<CProgress className="progress-xs" color="success" value={11} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="progress-group">
|
||||
@ -354,7 +354,7 @@ const Dashboard = () => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-group-bars">
|
||||
<CProgress className="progress-xs" color="success" value="8" />
|
||||
<CProgress className="progress-xs" color="success" value={8} />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
@ -362,7 +362,7 @@ const Dashboard = () => {
|
||||
|
||||
<br />
|
||||
|
||||
<CTable hover responsive className="mb-0 border">
|
||||
<CTable hover responsive align="middle" className="mb-0 border">
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell className="text-center">
|
||||
@ -400,7 +400,7 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="success" value="50" />
|
||||
<CProgress className="progress-xs" color="success" value={50} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-mastercard" />
|
||||
@ -434,7 +434,7 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="info" value="10" />
|
||||
<CProgress className="progress-xs" color="info" value={10} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-visa" />
|
||||
@ -468,10 +468,10 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="warning" value="74" />
|
||||
<CProgress className="progress-xs" color="warning" value={74} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-stripe" />
|
||||
<CIcon size="xl" name="cib-cc-stripe" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -502,10 +502,10 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="danger" value="98" />
|
||||
<CProgress className="progress-xs" color="danger" value={98} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-paypal" />
|
||||
<CIcon size="xl" name="cib-cc-paypal" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -536,10 +536,10 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="info" value="22" />
|
||||
<CProgress className="progress-xs" color="info" value={22} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-google-pay" />
|
||||
<CIcon size="xl" name="cib-cc-apple-pay" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div className="small text-medium-emphasis">Last login</div>
|
||||
@ -570,7 +570,7 @@ const Dashboard = () => {
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress className="progress-xs" color="success" value="43" />
|
||||
<CProgress className="progress-xs" color="success" value={43} />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell className="text-center">
|
||||
<CIcon size="xl" name="cib-cc-amex" />
|
||||
|
||||
@ -639,13 +639,8 @@ const Cards = () => {
|
||||
{ color: 'light' },
|
||||
{ color: 'dark', textColor: 'white' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4}>
|
||||
<CCard
|
||||
color={item.color}
|
||||
textColor={item.textColor}
|
||||
className="mb-3"
|
||||
key={index}
|
||||
>
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard color={item.color} textColor={item.textColor} className="mb-3">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} card title</CCardTitle>
|
||||
@ -678,12 +673,8 @@ const Cards = () => {
|
||||
{ color: 'light' },
|
||||
{ color: 'dark' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4}>
|
||||
<CCard
|
||||
textColor={item.textColor}
|
||||
className={`mb-3 border-${item.color}`}
|
||||
key={index}
|
||||
>
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{item.color} card title</CCardTitle>
|
||||
@ -716,11 +707,10 @@ const Cards = () => {
|
||||
{ color: 'light' },
|
||||
{ color: 'dark' },
|
||||
].map((item, index) => (
|
||||
<CCol lg={4}>
|
||||
<CCol lg={4} key={index}>
|
||||
<CCard
|
||||
textColor={item.textColor}
|
||||
className={`mb-3 border-top-${item.color} border-top-3`}
|
||||
key={index}
|
||||
>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
@ -34,7 +34,7 @@ const Paginations = () => {
|
||||
could be <code>aria-label="Search results pages"</code>.
|
||||
</p>
|
||||
<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>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
@ -56,14 +56,14 @@ const Paginations = () => {
|
||||
to provide proper screen reader support with <code>aria</code> attributes.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/pagination#working-with-icons">
|
||||
<CPagination ariaLabel="Page navigation example">
|
||||
<CPaginationItem ariaLabel="Previous">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem ariaLabel="Next">
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
@ -90,14 +90,14 @@ const Paginations = () => {
|
||||
to fully disable their functionality.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/pagination#disabled-and-active-states">
|
||||
<CPagination ariaLabel="Page navigation example">
|
||||
<CPaginationItem ariaLabel="Previous" disabled>
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" disabled>
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem active>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem ariaLabel="Next">
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
@ -116,7 +116,7 @@ const Paginations = () => {
|
||||
<code>size="sm"</code> for additional sizes.
|
||||
</p>
|
||||
<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>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
@ -125,7 +125,7 @@ const Paginations = () => {
|
||||
</CPagination>
|
||||
</Example>
|
||||
<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>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
@ -147,7 +147,7 @@ const Paginations = () => {
|
||||
<a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
|
||||
</p>
|
||||
<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>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
@ -156,7 +156,7 @@ const Paginations = () => {
|
||||
</CPagination>
|
||||
</Example>
|
||||
<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>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
|
||||
@ -21,19 +21,19 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="0" />
|
||||
<CProgressBar value={0} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="25" />
|
||||
<CProgressBar value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="50" />
|
||||
<CProgressBar value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="75" />
|
||||
<CProgressBar value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="100" />
|
||||
<CProgressBar value={100} />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -51,7 +51,7 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#labels">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="25">25%</CProgressBar>
|
||||
<CProgressBar value={25}>25%</CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -69,11 +69,11 @@ const Progress = () => {
|
||||
resize accordingly.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#height">
|
||||
<CProgress height="1" className="mb-3">
|
||||
<CProgressBar value="25"></CProgressBar>
|
||||
<CProgress height={1} className="mb-3">
|
||||
<CProgressBar value={25}></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress height="20" className="mb-3">
|
||||
<CProgressBar value="25"></CProgressBar>
|
||||
<CProgress height={20} className="mb-3">
|
||||
<CProgressBar value={25}></CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -90,16 +90,16 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#backgrounds">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" value="25" />
|
||||
<CProgressBar color="success" value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" value="50" />
|
||||
<CProgressBar color="info" value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" value="75" />
|
||||
<CProgressBar color="warning" value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" value="100" />
|
||||
<CProgressBar color="danger" value={100} />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -116,9 +116,9 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#multiple-bars">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar value="15" />
|
||||
<CProgressBar color="success" value="30" />
|
||||
<CProgressBar color="info" value="20" />
|
||||
<CProgressBar value={15} />
|
||||
<CProgressBar color="success" value={30} />
|
||||
<CProgressBar color="info" value={20} />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -136,16 +136,16 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#striped">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" variant="striped" value="25" />
|
||||
<CProgressBar color="success" variant="striped" value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" variant="striped" value="50" />
|
||||
<CProgressBar color="info" variant="striped" value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" value="75" />
|
||||
<CProgressBar color="warning" variant="striped" value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" value="100" />
|
||||
<CProgressBar color="danger" variant="striped" value={100} />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
@ -164,16 +164,16 @@ const Progress = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/progress#animated-stripes">
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="success" variant="striped" animated value="25" />
|
||||
<CProgressBar color="success" variant="striped" animated value={25} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="info" variant="striped" animated value="50" />
|
||||
<CProgressBar color="info" variant="striped" animated value={50} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" animated value="75" />
|
||||
<CProgressBar color="warning" variant="striped" animated value={75} />
|
||||
</CProgress>
|
||||
<CProgress className="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" animated value="100" />
|
||||
<CProgressBar color="danger" variant="striped" animated value={100} />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
|
||||
123
src/views/examples/base/spinners/Spinners.js
Normal file
123
src/views/examples/base/spinners/Spinners.js
Normal 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
|
||||
@ -25,8 +25,8 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Using the most basic table CoreUI, here's how{' '}
|
||||
<code class="css-0"><CTable></code>-based tables look in CoreUI.
|
||||
Using the most basic table CoreUI, here's how <code><CTable></code>-based tables
|
||||
look in CoreUI.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table">
|
||||
<CTable>
|
||||
@ -53,7 +53,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -139,8 +139,8 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code class="css-0">striped</code> property to add zebra-striping to any table row
|
||||
within the <code class="css-0"><CTableBody></code>.
|
||||
Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
|
||||
<code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#striped-rows">
|
||||
<CTable striped>
|
||||
@ -167,7 +167,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -201,7 +201,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -232,7 +232,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -248,8 +248,8 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Use <code class="css-0">hover</code> property to enable a hover state on table rows
|
||||
within a <code class="css-0"><CTableBody></code>.
|
||||
Use <code>hover</code> property to enable a hover state on table rows within a{' '}
|
||||
<code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#hoverable-rows">
|
||||
<CTable hover>
|
||||
@ -276,7 +276,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -307,7 +307,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -338,7 +338,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -378,7 +378,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2" active>
|
||||
<CTableDataCell colSpan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
@ -411,7 +411,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2" active>
|
||||
<CTableDataCell colSpan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
@ -429,8 +429,7 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code class="css-0">bordered</code> property for borders on all sides of the table
|
||||
and cells.
|
||||
Add <code>bordered</code> property for borders on all sides of the table and cells.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#bordered-tables">
|
||||
<CTable bordered>
|
||||
@ -457,14 +456,14 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<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
|
||||
</a>{' '}
|
||||
can be added to change colors:
|
||||
@ -494,7 +493,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -510,7 +509,7 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<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>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#tables-without-borders">
|
||||
<CTable borderless>
|
||||
@ -537,7 +536,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -568,7 +567,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -584,9 +583,8 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Add <code class="css-0">small</code> property to make any{' '}
|
||||
<code class="css-0"><CTable></code> more compact by cutting all cell{' '}
|
||||
<code class="css-0">padding</code> in half.
|
||||
Add <code>small</code> property to make any <code><CTable></code> more compact
|
||||
by cutting all cell <code>padding</code> in half.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#small-tables">
|
||||
<CTable small>
|
||||
@ -613,7 +611,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -629,13 +627,13 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Table cells of <code class="css-0"><CTableHead></code> are always vertical
|
||||
aligned to the bottom. Table cells in <code class="css-0"><CTableBody></code>{' '}
|
||||
inherit their alignment from <code class="css-0"><CTable></code> and are aligned
|
||||
to the the top by default. Use the align property to re-align where needed.
|
||||
Table cells of <code><CTableHead></code> are always vertical aligned to the
|
||||
bottom. Table cells in <code><CTableBody></code> inherit their alignment from{' '}
|
||||
<code><CTable></code> and are aligned to the the top by default. Use the align
|
||||
property to re-align where needed.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#vertical-alignment">
|
||||
<CTable align="middle" reponsive>
|
||||
<CTable align="middle" responsive>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col" className="w-25">
|
||||
@ -732,7 +730,7 @@ const Tables = () => {
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell colspan="4">
|
||||
<CTableHeaderCell colSpan="4">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
@ -763,7 +761,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -779,9 +777,9 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
Similar to tables and dark tables, use the modifier prop{' '}
|
||||
<code class="css-0">color="light"</code> or <code class="css-0">color="dark"</code> to
|
||||
make <code class="css-0"><CTableHead></code>s appear light or dark gray.
|
||||
Similar to tables and dark tables, use the modifier prop <code>color="light"</code> or{' '}
|
||||
<code>color="dark"</code> to make <code><CTableHead></code>s appear light or
|
||||
dark gray.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#table-head">
|
||||
<CTable>
|
||||
@ -840,7 +838,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -880,7 +878,7 @@ const Tables = () => {
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colspan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
@ -904,9 +902,9 @@ const Tables = () => {
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
A <code class="css-0"><CTableCaption></code> functions like a heading for a
|
||||
table. It helps users with screen readers to find a table and understand what it's
|
||||
about and decide if they want to read it.
|
||||
A <code><CTableCaption></code> functions like a heading for a table. It helps
|
||||
users with screen readers to find a table and understand what it's about and decide if
|
||||
they want to read it.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
|
||||
<CTable>
|
||||
@ -942,8 +940,8 @@ const Tables = () => {
|
||||
</CTable>
|
||||
</Example>
|
||||
<p className="text-medium-emphasis small">
|
||||
You can also put the <code class="css-0"><CTableCaption></code> on the top of
|
||||
the table with <code class="css-0">caption="top"</code>.
|
||||
You can also put the <code><CTableCaption></code> on the top of the table with{' '}
|
||||
<code>caption="top"</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/table#captions">
|
||||
<CTable caption="top">
|
||||
|
||||
@ -54,7 +54,7 @@ const Tooltips = () => {
|
||||
freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</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,
|
||||
and left. Directions are mirrored when using CoreUI in RTL.
|
||||
</p>
|
||||
|
||||
@ -114,21 +114,21 @@ const ButtonGroups = () => {
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck1"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checkbox 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck2"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checkbox 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonVariant="outline"
|
||||
id="btncheck3"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checkbox 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
@ -141,7 +141,7 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio1"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 1"
|
||||
/>
|
||||
<CFormCheck
|
||||
@ -150,7 +150,7 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio2"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
@ -159,7 +159,7 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="btnradio"
|
||||
id="btnradio3"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
@ -415,9 +415,9 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio1"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 1"
|
||||
checked
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
@ -426,7 +426,7 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio2"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 2"
|
||||
/>
|
||||
<CFormCheck
|
||||
@ -436,7 +436,7 @@ const ButtonGroups = () => {
|
||||
buttonVariant="outline"
|
||||
name="vbtnradio"
|
||||
id="vbtnradio3"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio 3"
|
||||
/>
|
||||
</CButtonGroup>
|
||||
|
||||
@ -58,7 +58,7 @@ const Buttons = () => {
|
||||
<strong>React Button</strong> <small>with icons</small>
|
||||
</CCardHeader>
|
||||
<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>.
|
||||
</p>
|
||||
<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.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
@ -359,7 +359,7 @@ const Buttons = () => {
|
||||
your browser to see them change.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
@ -370,7 +370,7 @@ const Buttons = () => {
|
||||
horizontally with <code>.mx-auto</code>, too.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
@ -382,7 +382,7 @@ const Buttons = () => {
|
||||
stacked.
|
||||
</p>
|
||||
<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">
|
||||
Button
|
||||
</CButton>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CButtonGroup,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
@ -23,9 +24,8 @@ const Dropdowns = () => {
|
||||
<strong>React Dropdown</strong> <small>Single button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Here's how you can put them to work with either{' '}
|
||||
<code class="css-0"><button></code> elements:
|
||||
<p className="text-medium-emphasis small">
|
||||
Here's how you can put them to work with either <code><button></code> elements:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#single-button">
|
||||
<CDropdown>
|
||||
@ -37,7 +37,9 @@ const Dropdowns = () => {
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</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">
|
||||
<>
|
||||
{['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map(
|
||||
@ -65,17 +67,16 @@ const Dropdowns = () => {
|
||||
<strong>React Dropdown</strong> <small>Split button</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
<p className="text-medium-emphasis small">
|
||||
Similarly, create split button dropdowns with virtually the same markup as single
|
||||
button dropdowns, but with the addition of boolean prop{' '}
|
||||
<code class="css-0">split</code> for proper spacing around the dropdown caret.
|
||||
button dropdowns, but with the addition of boolean prop <code>split</code> for proper
|
||||
spacing around the dropdown caret.
|
||||
</p>
|
||||
<p class="css-0">
|
||||
We use this extra class to reduce the horizontal <code class="css-0">padding</code> on
|
||||
either side of the caret by 25% and remove the <code class="css-0">margin-left</code>{' '}
|
||||
that's attached for normal button dropdowns. Those additional changes hold the caret
|
||||
centered in the split button and implement a more properly sized hit area next to the
|
||||
main button.
|
||||
<p className="text-medium-emphasis small">
|
||||
We use this extra class to reduce the horizontal <code>padding</code> on either side
|
||||
of the caret by 25% and remove the <code>margin-left</code> that's attached for normal
|
||||
button dropdowns. Those additional changes hold the caret centered in the split button
|
||||
and implement a more properly sized hit area next to the main button.
|
||||
</p>
|
||||
<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>
|
||||
</CCardHeader>
|
||||
<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{' '}
|
||||
<code class="css-0">dark</code> property. No changes are required to the dropdown
|
||||
items.
|
||||
<code>dark</code> property. No changes are required to the dropdown items.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dark-dropdowns">
|
||||
<CDropdown dark>
|
||||
@ -189,7 +189,7 @@ const Dropdowns = () => {
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</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">
|
||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div className="container-fluid">
|
||||
@ -233,10 +233,9 @@ const Dropdowns = () => {
|
||||
<strong>React Dropdown</strong> <small>Dropup</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Trigger dropdown menus above elements by adding{' '}
|
||||
<code class="css-0">direction="dropup"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus above elements by adding <code>direction="dropup"</code> to the{' '}
|
||||
<code><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropup">
|
||||
<CDropdown variant="btn-group" direction="dropup">
|
||||
@ -270,10 +269,9 @@ const Dropdowns = () => {
|
||||
<strong>React Dropdown</strong> <small>Dropright</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the right of the elements by adding{' '}
|
||||
<code class="css-0">direction="dropend"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
<code>direction="dropend"</code> to the <code><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropright">
|
||||
<CDropdown variant="btn-group" direction="dropend">
|
||||
@ -307,33 +305,24 @@ const Dropdowns = () => {
|
||||
<strong>React Dropdown</strong> <small>Dropleft</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
<p className="text-medium-emphasis small">
|
||||
Trigger dropdown menus at the left of the elements by adding{' '}
|
||||
<code class="css-0">direction="dropstart"</code> to the{' '}
|
||||
<code class="css-0"><CDropdown></code> component.
|
||||
<code>direction="dropstart"</code> to the <code><CDropdown></code> component.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/dropdown#dropleft">
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split />
|
||||
<CButtonGroup>
|
||||
<CDropdown variant="btn-group" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="secondary">Small split button</CButton>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
@ -32,25 +32,6 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</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}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Line Chart</CCardHeader>
|
||||
@ -82,6 +63,25 @@ const Charts = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</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}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
|
||||
@ -291,19 +291,19 @@ const ChecksRadios = () => {
|
||||
further be grouped in a button group if needed.
|
||||
</p>
|
||||
<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 href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button
|
||||
id="btn-check-2"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
<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>
|
||||
<h3>Radio toggle buttons</h3>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
@ -313,7 +313,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option1"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
@ -323,7 +323,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option2"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
@ -332,7 +332,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option3"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
disabled
|
||||
/>
|
||||
@ -342,7 +342,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option4"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</Example>
|
||||
@ -357,7 +357,7 @@ const ChecksRadios = () => {
|
||||
buttonColor="primary"
|
||||
buttonVariant="outline"
|
||||
id="btn-check-outlined"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</div>
|
||||
@ -367,7 +367,7 @@ const ChecksRadios = () => {
|
||||
buttonColor="secondary"
|
||||
buttonVariant="outline"
|
||||
id="btn-check-2-outlined"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
@ -380,7 +380,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="success-outlined"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
defaultChecked
|
||||
/>
|
||||
@ -391,7 +391,7 @@ const ChecksRadios = () => {
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="danger-outlined"
|
||||
autocomplete="off"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
172
src/views/examples/forms/floating-labels/FloatingLabels.js
Normal file
172
src/views/examples/forms/floating-labels/FloatingLabels.js
Normal 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><CFormControl></code> and <code><CFormLabel></code>{' '}
|
||||
elements in <code>CFormFloating</code> to enable floating labels with textual form
|
||||
fields. A <code>placeholder</code> is required on each{' '}
|
||||
<code><CFormControl></code> as our method of CSS-only floating labels uses the{' '}
|
||||
<code>:placeholder-shown</code> pseudo-element. Also note that the{' '}
|
||||
<code><CFormControl></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><CFormLabel></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><CFormControl component="textarea"></code>s will be the same
|
||||
height as <code><CFormControl></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><CFormControl component="textarea"></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><CFormControl></code>, floating labels are only available on{' '}
|
||||
<code><CFormSelect></code>s. They work in the same way, but unlike{' '}
|
||||
<code><CFormControl></code>s, they'll always show the{' '}
|
||||
<code><CFormLabel></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
|
||||
@ -150,7 +150,7 @@ const FormControl = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="staticEmail"
|
||||
value="email@example.com"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
@ -174,7 +174,7 @@ const FormControl = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="staticEmail2"
|
||||
value="email@example.com"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
@ -237,7 +237,7 @@ const FormControl = () => {
|
||||
<CFormControl
|
||||
type="color"
|
||||
id="exampleColorInput"
|
||||
value="#563d7c"
|
||||
defaultValue="#563d7c"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</Example>
|
||||
|
||||
@ -282,7 +282,7 @@ const Select = () => {
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#buttons-with-dropdowns">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
@ -298,7 +298,7 @@ const Select = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl aria-label="Text input with dropdown button" />
|
||||
<CDropdown alignment="end">
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
@ -312,7 +312,7 @@ const Select = () => {
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
@ -325,7 +325,7 @@ const Select = () => {
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormControl aria-label="Text input with 2 dropdown buttons" />
|
||||
<CDropdown alignment="end">
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
@ -350,7 +350,7 @@ const Select = () => {
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#segmented-buttons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown>
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
@ -367,7 +367,7 @@ const Select = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<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">
|
||||
Action
|
||||
</CButton>
|
||||
@ -397,7 +397,7 @@ const Select = () => {
|
||||
Options
|
||||
</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -405,7 +405,7 @@ const Select = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -419,7 +419,7 @@ const Select = () => {
|
||||
Button
|
||||
</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -427,7 +427,7 @@ const Select = () => {
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
|
||||
@ -90,7 +90,7 @@ const Layout = () => {
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="inputState">State</CFormLabel>
|
||||
<CFormSelect id="inputState">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
@ -303,7 +303,7 @@ const Layout = () => {
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="autoSizingSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -342,7 +342,7 @@ const Layout = () => {
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="specificSizeSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -388,7 +388,7 @@ const Layout = () => {
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="inlineFormSelectPref">
|
||||
<option selected>Choose...</option>
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
|
||||
@ -13,7 +13,7 @@ const Select = () => {
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select">
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -34,13 +34,13 @@ const Select = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -51,7 +51,7 @@ const Select = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -62,7 +62,7 @@ const Select = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
@ -83,7 +83,7 @@ const Select = () => {
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
|
||||
@ -36,12 +36,12 @@ const CustomStyles = () => {
|
||||
>
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
@ -51,7 +51,7 @@ const CustomStyles = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationCustomUsername"
|
||||
value=""
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
@ -66,9 +66,7 @@ const CustomStyles = () => {
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<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}>
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
@ -125,7 +123,7 @@ const BrowserDefaults = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationDefaultUsername"
|
||||
value=""
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend02"
|
||||
required
|
||||
/>
|
||||
@ -140,9 +138,7 @@ const BrowserDefaults = () => {
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
@ -189,14 +185,14 @@ const Tooltips = () => {
|
||||
>
|
||||
<CCol md="4" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip01" value="Mark" required />
|
||||
<CFormControl type="text" id="validationTooltip01" defaultValue="Mark" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip02" value="Otto" required />
|
||||
<CFormControl type="text" id="validationTooltip02" defaultValue="Otto" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
@ -208,7 +204,7 @@ const Tooltips = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationTooltipUsername"
|
||||
value=""
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
@ -227,7 +223,7 @@ const Tooltips = () => {
|
||||
<CCol md="3" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
|
||||
<CFormSelect id="validationTooltip04" required>
|
||||
<option selected disabled value="">
|
||||
<option disabled defaultValue="">
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
@ -310,8 +306,8 @@ const Validation = () => {
|
||||
<CCardBody>
|
||||
<p className="text-medium-emphasis small">
|
||||
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>{' '}
|
||||
and <code>isValid</code> boolean properties.
|
||||
validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
|
||||
and <code>valid</code> boolean properties.
|
||||
</p>
|
||||
<p className="text-medium-emphasis small">
|
||||
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">
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
@ -338,9 +346,9 @@ const Validation = () => {
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationServerUsername"
|
||||
value=""
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend03"
|
||||
isInvalid
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
@ -348,22 +356,20 @@ const Validation = () => {
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
|
||||
<CFormSelect id="validationServer04" isInvalid>
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<CFormSelect id="validationServer04" invalid>
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<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>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
@ -371,7 +377,7 @@ const Validation = () => {
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
isInvalid
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<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">
|
||||
<CForm validated={true}>
|
||||
<div className="mb-3">
|
||||
<CFormLabel for="validationTextarea" className="form-label">
|
||||
<CFormLabel htmlFor="validationTextarea" className="form-label">
|
||||
Textarea
|
||||
</CFormLabel>
|
||||
<CFormControl
|
||||
component="textarea"
|
||||
id="validationTextarea"
|
||||
placeholder="Required example textarea"
|
||||
isInvalid
|
||||
invalid
|
||||
required
|
||||
></CFormControl>
|
||||
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
|
||||
@ -449,7 +455,7 @@ const Validation = () => {
|
||||
|
||||
<div className="mb-3">
|
||||
<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="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
|
||||
@ -23,12 +23,11 @@ const WidgetsDropdown = () => {
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
{/* TODO: placement doesn't work */}
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -106,11 +105,11 @@ const WidgetsDropdown = () => {
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -187,11 +186,11 @@ const WidgetsDropdown = () => {
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
@ -255,11 +254,11 @@ const WidgetsDropdown = () => {
|
||||
value="9.823"
|
||||
title="Members online"
|
||||
action={
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="transparent" caret={false}>
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="transparent" caret={false} className="p-0">
|
||||
<CIcon name="cil-options" className="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu placement="bottom-end">
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user