Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit49975ea

Browse files
committed
docs: allow showing images on StackBlitz and CodeSandbox examples
1 parent81a62bb commit49975ea

File tree

47 files changed

+155
-268
lines changed

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
Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
importReactfrom'react'
22
import{CAvatar}from'@coreui/react'
33

4-
importAvatar1from'@assets/images/avatars/1.jpg'
5-
importAvatar2from'@assets/images/avatars/2.jpg'
6-
importAvatar3from'@assets/images/avatars/3.jpg'
7-
84
exportconstAvatarImage=()=>{
95
return(
106
<>
11-
<CAvatarsrc={Avatar1}/>
12-
<CAvatarsrc={Avatar2}/>
13-
<CAvatarsrc={Avatar3}/>
7+
<CAvatarsrc="../../images/avatars/1.jpg"/>
8+
<CAvatarsrc="../../images/avatars/2.jpg"/>
9+
<CAvatarsrc="../../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
importReactfrom'react'
22
import{CAvatar}from'@coreui/react'
33

4-
importAvatar1from'@assets/images/avatars/1.jpg'
5-
64
exportconstAvatarWithStatus=()=>{
75
return(
86
<>
9-
<CAvatarsrc={Avatar1}status="success"/>
7+
<CAvatarsrc="../../images/avatars/1.jpg"status="success"/>
108
<CAvatarcolor="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
importReactfrom'react'
22
import{CButton,CCard,CCardBody,CCardImage,CCardText,CCardTitle}from'@coreui/react'
33

4-
importReactImgfrom'@assets/images/react.jpg'
5-
64
exportconstCardExample=()=>{
75
return(
86
<CCardstyle={{width:'18rem'}}>
9-
<CCardImageorientation="top"src={ReactImg}/>
7+
<CCardImageorientation="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
importReactfrom'react'
2-
import{CCard,CCardBody,CCardFooter,CCardImage,CCardText,CCardTitle,CCol,CRow}from'@coreui/react'
3-
4-
importReactImgfrom'@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
exportconstCardGrid2Example=()=>{
714
return(
815
<CRowxs={{cols:1,gutter:4}}md={{cols:3}}>
916
<CColxs>
1017
<CCard>
11-
<CCardImageorientation="top"src={ReactImg}/>
18+
<CCardImageorientation="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
<CColxs>
2532
<CCard>
26-
<CCardImageorientation="top"src={ReactImg}/>
33+
<CCardImageorientation="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
<CColxs>
4047
<CCard>
41-
<CCardImageorientation="top"src={ReactImg}/>
48+
<CCardImageorientation="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
<CColxs>
5562
<CCard>
56-
<CCardImageorientation="top"src={ReactImg}/>
63+
<CCardImageorientation="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
importReactfrom'react'
22
import{CCard,CCardBody,CCardImage,CCardText,CCardTitle,CCol,CRow}from'@coreui/react'
33

4-
importReactImgfrom'@assets/images/react.jpg'
5-
64
exportconstCardGrid3Example=()=>{
75
return(
86
<CRowxs={{cols:1}}md={{cols:3}}className="g-4">
97
<CColxs>
108
<CCardclassName="h-100">
11-
<CCardImageorientation="top"src={ReactImg}/>
9+
<CCardImageorientation="top"src="../../images/react.jpg"/>
1210
<CCardBody>
1311
<CCardTitle>Card title</CCardTitle>
1412
<CCardText>
@@ -20,7 +18,7 @@ export const CardGrid3Example = () => {
2018
</CCol>
2119
<CColxs>
2220
<CCardclassName="h-100">
23-
<CCardImageorientation="top"src={ReactImg}/>
21+
<CCardImageorientation="top"src="../../images/react.jpg"/>
2422
<CCardBody>
2523
<CCardTitle>Card title</CCardTitle>
2624
<CCardText>
@@ -31,7 +29,7 @@ export const CardGrid3Example = () => {
3129
</CCol>
3230
<CColxs>
3331
<CCardclassName="h-100">
34-
<CCardImageorientation="top"src={ReactImg}/>
32+
<CCardImageorientation="top"src="../../images/react.jpg"/>
3533
<CCardBody>
3634
<CCardTitle>Card title</CCardTitle>
3735
<CCardText>
@@ -44,7 +42,7 @@ export const CardGrid3Example = () => {
4442
</CCol>
4543
<CColxs>
4644
<CCardclassName="h-100">
47-
<CCardImageorientation="top"src={ReactImg}/>
45+
<CCardImageorientation="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-
importReactImgfrom'@assets/images/react.jpg'
14-
1513
exportconstCardGrid4Example=()=>{
1614
return(
1715
<CRowxs={{cols:1}}md={{cols:3}}className="g-4">
1816
<CColxs>
1917
<CCardclassName="h-100">
20-
<CCardImageorientation="top"src={ReactImg}/>
18+
<CCardImageorientation="top"src="../../images/react.jpg"/>
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGrid4Example = () => {
3230
</CCol>
3331
<CColxs>
3432
<CCardclassName="h-100">
35-
<CCardImageorientation="top"src={ReactImg}/>
33+
<CCardImageorientation="top"src="../../images/react.jpg"/>
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -46,7 +44,7 @@ export const CardGrid4Example = () => {
4644
</CCol>
4745
<CColxs>
4846
<CCardclassName="h-100">
49-
<CCardImageorientation="top"src={ReactImg}/>
47+
<CCardImageorientation="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-
importReactImgfrom'@assets/images/react.jpg'
14-
1513
exportconstCardGridExample=()=>{
1614
return(
1715
<CRowxs={{cols:1,gutter:4}}md={{cols:2}}>
1816
<CColxs>
1917
<CCard>
20-
<CCardImageorientation="top"src={ReactImg}/>
18+
<CCardImageorientation="top"src="../../images/react.jpg"/>
2119
<CCardBody>
2220
<CCardTitle>Card title</CCardTitle>
2321
<CCardText>
@@ -32,7 +30,7 @@ export const CardGridExample = () => {
3230
</CCol>
3331
<CColxs>
3432
<CCard>
35-
<CCardImageorientation="top"src={ReactImg}/>
33+
<CCardImageorientation="top"src="../../images/react.jpg"/>
3634
<CCardBody>
3735
<CCardTitle>Card title</CCardTitle>
3836
<CCardText>
@@ -47,7 +45,7 @@ export const CardGridExample = () => {
4745
</CCol>
4846
<CColxs>
4947
<CCard>
50-
<CCardImageorientation="top"src={ReactImg}/>
48+
<CCardImageorientation="top"src="../../images/react.jpg"/>
5149
<CCardBody>
5250
<CCardTitle>Card title</CCardTitle>
5351
<CCardText>
@@ -62,7 +60,7 @@ export const CardGridExample = () => {
6260
</CCol>
6361
<CColxs>
6462
<CCard>
65-
<CCardImageorientation="top"src={ReactImg}/>
63+
<CCardImageorientation="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-
importReactImgfrom'@assets/images/react.jpg'
13-
1412
exportconstCardGroups2Example=()=>{
1513
return(
1614
<CCardGroup>
1715
<CCard>
18-
<CCardImageorientation="top"src={ReactImg}/>
16+
<CCardImageorientation="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-
<CCardImageorientation="top"src={ReactImg}/>
29+
<CCardImageorientation="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-
<CCardImageorientation="top"src={ReactImg}/>
41+
<CCardImageorientation="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
importReactfrom'react'
22
import{CCard,CCardBody,CCardGroup,CCardImage,CCardText,CCardTitle}from'@coreui/react'
33

4-
importReactImgfrom'@assets/images/react.jpg'
5-
64
exportconstCardGroupsExample=()=>{
75
return(
86
<CCardGroup>
97
<CCard>
10-
<CCardImageorientation="top"src={ReactImg}/>
8+
<CCardImageorientation="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-
<CCardImageorientation="top"src={ReactImg}/>
21+
<CCardImageorientation="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-
<CCardImageorientation="top"src={ReactImg}/>
33+
<CCardImageorientation="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
importReactfrom'react'
22
import{CCard,CCardBody,CCardImage,CCardText,CCardTitle}from'@coreui/react'
33

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp