LoopOS UI v1.1.26.2

Previews

No matching results.

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
<div id="lui-token_list_5793709857" class="lui-token-list lui-token-list--horizontal"
    data-controller="token-list"
    data-token-list-frame-id-value="lui-token_list_5793709857_frame"
    data-token-list-model-association-overlay-outlet="#lui-token_list_5793709857 .lui-association-overlay">
  <turbo-frame class="lui-token-list__items" id="lui-token_list_5793709857_frame">
    <div data-controller="drag" class="lui-token-list__items">
      <div class="lui-logo">
        <div data-react-class="LogoApp" data-react-props="{"app":"manager","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
        <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
          <span class="lui-counter__text">3</span>
        </span>
      </div>
      <div class="lui-logo">
        <div data-react-class="LogoApp" data-react-props="{"app":"submission","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
        <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
          <span class="lui-counter__text">3</span>
        </span>
      </div>
      <div class="lui-logo">
        <div data-react-class="LogoApp" data-react-props="{"app":"handling","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
        <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
          <span class="lui-counter__text">3</span>
        </span>
      </div>
      <div class="lui-logo">
        <div data-react-class="LogoApp" data-react-props="{"app":"validation","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
        <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
          <span class="lui-counter__text">3</span>
        </span>
      </div>
      <div class="lui-logo">
        <div data-react-class="LogoApp" data-react-props="{"app":"hubs","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
        <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
          <span class="lui-counter__text">3</span>
        </span>
      </div>
    </div>
    <span>
      <span class="lui-counter lui-counter--increment">
        <span class="lui-counter__text lui-counter__text--increment">+2</span>
      </span>
      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="true"
  >
        <div class="lui-tooltip__description">
          <div class="flex flex-col gap-1">
            <div class="lui-logo">
              <div data-react-class="LogoApp" data-react-props="{"app":"core","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
              <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
                <span class="lui-counter__text">3</span>
              </span>
            </div>
            <div class="lui-logo">
              <div data-react-class="LogoApp" data-react-props="{"app":"exit","size":"small","icon":true}" data-react-cache-id="LogoApp-0"></div>
              <span class="lui-counter lui-counter--tinny" style="color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);">
                <span class="lui-counter__text">3</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </span>
  </turbo-frame>
</div>

Logo

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
<%= render LooposUi::TokenList.new(max_tokens: 5) do |token_list| %>
  <% ["manager", "submission", "handling", "validation", "hubs", "core", "exit"].each do |logo| %>
    <%= token_list.with_token_manual do %>
      <%= render LooposUi::Logo.new(
        app: logo,
        count: "3",
        size: "small",
        icon: true
      ) %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.

Description

Documentation for Logo

Arguments

Property Default Description
name :value Description

Slots

SlotName - Description