87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
import { Grid, Image, Space, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const svg = (from: string, to: string) =>
|
|
`data:image/svg+xml;utf8,${encodeURIComponent(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="800" height="450" fill="url(#g)"/></svg>`,
|
|
)}`
|
|
|
|
export function Images() {
|
|
return (
|
|
<Section
|
|
id="image"
|
|
title="图片"
|
|
api="Image"
|
|
desc="带比例、圆角、加载失败降级的图片。正文配图、相册、缩略图用它；带标题遮罩的封面卡用 Cover。"
|
|
>
|
|
<Demo
|
|
title="比例"
|
|
desc="square 1:1、video 16:9、wide 21:9，也可以直接传数字（宽高比），容器宽度自适应。"
|
|
layout="column"
|
|
code={`<Image ratio="square" src={src} alt="方形" />
|
|
<Image ratio="video" src={src} alt="16:9" />
|
|
<Image ratio={4 / 3} src={src} alt="4:3" />`}
|
|
>
|
|
<Grid columns={3} gap="md">
|
|
<Image ratio="square" src={svg('#3f51b5', '#00bcd4')} alt="方形示例" radius="md" />
|
|
<Image ratio="video" src={svg('#ff7a45', '#ffba3a')} alt="16:9 示例" radius="md" />
|
|
<Image ratio={4 / 3} src={svg('#7c5cff', '#c04bff')} alt="4:3 示例" radius="md" />
|
|
</Grid>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="填充方式与圆角"
|
|
desc="cover 裁切填满（默认），contain 完整显示（多用于截图 / 图表）；圆角四档。"
|
|
layout="column"
|
|
code={`<Image fit="contain" radius="none" src={src} alt="完整显示" />
|
|
<Image fit="cover" radius="cover" src={src} alt="裁切" />`}
|
|
>
|
|
<Grid columns={2} gap="md">
|
|
<Image
|
|
fit="contain"
|
|
radius="none"
|
|
ratio="video"
|
|
src={svg('#1f6feb', '#4abd86')}
|
|
alt="contain 示例"
|
|
/>
|
|
<Image fit="cover" radius="cover" ratio="video" src={svg('#ff4d4f', '#ff952f')} alt="cover 示例" />
|
|
</Grid>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="加载失败"
|
|
desc="图片地址失效时退化为占位块，不会出现破图；可传 fallback 换成文案或图标。"
|
|
layout="column"
|
|
code={`<Image src="/not-exists.png" alt="加载失败" fallback="图" />`}
|
|
>
|
|
<Space gap="md" align="start">
|
|
<div style={{ width: 160 }}>
|
|
<Image src="/not-exists.png" alt="加载失败" ratio="square" radius="md" fallback="图" />
|
|
</div>
|
|
<Text size="sm" tone="muted">
|
|
失败后显示 fallback（这里传了「图」）
|
|
</Text>
|
|
</Space>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'src', type: 'string', required: true, desc: '图片地址' },
|
|
{ name: 'alt', type: 'string', required: true, desc: '替代文本' },
|
|
{
|
|
name: 'ratio',
|
|
type: "'square' | 'video' | 'wide' | number",
|
|
defaultValue: "'video'",
|
|
desc: '1:1 / 16:9 / 21:9 / 自定义宽高比',
|
|
},
|
|
{ name: 'fit', type: "'cover' | 'contain'", defaultValue: "'cover'", desc: '裁切 / 完整显示' },
|
|
{ name: 'radius', type: "'none' | 'sm' | 'md' | 'cover'", defaultValue: "'sm'", desc: '0 / 6 / 12 / 8px' },
|
|
{ name: 'fallback', type: 'ReactNode', desc: '加载失败时的占位内容' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|