PtahUi.Components.Indicator (PtahUI v0.1.0)

Copy Markdown View Source

Indicator component to place an element on the corner of another element.

Examples

<.indicator>
  <:item>
    <span class="w-3 h-3 rounded-full bg-emerald-500 ring-2 ring-white block" />
  </:item>
  <div class="w-32 h-32 bg-gray-100 rounded">content</div>
</.indicator>

<.indicator>
  <:item vertical="bottom" horizontal="center">
    <.badge variant="indigo">New</.badge>
  </:item>
  <div class="w-32 h-32 bg-gray-100 rounded">content</div>
</.indicator>

<.indicator>
  <:item vertical="top" horizontal="start"><.badge>↖︎</.badge></:item>
  <:item vertical="top" horizontal="center"><.badge>↑</.badge></:item>
  <:item vertical="top" horizontal="end"><.badge>↗︎</.badge></:item>
  <div class="w-48 h-32 bg-gray-100 rounded">content</div>
</.indicator>

Summary

Functions

indicator(assigns)

Functions

indicator(assigns)

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item - One or more indicator items positioned absolutely over the content. Accepts attributes:
    • vertical (:string) - Vertical alignment: top (default), middle, bottom.
    • horizontal (:string) - Horizontal alignment: start, center, end (default).
    • class (:string)
  • inner_block (required) - The main content element.