气泡卡片
Basic Popover
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
#popover#click#overlay
6 个框架中级
Loading…
A grid of reaction buttons in a dialog, each with a real accessible name.
<div class="relative inline-block">
<button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="pemoji-panel" class="rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Add reaction
</button>
<div id="pemoji-panel" role="dialog" aria-label="Add reaction" class="absolute left-0 top-[calc(100%+0.5rem)] z-20 w-64 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="grid grid-cols-6 gap-0.5">
<!-- Each button carries an aria-label: the glyph alone announces
inconsistently across screen readers. -->
<button type="button" aria-label="Thumbs up" class="flex h-9 w-full items-center justify-center rounded-md text-lg hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:focus-visible:ring-blue-400"><span aria-hidden="true">👍</span></button>
<button type="button" aria-label="Heart" class="flex h-9 w-full items-center justify-center rounded-md text-lg hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:focus-visible:ring-blue-400"><span aria-hidden="true">❤️</span></button>
<button type="button" aria-label="Party" class="flex h-9 w-full items-center justify-center rounded-md text-lg hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:focus-visible:ring-blue-400"><span aria-hidden="true">🎉</span></button>
<!-- ...more emoji... -->
</div>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
emojis必填 | ReadonlyArray<{ char: string; name: string }> | - | Emojis |
onSelect | (char: string) => void | - | 用户选择菜单项时触发，参数为所选项。 |
A grid of reaction buttons in a `role="dialog"`. Each button carries an `aria-label` because the glyph alone announces inconsistently across screen readers, and the emoji itself is `aria-hidden` so it is not read twice. Picking one closes and restores focus to the trigger. No image assets - the emoji are text.