From 35be1eac554be1067f51fa2b4d7bf787d7b19af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 17 May 2021 01:16:28 +0200 Subject: [PATCH] refactor: update components examples --- src/containers/_nav.js | 61 +- src/reusable/Example.js | 10 +- src/routes.js | 28 +- src/scss/_example.scss | 108 ++ src/scss/style.scss | 1 + src/views/base/accordion/Accordion.js | 12 +- src/views/base/breadcrumbs/Breadcrumbs.js | 78 +- src/views/base/cards/Cards.js | 211 +-- src/views/base/carousels/Carousels.js | 44 +- src/views/base/collapses/Collapses.js | 8 +- src/views/base/forms/BasicForms.js | 1415 ----------------- src/views/base/list-groups/ListGroups.js | 572 ++++--- src/views/base/navs/Navs.js | 527 +++--- src/views/base/paginations/Paginations.js | 174 ++ src/views/base/paginations/Pagnations.js | 119 -- src/views/base/popovers/Popovers.js | 144 +- src/views/base/progress-bar/ProgressBar.js | 93 -- src/views/base/progress/Progress.js | 186 +++ src/views/forms/checks-radios/ChecksRadios.js | 48 +- src/views/forms/form-control/FormControl.js | 47 +- src/views/forms/input-group/InputGroup.js | 45 +- src/views/forms/layout/Layout.js | 81 +- src/views/forms/range/Range.js | 30 +- src/views/forms/select/Select.js | 18 +- src/views/forms/validation/Validation.js | 72 +- src/views/notifications/alerts/Alerts.js | 203 ++- src/views/notifications/badges/Badges.js | 206 ++- src/views/notifications/index.js | 2 +- src/views/notifications/modals/Modals.js | 911 ++++++++--- src/views/notifications/toaster/Toaster.js | 182 --- src/views/notifications/toasts/Toasts.js | 249 +++ 31 files changed, 2657 insertions(+), 3228 deletions(-) create mode 100644 src/scss/_example.scss delete mode 100644 src/views/base/forms/BasicForms.js create mode 100644 src/views/base/paginations/Paginations.js delete mode 100644 src/views/base/paginations/Pagnations.js delete mode 100644 src/views/base/progress-bar/ProgressBar.js create mode 100644 src/views/base/progress/Progress.js delete mode 100644 src/views/notifications/toaster/Toaster.js create mode 100644 src/views/notifications/toasts/Toasts.js diff --git a/src/containers/_nav.js b/src/containers/_nav.js index a086882..0e59edb 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -73,12 +73,6 @@ const _nav = [ anchor: 'Collapse', to: '/base/collapses', }, - { - _component: 'CNavItem', - as: NavLink, - anchor: 'Forms', - to: '/base/forms', - }, { _component: 'CNavItem', as: NavLink, @@ -119,7 +113,7 @@ const _nav = [ _component: 'CNavItem', as: NavLink, anchor: 'Progress', - to: '/base/progress-bar', + to: '/base/progress', }, { _component: 'CNavItem', @@ -167,6 +161,55 @@ const _nav = [ }, ], }, + { + _component: 'CNavGroup', + anchor: 'Forms', + icon: , + items: [ + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Form Control', + to: '/forms/form-control', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Select', + to: '/forms/select', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Checks & Radios', + to: '/forms/checks-radios', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Range', + to: '/forms/range', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Input Group', + to: '/forms/input-group', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Layout', + to: '/forms/layout', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Validation', + to: '/forms/validation', + }, + ], + }, { _component: 'CNavItem', as: NavLink, @@ -231,8 +274,8 @@ const _nav = [ { _component: 'CNavItem', as: NavLink, - anchor: 'Toaster', - to: '/notifications/toaster', + anchor: 'Toasts', + to: '/notifications/toasts', }, ], }, diff --git a/src/reusable/Example.js b/src/reusable/Example.js index 0d44407..9d427c4 100644 --- a/src/reusable/Example.js +++ b/src/reusable/Example.js @@ -7,7 +7,7 @@ const Example = (props) => { // const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href return ( - <> +
@@ -20,10 +20,12 @@ const Example = (props) => { - - {children} + + + {children} + - +
) } diff --git a/src/routes.js b/src/routes.js index a6ba45b..9934c2e 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,6 +1,6 @@ import React from 'react' -const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')) +const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts')) const Tables = React.lazy(() => import('./views/base/tables/Tables')) const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) @@ -8,15 +8,14 @@ const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumb const Cards = React.lazy(() => import('./views/base/cards/Cards')) const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')) const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')) -const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')) const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')) const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')) const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')) const Navs = React.lazy(() => import('./views/base/navs/Navs')) -const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')) +const Paginations = React.lazy(() => import('./views/base/paginations/Paginations')) const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')) -const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')) +const Progress = React.lazy(() => import('./views/base/progress/Progress')) const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) @@ -35,6 +34,14 @@ const Colors = React.lazy(() => import('./views/theme/colors/Colors')) const Typography = React.lazy(() => import('./views/theme/typography/Typography')) const Widgets = React.lazy(() => import('./views/widgets/Widgets')) +const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios')) +const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl')) +const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup')) +const Layout = React.lazy(() => import('./views/forms/layout/Layout')) +const Range = React.lazy(() => import('./views/forms/range/Range')) +const Select = React.lazy(() => import('./views/forms/select/Select')) +const Validation = React.lazy(() => import('./views/forms/validation/Validation')) + const Login = React.lazy(() => import('./views/pages/login/Login')) const Register = React.lazy(() => import('./views/pages/register/Register')) @@ -50,14 +57,13 @@ const routes = [ { path: '/base/cards', name: 'Cards', component: Cards }, { path: '/base/carousels', name: 'Carousel', component: Carousels }, { path: '/base/collapses', name: 'Collapse', component: Collapses }, - { path: '/base/forms', name: 'Forms', component: BasicForms }, { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons }, { path: '/base/list-groups', name: 'List Groups', component: ListGroups }, { path: '/base/navbars', name: 'Navbars', component: Navbars }, { path: '/base/navs', name: 'Navs', component: Navs }, { path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/popovers', name: 'Popovers', component: Popovers }, - { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar }, + { path: '/base/progress', name: 'Progress', component: Progress }, { path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tabs', name: 'Tabs', component: Tabs }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, @@ -66,6 +72,14 @@ const routes = [ { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, { path: '/charts', name: 'Charts', component: Charts }, + { path: '/forms', name: 'Forms', component: FormControl, exact: true }, + { path: '/forms/form-control', name: 'Form Control', component: FormControl }, + { path: '/forms/select', name: 'Select', component: Select }, + { path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios }, + { path: '/forms/range', name: 'Range', component: Range }, + { path: '/forms/input-group', name: 'Input Group', component: InputGroup }, + { path: '/forms/layout', name: 'Layout', component: Layout }, + { path: '/forms/validation', name: 'Validation', component: Validation }, { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons }, { path: '/icons/flags', name: 'Flags', component: Flags }, @@ -74,7 +88,7 @@ const routes = [ { path: '/notifications/alerts', name: 'Alerts', component: Alerts }, { path: '/notifications/badges', name: 'Badges', component: Badges }, { path: '/notifications/modals', name: 'Modals', component: Modals }, - { path: '/notifications/toaster', name: 'Toaster', component: Toaster }, + { path: '/notifications/toasts', name: 'Toasts', component: Toasts }, { path: '/pages/login', name: 'Login', component: Login }, { path: '/pages/register', name: 'Register', component: Register }, { path: '/widgets', name: 'Widgets', component: Widgets }, diff --git a/src/scss/_example.scss b/src/scss/_example.scss new file mode 100644 index 0000000..19e63cb --- /dev/null +++ b/src/scss/_example.scss @@ -0,0 +1,108 @@ +.example { + &:not(:first-child) { + margin-top: 1.5rem; + } + + .tab-content { + background-color: $light-50 !important; + + @at-root .dark-theme & { + background-color: rgba(255, 255, 255, .1) !important; + } + } + + code[class*="language-"], + pre[class*="language-"] { + font-size: .875rem !important; + } + + :not(pre) > code[class*="language-"], + pre[class*="language-"] { + background: transparent; + } + + & + p { + margin-top: 1.5rem + } + + // Components examples + .preview { + + p { + margin-top: 2rem; + } + + > .form-control { + + .form-control { + margin-top: .5rem; + } + } + + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress { + margin-top: 1rem; + } + + > .dropdown-menu { + position: static; + display: block; + } + + > :last-child { + margin-bottom: 0; + } + + // Images + > svg + svg, + > img + img { + margin-left: .5rem; + } + + // Buttons + > .btn, + > .btn-group { + margin: .25rem .125rem; + } + > .btn-toolbar + .btn-toolbar { + margin-top: .5rem; + } + + // List groups + > .list-group { + max-width: 400px; + } + + > [class*="list-group-horizontal"] { + max-width: 100%; + } + + // Navbars + .fixed-top, + .sticky-top { + position: static; + margin: -1rem -1rem 1rem; + } + + .fixed-bottom { + position: static; + margin: 1rem -1rem -1rem; + } + + @include media-breakpoint-up(sm) { + .fixed-top, + .sticky-top { + margin: -1.5rem -1.5rem 1rem; + } + .fixed-bottom { + margin: 1rem -1.5rem -1.5rem; + } + } + + // Pagination + .pagination { + margin-top: .5rem; + margin-bottom: .5rem; + } + } +} diff --git a/src/scss/style.scss b/src/scss/style.scss index 2a8be43..3285dd3 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -8,6 +8,7 @@ $enable-rtl: true; @import "@coreui/coreui/scss/coreui"; @import "layout"; +@import "example"; // If you want to add custom CSS you can put it here. @import "custom"; diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js index 315266a..ade05d4 100644 --- a/src/views/base/accordion/Accordion.js +++ b/src/views/base/accordion/Accordion.js @@ -12,7 +12,7 @@ import { CAccordionHeader, CAccordionItem, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Accordion = () => { const [activeKey, setActiveKey] = useState(0) @@ -26,7 +26,7 @@ const Accordion = () => { React Accordion -

+

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

@@ -103,10 +103,10 @@ const Accordion = () => { 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. +

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

diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index ea754b6..2c5a3be 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -9,45 +9,61 @@ import { CRow, CLink, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const Breadcrumbs = () => { return ( - + - Bootstrap Breadcrumb - + React Breadcrumb - - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - Bootstrap - +

+ The breadcrumb navigation provides links back to each previous page the user navigated + through and shows the current location in a website or an application. You don’t have + to add separators, because they automatically added in CSS through{' '} + + {' '} + ::before + {' '} + and{' '} + + {' '} + content + + . +

+ + + + Home + + Library + + + + Home + + + Library + + Data + + + + Home + + + Library + + + Data + + Bootstrap + + diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index d3a4111..084eb77 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -19,13 +19,9 @@ import { CCol, CRow, } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Cards = () => { - // const [collapsed, setCollapsed] = React.useState(true) - // const [showCard, setShowCard] = React.useState(true) - return ( @@ -34,18 +30,15 @@ const Cards = () => { 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. + 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. @@ -89,9 +82,9 @@ const Cards = () => { Card Body -

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

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

@@ -107,16 +100,15 @@ const Cards = () => { 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. +

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

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

@@ -142,11 +134,10 @@ const Cards = () => { 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. +

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

@@ -185,7 +176,7 @@ const Cards = () => { Card List groups -

+

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

@@ -230,7 +221,7 @@ const Cards = () => { 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. @@ -282,7 +273,7 @@ const Cards = () => { Card Header and footer -

+

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

@@ -297,8 +288,8 @@ const Cards = () => { -

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

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

@@ -316,12 +307,12 @@ const Cards = () => { Quote -
+

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

-
+
Someone famous in Source Title
@@ -350,13 +341,13 @@ const Cards = () => { 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. +

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

@@ -386,12 +377,10 @@ const Cards = () => {

Using utilities

-

+

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

@@ -414,7 +403,7 @@ const Cards = () => { Using custom CSS -

+

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

@@ -437,12 +426,10 @@ const Cards = () => { Card Text alignment -

+

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

@@ -483,9 +470,9 @@ const Cards = () => { Card Navigation -

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

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

@@ -552,7 +539,7 @@ const Cards = () => { 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.

@@ -585,7 +572,7 @@ const Cards = () => { additional content. This content is a little bit longer. - Last updated 3 mins ago + Last updated 3 mins ago @@ -599,7 +586,7 @@ const Cards = () => { additional content. This content is a little bit longer. - Last updated 3 mins ago + Last updated 3 mins ago { 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. +

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

@@ -673,15 +660,11 @@ const Cards = () => {

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

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

@@ -715,15 +698,11 @@ const Cards = () => {

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

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

@@ -765,11 +744,10 @@ const Cards = () => { 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. + height columns. Card groups start off stacked and use display: flex; to + become attached with uniform dimensions starting at the sm breakpoint.

@@ -799,7 +777,7 @@ const Cards = () => { additional content. This content is a little bit longer. - Last updated 3 mins ago + Last updated 3 mins ago @@ -829,7 +807,7 @@ const Cards = () => { content. - Last updated 3 mins ago + Last updated 3 mins ago @@ -860,13 +838,13 @@ const Cards = () => { that equal height action. - Last updated 3 mins ago + Last updated 3 mins ago -

+

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

@@ -898,7 +876,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -928,7 +906,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -959,7 +937,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -973,14 +951,13 @@ const Cards = () => { 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. +

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

@@ -1012,7 +989,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1044,7 +1021,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1076,7 +1053,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1108,15 +1085,15 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago -

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

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

@@ -1148,7 +1125,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1180,7 +1157,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1212,7 +1189,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1244,7 +1221,7 @@ const Cards = () => { - Last updated 3 mins ago + Last updated 3 mins ago @@ -1253,24 +1230,6 @@ const Cards = () => { - {/* - - - 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 cf1312c..b15ba88 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -9,7 +9,7 @@ import { CCol, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { 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', @@ -34,7 +34,7 @@ const Carousels = () => { Carousel Slide only -

Here’s a carousel with slides

+

Here’s a carousel with slides

@@ -57,9 +57,8 @@ const Carousels = () => { Carousel With controls -

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

+ Adding in the previous and next controls by controls property.

@@ -83,7 +82,7 @@ const Carousels = () => { Carousel With indicators -

+

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

@@ -108,16 +107,13 @@ const Carousels = () => { Carousel With captions -

- You can add captions to slides with the{' '} - <CCarouselCaption> element within any{' '} - <CCarouselItem>. They can be immediately hidden on +

+ 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. + display utilities. We hide them + with .d-none and draw them back on medium-sized devices with{' '} + .d-md-block.

@@ -153,9 +149,9 @@ const Carousels = () => { Carousel Crossfade -

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

@@ -179,13 +175,11 @@ const Carousels = () => { 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. +

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

diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index fc0b95e..701ef1c 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, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Collapses = () => { const [visible, setVisible] = useState(false) @@ -15,7 +15,7 @@ const Collapses = () => { React Collapse -

You can use a link or a button component.

+

You can use a link or a button component.

{ React Collapse multi target -

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

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

setVisibleA(!visibleA)}>Toggle first element diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js deleted file mode 100644 index 2dbf278..0000000 --- a/src/views/base/forms/BasicForms.js +++ /dev/null @@ -1,1415 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardFooter, - CCardHeader, - CCol, - CCollapse, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CFade, - CForm, - CFormCheck, - CFormControl, - CFormFeedback, - CFormLabel, - CFormText, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { DocsLink } from 'src/reusable' - -const BasicForms = () => { - const [collapsed, setCollapsed] = React.useState(true) - const [showElements, setShowElements] = React.useState(true) - - return ( - <> - - - - - Credit Card - Form - - - - - -
- Name - -
- - - - -
- Credit Card Number - -
- - - - -
- Month - - - - - - - - - - - - - - -
- - -
- Year - - - - - - - - - - - - -
- - -
- CVV/CVC - -
- - - - - - - - - Company - Form - - -
- Company - -
-
- VAT - -
-
- Street - -
- - -
- City - -
- - -
- Postal Code - -
- - -
- Country - -
- - - - - - - - - Basic Form - Elements - - - - - - Static - - -

Username

- - - - - Text Input - - - - This is a help text - - - - - Email Input - - - - Please enter your email - - - - - Password - - - - Please enter a complex password - - - - - Date Input - - - - - - - - Disabled Input - - - - - - - - Textarea - - - - - - - - Select - - - - - - - - - - - - - Select Large - - - - - - - - - - - - - Select Small - - - - - - - - - - - - - - - Disabled Select - - - - - - - - - - - - - Switch checkboxes - - - - - - - - - - - Radios - - -
- -
-
- -
-
- -
- - - - - Inline Radios - - -
- - - -
- - - - - Checkboxes - - -
- -
-
- -
-
- -
- - - - - Inline Checkboxes - - -
- - - -
- - - - - File input - - - - - - - - Multiple File input - - - - - Choose Files... - - - - - - Custom file input - - - - - Choose file... - - - - - - - - Submit - - - Reset - - - - - - Inline - Form - - - -
- - Name - - -
-
- - Email - - -
- - - - - Submit - - - Reset - - - - - - - - Horizontal - Form - - - - - - Email - - - - Please enter your email - - - - - Password - - - - Please enter your password - - - - - - - Submit - {' '} - - Reset - - - - - - Normal - Form - - - -
- Email - - Please enter your email -
-
- Password - - Please enter your password -
- - - - - Submit - {' '} - - Reset - - - - - - Input - Grid - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Login - {' '} - - Reset - - - - - - Input - Sizes - - - - - - Small Input - - - - - - - - Normal Input - - - - - - - - Large Input - - - - - - - - - - Submit - - - Reset - - - - - - - - - - Form - validation feedback - - -
- Input is valid - - Cool! Input is valid -
-
- Input is invalid - - Houston, we have a problem... -
- - - - - - Validation feedback Form - - -
- Non-required input - - Non-required -
-
- Required input - - Please provide a valid information - Input provided -
- - - - - - - - - Icon/Text Groups - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .00 - - - - - - - - Submit - - - Reset - - - - - - - Button Groups - - - - - - - Search - - - - - - - - - - - Submit - - - - - - - - - - - - - - - - - - - - - - Submit - - - Reset - - - - - - - Dropdowns Groups - - - - - - - - Dropdown - - - Action - Another Action - Something else here - - Separated link - - - - - - - - - - - - Dropdown - - Action - Another Action - Something else here - - Separated link - - - - - - - - - - Action - - Action - Another Action - Something else here - - Separated link - - - - - - Dropdown - - - Action - Another Action - Something else here - - Separated link - - - - - - - - - - Submit - - - Reset - - - - - - - - - - Use the grid for big devices! - - {' '} - .col-lg-* .col-md-* .col-sm-* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Action - - - Action - - - Action - - - Action - - - Action - - - - - - - - Input Grid for small devices! - - {' '} - .col-* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Action - - - Action - - - Action - - - Action - - - Action - - - - - - - - - Example Form - - -
- - Username - - - - - -
-
- - Email - - - - - -
-
- - Password - - - - - -
-
- - Submit - -
- - - - - - - Example Form - - -
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - Submit - -
- - - - - - - Example Form - - -
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - Submit - -
- - - - - - - - - - - Form Elements -
- - - - setCollapsed(!collapsed)} - > - - - setShowElements(false)} - > - - -
- - - - -
- Prepended text -
- - @ - - -

Here's some help text

-
-
-
- Appended text -
- - - .00 - - Here's more help text -
-
-
- Append and prepend -
- - $ - - .00 - -
-
-
- Append with button -
- - - Go! - -
-
-
- Two-button append -
- - - Search - Options - -
-
-
- - Save changes - - Cancel -
- - - - - - - - - ) -} - -export default BasicForms diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index 9bfd7b1..d193bae 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -5,27 +5,27 @@ import { CCardBody, CCardHeader, CCol, + CFormCheck, CListGroup, CListGroupItem, CRow, - CTabContent, - CTabPane, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const ListGroups = () => { - const [activeTab, setActiveTab] = useState(1) - return ( - <> - - - - - List group - - - + + + + + React List Group Basic example + + +

+ 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 @@ -33,320 +33,312 @@ const ListGroups = () => { Porta ac consectetur ac Vestibulum at eros - - - - - - - List group links - with first item active and last item disabled - - + + + + + + + + React List Group Active items + + +

+ Add active boolean property to a <CListGroupItem> to + show the current active selection. +

+ - + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + + + + + + React List Group Disabled items + + +

+ Add disabled boolean property to a <CListGroupItem> to + make it appear disabled. +

+ + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + + + + + + React List Group Links and buttons + + +

+ 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{' '} + <div> + s) don't provide a click or tap affordance. +

+ + + Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - + + Dapibus ac facilisis in + + + Morbi leo risus + + + Porta ac consectetur ac + + Vestibulum at eros - - - - - - - - - - List group - contextual classes - - + + + + + + + + React List Group Flush + + +

+ 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 + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + + + + + + React List Group Horizontal + + +

+ 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 + Dapibus ac facilisis in + Morbi leo risus + + ))} + + + + + + + + React List Group Contextual classes + + +

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

+ Dapibus ac facilisis in - This is a primary list group item - - This is a secondary list group item - - This is a success list group item - This is a danger list group item - This is a warning list group item - This is a info list group item - This is a light list group item - This is a dark list group item + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + A simple {color} list group item + + ))} - - - - - - - List group - contextual classes with .action - - + +

+ Contextual classes also work with <a>s or{' '} + <button>s. Note the addition of the hover styles here not present + 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 - - This is a primary list group item - - - This is a secondary list group item - - - This is a success list group item - - - This is a danger list group item - - - This is a warning list group item - - - This is a info list group item - - - This is a light list group item - - - This is a dark list group item + + Dapibus ac facilisis in + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + A simple {color} list group item + + ))} - - - - - - - - - List group - accent - - - - This is a primary list group item - - This is a secondary list group item - - This is a success list group item - This is a danger list group item - This is a warning list group item - This is a info list group item - This is a light list group item - This is a dark list group item - - - - - - - - List group - accent with color - - - - - This is a primary list group item - - - This is a secondary list group item - - - This is a success list group item - - - This is a danger list group item - - - This is a warning list group item - - - This is a info list group item - - - This is a light list group item - - - This is a dark list group item - - - - - - - - - - - List group - with badges - - + + + + + + + + React List Group With badges + + +

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

+ - + Cras justo odio - + 14 - + Dapibus ac facilisis in - + 2 - + Morbi leo risus - + 1 - - - - - - - List group - custom content - - + + + + + + + + React List Group Custom content + + +

+ Add nearly any HTML within, even for linked list groups like the one below, with the + help of flexbox utilities. +

+ - -
- List group item heading + +
+
List group item heading
3 days ago -
-
+
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. - Donec id elit non mi porta. - +

+ Donec id elit non mi porta. - -
List group item heading
-
+ +
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. -

- Small. +

+ Donec id elit non mi porta. - -
List group item heading
-
+ +
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. -

- Small. +

+ Donec id elit non mi porta. - - - - - - - - - List group - tab Javascript plugin - - - - - - setActiveTab(0)} - component="button" - active={activeTab === 0} - > - Home - - setActiveTab(1)} - component="button" - active={activeTab === 1} - > - Profile - - setActiveTab(2)} - component="button" - active={activeTab === 2} - > - Messages - - setActiveTab(3)} - component="button" - active={activeTab === 3} - > - Settings - - - - - - -

- Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing - exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat - proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim - tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat - aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. - Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam - minim. -

- - -

- Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur - consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore - sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt - laboris deserunt anim aute dolor incididunt veniam aute dolore do - exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris - ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt - veniam ad. -

- - -

- Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo - reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet - cupidatat cupidatat anim do ut velit mollit consequat enim tempor. - Consectetur est minim nostrud nostrud consectetur irure labore voluptate - irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et - deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod - aliquip nulla laborum elit adipisicing pariatur cillum. -

- - -

- Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. - Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat - laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua - labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation - irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet - qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt - dolor eiusmod eu pariatur culpa mollit in irure. -

- - - - - - - - - + + + + + + + + React List Group Checkboxes and radios + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index 9bd5321..5d0e757 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -13,301 +13,384 @@ import { CNavItem, CNavLink, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const Navs = () => { return ( - <> - - - - - Navs - - - - List Based + + + + + React Navs Base navs + + +

+ The base .nav component is built with flexbox and provide a strong + foundation for building all types of navigation components. It includes some style + overrides (for working with lists), some link padding for larger hit areas, and basic + disabled styling. +

+ - Active + + Active + - Link + Link - Link + Link + + + + Disabled + -
- Link Based - - Active - Link - Link - Disabled + +

+ Classes are used throughout, so your markup can be super flexible. Use{' '} + <ul>s like above, <ol> if the order of your + items is important, or roll your own with a <nav> element. Because + the .nav uses display: flex, the nav links behave the same as nav items would, but + without the extra markup. +

+ + + + Active + + Link + Link + + Disabled + -
- Link Base + + + + + + + + React Navs Horizontal alignment + + +

+ Change the horizontal alignment of your nav with{' '} + + flexbox utilities + + . By default, navs are left-aligned, but you can easily change them to center or right + aligned. +

+

+ Centered with .justify-content-center: +

+ - Active - Link - Link - Disabled + + + Active + + + + Link + + + Link + + + + Disabled + + -
- Link Based + +

+ Right-aligned with .justify-content-end: +

+ - Active - Link - Link - Disabled - - - - - - - - Navs - vertical / links - - - - Active - Link - Link - Disabled - - - - - - - - Navs - vertical / list - - - - Link + + Active + - Link + Link - Another Link + Link - Disabled Link + + Disabled + - - - - - - - - - - Navs - tabs - - + + + + + + + + React Navs Vertical + + +

+ Stack your navigation by changing the flex item direction with the{' '} + .flex-column utility. Need to stack them on some viewports but not + others? Use the responsive versions (e.g., .flex-sm-column). +

+ + + + + Active + + + + Link + + + Link + + + + Disabled + + + + + + + + + + + React Navs Tabs + + +

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

+ - Active - Link - Link - Disabled + + + Active + + + + Link + + + Link + + + + Disabled + + - - - - - - - Navs - pills - - + + + + + + + + React Navs Pills + + +

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

+ - Link + + Active + - Link + Link - Link + Link - Disabled + + Disabled + - - - - - - - - - Navs - fill and justify - - - + + + + + + + + React Navs Fill and justify + + +

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

+ + - Active + + Active + - Longer nav link + Link - Link + Link - Disabled + + Disabled + - -
- - - + +

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

+ + + + + Active + + + + Link + + + Link + + + + Disabled + + + + + + + + + + + React Navs Working with flex utilities + + +

+ If you need responsive nav variations, consider using a series of{' '} + flexbox utilities. While more + verbose, these utilities offer greater customization across responsive breakpoints. In + 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 - Link - Link - + Link + Link + Disabled - -
- - + + + + + + + + React Navs Tabs with dropdowns + + + + - Active - - - Longer nav link - - - Link - - - Disabled - - - -
- - - - Active - - Link - Link - - Disabled - - - - - - - - - - - - Navs - with flex - - - - - Active - - Link - Link - - Disabled - - - - - - - - - - - - Navs - tabs with dropdowns - - - - - Link + + Active + - Dropdown + Dropdown button - Action - Another action - Something else here - - Separated link + Action + Another action + Something else here - Link + Link - Disabled + + Disabled + - - - - - - - - Navs - pills with dropdowns - - + + + + + + + + React Navs Pills with dropdowns + + + - Link + + Active + - Dropdown + Dropdown button - Action - Another action - Something else here - - Separated link + Action + Another action + Something else here - Link + Link - Disabled + + Disabled + - - - - - + + + + + ) } diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js new file mode 100644 index 0000000..2484aa7 --- /dev/null +++ b/src/views/base/paginations/Paginations.js @@ -0,0 +1,174 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCol, + CPagination, + CPaginationItem, + CRow, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const Paginations = () => { + return ( + + + + + React Pagination + + +

+ We use a large block of connected links for our pagination, making links hard to miss + and easily scalable—all while providing large hit areas. Pagination is built with list + HTML elements so screen readers can announce the number of available links. Use a + wrapping <nav> element to identify it as a navigation section to + screen readers and other assistive technologies. +

+

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

+ + + Previous + 1 + 2 + 3 + Next + + + + + + + + + React Pagination Working with icons + + +

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

+ + + + + + 1 + 2 + 3 + + + + + + + + + + + + React Pagination Disabled and active states + + +

+ Pagination links are customizable for different circumstances. Use{' '} + disabled for links that appear un-clickable and .active to + indicate the current page. +

+

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

+ + + + + + 1 + 2 + 3 + + + + + + + + + + + + React Pagination Sizing + + +

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

+ + + Previous + 1 + 2 + 3 + Next + + + + + Previous + 1 + 2 + 3 + Next + + + + + + + + + React Pagination Alignment + + +

+ Change the alignment of pagination components with{' '} + flexbox utilities. +

+ + + Previous + 1 + 2 + 3 + Next + + + + + Previous + 1 + 2 + 3 + Next + + + + + + + ) +} + +export default Paginations diff --git a/src/views/base/paginations/Pagnations.js b/src/views/base/paginations/Pagnations.js deleted file mode 100644 index 7cfdaac..0000000 --- a/src/views/base/paginations/Pagnations.js +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const Paginations = () => { - return ( - <> - - - Pagination - - - - - Previous - 1 - 2 - 3 - Next - - - - - - Pagination - with icons - - - - - - - 1 - 2 - 3 - - - - - - - - - Pagination - with icons - - - - - - - 1 - 2 - 3 - - - - - - - - - Pagination - sizing - - - - Previous - 1 - 2 - 3 - Next - -
- - Previous - 1 - 2 - 3 - Next - - - - - - Pagination - alignment - - - - Previous - 1 - 2 - 3 - Next - -
- - Previous - 1 - 2 - 3 - Next - -
- - Previous - 1 - 2 - 3 - Next - - - - - ) -} - -export default Paginations diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index 82f8f23..7dbad54 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -1,90 +1,70 @@ import React from 'react' import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const Popovers = () => { - const placements = [ - 'top-start', - 'top', - 'top-end', - 'bottom-start', - 'bottom', - 'bottom-end', - 'right-start', - 'right', - 'right-end', - 'left-start', - 'left', - 'left-end', - ] - return ( - <> - - - Popovers - - - - {/*eslint-disable-next-line*/} - -

Hover over the links below to see popover:

- -

- 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 - - 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 - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

- - - -
- - - - Popovers - placement - - -
- - {placements.map((placement) => { - return ( - - - {placement} - - - ) - })} - -
- - - + + + + + React Popover Basic example + + + + + + Click to toggle popover + + + + + + + + + + React Popover Four directions + + +

+ Four options are available: top, right, bottom, and left aligned. Directions are + mirrored when using CoreUI for React in RTL. +

+ + + Popover on top + + + Popover on right + + + Popover on bottom + + + Popover on left + + + + + + ) } diff --git a/src/views/base/progress-bar/ProgressBar.js b/src/views/base/progress-bar/ProgressBar.js deleted file mode 100644 index 650c379..0000000 --- a/src/views/base/progress-bar/ProgressBar.js +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CProgress, CProgressBar } from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const ProgressBar = () => { - return ( - <> - - - Progress - - - - - - - - - - - - - Progress - labels - - - - - - - - - - Progress - heights - - - - - - - - - Progress - backgrounds - - - - - - - - - - - Progress - multiple bar - - - - - - - - - - - - Progress - striped - - - - - - - - - - - - Progress - animated - - - - - - - ) -} - -export default ProgressBar diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js new file mode 100644 index 0000000..008c296 --- /dev/null +++ b/src/views/base/progress/Progress.js @@ -0,0 +1,186 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' +import { Example } from 'src/reusable' + +const Progress = () => { + return ( + + + + + React Progress Basic example + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + React Progress Labels + + +

+ Add labels to your progress bars by placing text within the{' '} + <CProgressBar>. +

+ + + 25% + + + + + + + + + React Progress Height + + +

+ We only set a height value on the <CProgress>, so if + you change that value the inner <CProgressBar> will automatically + resize accordingly. +

+ + + + + + + + + + + + + + + React Progress Backgrounds + + +

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

+ + + + + + + + + + + + + + + + + + + + + React Progress Multiple bars + + +

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

+ + + + + + + + + + + + + + React Progress Striped + + +

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

+ + + + + + + + + + + + + + + + + + + + + React Progress Animated stripes + + +

+ The striped gradient can also be animated. Add animated property to{' '} + <CProgressBar> to animate the stripes right to left via CSS3 + animations. +

+ + + + + + + + + + + + + + + + + + + ) +} + +export default Progress diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js index 72ad73a..07f40d3 100644 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -1,6 +1,6 @@ import React from 'react' import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const ChecksRadios = () => { return ( @@ -24,10 +24,10 @@ const ChecksRadios = () => { React Checkbox Disabled -

- Add the disabled attribute and the associated{' '} - <label>s are automatically styled to match with a - lighter color to help indicate the input's state. +

+ Add the disabled attribute and the associated <label>s + are automatically styled to match with a lighter color to help indicate the input's + state.

@@ -42,10 +42,10 @@ const ChecksRadios = () => { React Radio -

- Add the disabled attribute and the associated{' '} - <label>s are automatically styled to match with a - lighter color to help indicate the input's state. +

+ Add the disabled attribute and the associated <label>s + are automatically styled to match with a lighter color to help indicate the input's + state.

{ React Switches -

- A switch has the markup of a custom checkbox but uses the{' '} - switch boolean properly to render a toggle switch. Switches - also support the disabled attribute. +

+ A switch has the markup of a custom checkbox but uses the switch boolean + properly to render a toggle switch. Switches also support the disabled{' '} + attribute.

{ React Checks and Radios Default layout (stacked) -

+

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.

@@ -207,10 +207,9 @@ const ChecksRadios = () => { React Checks and Radios Inline -

- Group checkboxes or radios on the same horizontal row by adding{' '} - inline boolean property to any{' '} - <CFormCheck>. +

+ Group checkboxes or radios on the same horizontal row by adding inline{' '} + boolean property to any <CFormCheck>.

@@ -259,9 +258,9 @@ const ChecksRadios = () => { React Checks and Radios Without labels -

+

Remember to still provide some form of accessible name for assistive technologies (for - instance, using aria-label). + instance, using aria-label).

@@ -286,10 +285,9 @@ const ChecksRadios = () => { Toggle buttons -

- Create button-like checkboxes and radio buttons by using{' '} - button boolean property on the{' '} - <CFormCheck> component. These toggle buttons can +

+ Create button-like checkboxes and radio buttons by using button boolean + property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.

@@ -349,7 +347,7 @@ const ChecksRadios = () => { />

Outlined styles

-

+

Different variants of button, such at the various outlined styles, are supported.

diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js index 3b5ac92..b5615b9 100644 --- a/src/views/forms/form-control/FormControl.js +++ b/src/views/forms/form-control/FormControl.js @@ -10,7 +10,7 @@ import { CFormLabel, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const FormControl = () => { return ( @@ -50,9 +50,9 @@ const FormControl = () => { React Form Control Sizing -

- Set heights using size property like{' '} - size="lg" and size="sm". +

+ Set heights using size property like size="lg" and{' '} + size="sm".

{ React Form Control Disabled -

- Add the disabled boolean attribute on an input to give it a - grayed out appearance and remove pointer events. +

+ Add the disabled boolean attribute on an input to give it a grayed out + appearance and remove pointer events.

{ React Form Control Readonly -

- Add the readOnly boolean attribute on an input to prevent - modification of the input's value. Read-only inputs appear lighter (just like disabled - inputs), but retain the standard cursor. +

+ Add the readOnly boolean attribute on an input to prevent modification of + the input's value. Read-only inputs appear lighter (just like disabled inputs), but + retain the standard cursor.

{ React Form Control Readonly plain text -

- If you want to have <input readonly> elements in your - form styled as plain text, use the plainText boolean - property to remove the default form field styling and preserve the correct margin and - padding. +

+ If you want to have <input readonly> elements in your form styled + as plain text, use the plainText boolean property to remove the default + form field styling and preserve the correct margin and padding.

@@ -167,8 +166,8 @@ const FormControl = () => { - -
+ +
Email @@ -180,13 +179,13 @@ const FormControl = () => { plainText />
-
+
Password
-
+
Confirm identity @@ -203,19 +202,19 @@ const FormControl = () => { -
+
Default file input example
-
+
Multiple files input example
-
+
Disabled file input example
-
+
Small file input example
diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js index b2e0621..5774bec 100644 --- a/src/views/forms/input-group/InputGroup.js +++ b/src/views/forms/input-group/InputGroup.js @@ -18,7 +18,7 @@ import { CInputGroupText, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Select = () => { return ( @@ -29,10 +29,10 @@ const Select = () => { React Input group Basic example -

+

Place one add-on or button on either side of an input. You may also place one on both - sides of an input. Remember to place <CFormLabel>s - outside the input group. + sides of an input. Remember to place <CFormLabel>s outside the + input group.

@@ -80,10 +80,10 @@ const Select = () => { React Input group Wrapping -

- Input groups wrap by default via flex-wrap: wrap in order - to accommodate custom form field validation within an input group. You may disable - this with .flex-nowrap. +

+ Input groups wrap by default via flex-wrap: wrap in order to accommodate + custom form field validation within an input group. You may disable this with{' '} + .flex-nowrap.

@@ -104,16 +104,13 @@ const Select = () => { React Input group Sizing -

- Add the relative form sizing classes to the{' '} - <CInputGroup> itself and contents within will - automatically resize—no need for repeating the form control size classes on each - element. +

+ Add the relative form sizing classes to the <CInputGroup> itself + and contents within will automatically resize—no need for repeating the form control + size classes on each element.

-

- - Sizing on the individual input group elements isn't supported. - +

+ Sizing on the individual input group elements isn't supported.

@@ -147,7 +144,7 @@ const Select = () => { React Input group Checkboxes and radios -

+

Place any checkbox or radio option within an input group's addon instead of text.

@@ -181,10 +178,10 @@ const Select = () => { React Input group Multiple inputs -

- While multiple <CFormControl>s are supported - visually, validation styles are only available for input groups with a single{' '} - <CFormControl>. +

+ While multiple <CFormControl>s are supported visually, validation + styles are only available for input groups with a single{' '} + <CFormControl>.

@@ -202,7 +199,7 @@ const Select = () => { React Input group Multiple addons -

+

Multiple add-ons are supported and can be mixed with checkbox and radio input versions..

@@ -227,7 +224,7 @@ const Select = () => { React Input group Button addons -

+

Multiple add-ons are supported and can be mixed with checkbox and radio input versions..

diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 28bb763..e30104a 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -14,7 +14,7 @@ import { CInputGroupText, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Layout = () => { return ( @@ -25,7 +25,7 @@ const Layout = () => { Layout Form grid -

+

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

@@ -48,11 +48,8 @@ const Layout = () => { Layout Gutters -

- By adding{' '} - - gutter modifier classes - +

+ By adding gutter modifier classes , you can have control over the gutter width in as well the inline as block direction.

@@ -65,7 +62,7 @@ const Layout = () => { -

+

More complex layouts can also be created with the grid system.

@@ -118,19 +115,17 @@ const Layout = () => { Layout Horizontal form -

- Create horizontal forms with the grid by adding the .row{' '} - class to form groups and using the .col-*-* classes to - specify the width of your labels and controls. Be sure to add{' '} - .col-form-label to your{' '} - <CFormLabel>s as well so they're vertically centered - with their associated form controls. +

+ Create horizontal forms with the grid by adding the .row class to form + groups and using the .col-*-* classes to specify the width of your labels + and controls. Be sure to add .col-form-label to your{' '} + <CFormLabel>s as well so they're vertically centered with their + associated form controls.

-

+

At times, you maybe need to use margin or padding utilities to create that perfect - alignment you need. For example, we've removed the{' '} - padding-top on our stacked radio inputs label to better - align the text baseline. + alignment you need. For example, we've removed the padding-top on our + stacked radio inputs label to better align the text baseline.

@@ -195,13 +190,10 @@ const Layout = () => { Layout Horizontal form label sizing -

- Be sure to use .col-form-label-sm or{' '} - .col-form-label-lg to your{' '} - <CFormLabel>s or{' '} - <legend>s to correctly follow the size of{' '} - .form-control-lg and{' '} - .form-control-sm. +

+ Be sure to use .col-form-label-sm or .col-form-label-lg to + your <CFormLabel>s or <legend>s to correctly + follow the size of .form-control-lg and .form-control-sm.

@@ -254,14 +246,12 @@ const Layout = () => { Layout Column sizing -

+

As shown in the previous examples, our grid system allows you to place any number of{' '} - <CCol>s within a{' '} - <CRow>. They'll split the available width equally - between them. You may also pick a subset of your columns to take up more or less - space, while the remaining <CCol>s equally split the - rest, with specific column classes like <CCol sm="7"> - . + <CCol>s within a <CRow>. They'll split the + available width equally between them. You may also pick a subset of your columns to + take up more or less space, while the remaining <CCol>s equally + split the rest, with specific column classes like <CCol sm="7">.

@@ -285,11 +275,11 @@ const Layout = () => { Layout Auto-sizing -

+

The example below uses a flexbox utility to vertically center the contents and changes{' '} - <CCol> to{' '} - <CCol xs="auto"> so that your columns only take up as - much space as needed. Put another way, the column sizes itself based on the contents. + <CCol> to <CCol xs="auto"> so that your columns + only take up as much space as needed. Put another way, the column sizes itself based + on the contents.

@@ -327,7 +317,7 @@ const Layout = () => { -

+

You can then remix that once again with size-specific column classes.

@@ -375,15 +365,12 @@ const Layout = () => { Layout Inline forms -

- Use the <CCol xs="auto"> class to create horizontal - layouts. By adding{' '} - - gutter modifier classes - - , we will have gutters in horizontal and vertical directions. The{' '} - .align-items-center aligns the form elements to the middle, - making the <CFormCheck> align properly. +

+ Use the <CCol xs="auto"> class to create horizontal layouts. By + adding gutter modifier classes, + we will have gutters in horizontal and vertical directions. The{' '} + .align-items-center aligns the form elements to the middle, making the{' '} + <CFormCheck> align properly.

diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js index 04bb95a..3712fb3 100644 --- a/src/views/forms/range/Range.js +++ b/src/views/forms/range/Range.js @@ -1,6 +1,6 @@ import React from 'react' import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Range = () => { return ( @@ -11,9 +11,9 @@ const Range = () => { React Range -

- Create custom <input type="range"> controls with{' '} - <CFormControl>. +

+ Create custom <input type="range"> controls with{' '} + <CFormControl>.

Example range @@ -28,9 +28,9 @@ const Range = () => { React Range Disabled -

- Add the disabled boolean attribute on an input to give it a - grayed out appearance and remove pointer events. +

+ Add the disabled boolean attribute on an input to give it a grayed out + appearance and remove pointer events.

Disabled range @@ -45,12 +45,10 @@ const Range = () => { React Range Min and max -

- Range inputs have implicit values for min and{' '} - max—0 and{' '} - 100, respectively. You may specify new values for those - using the min and max{' '} - attributes. +

+ Range inputs have implicit values for min and max— + 0 and 100, respectively. You may specify new values for + those using the min and max attributes.

Example range @@ -65,10 +63,10 @@ const Range = () => { React Range Steps -

+

By default, range inputs "snap" to integer values. To change this, you can specify a{' '} - step value. In the example below, we double the number of - steps by using step="0.5". + step value. In the example below, we double the number of steps by using{' '} + step="0.5".

Example range diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js index 80300c0..5df570a 100644 --- a/src/views/forms/select/Select.js +++ b/src/views/forms/select/Select.js @@ -1,6 +1,6 @@ import React from 'react' import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Select = () => { return ( @@ -28,7 +28,7 @@ const Select = () => { React Select Sizing -

+

You may also choose from small and large custom selects to match our similarly sized text inputs.

@@ -46,8 +46,8 @@ const Select = () => { -

- The multiple attribute is also supported: +

+ The multiple attribute is also supported:

@@ -57,8 +57,8 @@ const Select = () => { -

- As is the htmlSize property: +

+ As is the htmlSize property:

@@ -77,9 +77,9 @@ const Select = () => { React Select Disabled -

- Add the disabled boolean attribute on a select to give it a - grayed out appearance and remove pointer events. +

+ Add the disabled boolean attribute on a select to give it a grayed out + appearance and remove pointer events.

diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js index 25e9366..243827e 100644 --- a/src/views/forms/validation/Validation.js +++ b/src/views/forms/validation/Validation.js @@ -15,7 +15,7 @@ import { CInputGroupText, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const CustomStyles = () => { const [validated, setValidated] = useState(false) @@ -261,17 +261,16 @@ const Validation = () => { Validation Custom styles -

+

For custom CoreUI form validation messages, you'll need to add the{' '} - noValidate boolean property to your{' '} - <CForm>. This disables the browser default feedback - tooltips, but still provides access to the form validation APIs in JavaScript. Try to - submit the form below; our JavaScript will intercept the submit button and relay - feedback to you. When attempting to submit, you'll see the{' '} - :invalid and :valid styles - applied to your form controls. + noValidate boolean property to your <CForm>. This + disables the browser default feedback tooltips, but still provides access to the form + validation APIs in JavaScript. Try to submit the form below; our JavaScript will + intercept the submit button and relay feedback to you. When attempting to submit, + you'll see the :invalid and :valid styles applied to your + form controls.

-

+

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.{' '}

@@ -287,13 +286,13 @@ const Validation = () => { Validation Browser defaults -

+

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you'll see a slightly different style of feedback.

-

+

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

@@ -309,17 +308,16 @@ const Validation = () => { Validation Server side -

+

We recommend using client-side validation, but in case you require server-side - validation, you can indicate invalid and valid form fields with{' '} - isInvalid and isValid boolean - properties. + validation, you can indicate invalid and valid form fields with isInvalid{' '} + and isValid boolean properties.

-

+

For invalid fields, ensure that the invalid feedback/error message is associated with - the relevant form field using aria-describedby (noting that - this attribute allows more than one id to be referenced, in - case the field already points to additional form text). + the relevant form field using aria-describedby (noting that this + attribute allows more than one id to be referenced, in case the field + already points to additional form text).

@@ -394,24 +392,24 @@ const Validation = () => { Validation Supported elements -

+

Validation styles are available for the following form controls and components:

-
    -
  • - <CFormControl>s +
      +
    • + <CFormControl>s
      • -
    • - <CFormSelect>s +
    • + <CFormSelect>s
      • -
    • - <CFormCheck>s +
    • + <CFormCheck>s
    -
    - +
    + Textarea { /> More example invalid feedback text -
    +
    @@ -459,7 +457,7 @@ const Validation = () => { Example invalid select feedback
    -
    +
    { Example invalid form file feedback
    -
    +
    Submit form @@ -485,12 +483,12 @@ const Validation = () => { Validation Tooltips -

    +

    If your form layout allows it, you can swap the text for the tooltip to display validation feedback in a styled tooltip. Be sure to have a parent with{' '} - position: relative on it for tooltip positioning. In the - example below, our column classes have this already, but your project may require an - alternative setup. + position: relative on it for tooltip positioning. In the example below, + our column classes have this already, but your project may require an alternative + setup.

    {Tooltips()} diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index f8771c5..f24ac1b 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -2,105 +2,108 @@ import React from 'react' import { CAlert, CAlertHeading, - CButton, + CAlertLink, CCard, CCardBody, CCardHeader, CCol, - CLink, - CProgress, CRow, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const Alerts = () => { const [visible, setVisible] = React.useState(10) return ( - <> - - - - - Alerts - - - - This is a primary alert — check it out! - This is a secondary alert — check it out! - This is a success alert — check it out! - This is a danger alert — check it out! - This is a warning alert — check it out! - This is a info alert — check it out! - This is a light alert — check it out! - This is a dark alert — check it out! - - - - - - - Alerts - - {' '} - use .alert-link to provide links - - - + + + + + React Alert + + +

    + React Alert is prepared for any length of text, as well as an optional close button. + For a styling, use one of the required contextual color{' '} + props (e.g., primary). For inline dismissal, use the{' '} + + dismissing prop + + . +

    + + A simple primary alert—check it out! + A simple secondary alert—check it out! + A simple success alert—check it out! + A simple danger alert—check it out! + A simple warning alert—check it out! + A simple info alert—check it out! + A simple light alert—check it out! + A simple dark alert—check it out! + +     +     +     + + + + React Alert Link color + + +

    + Use the <CAlertLink> component to immediately give matching colored + links inside any alert. +

    + - {/*eslint-disable-next-line*/} - This is a primary alert with  - an example link. Give it a click if you like. + A simple primary alert with an example link. Give + it a click if you like. - {/*eslint-disable-next-line*/} - This is a secondary alert with  - an example link. Give it a click if you like. + A simple secondary alert with an example link. + Give it a click if you like. - {/*eslint-disable-next-line*/} - This is a success alert with  - an example link. Give it a click if you like. + A simple success alert with an example link. Give + it a click if you like. - {/*eslint-disable-next-line*/} - This is a danger alert with  - an example link. Give it a click if you like. + A simple danger alert with an example link. Give + it a click if you like. - {/*eslint-disable-next-line*/} - This is a warning alert with  - an example link. Give it a click if you like. + A simple warning alert with an example link. Give + it a click if you like. - {/*eslint-disable-next-line*/} - This is a info alert with  - an example link. Give it a click if you like. + A simple info alert with an example link. Give it + a click if you like. - {/*eslint-disable-next-line*/} - This is a light alert with  - an example link. Give it a click if you like. + A simple light alert with an example link. Give it + a click if you like. - {/*eslint-disable-next-line*/} - This is a dark alert with  - an example link. Give it a click if you like. + A simple dark alert with an example link. Give it + a click if you like. -     -     -     -     - - - - - Alerts - additional content - - +     +     + + + + + + React Alert Additional content + + +

    + Alert can also incorporate supplementary components & elements like heading, + paragraph, and divider. +

    + - Well done! + Well done!

    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works @@ -112,38 +115,34 @@ const Alerts = () => { tidy.

    -     -     -     - - - - Alerts - dismissing - - - - I am an dismissible alert! + + + + + + + + React Alert Dismissing + + +

    + Alerts can also be easily dismissed. Just add the dismissible prop. +

    + + { + alert('👋 Well, hi there! Thanks for dismissing me.') + }} + > + Go right ahead and click that dimiss over there on the right. - - I will be closed in {visible} seconds! - - - - setVisible(10)}> - Reset timer - -     -     -     - - + + + + + ) } diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index e28ac09..070afe6 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -9,142 +9,118 @@ import { CBadge, CRow, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' const Badges = () => { return ( - + - Badges - + React Badges Dismissing -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -
    - Example heading New -
    -
    - Example heading New -
    +

    + Bootstrap badge scale to suit the size of the parent element by using relative font + sizing and em units. +

    + +

    + Example heading New +

    +

    + Example heading New +

    +

    + Example heading New +

    +

    + Example heading New +

    +
    + Example heading New +
    +
    + Example heading New +
    +     +

    + Badges can be used as part of links or buttons to provide a counter. +

    + + + Notifications 4 + + +

    + Remark that depending on how you use them, badges may be complicated for users of + screen readers and related assistive technologies. +

    +

    + Unless the context is clear, consider including additional context with a visually + hidden piece of additional text. +

    + + + Profile 9 + unread messages + +     - - - Notifications{' '} - - 9 - - -     - + - Badges - contextual variations + React Badges Contextual variations - - Primary - - - Secondary - - - Success - - - Danger - - - Warning - - - Info - - - Light - - - Dark - +

    + Add any of the below-mentioned color props to modify the presentation of + a badge. +

    + + primary + success + danger + warning + info + light + dark +     - Badges - pill badges + React Badges Pill badges - - Primary - - - Secondary - - - Success - - - Danger - - - Warning - - - Info - - - Light - - - Dark - - - - - - Badges - square badges - - - - Primary - - - Secondary - - - Success - - - Danger - - - Warning - - - Info - - - Light - - - Dark - +

    + Apply the shape="rounded-pill" prop to make badges rounded. +

    + + + primary + + + success + + + danger + + + warning + + + info + + + light + + + dark + +     diff --git a/src/views/notifications/index.js b/src/views/notifications/index.js index fd019d9..08e31cd 100644 --- a/src/views/notifications/index.js +++ b/src/views/notifications/index.js @@ -1,6 +1,6 @@ import Alerts from './Alerts' import Badges from './Badges' import Modals from './Modals' -import Toaster from './Toaster' +import Toaster from './toasts' export { Alerts, Badges, Modals, Toaster } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index ff0936f..ef2abe0 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -5,234 +5,719 @@ import { CCardBody, CCardHeader, CCol, + CLink, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle, + CPopover, CRow, + CTooltip, } from '@coreui/react' -import { DocsLink } from 'src/reusable' +import { Example } from 'src/reusable' -const Modals = () => { - const [modal, setModal] = useState(true) - const [large, setLarge] = useState(false) - const [small, setSmall] = useState(false) - const [primary, setPrimary] = useState(false) - const [success, setSuccess] = useState(false) - const [warning, setWarning] = useState(false) - const [danger, setDanger] = useState(false) - const [info, setInfo] = useState(false) +const LiveDemo = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch demo modal + setVisible(false)}> + setVisible(false)}> + Modal title + + Woohoo, you're reading this text in a modal! + + setVisible(false)}> + Close + + Save changes + + + + ) +} + +const StaticBackdrop = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch static backdrop modal + + setVisible(false)}> + Modal title + + + I will not close if you click outside me. Don't even try to press escape key. + + + setVisible(false)}> + Close + + Save changes + + + + ) +} + +const ScrollingLongContent = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch demo modal + setVisible(false)}> + setVisible(false)}> + Modal title + + +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +     + + setVisible(false)}> + Close + + Save changes + +     + + ) +} + +const ScrollingLongContent2 = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch demo modal + setVisible(false)}> + setVisible(false)}> + Modal title + + +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +     + + setVisible(false)}> + Close + + Save changes + +     + + ) +} + +const VerticallyCentered = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Vertically centered modal + + setVisible(false)}> + Modal title + + + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + + + setVisible(false)}> + Close + + Save changes + + + + ) +} + +const VerticallyCentered2 = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Vertically centered scrollable modal + + setVisible(false)}> + Modal title + + +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +

    + Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus + auctor fringilla. +

    +

    + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis + in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. +

    +

    + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis + lacus vel augue laoreet rutrum faucibus dolor auctor. +

    +     + + setVisible(false)}> + Close + + Save changes + +     + + ) +} + +const TooltipsPopovers = () => { + const [visible, setVisible] = useState(false) + return ( + <> + setVisible(!visible)}>Launch demo modal + + setVisible(false)}> + Modal title + + +
    Popover in a modal
    +

    + This + + button + {' '} + triggers a popover on click. +

    +
    +
    Tooltips in a modal
    +

    + + This link + {' '} + and + + that link + {' '} + have tooltips on hover. +

    +     + + setVisible(false)}> + Close + + Save changes + +     + + ) +} + +const OptionalSizes = () => { + const [visibleXL, setVisibleXL] = useState(false) + const [visibleLg, setVisibleLg] = useState(false) + const [visibleSm, setVisibleSm] = useState(false) + return ( + <> + setVisibleXL(!visibleXL)}>Extra large modal + setVisibleLg(!visibleLg)}>Large modal + setVisibleSm(!visibleSm)}>Small large modal + + setVisibleXL(false)}> + Extra large modal + + ... + + + setVisibleLg(false)}> + Large modal + + ... + + + setVisibleSm(false)}> + Small modal + + ... + + + ) +} + +const FullscreenModal = () => { + const [visible, setVisible] = useState(false) + const [visibleSm, setVisibleSm] = useState(false) + const [visibleMd, setVisibleMd] = useState(false) + const [visibleLg, setVisibleLg] = useState(false) + const [visibleXL, setVisibleXL] = useState(false) + const [visibleXXL, setVisibleXXL] = useState(false) + return ( + <> + setVisible(!visible)}>Full screen + setVisibleSm(!visibleSm)}>Full screen below sm + setVisibleMd(!visibleMd)}>Full screen below md + setVisibleLg(!visibleLg)}>Full screen below lg + setVisibleXL(!visibleXL)}>Full screen below xl + setVisibleXXL(!visibleXXL)}>Full screen below xxl + + setVisible(false)}> + Full screen + + ... + + + setVisibleSm(false)}> + Full screen below sm + + ... + + + setVisibleMd(false)}> + Full screen below md + + ... + + + setVisibleLg(false)}> + Full screen below lg + + ... + + + setVisibleXL(false)}> + Full screen below xl + + ... + + + setVisibleXXL(false)}> + Full screen below xxl + + ... + + + ) +} + +const Modals = () => { return ( - + - Bootstrap Modals - + React Modal - setModal(!modal)} className="me-1"> - Launch demo modal - - setLarge(!large)} className="me-1"> - Launch large modal - - setSmall(!large)} className="me-1"> - Launch small modal - - - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - Do Something{' '} - setModal(false)}> - Cancel - - - - - setLarge(!large)} size="lg"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setLarge(!large)}> - Do Something - {' '} - setLarge(!large)}> - Cancel - - - - - setSmall(!small)} size="sm"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setSmall(!small)}> - Do Something - {' '} - setSmall(!small)}> - Cancel - - - - -
    - - setPrimary(!primary)} className="me-1"> - Primary modal - - setSuccess(!success)} className="me-1"> - Success modal - - setWarning(!warning)} className="me-1"> - Warning modal - - setDanger(!danger)} className="me-1"> - Danger modal - - setInfo(!info)} className="me-1"> - Info modal - - - setPrimary(!primary)} color="primary"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setPrimary(!primary)}> - Do Something - {' '} - setPrimary(!primary)}> - Cancel - - - - - setSuccess(!success)} color="success"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setSuccess(!success)}> - Do Something - {' '} - setSuccess(!success)}> - Cancel - - - - - setWarning(!warning)} color="warning"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setWarning(!warning)}> - Do Something - {' '} - setWarning(!warning)}> - Cancel - - - - - setDanger(!danger)} color="danger"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setDanger(!danger)}> - Do Something - {' '} - setDanger(!danger)}> - Cancel - - - - - setInfo(!info)} color="info"> - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - setInfo(!info)}> - Cancel - - setInfo(!info)}> - Do Something - {' '} - - +

    + Below is a static modal example (meaning its position and{' '} + display have been overridden). Included are the modal header, modal body + (required for padding), and modal footer (optional). We ask that you + include modal headers with dismiss actions whenever possible, or provide another + explicit dismiss action. +

    + + + + Modal title + + Modal body text goes here. + + Close + Save changes + + + +     +     +     + + + + React Modal Live demo + + +

    + Toggle a working modal demo by clicking the button below. It will slide down and fade + in from the top of the page. +

    + + {LiveDemo()} + +     +     +     + + + + React Modal Static backdrop + + +

    + If you don’t provide an onDimsiss handler to the Modal component, your + modal will behave as though the backdrop is static, meaning it will not close when + clicking outside it. Click the button below to try it. +

    + + {StaticBackdrop()} + +     +     +     + + + + React Modal Scrolling long content + + +

    + If you don’t provide an onDimsiss handler to the Modal component, your + modal will behave as though the backdrop is static, meaning it will not close when + clicking outside it. Click the button below to try it. +

    + + {ScrollingLongContent()} + +

    + You can also create a scrollable modal that allows scroll the modal body by adding{' '} + scrollable prop. +

    + + {ScrollingLongContent2()} + +     +     +     + + + + React Modal Vertically centered + + +

    + Add alignment="center to <CModal> to vertically center + the modal. +

    + + {VerticallyCentered()} + + + {VerticallyCentered2()} + +     +     +     + + + + React Modal Tooltips and popovers + + +

    + <CTooltips> and <CPopovers> can be placed within + modals as needed. When modals are closed, any tooltips and popovers within are also + automatically dismissed. +

    + + {TooltipsPopovers()} + +     +     +     + + + + React Modal Optional sizes + + +

    + Modals have three optional sizes, available via modifier classes to be placed on a{' '} + <CModal>. These sizes kick in at certain breakpoints to avoid + horizontal scrollbars on narrower viewports. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SizeProperty sizeModal max-width
    Small + 'sm' + + 300px +
    DefaultNone + 500px +
    Large + 'lg' + + 800px +
    Extra large + 'xl' + + 1140px +
    + + {OptionalSizes()} + +     +     +     + + + + React Modal Fullscreen Modal + + +

    + Another override is the option to pop up a modal that covers the user viewport, + available via property fullscrean. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Property fullscreanAvailability
    + true + Always
    + 'sm' + + Below 576px +
    + 'md' + + Below 768px +
    + 'lg' + + Below 992px +
    + 'xl' + + Below 1200px +
    + 'xxl' + + Below 1400px +
    + + {FullscreenModal()} +     diff --git a/src/views/notifications/toaster/Toaster.js b/src/views/notifications/toaster/Toaster.js deleted file mode 100644 index 9cfa02e..0000000 --- a/src/views/notifications/toaster/Toaster.js +++ /dev/null @@ -1,182 +0,0 @@ -import React, { useState } from 'react' -import { - CCard, - CCardHeader, - CCardBody, - CForm, - CFormControl, - CFormCheck, - CFormSelect, - CButton, - CContainer, - CRow, - CCol, - CFormLabel, - CToast, - CToaster, -} from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const Toaster = () => { - const placements = [ - 'top-start', - 'top-center', - 'top-end', - 'middle-start', - 'middle-center', - 'middle-end', - 'bottom-start', - 'bottom-center', - 'bottom-end', - ] - - const [toasts, setToasts] = useState([ - { placement: 'static' }, - { placement: 'static' }, - { placement: 'top-end', autohide: 3000 }, - ]) - - const [placement, setPlacement] = useState('top-end') - const [autohide, setAutohide] = useState(true) - const [autohideValue, setAutohideValue] = useState(5000) - const [closeButton, setCloseButton] = useState(true) - const [fade, setFade] = useState(true) - - const addToast = () => { - setToasts([...toasts, { placement, autohide: autohide && autohideValue, closeButton, fade }]) - } - - const toasters = (() => { - return toasts.reduce((toasters, toast) => { - toasters[toast.placement] = toasters[toast.placement] || [] - toasters[toast.placement].push(toast) - return toasters - }, {}) - })() - - return ( - - - Toasts. - - - - - - - -
    Add toast with following props:
    - -
    - { - setAutohide(e.target.checked) - }} - custom - /> - - Autohide of the toast - -
    - {autohide && ( -
    - Time to autohide - { - setAutohideValue(Number(e.target.value)) - }} - /> -
    - )} - -
    - Placement - { - setPlacement(e.target.value) - }} - > - {placements.map((placement, i) => ( - - ))} - -
    - -
    - { - setFade(e.target.checked) - }} - custom - /> - - fade - -
    - -
    - { - setCloseButton(e.target.checked) - }} - /> - - closeButton - -
    - - - Add toast - -     -     - - {Object.keys(toasters).map((toasterKey) => ( - - {toasters[toasterKey].map((toast, key) => { - return ( - - - - } - title="CoreUI for React.js" - time="7 min ago" - autohide={toast.autohide} - > - {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`} - - ) - })} - - ))} - -     -     -     -     - ) -} - -export default Toaster diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js new file mode 100644 index 0000000..9bb8c04 --- /dev/null +++ b/src/views/notifications/toasts/Toasts.js @@ -0,0 +1,249 @@ +import React, { useRef, useState } from 'react' +import { + CCard, + CCardHeader, + CCardBody, + CButton, + CRow, + CCol, + CToast, + CToastBody, + CToastClose, + CToastHeader, + CToaster, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const exampleToast = () => { + const [toast, addToast] = useState(0) + const toaster = useRef() + const exampleToast = ( + + + + + + CoreUI for React.js + 7 min ago + + Hello, world! This is a toast message. + + ) + return ( + <> + addToast(exampleToast)}>Send a toast + + + ) +} + +const Toasts = () => { + return ( + + + + + React Toast Basic + + +

    + Toasts are as flexible as you need and have very little required markup. At a minimum, + we require a single element to contain your “toasted” content and strongly encourage a + dismiss button. +

    + + + + + + + CoreUI for React.js + 7 min ago + + Hello, world! This is a toast message. + + + + {exampleToast()} + +     +     +     + + + + React Toast Translucent + + +

    + Toasts are slightly translucent to blend in with what's below them. +

    + +
    + + + + + + CoreUI for React.js + 7 min ago + + Hello, world! This is a toast message. + +
    +     +     +     +     + + + + React Toast Stacking + + +

    + You can stack toasts by wrapping them in a toast container, which will vertically add + some spacing. +

    + + + + + + + + CoreUI for React.js + 7 min ago + + Hello, world! This is a toast message. + + + + + + + CoreUI for React.js + 7 min ago + + Hello, world! This is a toast message. + + + +     +     +     + + + + React Toast Custom content + + +

    + Customize your toasts by removing sub-components, tweaking them with{' '} + utilities, or by adding your + own markup. Here we've created a simpler toast by removing the default{' '} + <CToastHeader>, adding a custom hide icon from{' '} + CoreUI Icons, and using some{' '} + flexbox utilities to adjust + the layout. +

    + + +
    + Hello, world! This is a toast message. + +
    +     +     +

    + Alternatively, you can also add additional controls and components to toasts. +

    + + + + Hello, world! This is a toast message. +
    + + Take action + + + Close + +
    +     +     +     +     +     +     + + + + React Toast Custom content + + +

    + Building on the above example, you can create different toast color schemes with our{' '} + color and{' '} + background utilities. + Here we've set color="primary" and added .text-white class + to the <Ctoast>, and then set white property to our + close button. For a crisp edge, we remove the default border with{' '} + .border-0. +

    + + +
    + Hello, world! This is a toast message. + +
    +     +     +     +     +     +     + ) +} + +export default Toasts