LoopOS UI v1.1.29.1

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
<turbo-frame id="lui-page-header" class="lui-page-header">
  <div class="lui-page-header__container">
    <div class="lui-page-header__container__tag_list">
      <span id="lui-token_5793709857" class="lui-token  lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;">
        <i class="lui-token__icon fa-regular fa-regular fa-tag"></i>
        <span class="lui-token__text">Featured</span>
        <div class="lui-token__actions">
        </div>
      </span>
    </div>
    <div class="lui-page-header__container__header_zone">
      <turbo-frame id="multiple_image_image_pokemon_1_full">
        <div data-controller="images" data-images-editable-value="false" data-images-with-attached-value="false" data-images-turbo-frame-id-value="multiple_image_image_pokemon_1_full" data-images-unique-id-value="multiple_image_image_pokemon_1_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--icon-only lui-button--neutral--secondary lui-button--size-tiny lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
                <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                  <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-spinner" data-lui--button-target="leadingIcon"></i></div>
                </div>
            
                <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                  <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                    progress_activity
                  </i>
                </div>
              </button>
            </div>
            <img class="hidden lui-image__image" data-images-target="image" src="" />
            <div
          class="lui-image__placeholder flex"
          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="lui-page-header__container__header_zone___content">
        <div class="lui-header lui-header--page">
          <div class="lui-header__title_container">
            <span class="lui-header__title_container__title">
              Bulbasaur
            </span>
          </div>
    <span class="lui-header__description">
            Product details
          </span>
        </div>
      </div>
    </div>
  </div>
</turbo-frame>

PageHeader

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
<%= render LooposUi::PageHeader.new(title: "Product", model: Pokemon.first) do |page_header| %>
  <% page_header.with_token do %>
    <%= render LooposUi::TagToken.new(text: "Featured", color: :core) %>
  <% end %>
  
  <% page_header.with_image(
    model: Pokemon.first,
    association: :image
  ) %>
  
  <% page_header.with_header(
    title: Pokemon.first&.name || "Product",
    description: "Product details"
  ) %>
<% end %>

No notes provided.

No params configured.

Description

PageHeader is a unified header component used to display page headers with titles, images, tokens, details, and additional contextual information. It replaces the older LooposUi::ShowHeader and LooposUi::IndexHeader components.

The component is wrapped in a turbo-frame (lui-page-header) to support dynamic updates.

Arguments

Property Default Required Description
title nil No Main title text. If not provided and a model is present, it will attempt to use resource.model_title
model nil No Model instance for resource-aware features (auto-title, etc.)

Slots

Required Slots

header - Required - An instance of LooposUi::Header component The main header content including title, description, icons, and token zones. This slot is mandatory and the component will raise an error if not provided.

Optional Slots

tokens - Multiple token components displayed at the top of the header Renders multiple token components (e.g., LooposUi::Token) in a tag list above the header zone.

image - An instance of LooposUi::V2::Image component Displays an image associated with the page/model, typically positioned to the left of the header content.

token_zone - Token zone content Area for displaying tokens and labels within the header structure.

details - Multiple detail sections Renders multiple detail sections below the header content. Each detail is rendered in sequence.

with_detail_zone - Detail zone helper method Special method to add detail zones. You can add up to 3 detail zones using this method. Raises an error if more than 3 are added.

right_side - Right side content Content displayed on the right side of the header container. (Deprecated, may be removed)

bottom_side - Bottom side content Content displayed below the header container. (Deprecated, may be removed)

title_zone - Custom title zone Custom title content. If not provided and title is set, a default title zone will be created.

title_labels - Multiple title label components Renders multiple label components next to the title. Supports types: - manual - Custom block content - counter - LooposUi::CounterLabel component - state - LooposUi::StateLabel component - double_state - LooposUi::DoubleStateLabel component

Notes

  • The header slot is required and the component will raise an ArgumentError if not provided.
  • The component uses a turbo-frame wrapper, so it can be updated dynamically via Turbo.
  • You can add up to 3 detail zones using with_detail_zone method.
  • The title argument is optional, but if a model is provided and no title_zone is set, it will attempt to auto-populate the title from the model.
  • The right_side and bottom_side slots are deprecated and may be removed in future versions.