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
19
20
21
22
23
24
25
26
27
28
29
30
<div class="">
  <div class="lui-marketplace__item_card lui-marketplace__item_card--vertical">
    <div class="lui-marketplace__item_card__image_wrapper" data-controller="item-card-favorite" style="width: 64px;
height: 64px;
">
      <div class="inline" target="" rel="noopener noreferrer">
        <img class="lui-marketplace__item_card__image" src="/image_proxy/1" />
      </div>
      
      <div class="lui-marketplace__item_card__favorite">
        <a class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small w-fit w-fit relative" data-controller="lui--button" data-turbo-method="post" href="https://www.youtube.com/watch?v=Zl5Rk0uLGDI">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 14px; height: 14px;"><i class="lui-button__icon lui-button__icon--small fa-solid fa-heart" 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: 14px;">
              progress_activity
            </i>
          </div>
        </a>
      </div>
    </div>
    
    <div class="flex w-full flex-col min-w-0 grow-0" target="">
      <span class="lui-marketplace__item_card__name">Sample Item</span>
      <div class="lui-marketplace__item_card__price">99,99 €</div>
    </div>
  </div>
  </div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%
  with_favorite = preview_params.delete(:with_favorite)
  test_model = OpenStruct.new(
    name: "Sample Item",
    latest_value_out: Money.new(9999, "EUR"),
    main_image: Pokemon.first.image.presence || random_image_src,
    date: Date.today,
    status: "Active",
    favorite: with_favorite
  )
  preview_params[:price] = preview_params[:price].to_money
  preview_params.delete(:size) if preview_params[:size] == ""
%>
<%= render LooposUi::Marketplace::ItemCard.new(item: test_model, **preview_params) do |card| %>
  <% card.with_favorite_button(
    href: "https://www.youtube.com/watch?v=Zl5Rk0uLGDI", 
    tag_options: { data: { turbo_method: :post } }
  ) if with_favorite %>
<% end %>

No notes provided.

Param Description Input

—

—

—

ItemCard

Description

The ItemCard component is a marketplace item display card that presents item information in a compact, visually appealing format. It displays the item's main image, name, price, and includes a favorite button for user interaction.

Arguments

Property Type Description
item Interface An item object that must implement :name, :main_image, :latest_value_out, :date, :status, and :favorite methods
name String The title of the item
image_url String The url of the image to be displayed
price Money The price Money object
date TDate The date of the item
status String The status of the item
favorite Bool Whether the item is favorited (default: false)
size TSize The size of the card
orientation Symbol The orientation of the card (:horizontal or :vertical, default: :vertical)
href String If present, will wrap both the image and the text in an anchor link
data Hash Data attributes on the wrapper element

You must pass in either an item or name, image_url and price.

Slots

Renders One

  • favorite_button - A customizable favorite button that renders as a button with a heart icon by default