LineaUI.Components.Timeline (linea_ui v0.1.1)

LineOne's timeline: events down a line, each marked by a filled, outlined or icon point.

<.timeline class="max-w-sm">
  <.timeline_item title="Video Added" time="1 hour ago" color="primary"
    description="Mores Clarke added new video" />
  <.timeline_item title="Design Completed" time="3 hours ago" color="success" ping>
    <a href="#">File_final.fig</a>
  </.timeline_item>
</.timeline>

<.timeline size="lg" line_space>
  <.timeline_item title="Images Added" time="1 hour ago" color="primary" variant="icon">
    <:point><svg class="size-3">…</svg></:point>
  </.timeline_item>
</.timeline>

An avatar can be the point: give the timeline size="xl" (2rem) or "2xl" and the item variant="avatar", with the avatar filling the point:

<.timeline size="xl">
  <.timeline_item variant="avatar" title="Mores Clarke" time="1 hour ago">
    <:point><.avatar src="/mores.jpg" class="size-full" /></:point>
  </.timeline_item>
</.timeline>

The inner block of an item comes after its description: images, links, tags, members.

The items can come from a list or a stream through rows and the :item slot, which gets {dom_id, row} and renders a timeline_item with that id:

<.timeline id="events" rows={@streams.events}>
  <:item :let={{id, event}}>
    <.timeline_item id={id} title={event.title} time={event.ago} color={event.color} />
  </:item>
</.timeline>

Given a stream, the list renders with phx-update="stream" (and needs an id).

Summary

Functions

timeline(assigns)

Renders the line the timeline_items hang on, either from its inner block or from rows.

timeline_item(assigns)

Renders one event: its point, title, time and description, then the inner block.

Functions

timeline(assigns)

Renders the line the timeline_items hang on, either from its inner block or from rows.

<.timeline line_space class="max-w-sm">
  <.timeline_item title="Video Added" time="1 hour ago" color="primary" />
</.timeline>

<.timeline id="events" rows={@streams.events}>
  <:item :let={{id, event}}>
    <.timeline_item id={id} title={event.title} time={event.ago} />
  </:item>
</.timeline>

Attributes

line_space (:boolean) - Leaves a gap between the points and the line. Defaults to false.
size (:string) - The width of the points (and where the line runs): md 12px, lg 1.5rem for an icon, xl 2rem and 2xl 2.5rem for avatar points. Defaults to "md". Must be one of "md", "lg", "xl", or "2xl".
id (:string) - Required with a stream. Defaults to nil.
rows (:any) - A list or a stream of rows rendered by the :item slot. Defaults to nil.
row_id (:any) - A function from a row to its DOM id, for a plain list (a stream brings its own ids). Defaults to nil.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block
item - Renders one row; gets {dom_id, row}.

timeline_item(assigns)

Renders one event: its point, title, time and description, then the inner block.

<.timeline_item title="Images Added" time="1 hour ago" color="primary" variant="icon"
  description="Mores Clarke added new image gallery">
  <:point><svg class="size-3">…</svg></:point>
  <div class="mt-4 grid grid-cols-3 gap-3">…</div>
</.timeline_item>

Attributes

title (:string) - The bold first line. Defaults to nil.
time (:string) - Shown at the right of the title. Defaults to nil.
description (:string) - The line under the title. Defaults to nil.
color (:string) - The color of the point. Defaults to "neutral". Must be one of "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".
variant (:string) - icon is a white point ringed in the color, holding the :point slot; avatar draws no disc, so the :point slot can hold an avatar. Defaults to "solid". Must be one of "solid", "outline", "icon", or "avatar".
point_class (:any) - Merged into the point (size-8 ...). Defaults to nil.
ping (:boolean) - A pulsing ring around the point. Defaults to false.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

point - What the point shows, usually an icon.
inner_block