ポップオーバー
Basic Popover
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
#popover#click#overlay
6 個のフレームワーク中級
Loading…
A click-triggered panel holding a small edit form, with focus moved into the field.
<div class="relative inline-block">
<button type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="pform-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">
Rename project
</button>
<div id="pform-panel" role="dialog" aria-labelledby="pform-title" class="absolute left-0 top-[calc(100%+0.5rem)] z-20 w-72 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
<h3 id="pform-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Rename project</h3>
<form class="mt-3">
<label for="pform-field" class="block text-xs font-medium text-gray-600 dark:text-gray-400">Project name</label>
<input id="pform-field" type="text" value="Aurora" class="mt-1 w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
<div class="mt-3 flex justify-end gap-2">
<button type="button" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">Cancel</button>
<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Save</button>
</div>
</form>
</div>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
title必須 | string | - | カードの見出しテキスト。 |
fieldLabel必須 | string | - | Field label |
defaultValue | string | - | Default value |
onSubmit | (value: string) => void | - | 送信時にフォームの値とともに呼ばれます。 |
An inline form is a `role="dialog"` labelled by its heading, opened on click and with focus moved into the first field on open (via `requestAnimationFrame`, since the panel does not exist until React commits the render). Submitting and Cancel both close and return focus to the trigger; Escape does the same. The panel is `w-72 max-w-[calc(100vw-2rem)]`, so it never escapes a 320px viewport.