DevactionUI.Drawer (devaction_ui v0.1.0)

A panel at the side of the screen to edit without leaving it: a profile, a task, an item of a contract. The default is floating (12 px from the edges, rounded, with a footer that stays); it can sit docked against the edge, come from the left, and on a phone it is a sheet that rises from the bottom, with a handle.

The LiveView decides when it is there (:if={@editing}); the drawer takes the focus in, keeps it inside (Phoenix.Component.focus_wrap/1), closes with Esc, the close button and a click outside, and hands the focus back to the button that opened it when that button used open/1. Widths: 384, 480 (default) and 640.

Summary

Functions

drawer(assigns)

open(event)

The command for the button that opens a drawer or a modal: it remembers the focus, then pushes event. Closing (any way the component offers) puts the focus back there.

Functions

drawer(assigns)

Attributes

id (:string) (required)
variant (:atom) - Defaults to :floating. Must be one of :floating, or :docked.
side (:atom) - Defaults to :right. Must be one of :right, or :left.
size (:atom) - 384, 480 or 640 px wide. Defaults to :md. Must be one of :sm, :md, or :lg.
on_close (:any) (required) - an event name or a JS command, run on Esc, the close button and a click outside.
close_label (:string) (required)
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

close_icon (required)
title (required)
subtitle
inner_block (required) - the body, which scrolls on its own.
footer - the actions, which stay at the bottom.

open(event)

@spec open(String.t() | Phoenix.LiveView.JS.t()) :: Phoenix.LiveView.JS.t()

The command for the button that opens a drawer or a modal: it remembers the focus, then pushes event. Closing (any way the component offers) puts the focus back there.