refactor: update routes
This commit is contained in:
Łukasz Holeczek
parent
caa46b8b91
commit
2e1d16dd01
@ -43,6 +43,12 @@ const _nav = [
|
|||||||
to: '/to',
|
to: '/to',
|
||||||
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
|
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
|
||||||
items: [
|
items: [
|
||||||
|
{
|
||||||
|
_component: 'CNavItem',
|
||||||
|
as: NavLink,
|
||||||
|
anchor: 'Accordion',
|
||||||
|
to: '/base/accordion',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
_component: 'CNavItem',
|
_component: 'CNavItem',
|
||||||
as: NavLink,
|
as: NavLink,
|
||||||
|
|||||||
30
src/reusable/Example.js
Normal file
30
src/reusable/Example.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { CLink, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react'
|
||||||
|
|
||||||
|
const Example = (props) => {
|
||||||
|
const { children, href, ...rest } = props
|
||||||
|
|
||||||
|
// const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CNav variant="tabs">
|
||||||
|
<CNavItem>
|
||||||
|
<CNavLink href="#" active>
|
||||||
|
Preview
|
||||||
|
</CNavLink>
|
||||||
|
</CNavItem>
|
||||||
|
<CNavItem>
|
||||||
|
<CNavLink href={href} target="_blank">
|
||||||
|
Code
|
||||||
|
</CNavLink>
|
||||||
|
</CNavItem>
|
||||||
|
</CNav>
|
||||||
|
<CTabContent>
|
||||||
|
<CTabPane visible>{children}</CTabPane>
|
||||||
|
</CTabContent>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(Example)
|
||||||
@ -1,3 +1,4 @@
|
|||||||
import DocsLink from './DocsLink'
|
import DocsLink from './DocsLink'
|
||||||
|
import Example from './Example'
|
||||||
|
|
||||||
export { DocsLink }
|
export { DocsLink, Example }
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import React from 'react'
|
|||||||
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
|
const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
|
||||||
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
|
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
|
||||||
|
|
||||||
|
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
|
||||||
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
|
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
|
||||||
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
|
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
|
||||||
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
|
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
|
||||||
@ -44,6 +45,7 @@ const routes = [
|
|||||||
{ path: '/theme/colors', name: 'Colors', component: Colors },
|
{ path: '/theme/colors', name: 'Colors', component: Colors },
|
||||||
{ path: '/theme/typography', name: 'Typography', component: Typography },
|
{ path: '/theme/typography', name: 'Typography', component: Typography },
|
||||||
{ path: '/base', name: 'Base', component: Cards, exact: true },
|
{ path: '/base', name: 'Base', component: Cards, exact: true },
|
||||||
|
{ path: '/base/accordion', name: 'Accordion', component: Accordion },
|
||||||
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
|
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
|
||||||
{ path: '/base/cards', name: 'Cards', component: Cards },
|
{ path: '/base/cards', name: 'Cards', component: Cards },
|
||||||
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
|
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
|
||||||
|
|||||||
185
src/views/base/accordion/Accordion.js
Normal file
185
src/views/base/accordion/Accordion.js
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import {
|
||||||
|
CCard,
|
||||||
|
CCardBody,
|
||||||
|
CCardHeader,
|
||||||
|
CCol,
|
||||||
|
CRow,
|
||||||
|
CAccordion,
|
||||||
|
CAccordionBody,
|
||||||
|
CAccordionButton,
|
||||||
|
CAccordionCollapse,
|
||||||
|
CAccordionHeader,
|
||||||
|
CAccordionItem,
|
||||||
|
} from '@coreui/react'
|
||||||
|
import { DocsLink, Example } from 'src/reusable'
|
||||||
|
|
||||||
|
const Accordion = () => {
|
||||||
|
const [activeKey, setActiveKey] = useState(0)
|
||||||
|
const [activeKey2, setActiveKey2] = useState(0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CRow>
|
||||||
|
<CCol>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Accordion</strong>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p class="text-medium-emphasis small">
|
||||||
|
Click the accordions below to expand/collapse the accordion content.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
|
||||||
|
<CAccordion>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey !== 1}
|
||||||
|
onClick={() => (activeKey === 1 ? setActiveKey(0) : setActiveKey(1))}
|
||||||
|
>
|
||||||
|
Accordion Item #1
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey === 1}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey !== 2}
|
||||||
|
onClick={() => (activeKey === 2 ? setActiveKey(0) : setActiveKey(2))}
|
||||||
|
>
|
||||||
|
Accordion Item #2
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey === 2}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey !== 3}
|
||||||
|
onClick={() => (activeKey === 3 ? setActiveKey(0) : setActiveKey(3))}
|
||||||
|
>
|
||||||
|
Accordion Item #3
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey === 3}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
</CAccordion>
|
||||||
|
</Example>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Accordion</strong> <small>Flush</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p class="text-medium-emphasis small">
|
||||||
|
Add <code class="css-0">flush</code> to remove the default{' '}
|
||||||
|
<code class="css-0">background-color</code>, some borders, and some rounded corners to
|
||||||
|
render accordions edge-to-edge with their parent container.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
|
||||||
|
<CAccordion flush>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey2 !== 1}
|
||||||
|
onClick={() => (activeKey2 === 1 ? setActiveKey2(0) : setActiveKey2(1))}
|
||||||
|
>
|
||||||
|
Accordion Item #1
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey2 === 1}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the first item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey2 !== 2}
|
||||||
|
onClick={() => (activeKey2 === 2 ? setActiveKey2(0) : setActiveKey2(2))}
|
||||||
|
>
|
||||||
|
Accordion Item #2
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey2 === 2}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the second item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
<CAccordionItem>
|
||||||
|
<CAccordionHeader>
|
||||||
|
<CAccordionButton
|
||||||
|
collapsed={activeKey2 !== 3}
|
||||||
|
onClick={() => (activeKey2 === 3 ? setActiveKey2(0) : setActiveKey2(3))}
|
||||||
|
>
|
||||||
|
Accordion Item #3
|
||||||
|
</CAccordionButton>
|
||||||
|
</CAccordionHeader>
|
||||||
|
<CAccordionCollapse visible={activeKey2 === 3}>
|
||||||
|
<CAccordionBody>
|
||||||
|
<strong>This is the third item's accordion body.</strong> It is hidden by
|
||||||
|
default, until the collapse plugin adds the appropriate classes that we use to
|
||||||
|
style each element. These classes control the overall appearance, as well as
|
||||||
|
the showing and hiding via CSS transitions. You can modify any of this with
|
||||||
|
custom CSS or overriding our default variables. It's also worth noting that
|
||||||
|
just about any HTML can go within the <code>.accordion-body</code>, though the
|
||||||
|
transition does limit overflow.
|
||||||
|
</CAccordionBody>
|
||||||
|
</CAccordionCollapse>
|
||||||
|
</CAccordionItem>
|
||||||
|
</CAccordion>
|
||||||
|
</Example>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Accordion
|
||||||
File diff suppressed because it is too large
Load Diff
@ -5,14 +5,11 @@ import {
|
|||||||
CCardHeader,
|
CCardHeader,
|
||||||
CCarousel,
|
CCarousel,
|
||||||
CCarouselCaption,
|
CCarouselCaption,
|
||||||
CCarouselControl,
|
|
||||||
CCarouselIndicators,
|
|
||||||
CCarouselInner,
|
|
||||||
CCarouselItem,
|
CCarouselItem,
|
||||||
CCol,
|
CCol,
|
||||||
CRow,
|
CRow,
|
||||||
} from '@coreui/react'
|
} from '@coreui/react'
|
||||||
import { DocsLink } from 'src/reusable'
|
import { DocsLink, Example } from 'src/reusable'
|
||||||
|
|
||||||
const slides = [
|
const slides = [
|
||||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||||
@ -20,20 +17,26 @@ const slides = [
|
|||||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const slidesLight = [
|
||||||
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||||
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||||
|
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||||
|
]
|
||||||
|
|
||||||
const Carousels = () => {
|
const Carousels = () => {
|
||||||
const [activeIndex] = useState(1)
|
const [activeIndex] = useState(1)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol xs="12" xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Carousel with controls
|
<strong>Carousel</strong> <small>Slide only</small>
|
||||||
<DocsLink name="CCarousel" />
|
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCarousel>
|
<p class="text-medium-emphasis small">Here’s a carousel with slides</p>
|
||||||
<CCarouselInner>
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel">
|
||||||
|
<CCarousel>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
@ -43,115 +46,172 @@ const Carousels = () => {
|
|||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
</CCarouselInner>
|
</CCarousel>
|
||||||
<CCarouselControl direction="prev" />
|
</Example>
|
||||||
<CCarouselControl direction="next" />
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol xs="12" xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>Carousel with controls, indicators and caption</CCardHeader>
|
<CCardHeader>
|
||||||
|
<strong>Carousel</strong> <small>With controls</small>
|
||||||
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCarousel activeIndex={activeIndex}>
|
<p class="text-medium-emphasis small">
|
||||||
<CCarouselIndicators />
|
Adding in the previous and next controls by <code class="css-0">controls</code>{' '}
|
||||||
<CCarouselInner>
|
property.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-controls">
|
||||||
|
<CCarousel controls>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 1</h3>
|
|
||||||
<p>Slide 1</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 2</h3>
|
|
||||||
<p>Slide 2</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 3</h3>
|
|
||||||
<p>Slide 3</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
</CCarouselInner>
|
</CCarousel>
|
||||||
<CCarouselControl direction="prev" />
|
</Example>
|
||||||
<CCarouselControl direction="next" />
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol xs="12" xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>Carousel animation</CCardHeader>
|
<CCardHeader>
|
||||||
|
<strong>Carousel</strong> <small>With indicators</small>
|
||||||
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCarousel animate>
|
<p class="text-medium-emphasis small">
|
||||||
<CCarouselIndicators />
|
You can attach the indicators to the carousel, lengthwise the controls, too.
|
||||||
<CCarouselInner>
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators">
|
||||||
|
<CCarousel controls indicators>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 1</h3>
|
|
||||||
<p>Slide 1</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 2</h3>
|
|
||||||
<p>Slide 2</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||||
<CCarouselCaption>
|
|
||||||
<h3>Slide 3</h3>
|
|
||||||
<p>Slide 3</p>
|
|
||||||
</CCarouselCaption>
|
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
</CCarouselInner>
|
</CCarousel>
|
||||||
<CCarouselControl direction="prev" />
|
</Example>
|
||||||
<CCarouselControl direction="next" />
|
|
||||||
</CCarousel>
|
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol xs="12" xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>Carousel animation with autoSlide</CCardHeader>
|
<CCardHeader>
|
||||||
|
<strong>Carousel</strong> <small>With captions</small>
|
||||||
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CCarousel animate autoSlide={3000}>
|
<p class="text-medium-emphasis small">
|
||||||
<CCarouselIndicators />
|
You can add captions to slides with the{' '}
|
||||||
<CCarouselInner>
|
<code class="css-0"><CCarouselCaption></code> element within any{' '}
|
||||||
|
<code class="css-0"><CCarouselItem></code>. They can be immediately hidden on
|
||||||
|
smaller viewports, as shown below, with optional{' '}
|
||||||
|
<a href="https://coreui.io/4.0/utilities/display%22" class="css-0">
|
||||||
|
display utilities
|
||||||
|
</a>
|
||||||
|
. We hide them with <code class="css-0">.d-none</code> and draw them back on
|
||||||
|
medium-sized devices with <code class="css-0">.d-md-block</code>.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-captions">
|
||||||
|
<CCarousel controls indicators>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||||
<CCarouselCaption>
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
<h3>Slide 1</h3>
|
<h5>First slide label</h5>
|
||||||
<p>Slide 1</p>
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
</CCarouselCaption>
|
</CCarouselCaption>
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||||
<CCarouselCaption>
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
<h3>Slide 2</h3>
|
<h5>Second slide label</h5>
|
||||||
<p>Slide 2</p>
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
</CCarouselCaption>
|
</CCarouselCaption>
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
<CCarouselItem>
|
<CCarouselItem>
|
||||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||||
<CCarouselCaption>
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
<h3>Slide 3</h3>
|
<h5>Third slide label</h5>
|
||||||
<p>Slide 3</p>
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
</CCarouselCaption>
|
</CCarouselCaption>
|
||||||
</CCarouselItem>
|
</CCarouselItem>
|
||||||
</CCarouselInner>
|
</CCarousel>
|
||||||
<CCarouselControl direction="prev" />
|
</Example>
|
||||||
<CCarouselControl direction="next" />
|
</CCardBody>
|
||||||
</CCarousel>
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol xs={12}>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Carousel</strong> <small>Crossfade</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p class="text-medium-emphasis small">
|
||||||
|
Add <code class="css-0">transition="crossfade"</code> to your carousel to animate
|
||||||
|
slides with a fade transition instead of a slide.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#crossfade">
|
||||||
|
<CCarousel controls transition="crossfade">
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||||
|
</CCarouselItem>
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||||
|
</CCarouselItem>
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||||
|
</CCarouselItem>
|
||||||
|
</CCarousel>
|
||||||
|
</Example>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol xs={12}>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>Carousel</strong> <small>Dark variant</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p class="text-medium-emphasis small">
|
||||||
|
Add <code class="css-0">dark</code> property to the{' '}
|
||||||
|
<code class="css-0">CCarousel</code> for darker controls, indicators, and captions.
|
||||||
|
Controls have been inverted from their default white fill with the{' '}
|
||||||
|
<code class="css-0">filter</code> CSS property. Captions and controls have additional
|
||||||
|
Sass variables that customize the <code class="css-0">color</code> and{' '}
|
||||||
|
<code class="css-0">background-color</code>.
|
||||||
|
</p>
|
||||||
|
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#dark-variant">
|
||||||
|
<CCarousel controls indicators dark>
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slidesLight[0]} alt="slide 1" />
|
||||||
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
|
<h5>First slide label</h5>
|
||||||
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
|
</CCarouselCaption>
|
||||||
|
</CCarouselItem>
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slidesLight[1]} alt="slide 2" />
|
||||||
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
|
<h5>Second slide label</h5>
|
||||||
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
|
</CCarouselCaption>
|
||||||
|
</CCarouselItem>
|
||||||
|
<CCarouselItem>
|
||||||
|
<img className="d-block w-100" src={slidesLight[2]} alt="slide 3" />
|
||||||
|
<CCarouselCaption className="d-none d-md-block">
|
||||||
|
<h5>Third slide label</h5>
|
||||||
|
<p>Some representative placeholder content for the first slide.</p>
|
||||||
|
</CCarouselCaption>
|
||||||
|
</CCarouselItem>
|
||||||
|
</CCarousel>
|
||||||
|
</Example>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
|
import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react'
|
||||||
import { DocsLink } from 'src/reusable'
|
import { DocsLink, Example } from 'src/reusable'
|
||||||
|
|
||||||
const Collapses = () => {
|
const Collapses = () => {
|
||||||
const [visible, setVisible] = useState(false)
|
const [visible, setVisible] = useState(false)
|
||||||
@ -9,76 +9,82 @@ const Collapses = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Collapse
|
<strong>React Collapse</strong>
|
||||||
<DocsLink name="CCollapse" />
|
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton
|
<p class="text-medium-emphasis small">You can use a link or a button component.</p>
|
||||||
href="#"
|
<Example href="https://coreui.io/react/docs/4.0/components/collapse">
|
||||||
onClick={(e) => {
|
<CButton
|
||||||
e.preventDefault()
|
href="#"
|
||||||
setVisible(!visible)
|
onClick={(e) => {
|
||||||
}}
|
e.preventDefault()
|
||||||
>
|
setVisible(!visible)
|
||||||
Link
|
}}
|
||||||
</CButton>
|
>
|
||||||
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
Link
|
||||||
<CCollapse visible={visible}>
|
</CButton>
|
||||||
<CCard className="mt-3">
|
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
||||||
<CCardBody>
|
<CCollapse visible={visible}>
|
||||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
<CCard className="mt-3">
|
||||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
<CCardBody>
|
||||||
cred nesciunt sapiente ea proident.
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||||
</CCardBody>
|
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||||
</CCard>
|
anderson cred nesciunt sapiente ea proident.
|
||||||
</CCollapse>
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCollapse>
|
||||||
|
</Example>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol xl="6">
|
<CCol xs={12}>
|
||||||
<CCard className="mb-4">
|
<CCard className="mb-4">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Collapse
|
<strong>React Collapse</strong> <small> multi target</small>
|
||||||
<small> multi target</small>
|
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
<p class="text-medium-emphasis small">
|
||||||
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
A <code class="css-0"><CButton></code> can show and hide multiple elements.
|
||||||
<CButton
|
</p>
|
||||||
onClick={() => {
|
<Example href="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets">
|
||||||
setVisibleA(!visibleA)
|
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
||||||
setVisibleB(!visibleB)
|
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
||||||
}}
|
<CButton
|
||||||
>
|
onClick={() => {
|
||||||
Toggle both elements
|
setVisibleA(!visibleA)
|
||||||
</CButton>
|
setVisibleB(!visibleB)
|
||||||
<CRow>
|
}}
|
||||||
<CCol xs="6">
|
>
|
||||||
<CCollapse visible={visibleA}>
|
Toggle both elements
|
||||||
<CCard className="mt-3">
|
</CButton>
|
||||||
<CCardBody>
|
<CRow>
|
||||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
<CCol xs="6">
|
||||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
<CCollapse visible={visibleA}>
|
||||||
anderson cred nesciunt sapiente ea proident.
|
<CCard className="mt-3">
|
||||||
</CCardBody>
|
<CCardBody>
|
||||||
</CCard>
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||||
</CCollapse>
|
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||||
</CCol>
|
anderson cred nesciunt sapiente ea proident.
|
||||||
<CCol xs="6">
|
</CCardBody>
|
||||||
<CCollapse visible={visibleB}>
|
</CCard>
|
||||||
<CCard className="mt-3">
|
</CCollapse>
|
||||||
<CCardBody>
|
</CCol>
|
||||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
<CCol xs="6">
|
||||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
<CCollapse visible={visibleB}>
|
||||||
anderson cred nesciunt sapiente ea proident.
|
<CCard className="mt-3">
|
||||||
</CCardBody>
|
<CCardBody>
|
||||||
</CCard>
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||||
</CCollapse>
|
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||||
</CCol>
|
anderson cred nesciunt sapiente ea proident.
|
||||||
</CRow>
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCollapse>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</Example>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user