refactor: update routes
This commit is contained in:
Łukasz Holeczek
parent
caa46b8b91
commit
2e1d16dd01
@ -43,6 +43,12 @@ const _nav = [
|
||||
to: '/to',
|
||||
icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
|
||||
items: [
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Accordion',
|
||||
to: '/base/accordion',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
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 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 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 Cards = React.lazy(() => import('./views/base/cards/Cards'))
|
||||
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
|
||||
@ -44,6 +45,7 @@ const routes = [
|
||||
{ path: '/theme/colors', name: 'Colors', component: Colors },
|
||||
{ path: '/theme/typography', name: 'Typography', component: Typography },
|
||||
{ path: '/base', name: 'Base', component: Cards, exact: true },
|
||||
{ path: '/base/accordion', name: 'Accordion', component: Accordion },
|
||||
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
|
||||
{ path: '/base/cards', name: 'Cards', component: Cards },
|
||||
{ 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,
|
||||
CCarousel,
|
||||
CCarouselCaption,
|
||||
CCarouselControl,
|
||||
CCarouselIndicators,
|
||||
CCarouselInner,
|
||||
CCarouselItem,
|
||||
CCol,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink } from 'src/reusable'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
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',
|
||||
@ -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',
|
||||
]
|
||||
|
||||
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 [activeIndex] = useState(1)
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Carousel with controls
|
||||
<DocsLink name="CCarousel" />
|
||||
<strong>Carousel</strong> <small>Slide only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel>
|
||||
<CCarouselInner>
|
||||
<p class="text-medium-emphasis small">Here’s a carousel with slides</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/carousel">
|
||||
<CCarousel>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
@ -43,115 +46,172 @@ const Carousels = () => {
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarouselInner>
|
||||
<CCarouselControl direction="prev" />
|
||||
<CCarouselControl direction="next" />
|
||||
</CCarousel>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Carousel with controls, indicators and caption</CCardHeader>
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With controls</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel activeIndex={activeIndex}>
|
||||
<CCarouselIndicators />
|
||||
<CCarouselInner>
|
||||
<p class="text-medium-emphasis small">
|
||||
Adding in the previous and next controls by <code class="css-0">controls</code>{' '}
|
||||
property.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-controls">
|
||||
<CCarousel controls>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 1</h3>
|
||||
<p>Slide 1</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 2</h3>
|
||||
<p>Slide 2</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 3</h3>
|
||||
<p>Slide 3</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarouselInner>
|
||||
<CCarouselControl direction="prev" />
|
||||
<CCarouselControl direction="next" />
|
||||
</CCarousel>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Carousel animation</CCardHeader>
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With indicators</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel animate>
|
||||
<CCarouselIndicators />
|
||||
<CCarouselInner>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can attach the indicators to the carousel, lengthwise the controls, too.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/carousel/#with-indicators">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 1</h3>
|
||||
<p>Slide 1</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 2</h3>
|
||||
<p>Slide 2</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 3</h3>
|
||||
<p>Slide 3</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarouselInner>
|
||||
<CCarouselControl direction="prev" />
|
||||
<CCarouselControl direction="next" />
|
||||
</CCarousel>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Carousel animation with autoSlide</CCardHeader>
|
||||
<CCardHeader>
|
||||
<strong>Carousel</strong> <small>With captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel animate autoSlide={3000}>
|
||||
<CCarouselIndicators />
|
||||
<CCarouselInner>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can add captions to slides with the{' '}
|
||||
<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>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 1</h3>
|
||||
<p>Slide 1</p>
|
||||
<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={slides[1]} alt="slide 2" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 2</h3>
|
||||
<p>Slide 2</p>
|
||||
<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={slides[2]} alt="slide 3" />
|
||||
<CCarouselCaption>
|
||||
<h3>Slide 3</h3>
|
||||
<p>Slide 3</p>
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarouselInner>
|
||||
<CCarouselControl direction="prev" />
|
||||
<CCarouselControl direction="next" />
|
||||
</CCarousel>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from '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 [visible, setVisible] = useState(false)
|
||||
@ -9,76 +9,82 @@ const Collapses = () => {
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<DocsLink name="CCollapse" />
|
||||
<strong>React Collapse</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
Link
|
||||
</CButton>
|
||||
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
||||
<CCollapse visible={visible}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
<p class="text-medium-emphasis small">You can use a link or a button component.</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/collapse">
|
||||
<CButton
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
Link
|
||||
</CButton>
|
||||
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
||||
<CCollapse visible={visible}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> multi target</small>
|
||||
<strong>React Collapse</strong> <small> multi target</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
||||
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
||||
<CButton
|
||||
onClick={() => {
|
||||
setVisibleA(!visibleA)
|
||||
setVisibleB(!visibleB)
|
||||
}}
|
||||
>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleA}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleB}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<p class="text-medium-emphasis small">
|
||||
A <code class="css-0"><CButton></code> can show and hide multiple elements.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/collapse#multiple-targets">
|
||||
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
||||
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
||||
<CButton
|
||||
onClick={() => {
|
||||
setVisibleA(!visibleA)
|
||||
setVisibleB(!visibleB)
|
||||
}}
|
||||
>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleA}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleB}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
anderson cred nesciunt sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user