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
<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__title_container">
            <span class="lui-header__title_container__title">
              My Page
            </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">5</span>
            </span>
          </div>
    <span class="lui-header__description">
            Page 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
<%= render LooposUi::PageHeader.new(title: "My Page") do |page_header| %>
  <% page_header.with_header(
    title: "My Page",
    description: "Page description",
    count: 5
  ) %>
<% 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.