LoopOS UI v1.1.29.0

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div class="lui-header lui-header--large">
  <div class="lui-header__info">
    <div class="inline-flex">
      <div class="lui-double-state-label">
        <span class="lui-label" style="color: #212529; background-color: #ECEFF2;">
          <svg height="12" width="12" viewBox="0 0 12 12">
            <path d="M5.94853 12.0007C5.35232 12.0007 4.69999 11.7762 4.07192 11.1481C3.76092 10.8371 3.53185 10.5018 3.39076 10.1484C3.04487 10.0118 2.72629 9.80398 2.46232 9.54002L0.852712 7.93041C0.185204 7.2629 -0.674971 5.59565 0.852712 4.06797C1.16371 3.75697 1.49898 3.52789 1.85246 3.3868C1.98899 3.04091 2.19683 2.72233 2.4608 2.45836L4.0704 0.848758C4.09013 0.829036 4.55738 0.367849 5.25371 0.135738C5.92577 -0.0887876 6.93614 -0.146436 7.93133 0.848758C8.24233 1.15976 8.47141 1.49503 8.61249 1.8485C8.95838 1.98504 9.27697 2.19288 9.54094 2.45685L11.1505 4.06645C11.1703 4.08617 11.6315 4.55343 11.8636 5.24976C12.0881 5.92182 12.1457 6.93218 11.1505 7.92738C10.8395 8.23837 10.5043 8.46745 10.1508 8.60854C10.0143 8.95443 9.80642 9.27149 9.54245 9.53698L7.93285 11.1466C7.53993 11.5395 6.80112 11.9992 5.94701 11.9992L5.94853 12.0007ZM4.17812 9.63407L4.18722 9.66593C4.27066 9.95417 4.44815 10.2363 4.71667 10.5049C5.95611 11.7443 7.15915 10.6338 7.29265 10.5049L8.90074 8.89678C8.9417 8.85582 8.98114 8.81182 9.01907 8.76783C8.03298 8.6586 7.33057 7.96985 7.29265 7.93193L6.00466 6.64394L4.71667 7.93193C4.71667 7.93193 4.13412 8.53268 4.13412 9.2806C4.13412 9.39589 4.14777 9.51423 4.17963 9.63407H4.17812ZM2.37129 4.17264L2.3364 4.18175C2.04816 4.26518 1.76598 4.44268 1.49746 4.7112C0.258023 5.95064 1.36851 7.15367 1.49746 7.28718L3.10555 8.89526C3.14651 8.93622 3.19051 8.97567 3.2345 9.01359C3.34373 8.02599 4.03399 7.32359 4.0704 7.28718L5.35839 5.99919L4.0704 4.7112C4.0704 4.7112 3.27546 3.93902 2.36978 4.17264H2.37129ZM7.93285 7.28566C7.9465 7.29931 8.60491 7.93344 9.41047 7.86366C9.48481 7.85759 9.55914 7.84394 9.63651 7.82422L9.66989 7.81511C9.95813 7.73168 10.2403 7.55418 10.5088 7.28566C11.7483 6.04622 10.6378 4.84319 10.5088 4.70968L8.90074 3.1016C8.85977 3.06064 8.81578 3.02119 8.77178 2.98478C8.66256 3.97239 7.97229 4.67479 7.93437 4.7112L6.64789 5.99767L7.93437 7.28414L7.93285 7.28566ZM2.98874 3.23206C3.97635 3.34129 4.67875 4.03004 4.71516 4.06797L6.00314 5.35595L7.29113 4.06797C7.29113 4.06797 7.87368 3.46721 7.87368 2.7193C7.87368 2.604 7.86003 2.48567 7.82817 2.36582L7.81907 2.33396C7.73563 2.04572 7.55813 1.76355 7.28961 1.49503C6.05017 0.255586 4.84714 1.36608 4.71364 1.49503L3.10555 3.10311C3.06459 3.14407 3.02515 3.18807 2.98722 3.23206H2.98874Z" fill="url(#paint0_linear_238_1315)"/>
            <defs>
              <linearGradient id="paint0_linear_238_1315" x1="6.00163" y1="12.0007" x2="6.00163" y2="0.00071859" gradientUnits="userSpaceOnUse">
                <stop stop-color="#F27335"/>
                <stop offset="1" stop-color="#FCAA30"/>
              </linearGradient>
            </defs>
          </svg>
          <span class="lui-label__text">Label</span>
        </span>
        <span class="lui-label" style="color: #212529; background-color: #ffffff; border: 1px solid var(--General-Gray-200, #ECEFF2);">
          <i class="fa-regular fa-arrow-up-right-from-square lui-label__icon"></i>
          <span class="lui-label__text">Label</span>
        </span>
      </div>
    </div>
  </div>
  
  <div class="lui-header__title_container">
    <div class="lui-header__icon lui-header__icon__informative lui-header__icon--large">
      <i class="lui-m_icon material-symbols-outlined lui-m_icon__semantic--informative" style="--lui-micon-size: 16px;">
        info
      </i>
    </div>
    <span class="lui-header__title_container__title">
      Title
    </span>
    <span class="lui-counter lui-counter--small" 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 class="lui-header__title_container__token_zone">
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
      <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        SLOT
      </div>
    </div>
  </div>
  
  <div class="lui-header__token_zone">
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
    <div class="w-12 h-7 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
  <span class="lui-header__description">
    Description
  </span>
