PhiaUi.Components.Marker (phia_ui v0.1.17)

Copy Markdown View Source

Point-of-interest indicator positioned absolutely on images or maps.

Markers are placed inside a relative container and positioned via :x and :y percentage or pixel values. They support variants, sizes, pulse animation, optional icons, and a popover slot for details on hover/click.

Examples

<div class="relative">
  <img src="/images/floor-plan.png" alt="Floor plan" />
  <.marker x="25%" y="40%" label="Conference Room A" variant={:primary} />
  <.marker x="60%" y="70%" label="Kitchen" pulse={true} />
</div>

With popover

<.marker x="50%" y="50%" variant={:primary}>
  <:popover>
    <p class="text-sm">Meeting at 3 PM</p>
  </:popover>
</.marker>

With icon

<.marker x="30%" y="60%" icon="map-pin" variant={:destructive} size={:lg} />

Summary

Functions

marker(assigns)

Renders an absolutely-positioned marker indicator.

Functions

marker(assigns)

Renders an absolutely-positioned marker indicator.

Attributes

  • x (:any) (required) - Horizontal position (e.g. "50%", "120px").
  • y (:any) (required) - Vertical position (e.g. "50%", "120px").
  • label (:string) - Accessible label / tooltip text. Defaults to nil.
  • variant (:atom) - Color variant. Defaults to :default. Must be one of :default, :primary, :destructive, :success, or :warning.
  • size (:atom) - Marker size. Defaults to :md. Must be one of :sm, :md, or :lg.
  • pulse (:boolean) - Show ping animation. Defaults to false.
  • icon (:string) - Optional icon name (Lucide). Defaults to nil.
  • on_click (:string) - phx-click event name. Defaults to nil.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

  • inner_block - Custom content inside the marker.
  • popover - Content shown on hover/click.