精选最新
头像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…
One avatar, six sizes - xs through 2xl, with the type scaling in step with the box.
<!--
The full scale, xs → 2xl. Type moves with the box: initials that stay text-sm
inside an h-16 disc look lost, and text-base inside h-6 clips. One size prop
drives both dimensions and the font - never let them drift apart.
-->
<div class="flex flex-wrap items-end gap-3">
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-[10px] font-semibold text-white"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-base font-semibold text-white"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-lg font-semibold text-white"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-16 w-16 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-xl font-semibold text-white"><span aria-hidden="true">AL</span></span>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Size |
className | string | - | 合并到根元素上的额外类名。 |
The whole point is that one prop drives both dimensions and the font. The two failure modes of an ad-hoc avatar scale are `text-sm` floating lost inside an `h-16` disc and `text-base` clipping out of an `h-6` one - keeping the pair welded in the `SIZES` record makes either impossible. Add sizes by adding entries, not by overriding `h-*` from outside; `className` is for margins and positioning, not for fighting the scale. The `xs` step uses a bracketed `text-[10px]` because Tailwind’s type scale simply stops above that ratio. In dense lists prefer `sm`, and treat `xl`/`2xl` as profile-page sizes - at 64px initials start wanting a real photograph.