PtahUi.Components.Fab (PtahUI v0.1.0)

Copy Markdown View Source

Floating Action Button (FAB) with Speed Dial.

A fixed (or contained) button that reveals additional action buttons when clicked. Supports two opening styles: vertical stack and flower (quarter-circle arc).

Example — vertical

<.fab id="my-fab">
  <:trigger><.icon name="hero-plus" class="w-6 h-6" /></:trigger>
  <:item icon="hero-pencil-square" label="Editar" on_click={JS.push("edit")} />
  <:item icon="hero-trash" label="Eliminar"
         class="bg-red-500 border-red-500 hover:bg-red-600 text-white"
         on_click={JS.push("delete")} />
</.fab>

Example — flower

<.fab id="my-fab" flower>
  <:trigger><.icon name="hero-plus" class="w-6 h-6" /></:trigger>
  <:item icon="hero-pencil-square" label="Editar" />
  <:item icon="hero-link" label="Copiar link" />
  <:item icon="hero-share" label="Partilhar" />
</.fab>

Summary

Functions

fab(assigns)

Functions

fab(assigns)

Attributes

  • id (:string) (required)
  • position (:string) - Viewport corner where the FAB is anchored. Defaults to "bottom-right".
  • flower (:boolean) - Opens items in a quarter-circle arc (Speed Dial) instead of a vertical stack. Defaults to false.
  • contained (:boolean) - Use absolute positioning so the FAB stays inside a relative container instead of the viewport. Defaults to false.
  • bg_class (:string) - Background colour classes for the main FAB button. Defaults to "bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800".
  • class (:string) - Defaults to nil.

Slots

  • trigger (required) - Content of the main FAB button (typically an icon).
  • item - Speed dial action button. Accepts attributes:
    • label (:string) - Text label — displayed beside the button in vertical mode, as a tooltip title in flower mode.
    • icon (:string) (required)
    • class (:string) - Custom classes for the action button. Overrides the default white style.
    • on_click (:any) - JS command executed when the item is clicked.