LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
<div data-react-class="Timeline" data-react-props="{"item":{"macro_state":"submission","micro_state":"submitted","done":true,"status":"completed","timestamp":"Wed, 09 Oct 2024 17:17:21.445391000 WEST +01:00","value":"Form submitted","icon":"fa-regular fa-badge-check"},"isLast":false}" data-react-cache-id="Timeline-0"></div>
<div data-react-class="Timeline" data-react-props="{"item":{"macro_state":"validation","micro_state":"proposal_sent","done":true,"status":"completed","timestamp":"Wed, 09 Oct 2024 17:18:57.493134000 WEST +01:00","value":"Submission accepted","icon":"fa-regular fa-badge-check"},"isLast":false}" data-react-cache-id="Timeline-0"></div>
<div data-react-class="Timeline" data-react-props="{"item":{"macro_state":"transport","micro_state":"collected","done":false,"status":"empty","timestamp":null,"force_completed":true,"value":"Equipment delivery","icon":"fa-regular fa-hand-holding-box"},"isLast":false}" data-react-cache-id="Timeline-0"></div>
<div data-react-class="Timeline" data-react-props="{"item":{"macro_state":"transport","micro_state":"in_transit","done":false,"status":"empty","timestamp":null,"force_completed":true,"value":"In transit","icon":"fa-regular fa-truck-fast"},"isLast":true}" data-react-cache-id="Timeline-0"></div>

Timeline

The Timeline component visually represents the sequence of an item events, being useful for display item status.

-

Usage rules

  • ✅ Do
    • Use to visualize chronological sequences or progressions
  • ❌ Don't
    • Don’t use if events are unrelated or don’t follow a sequence
    • Don’t overcrowd the timeline with too much text or detail
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%
timeline_data = [
    {
        macro_state: "submission", 
        micro_state: "submitted", 
        done: true, 
        status: "completed", 
        timestamp: "Wed, 09 Oct 2024 17:17:21.445391000 WEST +01:00", 
        value: "Form submitted", 
        icon: "fa-regular fa-badge-check"
    }, 
    {
        macro_state: "validation", 
        micro_state: "proposal_sent", 
        done: true, 
        status: "completed", 
        timestamp: "Wed, 09 Oct 2024 17:18:57.493134000 WEST +01:00", 
        value: "Submission accepted", 
        icon: "fa-regular fa-badge-check"
    }, 
    {
        macro_state: "transport", 
        micro_state: "collected", 
        done: false, 
        status: "empty", 
        timestamp: nil, 
        force_completed: true, 
        value: "Equipment delivery", 
        icon: "fa-regular fa-hand-holding-box"
    }, 
    {
        macro_state: "transport", 
        micro_state: "in_transit", 
        done: false, 
        status: "empty", 
        timestamp: nil, 
        force_completed: true, 
        value: "In transit", 
        icon: "fa-regular fa-truck-fast"
    }
    ]
%>
<% timeline_data.each_with_index  do |timepoint, index| %>
    <%= render LooposUi::Timeline.new(
        item: timepoint,
        is_last: (timeline_data.size - 1) == index
    ) %>
<% end %>

No notes provided.

No params configured.

Description

The Timeline component visually represents the sequence of an item events, being useful for display item status.

Arguments

Property Default Description
item - Variable that contains the data for each ‘point’ on the timeline
is_last false Boolean that defines whether it is the last point or not