LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="lui-marketplace-header">
  <a class="inline" href="#">
    <img src="https://lookbook.lookbook.charizard.dev.loopos.app/assets/loopos-icon-7668bd7d.png" alt="Logo">
  </a>  
  <div class="lui-marketplace-header__actions">
    <button class="lui-button lui-button--icon-only lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
      <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
        <div class="flex items-center justify-center" style="width: 16px; height: 16px;"><i class="lui-button__icon lui-button__icon--default fa-regular fa-user" 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: 16px;">
          progress_activity
        </i>
      </div>
    </button>
  </div>
</div>

Header

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
<%= render LooposUi::Marketplace::Header.new(logo_url: image_url("loopos-icon.png"), logo_href: "#") do |header| %>
    <% header.with_action do %>
        <%= render LooposUi::Button.new(icon: :user, type: :primary, kind: :neutral) %>
    <% end %>
<% end %>

No notes provided.

No params configured.

Description

The Header component is a simple UI element for displaying section titles with optional icons, descriptions, counts, and token zones. It's commonly used to create page or section headers with additional contextual information.

Arguments

Property Default Required Description
icon nil No FontAwesome icon class to display before the title
title nil No Main title text to display
description nil No Description text displayed below the title
description_icon nil No FontAwesome icon class to display after the description
size :page No Size variant - :page, :tiny, :small, :medium, or :large
tooltip nil No Tooltip text to display on hover
count nil No Numeric count to display as a counter badge

Slots

custom_description - Custom description content Overrides the default description text with custom HTML content

info - Additional info content Displays additional information next to the title

token_zone - Token zone content Area for displaying tokens and labels

Usage Examples

Basic Header

<%= render LooposUi::Header.new(title: "Page Title") %>

Header with Icon and Description

<%= render LooposUi::Header.new(
  title: "Settings",
  icon: "fa-regular fa-gear",
  description: "Manage your application settings"
) %>

Header with Count and Tooltip

<%= render LooposUi::Header.new(
  title: "Notifications",
  icon: "fa-regular fa-bell",
  count: 5,
  tooltip: "You have 5 unread notifications"
) %>

Header with Token Zone

<%= render LooposUi::Header.new(title: "Projects") do |header| %>
  <% header.with_token_zone do %>
    <%= render LooposUi::CounterLabel.new(text: "Active", icon: "fa-regular fa-circle") %>
    <%= render LooposUi::CounterLabel.new(text: "Draft", icon: "fa-regular fa-edit") %>
  <% end %>
<% end %>