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
<turbo-frame id="lui-page-header" class="lui-page-header">
  <div class="lui-page-header__container">
    <div class="lui-page-header__container__tag_list">
    </div>
    <div class="lui-page-header__container__header_zone">
      <div class="lui-page-header__container__header_zone___content">
        <div class="lui-header lui-header--page">
          <div class="lui-header__info">
            <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
              <span class="lui-label__text">Active</span>
            </span>
          </div>
  
          <div class="lui-header__title_container">
            <span class="lui-header__title_container__title">
              Dashboard
            </span>
          </div>
  
          <div class="lui-header__token_zone">
            <span id="lui-token_5793709857" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <i class="lui-token__icon fa-regular fa-regular fa-user"></i>
              <span class="lui-token__text">User</span>
              <div class="lui-token__actions">
              </div>
            </span>
            <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <i class="lui-token__icon fa-regular fa-regular fa-shield"></i>
              <span class="lui-token__text">Admin</span>
              <div class="lui-token__actions">
              </div>
            </span>
          </div>
  <span class="lui-header__description">
          </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
<%= render LooposUi::PageHeader.new(title: "Dashboard") do |page_header| %>
  <% page_header.with_header(title: "Dashboard") do |header| %>
    <% header.with_token_zone do %>
      <%= render LooposUi::EntityToken.new(text: "User", icon: "fa-regular fa-user") %>
      <%= render LooposUi::EntityToken.new(text: "Admin", icon: "fa-regular fa-shield") %>
    <% end %>
    
    <% header.with_info do %>
      <%= render LooposUi::StateLabel.new(text: "Active", color: :success) %>
    <% end %>
  <% end %>
<% 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.