DevactionUI.Resizable (devaction_ui v0.2.3)

Copy Markdown View Source

Panels side by side (or one above the other) with a divider between each two that the person moves: drag it with a mouse, a pen or a finger, press ← → (↑ ↓ in a vertical group; Shift takes a larger step) or Home and End on it, and a double click shares the two panels around it equally (DevactionUI.Resizable hook). Each panel has a size in percent, the sizes of the group add up to 100, and a panel may have a min and a max; moving a divider gives what one panel gains to the next and never takes either past its limits.

Nothing is stored. The panels follow the divider at once, and when a move ends (the pointer is let go, a key is released, a double click) event ("resize") is sent to the LiveView, or to target inside a LiveComponent, with %{"sizes" => %{panel_id => percent}}; the server may keep it and give it back as the size of the panels, which then win over what the page shows. A text such as DIFF · 58% is the caller's: put <span data-size-value>58</span> in the panel and the hook keeps that number current.

Every divider is a role="separator" that can take the focus, with aria-orientation, aria-valuenow (the size of the panel before it), aria-valuemin and aria-valuemax (how far it can go, given the limits of both panels) and aria-controls. orientation is the way the panels lie: :horizontal is side by side, with a vertical divider. The caller's handle_label names the dividers. The grip is two small bars, drawn by the component.

Summary

Functions

group(assigns)

Functions

group(assigns)

@spec group(map()) :: Phoenix.LiveView.Rendered.t()

Attributes

  • id (:string) (required)
  • label (:string) (required) - the name of the group, for assistive technology.
  • handle_label (:string) (required) - the name of a divider, such as Resize panels.
  • orientation (:atom) - :horizontal puts the panels side by side, :vertical one above the other. Defaults to :horizontal. Must be one of :horizontal, or :vertical.
  • event (:string) - the event sent when a move ends, with sizes, a map of panel id to percent. Defaults to "resize".
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • class (:any) - classes of the group; give it a height (h-72), which the panels share. Defaults to nil.
  • Global attributes are accepted.

Slots

  • panel (required) - a panel; its body is what it shows. Accepts attributes:
    • id (:string) (required) - the key of its size in the event.
    • size (:any) - its size in percent, a number; the panels without one share the group equally.
    • min (:any) - the smallest it may be, in percent (default 0).
    • max (:any) - the largest it may be, in percent (default 100).
    • class (:any) - classes of the panel, such as a background.