Skip to content

Commit 49975ea

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

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+155
-268
lines changed

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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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
)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy