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
| Prop | Type | 默认 | 说明 |
|---|---|---|---|
label | string | — | 单个字符 |
variant | 'brand' | 'info' | 'soft' | 'neutral' | 'neutral' | 颜色变体 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 18 / 28 / 32 / 40 / 56 |
xs(18px)专为内联序号 / 脚注引用使用 —— 例如 Sources 列表里的来源编号 badge。