90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
import { Card, Cover, Space } from '@stash/ui'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
/** 演示用的渐变色块，避免依赖外部图片 */
|
|
const swatch = (from: string, to: string) =>
|
|
`data:image/svg+xml;utf8,${encodeURIComponent(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" width="400" height="600"><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="400" height="600" fill="url(#g)"/></svg>`,
|
|
)}`
|
|
|
|
export function Covers() {
|
|
return (
|
|
<Section
|
|
id="cover"
|
|
title="封面卡"
|
|
api="Cover"
|
|
desc="比例封面卡：图片 + 底部压暗层 + 标题。海报、图文、宽图共用一套，避免每个列表各写一份 aspect-ratio 和渐变遮罩。"
|
|
>
|
|
<Demo
|
|
title="三种比例"
|
|
desc="poster 2:3（海报）、article 4:3（图文）、wide 16:9（横幅）；标题最多两行，超出省略。"
|
|
code={`<Cover ratio="poster" src={cover} alt="海报" caption="海报 2:3" />
|
|
<Cover ratio="article" src={cover} alt="图文" caption="图文 4:3" />
|
|
<Cover ratio="wide" src={cover} alt="横幅" caption="横幅 16:9" />`}
|
|
>
|
|
<Space gap="md" align="start">
|
|
<div style={{ width: 120 }}>
|
|
<Cover
|
|
ratio="poster"
|
|
src={swatch('#7c5cff', '#c04bff')}
|
|
alt="海报示例"
|
|
caption="海报 2:3"
|
|
/>
|
|
</div>
|
|
<div style={{ width: 180 }}>
|
|
<Cover
|
|
ratio="article"
|
|
src={swatch('#1f6feb', '#4abd86')}
|
|
alt="图文示例"
|
|
caption="图文 4:3"
|
|
/>
|
|
</div>
|
|
<div style={{ width: 220 }}>
|
|
<Cover
|
|
ratio="wide"
|
|
src={swatch('#ff7a45', '#ffba3a')}
|
|
alt="横幅示例"
|
|
caption="横幅 16:9"
|
|
/>
|
|
</div>
|
|
</Space>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="贴边 + 可点击"
|
|
desc="放在 Card padding='none' 里时传 radius='none'；传 onClick 整块变成按钮，支持键盘操作。"
|
|
layout="column"
|
|
code={`<Card padding="none">
|
|
<Cover radius="none" ratio="article" onClick={open} caption="可点击的封面" />
|
|
</Card>`}
|
|
>
|
|
<Card padding="none" style={{ maxWidth: 280 }}>
|
|
<Cover
|
|
radius="none"
|
|
ratio="article"
|
|
src={swatch('#3f51b5', '#00bcd4')}
|
|
alt="可点击的封面"
|
|
caption="可点击的封面"
|
|
onClick={() => undefined}
|
|
/>
|
|
</Card>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'ratio', type: "'poster' | 'article' | 'wide' | number", defaultValue: "'article'", desc: '2:3 / 4:3 / 16:9 / 自定义宽高比' },
|
|
{ name: 'src', type: 'string', desc: '图片地址，不传显示占位字符' },
|
|
{ name: 'alt', type: 'string', required: true, desc: '图片说明，同时作为按钮 title' },
|
|
{ name: 'caption', type: 'ReactNode', desc: '底部标题（最多两行）' },
|
|
{ name: 'radius', type: "'cover' | 'none'", defaultValue: "'cover'", desc: '8px / 贴边' },
|
|
{ name: 'lift', type: 'boolean', defaultValue: 'true', desc: '悬停整块上浮 2px（参考站行为）' },
|
|
{ name: 'hoverZoom', type: 'boolean', defaultValue: 'false', desc: '悬停放大图片（与 lift 二选一）' },
|
|
{ name: 'onClick', type: '() => void', desc: '传了就把整块变成按钮' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|