</div>

Header

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
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
<% header_params = {
  title: preview_params[:size] != :page ? "Title" : nil,
  count: preview_params[:hasCounter] ? 3 : nil,
  description: preview_params[:hasDescription] ? "Description" : nil,
  icon: preview_params[:hasIcon] ? :info : nil,
  # description_icon: preview_params[:hasDescription] ? :calendar_clock : nil,
  tooltip: preview_params[:hasHelperIcon] ? "Tooltip text" : nil,
  app_instance: preview_params[:showAppInstance] ? :core : nil,
  size: preview_params[:size]
} %>
<%= render LooposUi::Header.new(**header_params) do |header| %>
    <% if preview_params[:size] == :page %>
        <% header.with_input_title do %>
            <%= render LooposUi::InlineTextEdit.new(
                model: Pokemon.first,
                attribute: :name,
                editable: true,
                form_attrs: { model: Pokemon.first }
            )%>
        <% end %>
    <% end %>
    <% header.with_info do %>
        <%= render LooposUi::Item::StateLabel.new(item: OpenStruct.new(
            macro_kind: :core,
            macro_name: "Label",
            macro_icon: "core",
            micro_kind: :white,
            micro_name: "Label",
            micro_icon: "fa-regular fa-arrow-up-right-from-square"
        )) %>
    <% end %>
    <% if preview_params[:hasSemanticIcon] %>
        <% header.with_semantic_icon(:info, semantic: preview_params[:semanticIconKind] ? preview_params[:semanticIconKind].to_sym : :informative) %>
    <% end %>
    <% header.with_token_zone do %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
    <% end %>
    <% header.with_title_token_zone do %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
        <%= render LooposUi::DummySlot.new(classes: "w-12 h-7") %>
    <% end %>
<% end %>

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

Description

The Header component is a simple UI element for displaying section titles with optional icons, descriptions, counts, and token zones. It's commonly used to create page or section headers with additional contextual information.

Arguments

Property Default Required Description
icon nil No FontAwesome icon class to display before the title
title nil No Main title text to display
description nil No Description text displayed below the title
description_icon nil No FontAwesome icon class to display after the description
size :page No Size variant - :page, :tiny, :small, :medium, or :large
tooltip nil No Tooltip text to display on hover
count nil No Numeric count to display as a counter badge

Slots

custom_description - Custom description content Overrides the default description text with custom HTML content

info - Additional info content Displays additional information next to the title

token_zone - Token zone content Area for displaying tokens and labels

Usage Examples

Basic Header

<%= render LooposUi::Header.new(title: "Page Title") %>

Header with Icon and Description

<%= render LooposUi::Header.new(
  title: "Settings",
  icon: "fa-regular fa-gear",
  description: "Manage your application settings"
) %>

Header with Count and Tooltip

<%= render LooposUi::Header.new(
  title: "Notifications",
  icon: "fa-regular fa-bell",
  count: 5,
  tooltip: "You have 5 unread notifications"
) %>

Header with Token Zone

<%= render LooposUi::Header.new(title: "Projects") do |header| %>
  <% header.with_token_zone do %>
    <%= render LooposUi::CounterLabel.new(text: "Active", icon: "fa-regular fa-circle") %>
    <%= render LooposUi::CounterLabel.new(text: "Draft", icon: "fa-regular fa-edit") %>
  <% end %>
<% end %>