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
<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="M7.92298 12H1.15375V8.30769C1.15375 7.26974 1.58452 6.33026 2.2758 5.65949C1.91068 5.53641 1.50862 5.32923 1.16606 4.98872C0.647086 4.4718 0.384521 3.77641 0.384521 2.92308C0.384521 0.777436 2.13221 0 3.3076 0H5.61529C7.2276 0 8.53837 1.31077 8.53837 2.92308V4.66872C9.84914 4.8841 11.6153 5.81128 11.6153 8.30769C11.6153 9.38872 11.285 10.2667 10.6327 10.9169C9.56196 11.9836 8.01324 12 7.92298 12ZM2.38452 10.7692H7.92298C8.17529 10.7692 10.3845 10.6872 10.3845 8.30769C10.3845 5.92821 8.17734 5.84821 7.92093 5.84615H4.84606C3.48811 5.84615 2.38452 6.94974 2.38452 8.30769V10.7692ZM3.3076 1.23077C3.3076 1.23077 2.83785 1.23897 2.39888 1.47077C1.8717 1.74769 1.61529 2.22154 1.61529 2.92308C1.61529 3.62462 1.8717 4.10256 2.39683 4.37949C2.8358 4.60923 3.3035 4.61538 3.30965 4.61538H7.3076V2.92308C7.3076 1.98974 6.54862 1.23077 5.61529 1.23077H3.3076Z" fill="url(#paint0_linear_238_804)"/>
        <defs>
          <linearGradient id="paint0_linear_238_804" x1="6.00093" y1="12" x2="6.00093" y2="0" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FFAA38"/>
            <stop offset="1" stop-color="#FFCB33"/>
          </linearGradient>
        </defs>
      </svg>
      <span class="lui-label__text">Submission</span>
    </span>
    <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
      <i class="fa-regular fa-circle-check lui-label__icon"></i>
      <span class="lui-label__text">Proposal Accepted</span>
    </span>
  </div>
</div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
item = OpenStruct.new(
  macro_kind: macro_kind,
  macro_name: macro_name,
  macro_icon: macro_icon,
  micro_kind: micro_kind,
  micro_name: micro_name,
  micro_icon: micro_icon,
)
render(LooposUi::Item::StateLabel.new(item: item))

No notes provided.

Param Description Input

—

—

—

—

—

—

Description

The Item::StateLabel component is used to display a label with two states: a leading state and a trailing state. Each state can have a corresponding text, color, and icon. The component receives a single item object, and its properties are mapped to the internal parameters (leading_text, leading_color, trailing_text, trailing_color, leading_icon, trailing_icon, etc.).

The component is highly customizable, allowing for different configurations such as enabling or disabling light mode, and supporting various combinations of text, colors, and icons.

Arguments

Property Default Description
item nil The object that contains all the information used to map the component's attributes (required).
macro_condensed false Hide leading text, show only icon
micro_condensed false Hide trailing text, show only icon

Icons

You can provide an icon as a FontAwesome class or use one of the predefined string values:

  • FontAwesome Class: Any valid FontAwesome icon class, e.g., "fa-regular fa-envelope", "fa-solid fa-check", etc.
  • Predefined Strings for App Image display:
    • core
    • hubs
    • submission
    • validation
    • handling

When using one of the predefined strings, the component will render a specific icon related to that string's context.

Condensed Mode

When macro_condensed or micro_condensed is enabled, the component will:

  • Hide the text for the respective part (leading or trailing)
  • Show only the icon
  • Display a tooltip with the full label when hovering over the condensed part

This is useful for saving space in compact layouts while still providing full information on hover.