User
user用户卡 · Avatar + 名称/描述组合(复用瑚琏 Avatar) + RSC
用法
基础用法
头像 + 名称 + 次级描述（邮箱/角色/@handle）。
瑚琏zhangzhiwei@hulian.dev
tsx
<User
name="瑚琏"
description="zhangzhiwei@hulian.dev"
avatarProps={{ src: "/avatar.png", alt: "瑚琏" }}
/>首字母兜底
无头像图时用 fallback 渲染首字母占位。
李
李四产品经理
tsx
<User name="李四" description="产品经理" avatarProps={{ fallback: "李" }} />仅名称
省略 description 时只渲染单行名称。
U
无描述用户
tsx
<User name="无描述用户" avatarProps={{ fallback: "U" }} />头像尺寸
通过 avatarProps.size 调整头像大小。
S
小号size=sm
L
大号size=lg
tsx
<>
<User name="小号" description="size=sm" avatarProps={{ fallback: "S", size: "sm" }} />
<User name="大号" description="size=lg" avatarProps={{ fallback: "L", size: "lg" }} />
</>何时用
把头像 + 主名称 + 次级描述（邮箱/角色/@handle）组合成一个用户行/卡。只要头像用 [Avatar]；多人堆叠用 AvatarCircles；评论场景的作者区可直接传本组件给 Comment 的 author。
导入
ts
import { User } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| avatarProps | AvatarProps | — | 透传给内置 Avatar（src/alt/fallback/size）。 |
| className | string | — | — |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| name* | ReactNode | 主名称（必填）。 |
| description | ReactNode | 次级描述（邮箱/角色/@handle 等）。 |
禁忌 / 坑
- 头像通过
avatarProps透传，没有图就传fallback（同 Avatar）；否则失败/无图空白。 description可省略，省略时只渲染单行名称。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge