From 2e1d16dd01e25ec96488f9f69680980139576df3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 16 May 2021 01:05:22 +0200 Subject: [PATCH] refactor: update routes --- src/containers/_nav.js | 6 + src/reusable/Example.js | 30 + src/reusable/index.js | 3 +- src/routes.js | 2 + src/views/base/accordion/Accordion.js | 185 +++ src/views/base/cards/Cards.js | 1629 +++++++++++++++++++------ src/views/base/carousels/Carousels.js | 206 ++-- src/views/base/collapses/Collapses.js | 126 +- 8 files changed, 1684 insertions(+), 503 deletions(-) create mode 100644 src/reusable/Example.js create mode 100644 src/views/base/accordion/Accordion.js diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 852cdbc..a086882 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -43,6 +43,12 @@ const _nav = [ to: '/to', icon: , items: [ + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Accordion', + to: '/base/accordion', + }, { _component: 'CNavItem', as: NavLink, diff --git a/src/reusable/Example.js b/src/reusable/Example.js new file mode 100644 index 0000000..0d44407 --- /dev/null +++ b/src/reusable/Example.js @@ -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 ( + <> + + + + Preview + + + + + Code + + + + + {children} + + + ) +} + +export default React.memo(Example) diff --git a/src/reusable/index.js b/src/reusable/index.js index bb9757e..6afd13b 100644 --- a/src/reusable/index.js +++ b/src/reusable/index.js @@ -1,3 +1,4 @@ import DocsLink from './DocsLink' +import Example from './Example' -export { DocsLink } +export { DocsLink, Example } diff --git a/src/routes.js b/src/routes.js index 741c80a..a6ba45b 100644 --- a/src/routes.js +++ b/src/routes.js @@ -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 }, diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js new file mode 100644 index 0000000..315266a --- /dev/null +++ b/src/views/base/accordion/Accordion.js @@ -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 ( + + + + + React Accordion + + +

+ Click the accordions below to expand/collapse the accordion content. +

+ + + + + (activeKey === 1 ? setActiveKey(0) : setActiveKey(1))} + > + Accordion Item #1 + + + + + This is the first item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + (activeKey === 2 ? setActiveKey(0) : setActiveKey(2))} + > + Accordion Item #2 + + + + + This is the second item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + (activeKey === 3 ? setActiveKey(0) : setActiveKey(3))} + > + Accordion Item #3 + + + + + This is the third item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + + + + + React Accordion Flush + + +

+ Add flush to remove the default{' '} + background-color, some borders, and some rounded corners to + render accordions edge-to-edge with their parent container. +

+ + + + + (activeKey2 === 1 ? setActiveKey2(0) : setActiveKey2(1))} + > + Accordion Item #1 + + + + + This is the first item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + (activeKey2 === 2 ? setActiveKey2(0) : setActiveKey2(2))} + > + Accordion Item #2 + + + + + This is the second item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + (activeKey2 === 3 ? setActiveKey2(0) : setActiveKey2(3))} + > + Accordion Item #3 + + + + + This is the third item's accordion body. 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 .accordion-body, though the + transition does limit overflow. + + + + + + + + + + ) +} + +export default Accordion diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index e56a83b..d3a4111 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -1,386 +1,1277 @@ import React from 'react' import { - CBadge, + CButton, CCard, CCardBody, CCardFooter, + CCardGroup, CCardHeader, + CCardImage, + CCardLink, + CCardSubtitle, + CCardText, + CCardTitle, + CListGroup, + CListGroupItem, + CNav, + CNavItem, + CNavLink, CCol, - CFormCheck, CRow, } from '@coreui/react' import CIcon from '@coreui/icons-react' -import { DocsLink } from 'src/reusable' +import { DocsLink, Example } from 'src/reusable' const Cards = () => { - const [collapsed, setCollapsed] = React.useState(true) - const [showCard, setShowCard] = React.useState(true) + // const [collapsed, setCollapsed] = React.useState(true) + // const [showCard, setShowCard] = React.useState(true) return ( - <> - - - - - Card title - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - Card footer - - - - - - Card with icon - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - Card with switch - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - Card with label - - Success - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - Card with label - - 42 - - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - - Card outline primary - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card outline secondary - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card outline success - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card outline info - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card outline warning - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card outline danger - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card with accent - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a - ante. -

