Skip to content

Commit

Permalink
docs(image): update image demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@TingShine
TingShine committed Nov 11, 2022
1 parent c7e4347 commit c82b798
Show file tree
Hide file tree
Showing 13 changed files with 141 additions and 245 deletions.
14 changes: 0 additions & 14 deletions src/image/_example/base.jsx
View file

This file was deleted.

24 changes: 24 additions & 0 deletions src/image/_example/crop.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { Image } from 'tdesign-mobile-react';
import './style/index.less';

const CropDemo = React.memo(() => (
<>
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="cover" style={{ width: 72, height: 72 }} />
<h5>裁切</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="contain" style={{ width: 89, height: 72 }} />
<h5>适应高</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="fill" style={{ width: 134, height: 72 }} />
<h5>拉伸</h5>
</div>
</div>
</>
));

export default CropDemo;
19 changes: 0 additions & 19 deletions src/image/_example/error.jsx
View file

This file was deleted.

32 changes: 0 additions & 32 deletions src/image/_example/fit.jsx
View file

This file was deleted.

97 changes: 10 additions & 87 deletions src/image/_example/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,32 @@
import React from 'react';
import { Image } from 'tdesign-mobile-react';
import { LoadingIcon } from 'tdesign-icons-react';
import TDemoBlock from '../../../site/mobile/components/DemoBlock';
import TDemoHeader from '../../../site/mobile/components/DemoHeader';
import './style/index.less';
import CropDemo from './crop';
import RoundDemo from './rounded';
import LoadingTipDemo from './loading-tip';
import LoadingErrorDemo from './loading-error';
import SizeDemo from './size';

export default function Base() {
return (
<>
<TDemoHeader title="Image 图片" summary="用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。" />
<TDemoBlock title="01 类型" summary="裁切样式">
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="cover" style={{ width: 72, height: 72 }} />
<h5>裁切</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="contain" style={{ width: 89, height: 72 }} />
<h5>适应高</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" fit="fill" style={{ width: 134, height: 72 }} />
<h5>拉伸</h5>
</div>
</div>
<CropDemo />
</TDemoBlock>

<TDemoBlock summary="圆角样式">
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="square" style={{ width: 72, height: 72 }} />
<h5>方形</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="round" style={{ width: 72, height: 72 }} />
<h5>圆角方形</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="circle" style={{ width: 72, height: 72 }} />
<h5>圆角</h5>
</div>
</div>
<RoundDemo />
</TDemoBlock>

<TDemoBlock title="02 状态" summary="加载中提示">
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="" style={{ width: 72, height: 72 }} />
<h5>默认提示</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="" loading={<LoadingIcon size="1.5em" />} style={{ width: 72, height: 72 }} />
<h5>自定义提示</h5>
</div>
</div>
<LoadingTipDemo />
</TDemoBlock>

<TDemoBlock summary="加载失败提示">
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload111.png" style={{ width: 72, height: 72 }} />
<h5>默认提示</h5>
</div>
<div className="t-image__demo-wrap">
<Image
src="https://tdesign.gtimg.com/site/upload1111.png"
error={<span style={{ fontSize: 12 }}>加载失败</span>}
style={{ width: 72, height: 72 }}
/>
<h5>自定义提示</h5>
</div>
</div>
<LoadingErrorDemo />
</TDemoBlock>

<TDemoBlock title="03 规格" summary="常用图片尺寸">
<div className="t-image__demo-size">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 56, height: 56 }} />
<h5>图片 56</h5>
</div>

<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 48, height: 48 }} />
<h5>图片 48</h5>
</div>

<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 32, height: 32 }} />
<h5>图片 32</h5>
</div>

<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 24, height: 24 }} />
<h5>图片 24</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 120, height: 120 }} />
<h5>图片 120</h5>
</div>

<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 72, height: 72 }} />
<h5>图片 72</h5>
</div>
</div>
<SizeDemo />
</TDemoBlock>
</>
);
Expand Down
14 changes: 0 additions & 14 deletions src/image/_example/lazy.jsx
View file

This file was deleted.

24 changes: 24 additions & 0 deletions src/image/_example/loading-error.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { Image } from 'tdesign-mobile-react';
import './style/index.less';

const LoadingErrorDemo = React.memo(() => (
<>
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload111.png" style={{ width: 72, height: 72 }} />
<h5>默认提示</h5>
</div>
<div className="t-image__demo-wrap">
<Image
src="https://tdesign.gtimg.com/site/upload1111.png"
error={<span style={{ fontSize: 12 }}>加载失败</span>}
style={{ width: 72, height: 72 }}
/>
<h5>自定义提示</h5>
</div>
</div>
</>
));

export default LoadingErrorDemo;
21 changes: 21 additions & 0 deletions src/image/_example/loading-tip.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import { Image } from 'tdesign-mobile-react';
import { LoadingIcon } from 'tdesign-icons-react';
import './style/index.less';

const LoadingTipDemo = React.memo(() => (
<>
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="" style={{ width: 72, height: 72 }} />
<h5>默认提示</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="" loading={<LoadingIcon size="1.5em" />} style={{ width: 72, height: 72 }} />
<h5>自定义提示</h5>
</div>
</div>
</>
));

export default LoadingTipDemo;
17 changes: 0 additions & 17 deletions src/image/_example/loading.jsx
View file

This file was deleted.

36 changes: 0 additions & 36 deletions src/image/_example/position.jsx
View file

This file was deleted.

24 changes: 24 additions & 0 deletions src/image/_example/rounded.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { Image } from 'tdesign-mobile-react';
import './style/index.less';

const RoundDemo = React.memo(() => (
<>
<div className="t-image__demo-base">
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="square" style={{ width: 72, height: 72 }} />
<h5>方形</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="round" style={{ width: 72, height: 72 }} />
<h5>圆角方形</h5>
</div>
<div className="t-image__demo-wrap">
<Image src="https://tdesign.gtimg.com/site/upload1.png" shape="circle" style={{ width: 72, height: 72 }} />
<h5>圆角</h5>
</div>
</div>
</>
));

export default RoundDemo;
26 changes: 0 additions & 26 deletions src/image/_example/shape.jsx
View file

This file was deleted.

Loading

0 comments on commit c82b798

Please sign in to comment.