refactor: update examples structure and views.
This commit is contained in:
Łukasz Holeczek
parent
ba50130c04
commit
85b218bd87
BIN
src/assets/images/angular.jpg
Executable file
BIN
src/assets/images/angular.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
src/assets/images/react.jpg
Executable file
BIN
src/assets/images/react.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
src/assets/images/vue.jpg
Executable file
BIN
src/assets/images/vue.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
@ -5,53 +5,49 @@ const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
|
||||
const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
|
||||
|
||||
// Base
|
||||
const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion'))
|
||||
const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs'))
|
||||
const Cards = React.lazy(() => import('./views/components/base/cards/Cards'))
|
||||
const Carousels = React.lazy(() => import('./views/components/base/carousels/Carousels'))
|
||||
const Collapses = React.lazy(() => import('./views/components/base/collapses/Collapses'))
|
||||
const ListGroups = React.lazy(() => import('./views/components/base/list-groups/ListGroups'))
|
||||
const Navs = React.lazy(() => import('./views/components/base/navs/Navs'))
|
||||
const Paginations = React.lazy(() => import('./views/components/base/paginations/Paginations'))
|
||||
const Popovers = React.lazy(() => import('./views/components/base/popovers/Popovers'))
|
||||
const Progress = React.lazy(() => import('./views/components/base/progress/Progress'))
|
||||
const Spinners = React.lazy(() => import('./views/components/base/spinners/Spinners'))
|
||||
const Tables = React.lazy(() => import('./views/components/base/tables/Tables'))
|
||||
const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips'))
|
||||
const Accordion = React.lazy(() => import('./views/base/accordion/Accordion'))
|
||||
const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
|
||||
const Cards = React.lazy(() => import('./views/base/cards/Cards'))
|
||||
const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
|
||||
const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
|
||||
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
|
||||
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
|
||||
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
|
||||
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
|
||||
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
|
||||
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
|
||||
const Tables = React.lazy(() => import('./views/base/tables/Tables'))
|
||||
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
|
||||
|
||||
// Buttons
|
||||
const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons'))
|
||||
const ButtonGroups = React.lazy(() =>
|
||||
import('./views/components/buttons/button-groups/ButtonGroups'),
|
||||
)
|
||||
const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns'))
|
||||
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
|
||||
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
|
||||
const Dropdowns = React.lazy(() => import('./views/buttons/dropdowns/Dropdowns'))
|
||||
|
||||
//Forms
|
||||
const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios'))
|
||||
const FloatingLabels = React.lazy(() =>
|
||||
import('./views/components/forms/floating-labels/FloatingLabels'),
|
||||
)
|
||||
const FormControl = React.lazy(() => import('./views/components/forms/form-control/FormControl'))
|
||||
const InputGroup = React.lazy(() => import('./views/components/forms/input-group/InputGroup'))
|
||||
const Layout = React.lazy(() => import('./views/components/forms/layout/Layout'))
|
||||
const Range = React.lazy(() => import('./views/components/forms/range/Range'))
|
||||
const Select = React.lazy(() => import('./views/components/forms/select/Select'))
|
||||
const Validation = React.lazy(() => import('./views/components/forms/validation/Validation'))
|
||||
const ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios'))
|
||||
const FloatingLabels = React.lazy(() => import('./views/forms/floating-labels/FloatingLabels'))
|
||||
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 Charts = React.lazy(() => import('./views/components/charts/Charts'))
|
||||
const Charts = React.lazy(() => import('./views/charts/Charts'))
|
||||
|
||||
// Icons
|
||||
const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons'))
|
||||
const Flags = React.lazy(() => import('./views/components/icons/flags/Flags'))
|
||||
const Brands = React.lazy(() => import('./views/components/icons/brands/Brands'))
|
||||
const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
|
||||
const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
|
||||
const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
|
||||
|
||||
// Notifications
|
||||
const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts'))
|
||||
const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges'))
|
||||
const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals'))
|
||||
const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts'))
|
||||
const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
|
||||
const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
|
||||
const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
|
||||
const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
|
||||
|
||||
const Widgets = React.lazy(() => import('./views/components/widgets/Widgets'))
|
||||
const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
|
||||
|
||||
const routes = [
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react'
|
||||
import React from 'react'
|
||||
import {
|
||||
CCard,
|
||||
CCardBody,
|
||||
@ -21,6 +21,8 @@ import {
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
import ReactImg from 'src/assets/images/react.jpg'
|
||||
|
||||
const Cards = () => {
|
||||
return (
|
||||
<CRow>
|
||||
@ -48,24 +50,7 @@ const Cards = () => {
|
||||
</p>
|
||||
<DocsExample href="components/card">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -144,24 +129,7 @@ const Cards = () => {
|
||||
</p>
|
||||
<DocsExample href="components/card/#images">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardText>
|
||||
Some quick example text to build on the card title and make up the bulk of the
|
||||
@ -231,24 +199,7 @@ const Cards = () => {
|
||||
</p>
|
||||
<DocsExample href="components/card/#kitchen-sink">
|
||||
<CCard style={{ width: '18rem' }}>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -550,24 +501,7 @@ const Cards = () => {
|
||||
<CRow>
|
||||
<CCol lg={6}>
|
||||
<CCard className="mb-3">
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -592,24 +526,7 @@ const Cards = () => {
|
||||
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="bottom"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="bottom" src={ReactImg} />
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
@ -745,24 +662,7 @@ const Cards = () => {
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -775,24 +675,7 @@ const Cards = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -805,24 +688,7 @@ const Cards = () => {
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -843,24 +709,7 @@ const Cards = () => {
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -873,24 +722,7 @@ const Cards = () => {
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -903,24 +735,7 @@ const Cards = () => {
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -956,24 +771,7 @@ const Cards = () => {
|
||||
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -988,24 +786,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1020,24 +801,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1052,24 +816,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1092,24 +839,7 @@ const Cards = () => {
|
||||
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1124,24 +854,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1156,24 +869,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -1188,24 +884,7 @@ const Cards = () => {
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
<CCardImage
|
||||
component="svg"
|
||||
orientation="top"
|
||||
className="docs-placeholder-img"
|
||||
width="100%"
|
||||
height="180"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">
|
||||
Image cap
|
||||
</text>
|
||||
</CCardImage>
|
||||
<CCardImage orientation="top" src={ReactImg} />
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>
|
||||
@ -11,11 +11,9 @@ import {
|
||||
} from '@coreui/react'
|
||||
import { DocsCallout, DocsExample } from 'src/components'
|
||||
|
||||
const slides = [
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
]
|
||||
import AngularImg from 'src/assets/images/angular.jpg'
|
||||
import ReactImg from 'src/assets/images/react.jpg'
|
||||
import VueImg from 'src/assets/images/vue.jpg'
|
||||
|
||||
const slidesLight = [
|
||||
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
|
||||
@ -39,13 +37,13 @@ const Carousels = () => {
|
||||
<DocsExample href="components/carousel">
|
||||
<CCarousel>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
@ -64,13 +62,13 @@ const Carousels = () => {
|
||||
<DocsExample href="components/carousel/#with-controls">
|
||||
<CCarousel controls>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
@ -89,13 +87,13 @@ const Carousels = () => {
|
||||
<DocsExample href="components/carousel/#with-indicators">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
@ -119,21 +117,21 @@ const Carousels = () => {
|
||||
<DocsExample href="components/carousel/#with-captions">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
<CCarouselCaption className="d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
@ -157,13 +155,13 @@ const Carousels = () => {
|
||||
<DocsExample href="components/carousel/#crossfade">
|
||||
<CCarousel controls transition="crossfade">
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[0]} alt="slide 1" />
|
||||
<img className="d-block w-100" src={ReactImg} alt="slide 1" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[1]} alt="slide 2" />
|
||||
<img className="d-block w-100" src={AngularImg} alt="slide 2" />
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img className="d-block w-100" src={slides[2]} alt="slide 3" />
|
||||
<img className="d-block w-100" src={VueImg} alt="slide 3" />
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</DocsExample>
|
||||
@ -44,15 +44,15 @@ import {
|
||||
cilUserFemale,
|
||||
} from '@coreui/icons'
|
||||
|
||||
import avatar1 from './../../assets/images/avatars/1.jpg'
|
||||
import avatar2 from './../../assets/images/avatars/2.jpg'
|
||||
import avatar3 from './../../assets/images/avatars/3.jpg'
|
||||
import avatar4 from './../../assets/images/avatars/4.jpg'
|
||||
import avatar5 from './../../assets/images/avatars/5.jpg'
|
||||
import avatar6 from './../../assets/images/avatars/6.jpg'
|
||||
import avatar1 from 'src/assets/images/avatars/1.jpg'
|
||||
import avatar2 from 'src/assets/images/avatars/2.jpg'
|
||||
import avatar3 from 'src/assets/images/avatars/3.jpg'
|
||||
import avatar4 from 'src/assets/images/avatars/4.jpg'
|
||||
import avatar5 from 'src/assets/images/avatars/5.jpg'
|
||||
import avatar6 from 'src/assets/images/avatars/6.jpg'
|
||||
|
||||
const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
|
||||
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
|
||||
const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js'))
|
||||
|
||||
const Dashboard = () => {
|
||||
const random = (min, max) => {
|
||||
|
||||
@ -133,7 +133,7 @@ const Alerts = () => {
|
||||
<CAlert
|
||||
color="warning"
|
||||
dismissible
|
||||
onDismissed={() => {
|
||||
onClose={() => {
|
||||
alert('👋 Well, hi there! Thanks for dismissing me.')
|
||||
}}
|
||||
>
|
||||
@ -22,7 +22,7 @@ const LiveDemo = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -43,7 +43,7 @@ const StaticBackdrop = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
|
||||
<CModal backdrop="static" visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -66,7 +66,7 @@ const ScrollingLongContent = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -166,7 +166,7 @@ const ScrollingLongContent2 = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal scrollable visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -266,7 +266,7 @@ const VerticallyCentered = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
|
||||
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -290,7 +290,7 @@ const VerticallyCentered2 = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
|
||||
<CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -333,7 +333,7 @@ const TooltipsPopovers = () => {
|
||||
return (
|
||||
<>
|
||||
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
|
||||
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -379,19 +379,19 @@ const OptionalSizes = () => {
|
||||
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
|
||||
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
|
||||
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
|
||||
<CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
|
||||
<CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Extra large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
|
||||
<CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
|
||||
<CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Small modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -417,37 +417,37 @@ const FullscreenModal = () => {
|
||||
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
|
||||
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
|
||||
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
|
||||
<CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
|
||||
<CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
|
||||
<CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below sm</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
|
||||
<CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below md</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
|
||||
<CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below lg</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
|
||||
<CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below xl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>...</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
|
||||
<CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
|
||||
<CModalHeader>
|
||||
<CModalTitle>Full screen below xxl</CModalTitle>
|
||||
</CModalHeader>
|
||||
@ -19,7 +19,7 @@ const ExampleToast = () => {
|
||||
const toaster = useRef()
|
||||
const exampleToast = (
|
||||
<CToast title="CoreUI for React.js">
|
||||
<CToastHeader close>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
@ -63,8 +63,8 @@ const Toasts = () => {
|
||||
dismiss button.
|
||||
</p>
|
||||
<DocsExample href="components/toast">
|
||||
<CToast title="CoreUI for React.js" autohide={false}>
|
||||
<CToastHeader close>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
@ -97,8 +97,8 @@ const Toasts = () => {
|
||||
</p>
|
||||
<DocsExample href="components/toast#translucent">
|
||||
<div className="bg-dark p-3">
|
||||
<CToast title="CoreUI for React.js" autohide={false}>
|
||||
<CToastHeader close>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
@ -132,8 +132,8 @@ const Toasts = () => {
|
||||
</p>
|
||||
<DocsExample href="components/toast#stacking">
|
||||
<CToaster>
|
||||
<CToast title="CoreUI for React.js" autohide={false}>
|
||||
<CToastHeader close>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
@ -150,8 +150,8 @@ const Toasts = () => {
|
||||
</CToastHeader>
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
</CToast>
|
||||
<CToast title="CoreUI for React.js" autohide={false}>
|
||||
<CToastHeader close>
|
||||
<CToast title="CoreUI for React.js" autohide={false} visible={true}>
|
||||
<CToastHeader closeButton>
|
||||
<svg
|
||||
className="rounded me-2"
|
||||
width="20"
|
||||
@ -189,7 +189,7 @@ const Toasts = () => {
|
||||
the layout.
|
||||
</p>
|
||||
<DocsExample href="components/toast#custom-content">
|
||||
<CToast autohide={false} className="align-items-center">
|
||||
<CToast autohide={false} className="align-items-center" visible={true}>
|
||||
<div className="d-flex">
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
<CToastClose className="me-2 m-auto" />
|
||||
@ -200,7 +200,7 @@ const Toasts = () => {
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
</p>
|
||||
<DocsExample href="components/toast#custom-content">
|
||||
<CToast autohide={false}>
|
||||
<CToast autohide={false} visible={true}>
|
||||
<CToastBody>
|
||||
Hello, world! This is a toast message.
|
||||
<div className="mt-2 pt-2 border-top">
|
||||
@ -233,7 +233,12 @@ const Toasts = () => {
|
||||
default border with <code>.border-0</code>.
|
||||
</p>
|
||||
<DocsExample href="components/toast#color-schemes">
|
||||
<CToast autohide={false} color="primary" className="text-white align-items-center">
|
||||
<CToast
|
||||
autohide={false}
|
||||
color="primary"
|
||||
className="text-white align-items-center"
|
||||
visible={true}
|
||||
>
|
||||
<div className="d-flex">
|
||||
<CToastBody>Hello, world! This is a toast message.</CToastBody>
|
||||
<CToastClose className="me-2 m-auto" white />
|
||||
@ -38,7 +38,7 @@ const Widgets = () => {
|
||||
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
|
||||
|
||||
return (
|
||||
<CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Widgets</CCardHeader>
|
||||
<CCardBody>
|
||||
<DocsExample href="/components/widgets/#cwidgetstatsa">
|
||||
Loading…
Reference in New Issue
Block a user