# `LineaUI.Components.Timeline`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/timeline.ex#L1)

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`).

# `timeline`

Renders the line the `timeline_item`s 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`

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`

---

*Consult [api-reference.md](api-reference.md) for complete listing*