-
- Someone famous in Source Title -
-
- - - - - - - - Card title - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card title - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card title - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - - Card title - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh - euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim - veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea - commodo consequat. - - - - - + + + + + Card Example + + +

+ Cards are built with as little markup and styles as possible but still manage to + deliver a bunch of control and customization. Built with flexbox, they offer easy + alignment and mix well with other CoreUI components. Cards have no top, left, and + right margins by default, so use{' '} + + spacing utilities + {' '} + as needed. They have no fixed width to start, so they'll fill the full width of its + parent. +

+

+ Below is an example of a basic card with mixed content and a fixed width. Cards have + no fixed width to start, so they'll naturally fill the full width of its parent + element. +

+ + + + Placeholder + + + Image cap + + + + Card title + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + Go somewhere + + + + + + + + + + Card Body + + +

+ The main block of a card is the <CCardBody>. Use it + whenever you need a padded section within a card. +

+ + + This is some text within a card body. + + + + + + + + + Card Titles, text, and links + + +

+ Card titles are managed by <CCardTitle> component. + Identically, links are attached and collected next to each other by{' '} + <CCardLink> component. +

+

+ Subtitles are managed by <CCardSubtitle> component. + If the <CCardTitle> also, the{' '} + <CCardSubtitle> items are stored in a{' '} + <CCardBody> item, the card title, and subtitle are + arranged rightly. +

+ + + + Card title + Card subtitle + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + Card link + Another link + + + + + + + + + + Card Images + + +

+ .card-img-top places a picture to the top of the card. With{' '} + .card-text, text can be added to the card. Text within{' '} + .card-text can additionally be styled with the regular HTML + tags. +

+ + + + Placeholder + + + Image cap + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + + Card List groups + + +

+ Create lists of content in a card with a flush list group. +

+ + + + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + + + + Header + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + + + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + Footer + + + + + + + + + + + Card Kitchen sink + + +

+ Combine and match many content types to build the card you need, or throw everything + in there. Shown below are image styles, blocks, text styles, and a list group—all + wrapped in a fixed-width card. +

+ + + + Placeholder + + + Image cap + + + + Card title + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + Card link + Another link + + + + + + + + + + Card Header and footer + + +

+ Add an optional header and/or footer within a card. +

+ + + Header + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + +

+ Card headers can be styled by adding ex. component="h5". +

+ + + Header + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + Quote + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat + a ante. +

+
+ Someone famous in Source Title +
+
+ + + + + + Header + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + 2 days ago + + + + + + + + + Card Body + + +

+ Cards assume no specific width to start, so they'll be 100% + wide unless otherwise stated. You can adjust this as required with custom CSS, grid + classes, grid Sass mixins, or services. +

+

Using grid markup

+

+ Using the grid, wrap cards in columns and rows as needed. +

+ + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + +

Using utilities

+

+ Use some of{' '} + + available sizing utilities + {' '} + to rapidly set a card's width. +

+ + + + Card title + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + Card title + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + Using custom CSS +

+ Use custom CSS in your stylesheets or as inline styles to set a width. +

+ + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + + + + + Card Text alignment + + +

+ You can instantly change the text arrangement of any card—in its whole or specific + parts—with{' '} + + text align classes + + . +

+ + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + + + + + Card Navigation + + +

+ Add some navigation to a <CCardHeader> with our{' '} + <CNav> component. +

