注目新着
アバター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.