精选最新
头像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…
An avatar button that opens an account menu - open state, chevron and correct ARIA, with no dropdown library.
<!--
Closed state shown; the JS variants flip aria-expanded and rotate the
chevron. The contract with whatever menu you attach is exactly two
attributes: aria-haspopup="menu" promises one, aria-expanded reports it.
No open/closed text needed - expanded state is announced natively.
-->
<button
type="button"
aria-haspopup="menu"
aria-expanded="false"
class="inline-flex min-h-10 items-center gap-2 rounded-full py-1 pl-1 pr-2.5 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950"
>
<span
aria-hidden="true"
class="inline-flex h-8 w-8 select-none items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-600 text-xs font-semibold text-white"
>
SC
</span>
<span class="max-w-[9rem] truncate text-sm font-medium text-gray-700 dark:text-gray-200">
Sarah Chen
</span>
<svg aria-hidden="true" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 shrink-0 text-gray-500 transition-transform motion-reduce:transition-none dark:text-gray-400">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Account menu</span>
</button>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
onToggle | (open: boolean) => void | - | On toggle |
className | string | - | 合并到根元素上的额外类名。 |
The contract with whatever menu you attach is exactly two attributes: `aria-haspopup="menu"` promises one, `aria-expanded` reports it - no "open"/"closed" text is needed because expanded state is announced natively, and the chevron’s rotation is pure decoration (`aria-hidden`, `motion-reduce`-safe). Render your menu adjacent and drive it from `onToggle`; the trigger deliberately does not own outside-click or Escape handling, because those belong to the menu - putting them here means fighting your menu library over who closes what. The visible name plus the `sr-only` "Account menu" compose the accessible name, so the button reads as "Sarah Chen, Account menu", not just a mystery name. `min-h-10` keeps the tap target at 40px even though the avatar inside is 32px, and the name is capped with `max-w` + `truncate` so a long display name cannot shove the navbar around at 320px.