x
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<turbo-frame id="lui-show-header" class="lui-show-header"> <div class="loopui-form-layout__main-info"> <div class="loopui-form-layout__details"> <div class="loopui-form-layout__details-section"> <turbo-frame id="multiple_image_/image_proxy/2_full"> <div data-controller="images" data-images-editable-value="false" data-images-with-attached-value="true" data-images-turbo-frame-id-value="multiple_image_/image_proxy/2_full" data-images-unique-id-value="multiple_image_/image_proxy/2_full" data-images-list-view-value="false" data-images-has-many-value="false" data-images-force-new-value="false" data-images-urls-value="{"attach":"/loopos_ui/images","detach":"/loopos_ui/images"}"> <div class="lui-image lui-image--full" data-images-target="imageComponent" data-action="pubsub:action@window->images#executeAction"> <div role="status" class="hidden lui-image__loader" data-images-target="loader"> <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled"> <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-spinner" data-lui--button-target="leadingIcon"></i> </button> </div> <img class="lui-image__image" data-images-target="image" src="/image_proxy/2" /> <div class="lui-image__placeholder hidden" data-images-target="placeholder"> <div class="lui-icon h-[16px] w-[16px]"> <i class="fa-regular fa-image lui-icon__icon" style="font-size: 16px; color: white;"></i> </div> </div> </div> <span class="lui-image__error" data-images-target="error">Error message</span> </div> </turbo-frame> <div class="loopui-form-layout__info-section"> <div class="loopui-form-layout__line-wrapper"> <span class="lui-label" style="color: #b53c00; background-color: #fbf5f2;"> <i class="fa-regular fa-tag lui-label__icon"></i> <span class="lui-label__text">text</span> </span> <span class="lui-label" style="color: #b53c00; background-color: #fbf5f2;"> <i class="fa-regular fa-tag lui-label__icon"></i> <span class="lui-label__text">text</span> </span> <span class="lui-label" style="color: #006053; background-color: #f2f7f6;"> <i class="fa-regular fa-tag lui-label__icon"></i> <span class="lui-label__text">text</span> </span> </div> <div class="loopui-form-layout__middle-wrapper--small"> <div class="flex"> <h1 class="lui-show-header__title">Mewto-#150</h1> <div class="flex gap-2 ml-2"> <span class="lui-label" style="color: #0b6ef9; background-color: #f2f7ff;"> <span class="lui-label__text">test</span> </span> <span class="lui-label" style="color: #df8620; background-color: #fdf9f4;"> <span class="lui-label__text">state</span> </span> <div class="lui-double-state-label"> <span class="lui-label" style="color: #e88600; background-color: #fdf3e6;"> <span class="lui-label__text">test</span> </span> <span class="lui-label" style="color: #ffffff; background-color: #1a883f;"> <i class="fa-regular fa-tag lui-label__icon"></i> <span class="lui-label__text">test</span> </span> </div> </div> </div> <div class="loopui-form-layout__line-wrapper"> <div class="pl-1"> <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none"> Details slot </div> </div> </div> </div> <div class="loopui-form-layout__middle-wrapper"> <div class="loopui-form-layout__line-wrapper"> <div class="pl-1"> <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none"> Bottom side slot </div> </div> </div> </div> </div> <div class="loopui-form-layout__right"> <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none"> Right side slot </div> </div> </div> </div> </div></turbo-frame>No Usage documentation to display.
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
<%= render LooposUi::ShowHeader.new(title: "Mewto-#150") do |header| %> <%# TODO: update with token when implemented %> <% header.with_image(image_url: random_image_src) %> <% header.with_token_zone do %> <%= render LooposUi::CounterLabel.new(text: "text", icon: "fa-regular fa-tag") %> <% end %> <% header.with_token do %> <%= render LooposUi::CounterLabel.new(text: "text", icon: "fa-regular fa-tag") %> <% end %> <% header.with_token do %> <%= render LooposUi::CounterLabel.new(text: "text", icon: "fa-regular fa-tag", color: :manager) %> <% end %> <% header.with_title_label_counter(text: "test", color: :hubs) %> <% header.with_title_label_state(text: "state", color: :warning) %> <% header.with_title_label_double_state( leading_text: "test", leading_color: :submission, trailing_text: "test", trailing_color: :success, icon: "fa-regular fa-tag" )%> <%= header.with_details do %> <%= render LooposUi::DummySlot.new(text: "Details slot") %> <% end %> <%= header.with_bottom_side do %> <%= render LooposUi::DummySlot.new(text: "Bottom side slot") %> <% end %> <% header.with_right_side do %> <%= render LooposUi::DummySlot.new(text: "Right side slot") %> <% end %><% end %>No notes provided.
No params configured.
No documentation to display.