精选最新
头像Initials Avatar
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
#avatar#initials#fallback
4 个框架中级
Loading…
The avatar-plus-text block every user list is made of, built so long names truncate instead of breaking the row.
<!--
The avatar is aria-hidden here - the visible name right beside it already
carries the identity, and labelling the picture too would announce every
person twice.
-->
<div class="avatar-id">
<span class="avatar-id__face" aria-hidden="true">SC</span>
<span class="avatar-id__text">
<span class="avatar-id__name">Sarah Chen-Nakamura</span>
<span class="avatar-id__role">Principal Product Designer</span>
</span>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
role | string | - | 显示在姓名下方的职位。 |
className | string | - | 合并到根元素上的额外类名。 |
`min-w-0` on the text column is the whole trick and the first thing people delete: a flex child refuses to shrink below its content’s width by default, so without it a long name pushes the row wide and `truncate` silently does nothing - pair it with `shrink-0` on the avatar so the face never deflates instead. The avatar is `aria-hidden` here, deliberately the opposite of the standalone avatars: the visible name beside it already carries the identity, and labelling the picture too would announce every person in a fifty-row list twice. `max-w-xs` is a demo constraint - in a real table cell, drop it and let the column width do the constraining. If the block becomes a link to a profile, put the anchor around the whole row, not just the name, so the tap target is the full 40px-tall block.