<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
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
<%= 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
headerslot is required and the component will raise anArgumentErrorif 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_zonemethod. - The
titleargument is optional, but if amodelis provided and notitle_zoneis set, it will attempt to auto-populate the title from the model. - The
right_sideandbottom_sideslots are deprecated and may be removed in future versions.