DevactionUI.RowMenu (devaction_ui v0.3.3)

Copy Markdown View Source

The "..." menu of a row: a small icon button that opens a menu of actions fixed to the window, so the overflow of a table or of a scroll area never cuts it. It is a DevactionUI.Dropdown with fixed on and the quiet 30px button of a table row, and it takes the same item slots (icons, a shortcut, separators, a danger item, links with navigate, patch or href), so the keys are the same: ↑ ↓ Home End, the first letters of a name, Esc gives the focus back to the button.

The menu opens under the button with its end on the end of the button, above it when there is no room below, and stays inside the window. It closes when anything scrolls or the window is resized, because it would no longer sit under its button. The icon of the button comes in the trigger slot and its accessible name in trigger_label (there is no visible text).

Summary

Functions

row_menu(assigns)

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

Attributes

  • id (:string) (required)
  • label (:string) (required) - the name of the menu, for assistive technology.
  • trigger_label (:string) (required) - the accessible name of the "..." button.
  • align (:atom) - Defaults to :end. Must be one of :start, or :end.
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - the icon of the button.
  • item (required) - Accepts attributes:
    • event (:string)
    • value (:string) - sent as choice.
    • values (:map) - one phx-value-* each, besides choice.
    • navigate (:string)
    • patch (:string)
    • href (:string)
    • danger (:boolean)
    • disabled (:boolean)
    • separator (:boolean) - a rule above the item.
    • heading (:string) - a caption above the item, for the group it starts.
    • shortcut (:string)