Overlays
Anchored popovers for confirmations, renames and small forms, dialogs, and menus on the Popover API.
Popover
Whatever a button asks or offers opens next to that button, not in the middle of the screen, so it stays tied to what was pressed. That covers a confirmation, a rename, a small form and a question that follows the action, such as asking to restart after a save: it opens from the Save button. On phones it’s a bottom sheet. This builds on the anchored popovers idea for Home Assistant, which System Bridge already uses.
Forget Living room speaker? It has to be paired again before it can connect.
The new settings take effect after a restart.
Keep a popover to one or two fields. A longer form is a view of its own, not a popover or a dialog stacked on the page.
| Attribute or method | What it does |
|---|---|
show(anchor) |
Opens under anchor, or above it when there’s more room there, lined up with the edge on the button’s side of the screen. Without one it opens in the middle, which is only for something nothing on screen started |
heading |
A heading. A confirmation that’s only a question leaves it out, and the question is the message |
confirm |
Makes it an alertdialog, for a question that needs an answer |
close(value) |
Closes it; returnValue holds the value when it fires close |
It’s on the Popover API, in the top layer, so a scrolling parent never clips it. Esc or a click outside closes it, focus starts on the first action (put Cancel first, so Enter never confirms by accident) and goes back to the button afterwards. It follows the button as the page scrolls, and it’s a bottom sheet below 600px wide.
Dialog
Can’t reach the server. Changes made since will be lost if this page is closed.
Only for something nothing on screen started, that needs the whole screen’s attention: a lost connection, an expired sign-in or an update that’s ready. Anything a button starts is a popover instead. The button in the demo stands in for the app losing its connection.
It’s a native <dialog> opened as a modal, so focus moves into it and back when it closes, Esc closes it, and the page behind can’t be reached. Open it with show(). A button in the actions slot with a value closes it with that value, which is in returnValue when it fires close.
Menus
The menu button shows its menu on the Popover API, in the top layer, with contextual actions pinned below its items.