95 lines
4.0 KiB
TypeScript
95 lines
4.0 KiB
TypeScript
import { Avatar, Grid, Icon, Space } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
import { DEMO_APPS, DEMO_COVER } from '../data/demo'
|
||
|
||
export function Avatars() {
|
||
return (
|
||
<Section
|
||
id="avatars"
|
||
title="头像"
|
||
api="Avatar"
|
||
desc="有图显示图片，没图（或图片加载失败）退化成首字色块——列表里最常见的两种状态都由它兜住。"
|
||
>
|
||
<Demo
|
||
title="尺寸与形状"
|
||
desc="sm 24px 用于紧凑列表，md 36px、lg 48px 用于卡片与详情头部；圆形用于人 / 应用，方形用于图标类封面。"
|
||
code={`<Avatar size="sm" fallback="G" />
|
||
<Avatar size="md" fallback="G" />
|
||
<Avatar size="lg" fallback="G" />`}
|
||
>
|
||
<Avatar size="sm" fallback="G" />
|
||
<Avatar size="md" fallback="G" />
|
||
<Avatar size="lg" fallback="G" />
|
||
<Avatar shape="square" size="md" fallback="N" />
|
||
<Avatar shape="square" size="lg" fallback="F" />
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="图片与降级"
|
||
desc="第三张故意给一个坏地址，用来验证加载失败会退回首字；最后一颗带认证角标。"
|
||
code={`<Avatar src={cover} alt="GitHub" fallback="G" />
|
||
<Avatar src="/broken.png" fallback="?" />
|
||
<Avatar verified size="lg" fallback="S" />`}
|
||
>
|
||
<Avatar src={DEMO_COVER} alt="渐变封面" size="lg" />
|
||
<Avatar src="/not-exist.png" alt="" size="lg" fallback="?" />
|
||
<Avatar verified size="lg" fallback="S" />
|
||
<Avatar verified size="md" fallback="B" />
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="列表里的组合"
|
||
desc="头像 + 两行文字是应用条目的基本骨架：这一行本身不带底色和描边，靠间距分组。"
|
||
layout="column"
|
||
code={`<Space gap="md">
|
||
<Avatar size="lg" fallback="G" />
|
||
<Space direction="column" gap="xs" align="start">
|
||
<strong>GitHub</strong>
|
||
<span>代码托管与开源社区</span>
|
||
</Space>
|
||
</Space>`}
|
||
>
|
||
<Grid columns={2} gap="lg">
|
||
{DEMO_APPS.slice(0, 4).map((app) => (
|
||
<Space key={app.id} gap="md">
|
||
<Avatar size="lg" fallback={app.icon} />
|
||
<Space direction="column" gap="xs" align="start">
|
||
<span style={{ fontWeight: 500 }}>{app.name}</span>
|
||
<span style={{ color: 'var(--su-text-muted)', fontSize: 12 }}>{app.desc}</span>
|
||
</Space>
|
||
</Space>
|
||
))}
|
||
</Grid>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="大尺寸与底色"
|
||
desc="xl 64px 用于资料卡；无图时可以用 icon 代替字符，tone='primary' 换成品牌浅渐变底。"
|
||
code={`<Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
|
||
<Avatar size="xl" fallback="S" verified />`}
|
||
>
|
||
<Space gap="lg" align="end">
|
||
<Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
|
||
<Avatar size="xl" fallback="S" verified />
|
||
<Avatar size="lg" tone="primary" icon={<Icon name="folder_more_line" />} />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'src', type: 'string', desc: '图片地址；加载失败自动降级' },
|
||
{ name: 'alt', type: 'string', defaultValue: "''", desc: '图片替代文本' },
|
||
{ name: 'fallback', type: 'string', defaultValue: "'•'", desc: '无图时的字符' },
|
||
{ name: 'icon', type: 'ReactNode', desc: '无图时的图标（优先于 fallback）' },
|
||
{ name: 'size', type: "'sm' | 'md' | 'lg' | 'xl'", defaultValue: "'md'", desc: '24 / 36 / 48 / 64px' },
|
||
{ name: 'tone', type: "'neutral' | 'primary'", defaultValue: "'neutral'", desc: '无图底色：浅灰 / 品牌浅渐变' },
|
||
{ name: 'shape', type: "'circle' | 'square'", defaultValue: "'circle'", desc: '圆形 / 圆角方形' },
|
||
{ name: 'verified', type: 'boolean', defaultValue: 'false', desc: '右下角认证角标' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|