头像

给头像一个 name 而不给 src，它就会画出首字母，而不是一张裂图。对于只有部分人有照片的贡献者名单来说，这个兜底很实用。

基础头像

ALGHAT
stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: 'Ada Lovelace' }),
  avatar({ name: 'Grace Hopper' }),
  avatar({ name: 'Alan Turing' }),
)

带图片

设置了 src 时，alt 会回退到名字——所以头像永远不会是一张没有说明的图片。

sitelositelo
stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ src: '/logo.svg', alt: 'sitelo', style: 'background: var(--su-surface-2)' }),
  avatar({ src: '/logo.svg', name: 'sitelo', square: true, style: 'background: var(--su-surface-2)' }),
)

尺寸

字号会跟着头像一起缩放，首字母始终保持比例。

小号中号大号
stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: '小 号', size: 'sm' }),
  avatar({ name: '中 号', size: 'md' }),
  avatar({ name: '大 号', size: 'lg' }),
)

方形

项A项B
stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ name: '项目 A', square: true }),
  avatar({ name: '项目 B', square: true, color: 'success' }),
)

颜色

没有图片的头像会取一个柔和的调色板底色。

PNSWD
stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  avatar({ name: 'Primary', color: 'primary' }),
  avatar({ name: 'Neutral', color: 'neutral' }),
  avatar({ name: 'Success', color: 'success' }),
  avatar({ name: 'Warning', color: 'warning' }),
  avatar({ name: 'Danger', color: 'danger' }),
)

图标和其他内容

子元素会盖过首字母，可以放一个图标或单个字符。

?
stack({ direction: 'row', gap: 'md', align: 'center' },
  avatar({ color: 'neutral' },
    icon('user'),
  ),
  avatar({ color: 'primary' }, '?'),
)

分组

avatarGroup() 会让子元素相互叠压，超出 max 的部分折叠成一个计数。

ALGHAT
ALGHAT+3
ALGH+1
stack({ gap: 'md' },
  avatarGroup(
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
  ),
  avatarGroup({ max: 3 },
    avatar({ name: 'Ada Lovelace' }),
    avatar({ name: 'Grace Hopper' }),
    avatar({ name: 'Alan Turing' }),
    avatar({ name: 'Katherine Johnson' }),
    avatar({ name: 'Barbara Liskov' }),
    avatar({ name: 'Margaret Hamilton' }),
  ),
  avatarGroup({ max: 2, size: 'sm' },
    avatar({ name: 'Ada Lovelace', size: 'sm' }),
    avatar({ name: 'Grace Hopper', size: 'sm' }),
    avatar({ name: 'Alan Turing', size: 'sm' }),
  ),
)

在列表中

  • AL
    Ada Lovelace
    向 main 推送了 3 个提交
  • GH
    Grace Hopper
    发起了一个 pull request
list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: '向 main 推送了 3 个提交',
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: '发起了一个 pull request',
  }),
)

属性

属性类型默认值说明
namestring—用于首字母、title，以及图片 alt 的兜底。
srcstring—用图片代替首字母。
altstring—图片的替代文字；缺省时取 name。
size'sm' | 'md' | 'lg''md'直径，以及首字母的字号。
squarebooleanfalse圆角矩形，而不是圆形。
color'primary' | 'neutral' | 'success' | 'warning' | 'danger'—首字母底色所用的配色。

avatarGroup() 接受 max——显示多少个之后把其余折叠成计数——以及 size，后者只用于那个计数。