+ + + + + + + Active + + + + Link + + + + Disabled + + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + + + + + Active + + + + Link + + + + Disabled + + + + + + Special title treatment + + With supporting text below as a natural lead-in to additional content. + + Go somewhere + + + + + + + + + + Card Image caps + + +

+ Similar to headers and footers, cards can include top and bottom "image caps"—images + at the top or bottom of a card. +

+ + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + Last updated 3 mins ago + + + + + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + Last updated 3 mins ago + + + + Placeholder + + + Image cap + + + + + + + + + + + + + Card Card styles + + +

+ Cards include various options for customizing their backgrounds, borders, and color. +

+

Background and color

+

+ Use color property to change the appearance of a card. +

+ + + {[ + { color: 'primary', textColor: 'white' }, + { color: 'secondary', textColor: 'white' }, + { color: 'success', textColor: 'white' }, + { color: 'danger', textColor: 'white' }, + { color: 'warning' }, + { color: 'info', textColor: 'white' }, + { color: 'light' }, + { color: 'dark', textColor: 'white' }, + ].map((item, index) => ( + + + Header + + {item.color} card title + + Some quick example text to build on the card title and make up the bulk of + the card's content. + + + + + ))} + + +

Border

+

+ Use{' '} + + border utilities + {' '} + to change just the border-color of a card. Note that you + can set textColor property on the{' '} + <CCard> or a subset of the card's contents as shown + below. +

+ + + {[ + { color: 'primary', textColor: 'primary' }, + { color: 'secondary', textColor: 'secondary' }, + { color: 'success', textColor: 'success' }, + { color: 'danger', textColor: 'danger' }, + { color: 'warning', textColor: 'warning' }, + { color: 'info', textColor: 'info' }, + { color: 'light' }, + { color: 'dark' }, + ].map((item, index) => ( + + + Header + + {item.color} card title + + Some quick example text to build on the card title and make up the bulk of + the card's content. + + + + + ))} + + +

Top border

+

+ Use{' '} + + border utilities + {' '} + to change just the border-color of a card. Note that you + can set textColor property on the{' '} + <CCard> or a subset of the card's contents as shown + below. +

+ + + {[ + { color: 'primary', textColor: 'primary' }, + { color: 'secondary', textColor: 'secondary' }, + { color: 'success', textColor: 'success' }, + { color: 'danger', textColor: 'danger' }, + { color: 'warning', textColor: 'warning' }, + { color: 'info', textColor: 'info' }, + { color: 'light' }, + { color: 'dark' }, + ].map((item, index) => ( + + + Header + + {item.color} card title + + Some quick example text to build on the card title and make up the bulk of + the card's content. + + + + + ))} + + + + + + + + + Card Card groups + + +

+ Use card groups to render cards as a single, attached element with equal width and + height columns. Card groups start off stacked and use{' '} + display: flex; to become attached with uniform dimensions + starting at the sm breakpoint. +

+ + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + Last updated 3 mins ago + + + + + + Placeholder + + + Image cap + + + + Card title + + This card has supporting text below as a natural lead-in to additional + content. + + + Last updated 3 mins ago + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show + that equal height action. + + + Last updated 3 mins ago + + + + + +

+ When using card groups with footers, their content will automatically line up. +

+ + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + Placeholder + + + Image cap + + + + Card title + + This card has supporting text below as a natural lead-in to additional + content. + + + + Last updated 3 mins ago + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This card has even longer content than the first to show + that equal height action. + + + + Last updated 3 mins ago + + + + + + + + + + + Card Grid cards + + +

+ Use the CRow component and set{' '} + {xs|sm|md|lg|xl|xxl}={{ cols: * }}{' '} + property to control how many grid columns (wrapped around your cards) you show per + row. For example, here's xs={{cols: 1}}{' '} + laying out the cards on one column, and{' '} + md={{cols: 1}} splitting four cards to + equal width across multiple rows, from the medium breakpoint up. +

+ + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + +

+ Change it to md={{ cols: 3}} and you'll + see the fourth card wrap. +

+ + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + Placeholder + + + Image cap + + + + Card title + + This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. + + + + Last updated 3 mins ago + + + + + + + + + {/* + + + Card Body + + +

+ The main block of a card is the <CCardBody>. Use it + whenever you need a padded section within a card. +

+ + + This is some text within a card body. + + + + + */} + ) } diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 3aa76cd..cf1312c 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -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 ( - + - Carousel with controls - + Carousel Slide only - - +

Here’s a carousel with slides

+ + slide 1 @@ -43,115 +46,172 @@ const Carousels = () => { slide 3 - - - - + + - + - Carousel with controls, indicators and caption + + Carousel With controls + - - - +

+ Adding in the previous and next controls by controls{' '} + property. +

+ + slide 1 - -

Slide 1

-

Slide 1

- slide 2 - -

Slide 2

-

Slide 2

- slide 3 - -

Slide 3

-

Slide 3

- - - - - + + - + - Carousel animation + + Carousel With indicators + - - - +

+ You can attach the indicators to the carousel, lengthwise the controls, too. +

+ + slide 1 - -

Slide 1

-

Slide 1

- slide 2 - -

Slide 2

-

Slide 2

- slide 3 - -

Slide 3

-

Slide 3

- - - - - + + - + - Carousel animation with autoSlide + + Carousel With captions + - - - +

+ You can add captions to slides with the{' '} + <CCarouselCaption> element within any{' '} + <CCarouselItem>. They can be immediately hidden on + smaller viewports, as shown below, with optional{' '} + + display utilities + + . We hide them with .d-none and draw them back on + medium-sized devices with .d-md-block. +

+ + slide 1 - -

Slide 1

-

Slide 1

+ +
First slide label
+

Some representative placeholder content for the first slide.

 slide 2 - -

Slide 2

-

Slide 2

+ +
Second slide label
+

Some representative placeholder content for the first slide.

 slide 3 - -

Slide 3

-

Slide 3

+ +
Third slide label
+

Some representative placeholder content for the first slide.

 - - - - + + + + + + + + + Carousel Crossfade + + +

+ Add transition="crossfade" to your carousel to animate + slides with a fade transition instead of a slide. +

+ + + + slide 1 + + + slide 2 + + + slide 3 + + + + + + + + + + Carousel Dark variant + + +

+ Add dark property to the{' '} + CCarousel for darker controls, indicators, and captions. + Controls have been inverted from their default white fill with the{' '} + filter CSS property. Captions and controls have additional + Sass variables that customize the color and{' '} + background-color. +

+ + + + slide 1 + +
First slide label
+

Some representative placeholder content for the first slide.

+ + + + slide 2 + +
Second slide label
+

Some representative placeholder content for the first slide.

+ + + + slide 3 + +
Third slide label
+

Some representative placeholder content for the first slide.

+ + + + diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index d9e6472..fc0b95e 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -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 ( - + - Collapse - + React Collapse - { - e.preventDefault() - setVisible(!visible) - }} - > - Link - - setVisible(!visible)}>Button - - - - 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. - - - +

You can use a link or a button component.

+ + { + e.preventDefault() + setVisible(!visible) + }} + > + Link + + setVisible(!visible)}>Button + + + + 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. + + + + - + - Collapse - multi target + React Collapse multi target - setVisibleA(!visibleA)}>Toggle first element - setVisibleB(!visibleB)}>Toggle second element - { - setVisibleA(!visibleA) - setVisibleB(!visibleB) - }} - > - Toggle both elements - - - - - - - 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. - - - - - - - - - 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. - - - - - +

+ A <CButton> can show and hide multiple elements. +

+ + setVisibleA(!visibleA)}>Toggle first element + setVisibleB(!visibleB)}>Toggle second element + { + setVisibleA(!visibleA) + setVisibleB(!visibleB) + }} + > + Toggle both elements + + + + + + + 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. + + + + + + + + + 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. + + + + + +