LanternUI.Components.Timeline (LanternUI v0.8.2)

Copy Markdown View Source

Timeline: a vertical sequence of events with a marker rail. No Fluxon equivalent. Pure presentational server render; no JS hook.

<.timeline label_position={:leading}>
  <.timeline_item status={:done} label="Deployed" at="2h ago" title="enventory" />
  <.timeline_item status={:active} label="Deploying" at="40s" title="foodfeed" open>
    <:detail>
      <pre>==> Building release

Compiling 12 files (.ex) Generated foodfeed app</pre>

    </:detail>
  </.timeline_item>
  <.timeline_item status={:pending} label="Queued" at="just now" title="skusync">
    Waiting on the build.
  </.timeline_item>
</.timeline>

The root is an ordered list (<ol>): items are steps in sequence, which matters for screen readers. Each item paints a marker (dot, optional icon, or a custom :marker slot such as an avatar) on a left rail; a connector line runs between consecutive markers and is hidden on the last item via CSS :last-child (callers never pass a flag).

status colors the marker through data-status. The label text is the state word (e.g. "Deployed", "Failed") and must be set whenever status is meaningful so state is never color-only. at is a preformatted timestamp/relative string from the caller; the component does not format time.

label_position={:leading} on timeline/1 places each item's at in a fixed-width column left of the marker rail (timestamps scan as a column). Items inherit that value and may override. Tune the column with --lui-timeline-label-w.

When :detail is present the title/label/at row becomes a native <details>/<summary> disclosure (no accordion, no JS hook). open sets the initial expanded state.

Summary

Functions

timeline(assigns)
timeline_item(assigns)

Functions

timeline(assigns)

Attributes

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • label_position (:atom) - Where items place at: :inline (default, inside content) or :leading (fixed column left of the marker rail). Inherited by items unless overridden. Defaults to :inline. Must be one of :inline, or :leading.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

timeline_item(assigns)

Attributes

  • title (:string) - Primary line (e.g. app or event name). Defaults to nil.
  • label (:string) - State word (e.g. "Deployed", "Failed"). Set whenever status is meaningful. Defaults to nil.
  • at (:string) - Preformatted timestamp or relative string; not formatted by the component. Defaults to nil.
  • status (:atom) - Marker status; rendered as data-status for CSS coloring. Defaults to :neutral. Must be one of :done, :active, :pending, :danger, or :neutral.
  • icon (:string) - Optional lantern icon name rendered inside the marker instead of the plain dot. Defaults to nil.
  • label_position (:atom) - Where to place at (:inline or :leading). Inherits from the parent timeline/1 when omitted; parent defaults to :inline. Defaults to nil.
  • open (:boolean) - When :detail is present, whether the disclosure starts open. Defaults to false.
  • class (:any) - Extra classes merged onto the item root. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block - Optional body/description under the title.
  • detail - Collapsible body revealed under a native disclosure. When present, title/label/at become the summary.
  • marker - Custom marker content (e.g. an avatar). Replaces the status dot and icon. Sized by CSS so rail alignment is preserved.