Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 49975ea

Browse filesBrowse files
mrholekmrholek
committed
docs: allow showing images on StackBlitz and CodeSandbox examples
1 parent 81a62bb commit 49975ea
Copy full SHA for 49975ea

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner
Expand file treeCollapse file tree

47 files changed

+155
-268
lines changed

‎packages/docs/content/components/avatar/examples/AvatarImage.tsx

Copy file name to clipboard
+3-7Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react'
22
import { CAvatar } from '@coreui/react'
33

4-
import Avatar1 from '@assets/images/avatars/1.jpg'
5-
import Avatar2 from '@assets/images/avatars/2.jpg'
6-
import Avatar3 from '@assets/images/avatars/3.jpg'
7-
84
export const AvatarImage = () => {
95
return (
106
<>
11-
<CAvatar src={Avatar1} />
12-
<CAvatar src={Avatar2} />
13-
<CAvatar src={Avatar3} />
7+
<CAvatar src="../../images/avatars/1.jpg" />
8+
<CAvatar src="../../images/avatars/2.jpg" />
9+
<CAvatar src="../../images/avatars/3.jpg" />
1410
</>
1511
)
1612
}

‎packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CAvatar } from '@coreui/react'
33

4-
import Avatar1 from '@assets/images/avatars/1.jpg'
5-
64
export const AvatarWithStatus = () => {
75
return (
86
<>
9-
<CAvatar src={Avatar1} status="success" />
7+
<CAvatar src="../../images/avatars/1.jpg" status="success" />
108
<CAvatar color="secondary" status="danger">
119
CUI
1210
</CAvatar>

‎packages/docs/content/components/card/examples/CardExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardExample.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardExample = () => {
75
return (
86
<CCard style={{ width: '18rem' }}>
9-
<CCardImage orientation="top" src={ReactImg} />
7+
<CCardImage orientation="top" src="../../images/react.jpg" />
108
<CCardBody>
119
<CCardTitle>Card title</CCardTitle>
1210
<CCardText>

‎packages/docs/content/components/card/examples/CardGrid2Example.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGrid2Example.tsx
+22-15Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
import React from 'react'
2-
import { CCard, CCardBody, CCardFooter, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
3-
4-
import ReactImg from '@assets/images/react.jpg'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardImage,
7+
CCardText,
8+
CCardTitle,
9+
CCol,
10+
CRow,
11+
} from '@coreui/react'
512

613
export const CardGrid2Example = () => {
714
return (
815
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
916
<CCol xs>
1017
<CCard>
11-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
1219
<CCardBody>
1320
<CCardTitle>Card title</CCardTitle>
1421
<CCardText>
15-
This is a wider card with supporting text below as a natural lead-in to additional content. This
16-
content is a little bit longer.
22+
This is a wider card with supporting text below as a natural lead-in to additional
23+
content. This content is a little bit longer.
1724
</CCardText>
1825
</CCardBody>
1926
<CCardFooter>
@@ -23,12 +30,12 @@ export const CardGrid2Example = () => {
2330
</CCol>
2431
<CCol xs>
2532
<CCard>
26-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
2734
<CCardBody>
2835
<CCardTitle>Card title</CCardTitle>
2936
<CCardText>
30-
This is a wider card with supporting text below as a natural lead-in to additional content. This
31-
content is a little bit longer.
37+
This is a wider card with supporting text below as a natural lead-in to additional
38+
content. This content is a little bit longer.
3239
</CCardText>
3340
</CCardBody>
3441
<CCardFooter>
@@ -38,12 +45,12 @@ export const CardGrid2Example = () => {
3845
</CCol>
3946
<CCol xs>
4047
<CCard>
41-
<CCardImage orientation="top" src={ReactImg} />
48+
<CCardImage orientation="top" src="../../images/react.jpg" />
4249
<CCardBody>
4350
<CCardTitle>Card title</CCardTitle>
4451
<CCardText>
45-
This is a wider card with supporting text below as a natural lead-in to additional content. This
46-
content is a little bit longer.
52+
This is a wider card with supporting text below as a natural lead-in to additional
53+
content. This content is a little bit longer.
4754
</CCardText>
4855
</CCardBody>
4956
<CCardFooter>
@@ -53,12 +60,12 @@ export const CardGrid2Example = () => {
5360
</CCol>
5461
<CCol xs>
5562
<CCard>
56-
<CCardImage orientation="top" src={ReactImg} />
63+
<CCardImage orientation="top" src="../../images/react.jpg" />
5764
<CCardBody>
5865
<CCardTitle>Card title</CCardTitle>
5966
<CCardText>
60-
This is a wider card with supporting text below as a natural lead-in to additional content. This
61-
content is a little bit longer.
67+
This is a wider card with supporting text below as a natural lead-in to additional
68+
content. This content is a little bit longer.
6269
</CCardText>
6370
</CCardBody>
6471
<CCardFooter>

‎packages/docs/content/components/card/examples/CardGrid3Example.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGrid3Example.tsx
+4-6Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardGrid3Example = () => {
75
return (
86
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
97
<CCol xs>
108
<CCard className="h-100">
11-
<CCardImage orientation="top" src={ReactImg} />
9+
<CCardImage orientation="top" src="../../images/react.jpg" />
1210
<CCardBody>
1311
<CCardTitle>Card title</CCardTitle>
1412
<CCardText>
@@ -20,7 +18,7 @@ export const CardGrid3Example = () => {
2018
</CCol>
2119
<CCol xs>
2220
<CCard className="h-100">
23-
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardImage orientation="top" src="../../images/react.jpg" />
2422
<CCardBody>
2523
<CCardTitle>Card title</CCardTitle>
2624
<CCardText>
@@ -31,7 +29,7 @@ export const CardGrid3Example = () => {
3129
</CCol>
3230
<CCol xs>
3331
<CCard className="h-100">
34-
<CCardImage orientation="top" src={ReactImg} />
32+
<CCardImage orientation="top" src="../../images/react.jpg" />
3533
<CCardBody>
3634
<CCardTitle>Card title</CCardTitle>
3735
<CCardText>
@@ -44,7 +42,7 @@ export const CardGrid3Example = () => {
4442
</CCol>
4543
<CCol xs>
4644
<CCard className="h-100">
47-
<CCardImage orientation="top" src={ReactImg} />
45+
<CCardImage orientation="top" src="../../images/react.jpg" />
4846
<CCardBody>
4947
<CCardTitle>Card title</CCardTitle>
5048
<CCardText>

‎packages/docs/content/components/card/examples/CardGrid4Example.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGrid4Example.tsx
+3-5Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@ import {
1010
CRow,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardGrid4Example = () => {
1614
return (
1715
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
1816
<CCol xs>
1917
<CCard className="h-100">
20-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGrid4Example = () => {
3230
</CCol>
3331
<CCol xs>
3432
<CCard className="h-100">
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -46,7 +44,7 @@ export const CardGrid4Example = () => {
4644
</CCol>
4745
<CCol xs>
4846
<CCard className="h-100">
49-
<CCardImage orientation="top" src={ReactImg} />
47+
<CCardImage orientation="top" src="../../images/react.jpg" />
5048
<CCardBody>
5149
<CCardTitle>Card title</CCardTitle>
5250
<CCardText>

‎packages/docs/content/components/card/examples/CardGridExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGridExample.tsx
+4-6Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,12 @@ import {
1010
CRow,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardGridExample = () => {
1614
return (
1715
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
1816
<CCol xs>
1917
<CCard>
20-
<CCardImage orientation="top" src={ReactImg} />
18+
<CCardImage orientation="top" src="../../images/react.jpg" />
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGridExample = () => {
3230
</CCol>
3331
<CCol xs>
3432
<CCard>
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -47,7 +45,7 @@ export const CardGridExample = () => {
4745
</CCol>
4846
<CCol xs>
4947
<CCard>
50-
<CCardImage orientation="top" src={ReactImg} />
48+
<CCardImage orientation="top" src="../../images/react.jpg" />
5149
<CCardBody>
5250
<CCardTitle>Card title</CCardTitle>
5351
<CCardText>
@@ -62,7 +60,7 @@ export const CardGridExample = () => {
6260
</CCol>
6361
<CCol xs>
6462
<CCard>
65-
<CCardImage orientation="top" src={ReactImg} />
63+
<CCardImage orientation="top" src="../../images/react.jpg" />
6664
<CCardBody>
6765
<CCardTitle>Card title</CCardTitle>
6866
<CCardText>

‎packages/docs/content/components/card/examples/CardGroups2Example.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGroups2Example.tsx
+3-5Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import {
99
CCardTitle,
1010
} from '@coreui/react'
1111

12-
import ReactImg from '@assets/images/react.jpg'
13-
1412
export const CardGroups2Example = () => {
1513
return (
1614
<CCardGroup>
1715
<CCard>
18-
<CCardImage orientation="top" src={ReactImg} />
16+
<CCardImage orientation="top" src="../../images/react.jpg" />
1917
<CCardBody>
2018
<CCardTitle>Card title</CCardTitle>
2119
<CCardText>
@@ -28,7 +26,7 @@ export const CardGroups2Example = () => {
2826
</CCardFooter>
2927
</CCard>
3028
<CCard>
31-
<CCardImage orientation="top" src={ReactImg} />
29+
<CCardImage orientation="top" src="../../images/react.jpg" />
3230
<CCardBody>
3331
<CCardTitle>Card title</CCardTitle>
3432
<CCardText>
@@ -40,7 +38,7 @@ export const CardGroups2Example = () => {
4038
</CCardFooter>
4139
</CCard>
4240
<CCard>
43-
<CCardImage orientation="top" src={ReactImg} />
41+
<CCardImage orientation="top" src="../../images/react.jpg" />
4442
<CCardBody>
4543
<CCardTitle>Card title</CCardTitle>
4644
<CCardText>

‎packages/docs/content/components/card/examples/CardGroupsExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardGroupsExample.tsx
+3-5Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardGroup, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardGroupsExample = () => {
75
return (
86
<CCardGroup>
97
<CCard>
10-
<CCardImage orientation="top" src={ReactImg} />
8+
<CCardImage orientation="top" src="../../images/react.jpg" />
119
<CCardBody>
1210
<CCardTitle>Card title</CCardTitle>
1311
<CCardText>
@@ -20,7 +18,7 @@ export const CardGroupsExample = () => {
2018
</CCardBody>
2119
</CCard>
2220
<CCard>
23-
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardImage orientation="top" src="../../images/react.jpg" />
2422
<CCardBody>
2523
<CCardTitle>Card title</CCardTitle>
2624
<CCardText>
@@ -32,7 +30,7 @@ export const CardGroupsExample = () => {
3230
</CCardBody>
3331
</CCard>
3432
<CCard>
35-
<CCardImage orientation="top" src={ReactImg} />
33+
<CCardImage orientation="top" src="../../images/react.jpg" />
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>

‎packages/docs/content/components/card/examples/CardImageCapsExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardImageCapsExample.tsx
+2-4Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImageCapsExample = () => {
75
return (
86
<>
97
<CCard className="mb-3">
10-
<CCardImage orientation="top" src={ReactImg} />
8+
<CCardImage orientation="top" src="../../images/react.jpg" />
119
<CCardBody>
1210
<CCardTitle>Card title</CCardTitle>
1311
<CCardText>
@@ -30,7 +28,7 @@ export const CardImageCapsExample = () => {
3028
<small className="text-body-secondary">Last updated 3 mins ago</small>
3129
</CCardText>
3230
</CCardBody>
33-
<CCardImage orientation="bottom" src={ReactImg} />
31+
<CCardImage orientation="bottom" src="../../images/react.jpg" />
3432
</CCard>
3533
</>
3634
)

‎packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardImageHorizontalExample.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
33

4-
import React400Img from '@assets/images/react400.jpg'
5-
64
export const CardImageHorizontalExample = () => {
75
return (
86
<CCard className="mb-3" style={{ maxWidth: '540px' }}>
97
<CRow className="g-0">
108
<CCol md={4}>
11-
<CCardImage src={React400Img} />
9+
<CCardImage src="../../images/react400.jpg" />
1210
</CCol>
1311
<CCol md={8}>
1412
<CCardBody>

‎packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardImageOverlaysExample.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CCard, CCardImage, CCardImageOverlay, CCardText, CCardTitle } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImageOverlaysExample = () => {
75
return (
86
<CCard className="mb-3 bg-dark text-white">
9-
<CCardImage src={ReactImg} />
7+
<CCardImage src="../../images/react.jpg" />
108
<CCardImageOverlay className="d-flex flex-column align-items-center justify-content-center">
119
<CCardTitle>Card title</CCardTitle>
1210
<CCardText>

‎packages/docs/content/components/card/examples/CardImagesExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardImagesExample.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react'
22
import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react'
33

4-
import ReactImg from '@assets/images/react.jpg'
5-
64
export const CardImagesExample = () => {
75
return (
86
<CCard style={{ width: '18rem' }}>
9-
<CCardImage orientation="top" src={ReactImg} />
7+
<CCardImage orientation="top" src="../../images/react.jpg" />
108
<CCardBody>
119
<CCardText>
1210
Some quick example text to build on the card title and make up the bulk of the card's

‎packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/examples/CardKitchenSinkExample.tsx
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,10 @@ import {
1010
CListGroupItem,
1111
} from '@coreui/react'
1212

13-
import ReactImg from '@assets/images/react.jpg'
14-
1513
export const CardKitchenSinkExample = () => {
1614
return (
1715
<CCard style={{ width: '18rem' }}>
18-
<CCardImage orientation="top" src={ReactImg} />
16+
<CCardImage orientation="top" src="../../images/react.jpg" />
1917
<CCardBody>
2018
<CCardTitle>Card title</CCardTitle>
2119
<CCardText>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.