From 9adc7763922d3d43c74b5f5cb2d81821bcaaf6ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 24 May 2021 17:13:09 +0200 Subject: [PATCH] refactor: update example views --- src/App.js | 8 +- src/components/AppHeader.js | 4 +- src/reusable/DocsLink.js | 13 +- src/reusable/Example.js | 15 +- .../base/accordion/Accordion.js | 59 ++++--- .../base/breadcrumbs/Breadcrumbs.js | 9 +- .../base/cards/Cards.js | 101 +++++------ .../base/carousels/Carousels.js | 25 +-- .../base/collapses/Collapses.js | 9 +- .../{examples => components}/base/index.js | 0 .../base/jumbotrons/Jumbotrons.js | 4 +- .../base/list-groups/ListGroups.js | 48 ++--- .../base/navbars/Navbars.js | 0 .../base/navs/Navs.js | 49 +++--- .../base/paginations/Paginations.js | 33 ++-- .../base/popovers/Popovers.js | 9 +- .../base/progress/Progress.js | 25 +-- .../base/spinners/Spinners.js | 32 ++-- .../base/tables/Tables.js | 65 +++---- .../base/tooltips/Tooltips.js | 34 ++-- .../buttons/button-groups/ButtonGroups.js | 35 ++-- .../buttons/buttons/Buttons.js | 66 +++---- .../buttons/dropdowns/Dropdowns.js | 47 ++--- .../{examples => components}/buttons/index.js | 0 .../{examples => components}/charts/Charts.js | 27 +-- .../forms/checks-radios/ChecksRadios.js | 45 ++--- .../forms/floating-labels/FloatingLabels.js | 34 ++-- .../forms/form-control/FormControl.js | 29 +-- .../forms/input-group/InputGroup.js | 35 ++-- .../forms/layout/Layout.js | 40 +++-- .../forms/range/Range.js | 21 ++- .../forms/select/Select.js | 17 +- .../forms/validation/Validation.js | 29 ++- .../icons/brands/Brands.js | 0 .../icons/coreui-icons/CoreUIIcons.js | 0 .../icons/flags/Flags.js | 0 .../{examples => components}/icons/index.js | 0 .../notifications/alerts/Alerts.js | 15 +- .../notifications/badges/Badges.js | 28 ++- .../notifications/index.js | 0 .../notifications/modals/Modals.js | 63 +++---- .../notifications/toasts/Toasts.js | 35 ++-- .../widgets/Widgets.js | 50 +++--- .../widgets/WidgetsBrand.js | 0 .../widgets/WidgetsDropdown.js | 18 +- src/views/dashboard/Dashboard.js | 19 +- src/views/examples/base/tabs/Tabs.js | 154 ---------------- src/views/examples/charts/ChartBarSimple.js | 85 --------- src/views/examples/charts/ChartLineSimple.js | 166 ------------------ src/views/examples/charts/MainChartExample.js | 95 ---------- src/views/{examples => }/pages/login/Login.js | 0 .../{examples => }/pages/page404/Page404.js | 4 +- .../{examples => }/pages/page500/Page500.js | 4 +- .../{examples => }/pages/register/Register.js | 15 -- .../{examples => }/theme/colors/Colors.js | 6 + .../theme/typography/Typography.js | 0 56 files changed, 626 insertions(+), 1098 deletions(-) rename src/views/{examples => components}/base/accordion/Accordion.js (78%) rename src/views/{examples => components}/base/breadcrumbs/Breadcrumbs.js (90%) rename src/views/{examples => components}/base/cards/Cards.js (93%) rename src/views/{examples => components}/base/carousels/Carousels.js (93%) rename src/views/{examples => components}/base/collapses/Collapses.js (92%) rename src/views/{examples => components}/base/index.js (100%) rename src/views/{examples => components}/base/jumbotrons/Jumbotrons.js (96%) rename src/views/{examples => components}/base/list-groups/ListGroups.js (87%) rename src/views/{examples => components}/base/navbars/Navbars.js (100%) rename src/views/{examples => components}/base/navs/Navs.js (87%) rename src/views/{examples => components}/base/paginations/Paginations.js (85%) rename src/views/{examples => components}/base/popovers/Popovers.js (89%) rename src/views/{examples => components}/base/progress/Progress.js (88%) rename src/views/{examples => components}/base/spinners/Spinners.js (78%) rename src/views/{examples => components}/base/tables/Tables.js (94%) rename src/views/{examples => components}/base/tooltips/Tooltips.js (79%) rename src/views/{examples => components}/buttons/button-groups/ButtonGroups.js (92%) rename src/views/{examples => components}/buttons/buttons/Buttons.js (84%) rename src/views/{examples => components}/buttons/dropdowns/Dropdowns.js (88%) rename src/views/{examples => components}/buttons/index.js (100%) rename src/views/{examples => components}/charts/Charts.js (94%) rename src/views/{examples => components}/forms/checks-radios/ChecksRadios.js (88%) rename src/views/{examples => components}/forms/floating-labels/FloatingLabels.js (83%) rename src/views/{examples => components}/forms/form-control/FormControl.js (89%) rename src/views/{examples => components}/forms/input-group/InputGroup.js (94%) rename src/views/{examples => components}/forms/layout/Layout.js (90%) rename src/views/{examples => components}/forms/range/Range.js (78%) rename src/views/{examples => components}/forms/select/Select.js (88%) rename src/views/{examples => components}/forms/validation/Validation.js (95%) rename src/views/{examples => components}/icons/brands/Brands.js (100%) rename src/views/{examples => components}/icons/coreui-icons/CoreUIIcons.js (100%) rename src/views/{examples => components}/icons/flags/Flags.js (100%) rename src/views/{examples => components}/icons/index.js (100%) rename src/views/{examples => components}/notifications/alerts/Alerts.js (92%) rename src/views/{examples => components}/notifications/badges/Badges.js (85%) rename src/views/{examples => components}/notifications/index.js (100%) rename src/views/{examples => components}/notifications/modals/Modals.js (92%) rename src/views/{examples => components}/notifications/toasts/Toasts.js (88%) rename src/views/{examples => components}/widgets/Widgets.js (95%) rename src/views/{examples => components}/widgets/WidgetsBrand.js (100%) rename src/views/{examples => components}/widgets/WidgetsDropdown.js (97%) delete mode 100644 src/views/examples/base/tabs/Tabs.js delete mode 100644 src/views/examples/charts/ChartBarSimple.js delete mode 100644 src/views/examples/charts/ChartLineSimple.js delete mode 100644 src/views/examples/charts/MainChartExample.js rename src/views/{examples => }/pages/login/Login.js (100%) rename src/views/{examples => }/pages/page404/Page404.js (90%) rename src/views/{examples => }/pages/page500/Page500.js (90%) rename src/views/{examples => }/pages/register/Register.js (80%) rename src/views/{examples => }/theme/colors/Colors.js (96%) rename src/views/{examples => }/theme/typography/Typography.js (100%) diff --git a/src/App.js b/src/App.js index 2caaca5..14c614f 100644 --- a/src/App.js +++ b/src/App.js @@ -12,10 +12,10 @@ const loading = ( const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) // Pages -const Login = React.lazy(() => import('./views/examples/pages/login/Login')) -const Register = React.lazy(() => import('./views/examples/pages/register/Register')) -const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) -const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) +const Login = React.lazy(() => import('./views/pages/login/Login')) +const Register = React.lazy(() => import('./views/pages/register/Register')) +const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) +const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) class App extends Component { render() { diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index b589d0b..c7d13d0 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -31,7 +31,6 @@ const AppHeader = () => { - @@ -45,7 +44,6 @@ const AppHeader = () => { Settings - @@ -63,7 +61,7 @@ const AppHeader = () => { - + diff --git a/src/reusable/DocsLink.js b/src/reusable/DocsLink.js index 4ffa963..b5cdb97 100644 --- a/src/reusable/DocsLink.js +++ b/src/reusable/DocsLink.js @@ -1,16 +1,17 @@ +import PropTypes from 'prop-types' import React from 'react' import { CLink } from '@coreui/react' const DocsLink = (props) => { - const { name, text, ...rest } = props + const { href, name, text, ...rest } = props - const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href + const _href = name ? `https://coreui.io/react/docs/components/${name}` : href return (
{ ) } +DocsLink.propTypes = { + href: PropTypes.string, + name: PropTypes.string, + text: PropTypes.string, +} + export default React.memo(DocsLink) diff --git a/src/reusable/Example.js b/src/reusable/Example.js index 9d427c4..1795893 100644 --- a/src/reusable/Example.js +++ b/src/reusable/Example.js @@ -1,21 +1,23 @@ +import PropTypes from 'prop-types' import React from 'react' -import { CLink, CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' +import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' +import CIcon from '@coreui/icons-react' const Example = (props) => { - const { children, href, ...rest } = props - - // const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href + const { children, href } = props return (
+ Preview + Code @@ -29,4 +31,9 @@ const Example = (props) => { ) } +Example.propTypes = { + children: PropTypes.node, + href: PropTypes.string, +} + export default React.memo(Example) diff --git a/src/views/examples/base/accordion/Accordion.js b/src/views/components/base/accordion/Accordion.js similarity index 78% rename from src/views/examples/base/accordion/Accordion.js rename to src/views/components/base/accordion/Accordion.js index ade05d4..53cfa20 100644 --- a/src/views/examples/base/accordion/Accordion.js +++ b/src/views/components/base/accordion/Accordion.js @@ -12,7 +12,7 @@ import { CAccordionHeader, CAccordionItem, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Accordion = () => { const [activeKey, setActiveKey] = useState(0) @@ -20,7 +20,10 @@ const Accordion = () => { return ( - + + + + React Accordion @@ -29,7 +32,7 @@ const Accordion = () => {

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

- + @@ -42,13 +45,13 @@ const Accordion = () => { - This is the first item's accordion body. It is hidden by + 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. + 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. @@ -63,13 +66,13 @@ const Accordion = () => { - This is the second item's accordion body. It is hidden by + 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. + 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. @@ -84,13 +87,13 @@ const Accordion = () => { - This is the third item's accordion body. It is hidden by + 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. + 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. @@ -108,7 +111,7 @@ const Accordion = () => { borders, and some rounded corners to render accordions edge-to-edge with their parent container.

- + @@ -121,13 +124,13 @@ const Accordion = () => { - This is the first item's accordion body. It is hidden by + 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. + 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. @@ -142,13 +145,13 @@ const Accordion = () => { - This is the second item's accordion body. It is hidden by + 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. + 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. @@ -163,13 +166,13 @@ const Accordion = () => { - This is the third item's accordion body. It is hidden by + 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. + 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. diff --git a/src/views/examples/base/breadcrumbs/Breadcrumbs.js b/src/views/components/base/breadcrumbs/Breadcrumbs.js similarity index 90% rename from src/views/examples/base/breadcrumbs/Breadcrumbs.js rename to src/views/components/base/breadcrumbs/Breadcrumbs.js index 2c5a3be..fc64dbe 100644 --- a/src/views/examples/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/components/base/breadcrumbs/Breadcrumbs.js @@ -9,12 +9,15 @@ import { CRow, CLink, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Breadcrumbs = () => { return ( - + + + + React Breadcrumb @@ -35,7 +38,7 @@ const Breadcrumbs = () => { .

- + Home diff --git a/src/views/examples/base/cards/Cards.js b/src/views/components/base/cards/Cards.js similarity index 93% rename from src/views/examples/base/cards/Cards.js rename to src/views/components/base/cards/Cards.js index bb41742..5ea9161 100644 --- a/src/views/examples/base/cards/Cards.js +++ b/src/views/components/base/cards/Cards.js @@ -19,11 +19,14 @@ import { CCol, CRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Cards = () => { return ( + + + @@ -36,14 +39,14 @@ const Cards = () => { 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. + 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 + no fixed width to start, so they'll naturally fill the full width of its parent element.

- + { Card title Some quick example text to build on the card title and make up the bulk of the - card's content. + card's content. Go somewhere @@ -86,7 +89,7 @@ const Cards = () => { 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. @@ -111,14 +114,14 @@ const Cards = () => { 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's content. Card link Another link @@ -139,7 +142,7 @@ const Cards = () => { .card-text, text can be added to the card. Text within{' '} .card-text can additionally be styled with the regular HTML tags.

- + { Some quick example text to build on the card title and make up the bulk of the - card's content. + card's content. @@ -179,7 +182,7 @@ const Cards = () => {

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

- + @@ -226,7 +229,7 @@ const Cards = () => { in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

- + { Card title Some quick example text to build on the card title and make up the bulk of the - card's content. + card's content. @@ -276,7 +279,7 @@ const Cards = () => {

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

- + Header @@ -289,9 +292,9 @@ const Cards = () => {

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

- + Header @@ -303,7 +306,7 @@ const Cards = () => { - + Quote @@ -319,7 +322,7 @@ const Cards = () => { - + Header @@ -342,15 +345,15 @@ const Cards = () => {

- 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. + 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.

- + @@ -380,9 +383,9 @@ const Cards = () => {

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

- + Card title @@ -406,7 +409,7 @@ const Cards = () => {

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

- + Special title treatment @@ -432,7 +435,7 @@ const Cards = () => { text align classes .

- + Special title treatment @@ -474,7 +477,7 @@ const Cards = () => { Add some navigation to a <CCardHeader> with our{' '} <CNav> component.

- + @@ -502,7 +505,7 @@ const Cards = () => { - + @@ -540,10 +543,10 @@ const Cards = () => {

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

- + @@ -627,7 +630,7 @@ const Cards = () => {

Use color property to change the appearance of a card.

- + {[ { color: 'primary', textColor: 'white' }, @@ -646,7 +649,7 @@ const Cards = () => { {item.color} card title Some quick example text to build on the card title and make up the bulk of - the card's content. + the card's content. @@ -659,9 +662,9 @@ const Cards = () => { 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. + card's contents as shown below.

- + {[ { color: 'primary', textColor: 'primary' }, @@ -680,7 +683,7 @@ const Cards = () => { {item.color} card title Some quick example text to build on the card title and make up the bulk of - the card's content. + the card's content. @@ -693,9 +696,9 @@ const Cards = () => { 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. + card's contents as shown below.

- + {[ { color: 'primary', textColor: 'primary' }, @@ -717,7 +720,7 @@ const Cards = () => { {item.color} card title Some quick example text to build on the card title and make up the bulk of - the card's content. + the card's content. @@ -739,7 +742,7 @@ const Cards = () => { height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

- + {

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

- + {

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. + {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.

- + @@ -1082,10 +1085,10 @@ const Cards = () => {

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

- + diff --git a/src/views/examples/base/carousels/Carousels.js b/src/views/components/base/carousels/Carousels.js similarity index 93% rename from src/views/examples/base/carousels/Carousels.js rename to src/views/components/base/carousels/Carousels.js index b15ba88..62c49fe 100644 --- a/src/views/examples/base/carousels/Carousels.js +++ b/src/views/components/base/carousels/Carousels.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import { CCard, CCardBody, @@ -9,7 +9,7 @@ import { CCol, CRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, 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', @@ -24,10 +24,11 @@ const slidesLight = [ ] const Carousels = () => { - const [activeIndex] = useState(1) - return ( + + + @@ -35,7 +36,7 @@ const Carousels = () => {

Here’s a carousel with slides

- + slide 1 @@ -60,7 +61,7 @@ const Carousels = () => {

Adding in the previous and next controls by controls property.

- + slide 1 @@ -85,7 +86,7 @@ const Carousels = () => {

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

- + slide 1 @@ -115,7 +116,7 @@ const Carousels = () => { with .d-none and draw them back on medium-sized devices with{' '} .d-md-block.

- + slide 1 @@ -150,10 +151,10 @@ const Carousels = () => {

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

- + slide 1 @@ -181,7 +182,7 @@ const Carousels = () => { with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

- + slide 1 diff --git a/src/views/examples/base/collapses/Collapses.js b/src/views/components/base/collapses/Collapses.js similarity index 92% rename from src/views/examples/base/collapses/Collapses.js rename to src/views/components/base/collapses/Collapses.js index 701ef1c..4a85d39 100644 --- a/src/views/examples/base/collapses/Collapses.js +++ b/src/views/components/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 { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Collapses = () => { const [visible, setVisible] = useState(false) @@ -9,6 +9,9 @@ const Collapses = () => { return ( + + + @@ -16,7 +19,7 @@ const Collapses = () => {

You can use a link or a button component.

- + { @@ -49,7 +52,7 @@ const Collapses = () => {

A <CButton> can show and hide multiple elements.

- + setVisibleA(!visibleA)}>Toggle first element setVisibleB(!visibleB)}>Toggle second element {

Add borders

Or, keep it light and add a border for some added definition to the boundaries of - your content. Be sure to look under the hood at the source HTML here as we've - adjusted the alignment and sizing of both column's content for equal-height. + your content. Be sure to look under the hood at the source HTML here as we've + adjusted the alignment and sizing of both column's content for equal-height.

Example button diff --git a/src/views/examples/base/list-groups/ListGroups.js b/src/views/components/base/list-groups/ListGroups.js similarity index 87% rename from src/views/examples/base/list-groups/ListGroups.js rename to src/views/components/base/list-groups/ListGroups.js index 4aa14a6..bc23661 100644 --- a/src/views/examples/base/list-groups/ListGroups.js +++ b/src/views/components/base/list-groups/ListGroups.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import { CBadge, CCard, @@ -10,11 +10,14 @@ import { CListGroupItem, CRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const ListGroups = () => { return ( + + + @@ -25,7 +28,7 @@ const ListGroups = () => { The default list group is an unordered list with items and the proper CSS classes. Build upon it with the options that follow, or with your CSS as required.

- + Cras justo odio Dapibus ac facilisis in @@ -47,7 +50,7 @@ const ListGroups = () => { Add active boolean property to a <CListGroupItem> to show the current active selection.

- + Cras justo odio Dapibus ac facilisis in @@ -69,7 +72,7 @@ const ListGroups = () => { Add disabled boolean property to a <CListGroupItem> to make it appear disabled.

- + Cras justo odio Dapibus ac facilisis in @@ -90,12 +93,12 @@ const ListGroups = () => {

Use <a>s or <button>s to create{' '} actionable list group items with hover, disabled, and active states by adding{' '} - component="a|button". We separate these pseudo-classes to ensure list - groups made of non-interactive elements (like <li>s or{' '} + component="a|button". We separate these pseudo-classes to ensure + list groups made of non-interactive elements (like <li>s or{' '} <div> - s) don't provide a click or tap affordance. + s) don'tprovide a click or tap affordance.

- + Cras justo odio @@ -127,7 +130,7 @@ const ListGroups = () => { Add flush boolean property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

- + Cras justo odio Dapibus ac facilisis in @@ -146,14 +149,14 @@ const ListGroups = () => {

- Add layout="horizontal" to change the layout of list group items from - vertical to horizontal across all breakpoints. Alternatively, choose a responsive - variant .layout="horizontal-{sm | md | lg | xl | xxl}" to make - a list group horizontal starting at that breakpoint's min-width. - Currently{' '} + Add layout="horizontal" to change the layout of list group items + from vertical to horizontal across all breakpoints. Alternatively, choose a responsive + variant .layout="horizontal-{sm | md | lg | xl | xxl}"{' '} + to make a list group horizontal starting at that breakpoint's{' '} + min-width. Currently{' '} horizontal list groups cannot be combined with flush list groups.

- + {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => ( Cras justo odio @@ -174,7 +177,7 @@ const ListGroups = () => {

Use contextual classes to style list items with a stateful background and color.

- + Dapibus ac facilisis in {[ @@ -199,7 +202,7 @@ const ListGroups = () => { in the previous example. Also supported is the active state; apply it to indicate an active selection on a contextual list group item.

- + Dapibus ac facilisis in @@ -232,7 +235,7 @@ const ListGroups = () => {

Add badges to any list group item to show unread counts, activity, and more.

- + Cras justo odio @@ -267,7 +270,7 @@ const ListGroups = () => { Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

- +
@@ -314,9 +317,10 @@ const ListGroups = () => {

- Place CoreUI's checkboxes and radios within list group items and customize as needed. + Place CoreUI's checkboxes and radios within list group items and customize as + needed.

- + diff --git a/src/views/examples/base/navbars/Navbars.js b/src/views/components/base/navbars/Navbars.js similarity index 100% rename from src/views/examples/base/navbars/Navbars.js rename to src/views/components/base/navbars/Navbars.js diff --git a/src/views/examples/base/navs/Navs.js b/src/views/components/base/navs/Navs.js similarity index 87% rename from src/views/examples/base/navs/Navs.js rename to src/views/components/base/navs/Navs.js index 5d0e757..d45c7a2 100644 --- a/src/views/examples/base/navs/Navs.js +++ b/src/views/components/base/navs/Navs.js @@ -13,11 +13,14 @@ import { CNavItem, CNavLink, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Navs = () => { return ( + + + @@ -30,7 +33,7 @@ const Navs = () => { overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

- + @@ -57,7 +60,7 @@ const Navs = () => { the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

- + Active @@ -89,7 +92,7 @@ const Navs = () => {

Centered with .justify-content-center:

- + @@ -112,7 +115,7 @@ const Navs = () => {

Right-aligned with .justify-content-end:

- + @@ -146,7 +149,7 @@ const Navs = () => { .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

- + @@ -176,10 +179,10 @@ const Navs = () => {

- Takes the basic nav from above and adds the variant="tabs" class to - generate a tabbed interface + Takes the basic nav from above and adds the variant="tabs" class + to generate a tabbed interface

- + @@ -209,9 +212,9 @@ const Navs = () => {

- Take that same HTML, but use variant="pills" instead: + Take that same HTML, but use variant="pills" instead:

- + @@ -241,12 +244,12 @@ const Navs = () => {

- Force your .nav's contents to extend the full available width one of two - modifier classes. To proportionately fill all available space with your{' '} - .nav-items, use layout="fill". Notice that all horizontal - space is occupied, but not every nav item has the same width. + Force your .nav's contents to extend the full available width one of + two modifier classes. To proportionately fill all available space with your{' '} + .nav-items, use layout="fill". Notice that all + horizontal space is occupied, but not every nav item has the same width.

- + @@ -267,11 +270,11 @@ const Navs = () => {

- For equal-width elements, use layout="justified". All horizontal space - will be occupied by nav links, but unlike the .nav-fill above, every nav item will be - the same width. + For equal-width elements, use layout="justified". All horizontal + space will be occupied by nav links, but unlike the .nav-fill above, every nav item + will be the same width.

- + @@ -307,7 +310,7 @@ const Navs = () => { the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

- + Active @@ -328,7 +331,7 @@ const Navs = () => { React Navs Tabs with dropdowns - + @@ -362,7 +365,7 @@ const Navs = () => { React Navs Pills with dropdowns - + diff --git a/src/views/examples/base/paginations/Paginations.js b/src/views/components/base/paginations/Paginations.js similarity index 85% rename from src/views/examples/base/paginations/Paginations.js rename to src/views/components/base/paginations/Paginations.js index 0300223..9863820 100644 --- a/src/views/examples/base/paginations/Paginations.js +++ b/src/views/components/base/paginations/Paginations.js @@ -8,11 +8,14 @@ import { CPaginationItem, CRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Paginations = () => { return ( + + + @@ -27,13 +30,13 @@ const Paginations = () => { screen readers and other assistive technologies.

- In addition, as pages likely have more than one such navigation section, it's + In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive aria-label for the{' '} <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label - could be aria-label="Search results pages". + could be aria-label="Search results pages".

- + Previous 1 @@ -55,7 +58,7 @@ const Paginations = () => { Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.

- + @@ -85,11 +88,11 @@ const Paginations = () => {

While the disabled prop uses pointer-events: none to{' '} try to disable the link functionality of <a>s, that CSS - property is not yet standardized and doesn't account for keyboard navigation. As such, - we always add tabindex="-1" on disabled links and use custom JavaScript - to fully disable their functionality. + property is not yet standardized and doesn'taccount for keyboard navigation. As + such, we always add tabindex="-1" on disabled links and use + custom JavaScript to fully disable their functionality.

- + @@ -112,10 +115,10 @@ const Paginations = () => {

- Fancy larger or smaller pagination? Add size="lg" or{' '} - size="sm" for additional sizes. + Fancy larger or smaller pagination? Add size="lg" or{' '} + size="sm" for additional sizes.

- + Previous 1 @@ -124,7 +127,7 @@ const Paginations = () => { Next - + Previous 1 @@ -146,7 +149,7 @@ const Paginations = () => { Change the alignment of pagination components with{' '} flexbox utilities.

- + Previous 1 @@ -155,7 +158,7 @@ const Paginations = () => { Next - + Previous 1 diff --git a/src/views/examples/base/popovers/Popovers.js b/src/views/components/base/popovers/Popovers.js similarity index 89% rename from src/views/examples/base/popovers/Popovers.js rename to src/views/components/base/popovers/Popovers.js index ded39a7..7aba3dc 100644 --- a/src/views/examples/base/popovers/Popovers.js +++ b/src/views/components/base/popovers/Popovers.js @@ -1,17 +1,20 @@ import React from 'react' import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Popovers = () => { return ( + + + React Popover Basic example - + { Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for React in RTL.

- + { return ( + + + @@ -13,13 +16,13 @@ const Progress = () => {

Progress components are built with two HTML elements, some CSS to set the width, and a - few attributes. We don't use{' '} + few attributes. We don'tuse{' '} the HTML5 <progress> element , ensuring you can stack progress bars, animate them, and place text labels over them.

- + @@ -49,7 +52,7 @@ const Progress = () => { Add labels to your progress bars by placing text within the{' '} <CProgressBar>.

- + 25% @@ -68,7 +71,7 @@ const Progress = () => { you change that value the inner <CProgressBar> will automatically resize accordingly.

- + @@ -88,7 +91,7 @@ const Progress = () => {

Use color prop to change the appearance of individual progress bars.

- + @@ -114,7 +117,7 @@ const Progress = () => {

Include multiple progress bars in a progress component if you need.

- + @@ -131,10 +134,10 @@ const Progress = () => {

- Add variant="striped" to any <CProgressBar> to apply a - stripe via CSS gradient over the progress bar's background color. + Add variant="striped" to any <CProgressBar> to + apply a stripe via CSS gradient over the progress bar's background color.

- + @@ -162,7 +165,7 @@ const Progress = () => { <CProgressBar> to animate the stripes right to left via CSS3 animations.

- + diff --git a/src/views/examples/base/spinners/Spinners.js b/src/views/components/base/spinners/Spinners.js similarity index 78% rename from src/views/examples/base/spinners/Spinners.js rename to src/views/components/base/spinners/Spinners.js index 39f5543..31eece6 100644 --- a/src/views/examples/base/spinners/Spinners.js +++ b/src/views/components/base/spinners/Spinners.js @@ -1,13 +1,13 @@ -import React, { useState } from 'react' +import React from 'react' import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Accordion = () => { - const [activeKey, setActiveKey] = useState(0) - const [activeKey2, setActiveKey2] = useState(0) - return ( + + + @@ -17,14 +17,14 @@ const Accordion = () => {

Use the border spinners for a lightweight loading indicator.

- +

The border spinner uses currentColor for its border-color. You can use any of our text color utilities on the standard spinner.

- + @@ -44,17 +44,17 @@ const Accordion = () => {

- If you don't fancy a border spinner, switch to the grow spinner. While it doesn't - technically spin, it does repeatedly grow! + If you don'tfancy a border spinner, switch to the grow spinner. While it + doesn't technically spin, it does repeatedly grow!

- +

Once again, this spinner is built with currentColor, so you can easily change its appearance. Here it is in blue, along with the supported variants.

- + @@ -74,10 +74,10 @@ const Accordion = () => {

- Add size="sm" property to make a smaller spinner that can quickly be used - within other components. + Add size="sm" property to make a smaller spinner that can quickly + be used within other components.

- + @@ -95,7 +95,7 @@ const Accordion = () => { place. You may also swap the text out of the spinner element and utilize button text as needed.

- + @@ -104,7 +104,7 @@ const Accordion = () => { Loading... - + diff --git a/src/views/examples/base/tables/Tables.js b/src/views/components/base/tables/Tables.js similarity index 94% rename from src/views/examples/base/tables/Tables.js rename to src/views/components/base/tables/Tables.js index 297de70..8f1d9c4 100644 --- a/src/views/examples/base/tables/Tables.js +++ b/src/views/components/base/tables/Tables.js @@ -13,11 +13,14 @@ import { CTableHeaderCell, CTableRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Tables = () => { return ( + + + @@ -25,10 +28,10 @@ const Tables = () => {

- Using the most basic table CoreUI, here's how <CTable>-based tables - look in CoreUI. + Using the most basic table CoreUI, here's how <CTable>-based + tables look in CoreUI.

- + @@ -71,7 +74,7 @@ const Tables = () => {

Use contextual classes to color tables, table rows or individual cells.

- + @@ -142,7 +145,7 @@ const Tables = () => { Use striped property to add zebra-striping to any table row within the{' '} <CTableBody>.

- + @@ -176,7 +179,7 @@ const Tables = () => {

These classes can also be added to table variants:

- + @@ -207,7 +210,7 @@ const Tables = () => { - + @@ -251,7 +254,7 @@ const Tables = () => { Use hover property to enable a hover state on table rows within a{' '} <CTableBody>.

- + @@ -282,7 +285,7 @@ const Tables = () => { - + @@ -313,7 +316,7 @@ const Tables = () => { - + @@ -353,7 +356,7 @@ const Tables = () => { React Table Active tables - + @@ -386,7 +389,7 @@ const Tables = () => { - + @@ -431,7 +434,7 @@ const Tables = () => {

Add bordered property for borders on all sides of the table and cells.

- + @@ -468,7 +471,7 @@ const Tables = () => { {' '} can be added to change colors:

- + @@ -511,7 +514,7 @@ const Tables = () => {

Add borderless property for a table without borders.

- + @@ -542,7 +545,7 @@ const Tables = () => { - + @@ -586,7 +589,7 @@ const Tables = () => { Add small property to make any <CTable> more compact by cutting all cell padding in half.

- + @@ -632,7 +635,7 @@ const Tables = () => { <CTable> and are aligned to the the top by default. Use the align property to re-align where needed.

- + @@ -712,7 +715,7 @@ const Tables = () => {

Border styles, active styles, and table variants are not inherited by nested tables.

- + @@ -777,11 +780,11 @@ const Tables = () => {

- Similar to tables and dark tables, use the modifier prop color="light" or{' '} - color="dark" to make <CTableHead>s appear light or - dark gray. + Similar to tables and dark tables, use the modifier prop{' '} + color="light" or color="dark" to make{' '} + <CTableHead>s appear light or dark gray.

- + @@ -813,7 +816,7 @@ const Tables = () => { - + @@ -853,7 +856,7 @@ const Tables = () => { React Table Table foot - + @@ -903,10 +906,10 @@ const Tables = () => {

A <CTableCaption> functions like a heading for a table. It helps - users with screen readers to find a table and understand what it's about and decide if - they want to read it. + users with screen readers to find a table and understand what it's about and + decide if they want to read it.

- + List of users @@ -941,9 +944,9 @@ const Tables = () => {

You can also put the <CTableCaption> on the top of the table with{' '} - caption="top". + caption="top".

- + List of users diff --git a/src/views/examples/base/tooltips/Tooltips.js b/src/views/components/base/tooltips/Tooltips.js similarity index 79% rename from src/views/examples/base/tooltips/Tooltips.js rename to src/views/components/base/tooltips/Tooltips.js index 0a46136..9ef67f5 100644 --- a/src/views/examples/base/tooltips/Tooltips.js +++ b/src/views/components/base/tooltips/Tooltips.js @@ -1,25 +1,13 @@ import React from 'react' import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Tooltips = () => { - const placements = [ - 'top-start', - 'top', - 'top-end', - 'bottom-start', - 'bottom', - 'bottom-end', - 'right-start', - 'right', - 'right-end', - 'left-start', - 'left', - 'left-end', - ] - return ( + + + @@ -29,21 +17,21 @@ const Tooltips = () => {

Hover over the links below to see tooltips:

- +

Tight pants next level keffiyeh you probably - haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag - stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american - apparel + haven'theard of them. Photo booth beard raw denim letterpress vegan messenger + bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit + american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo - thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan - chambray. A really ironic artisan + thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s + cleanse vegan chambray. A really ironic artisan whatever keytar @@ -58,7 +46,7 @@ const Tooltips = () => { Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

- + { return ( + + + @@ -33,7 +36,7 @@ const ButtonGroups = () => { Wrap a series of <CButton> components in{' '} <CButtonGroup>.{' '}

- + Left Middle @@ -44,7 +47,7 @@ const ButtonGroups = () => { These classes can also be added to groups of links, as an alternative to the{' '} <CNav> components.

- + Active link @@ -66,7 +69,7 @@ const ButtonGroups = () => { React Button Group Mixed styles - + Left Middle @@ -82,7 +85,7 @@ const ButtonGroups = () => { React Button Group Outlined styles - + Left @@ -108,7 +111,7 @@ const ButtonGroups = () => { Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

- + { /> - + { Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.

- + 1 @@ -199,7 +202,7 @@ const ButtonGroups = () => { Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.

- + @@ -264,10 +267,10 @@ const ButtonGroups = () => {

Alternatively, of implementing button sizing classes to each button in a group, set{' '} - size property to all <CButtonGroup>'s, including each - one when nesting multiple groups. + size property to all <CButtonGroup>'s, including + each one when nesting multiple groups.

- + Left @@ -318,7 +321,7 @@ const ButtonGroups = () => { <CButtonGroup> when you need dropdown menus combined with a series of buttons.

- + 1 2 @@ -347,7 +350,7 @@ const ButtonGroups = () => { Create a set of buttons that appear vertically stacked rather than horizontally.{' '} Split button dropdowns are not supported here.

- + Button Button @@ -358,7 +361,7 @@ const ButtonGroups = () => { Button - + Button Button @@ -406,7 +409,7 @@ const ButtonGroups = () => { - + { return ( + + + @@ -18,7 +21,7 @@ const Buttons = () => { it. CoreUI buttons are used to initialize operations, both in the background or foreground of an experience.

- + {['normal', 'active', 'disabled'].map((state, index) => ( @@ -61,7 +64,7 @@ const Buttons = () => {

You can combine button with our CoreUI Icons.

- + {['normal', 'active', 'disabled'].map((state, index) => ( @@ -111,12 +114,12 @@ const Buttons = () => { elements (though some browsers may apply a slightly different rendering).

- If you're using <CButton> component as <a>{' '} + If you're using <CButton> component as <a>{' '} elements that are used to trigger functionality ex. collapsing content, these links - should be given a role="button" to adequately communicate their meaning - to assistive technologies such as screen readers. + should be given a role="button" to adequately communicate their + meaning to assistive technologies such as screen readers.

- + Link @@ -138,9 +141,9 @@ const Buttons = () => {

If you need a button, but without the strong background colors. Set{' '} - variant="outline" prop to remove all background colors. + variant="outline" prop to remove all background colors.

- + {['normal', 'active', 'disabled'].map((state, index) => ( @@ -181,10 +184,10 @@ const Buttons = () => {

- If you need a ghost variant of button, set variant="ghost" prop to remove - all background colors. + If you need a ghost variant of button, set variant="ghost" prop + to remove all background colors.

- + {['normal', 'active', 'disabled'].map((state, index) => ( @@ -225,10 +228,10 @@ const Buttons = () => {

- Larger or smaller buttons? Add size="lg" or size="sm" for - additional sizes. + Larger or smaller buttons? Add size="lg" or{' '} + size="sm" for additional sizes.

- + Large button @@ -236,7 +239,7 @@ const Buttons = () => { Large button - + Small button @@ -253,7 +256,7 @@ const Buttons = () => { React Button Pill - + {[ 'primary', 'secondary', @@ -278,7 +281,7 @@ const Buttons = () => { React Button Square - + {[ 'primary', 'secondary', @@ -309,7 +312,7 @@ const Buttons = () => { pointer-events: none applied to, disabling hover and active states from triggering.

- + Primary button @@ -321,12 +324,13 @@ const Buttons = () => { Disabled buttons using the <a> component act a little different:

- <a>s don't support the disabled attribute, so CoreUI - has to add .disabled className to make buttons look inactive. CoreUI also - has to add to the disabled button component aria-disabled="true"{' '} - attribute to show the state of the component to assistive technologies. + <a>s don'tsupport the disabled attribute, so + CoreUI has to add .disabled className to make buttons look inactive. + CoreUI also has to add to the disabled button component{' '} + aria-disabled="true" attribute to show the state of the component + to assistive technologies.

- + Primary link @@ -346,7 +350,7 @@ const Buttons = () => {

Create buttons that span the full width of a parent—by using utilities.

- +
Button Button @@ -358,7 +362,7 @@ const Buttons = () => { .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.

- +
Button Button @@ -366,10 +370,10 @@ const Buttons = () => {

You can adjust the width of your block buttons with grid column width classes. For - example, for a half-width "block button", use .col-6. Center it + example, for a half-width "block button", use .col-6. Center it horizontally with .mx-auto, too.

- +
Button Button @@ -377,11 +381,11 @@ const Buttons = () => {

Additional utilities can be used to adjust the alignment of buttons when horizontal. - Here we've taken our previous responsive example and added some flex utilities and a - margin utility on the button to right align the buttons when they're no longer + Here we've taken our previous responsive example and added some flex utilities and + a margin utility on the button to right align the buttons when they're no longer stacked.

- +
Button diff --git a/src/views/examples/buttons/dropdowns/Dropdowns.js b/src/views/components/buttons/dropdowns/Dropdowns.js similarity index 88% rename from src/views/examples/buttons/dropdowns/Dropdowns.js rename to src/views/components/buttons/dropdowns/Dropdowns.js index a96f130..8a1c18b 100644 --- a/src/views/examples/buttons/dropdowns/Dropdowns.js +++ b/src/views/components/buttons/dropdowns/Dropdowns.js @@ -13,11 +13,14 @@ import { CDropdownToggle, CRow, } from '@coreui/react' -import { Example } from 'src/reusable' +import { DocsCallout, Example } from 'src/reusable' const Dropdowns = () => { return ( + + + @@ -25,9 +28,10 @@ const Dropdowns = () => {

- Here's how you can put them to work with either <button> elements: + Here's how you can put them to work with either <button>{' '} + elements:

- + Dropdown button @@ -40,7 +44,7 @@ const Dropdowns = () => {

The best part is you can do this with any button variant, too:

- + <> {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( (color, index) => ( @@ -74,11 +78,11 @@ const Dropdowns = () => {

We use this extra class to reduce the horizontal padding on either side - of the caret by 25% and remove the margin-left that's attached for normal - button dropdowns. Those additional changes hold the caret centered in the split button - and implement a more properly sized hit area next to the main button. + of the caret by 25% and remove the margin-left that's attached for + normal button dropdowns. Those additional changes hold the caret centered in the split + button and implement a more properly sized hit area next to the main button.

- + <> {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( (color, index) => ( @@ -110,7 +114,7 @@ const Dropdowns = () => { Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

- + Large button @@ -137,7 +141,7 @@ const Dropdowns = () => { - + Small button @@ -177,7 +181,7 @@ const Dropdowns = () => { Opt into darker dropdowns to match a dark navbar or custom style by set{' '} dark property. No changes are required to the dropdown items.

- + Dropdown button @@ -190,10 +194,10 @@ const Dropdowns = () => {

And putting it to use in a navbar:

- +