跳到主要内容

Avatar 头像

单字符 monogram 头像。brand / info / soft / neutral · xs 18 / sm 28 / md 32 / lg 40 / xl 56。

蓝色规则

info 变体(蓝底 #3775F6专用于用户头像。其它头像用 brand / soft / neutral

实时预览

下方渲染的就是 src/components/ui/Avatar/Avatar.tsx 本体,通过 react-native-web 翻译成浏览器节点。

变体
AI
P
尺寸
1
A
A
A
A
xs(脚注引用 / 列表序号专用)
1
2
3

用法

import { Avatar } from '@unif/react-native-design';

<Avatar label="AI" variant="brand" size="lg" />
<Avatar label="" variant="info" size="md" />
<Avatar label="" variant="soft" />
<Avatar label="P" variant="neutral" size="sm" />

API

PropType默认说明
labelstring单个字符
variant'brand' | 'info' | 'soft' | 'neutral''neutral'颜色变体
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'18 / 28 / 32 / 40 / 56

xs(18px)专为内联序号 / 脚注引用使用 —— 例如 Sources 列表里的来源编号 badge。