Overlays
v0.0.10
Overlay components show content above the page. Modal opens a dialog, which can fill the screen; Drawer slides a panel in from an edge; Popover and Tooltip attach a small box to the element that opens it, on a click, a hover or focus; and Overlay covers an area with a color, an opacity and a blur, for example while something loads.
Each one is generated into your Phoenix project as source code. Its page below shows it with examples and lists the attributes, slots and generator options it takes.
- Drawer ComponentStatelessJS-module Slide-in drawer for Phoenix LiveView that opens from any edge, with a header slot, variants, on_show and on_hide JS commands, and a required unique id.
- Modal ComponentStatelessJS-module Phoenix LiveView modal with show_modal and hide_modal helpers, five variants, a full-screen size, focus trap, Escape to close, and an on_cancel JS command.
- Overlay ComponentStateless Overlay layer for Phoenix LiveView with color, opacity, backdrop blur and z-index props, and room inside it for loading indicators or any HTML content.
- Popover ComponentStatelessJS-moduleJS Popover for Phoenix LiveView that shows rich content on hover or click, even inline in text, with an optional arrow, variants, and position and size props.
- Tooltip ComponentStatelessJS-moduleJS Tooltips that appear when a trigger is hovered or focused in Phoenix LiveView, with variants, an optional arrow, position and width props, and click mode.