LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="w-[200px] m-auto">
  <div class="lui-chip-list" data-controller="lui--blurred-scroll">
    <div class="lui-chip">
      Ciclismo
    </div>
    <div class="lui-chip">
      Fitness
    </div>
    <div class="lui-chip">
      Campismo
    </div>
    <div class="lui-chip">
      Têxtil
    </div>
    <div class="lui-chip">
      Eletrónica
    </div>
  </div>
</div>

ChipList

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
<div class="w-[200px] m-auto">
  <%= render LooposUi::ChipList.new do |cl| %>
    <% cl.with_chip(text: "Ciclismo") %>
    <% cl.with_chip(text: "Fitness") %>
    <% cl.with_chip(text: "Campismo") %>
    <% cl.with_chip(text: "Têxtil") %>
    <% cl.with_chip(text: "Eletrónica") %>
  <% end %>
</div>

No notes provided.

No params configured.

Description

ChipList renders a horizontally scrollable row of chips. It wraps multiple Chip components. It support horizontal scroll (SHIFT + scroll) and drag movements.

Arguments

This component does not accept specific arguments. You should pass chips via slots.

  • Additional HTML attributes can be passed via extra options (e.g. data:, aria:), which are forwarded to the root element.

Slots

Slot Component Description
chip LooposUi::Chip Adds a chip to the list.

Usage via builder methods:

<%= render LooposUi::ChipList.new do |list| %>
  <% list.with_chip(text: "All") %>
  <% list.with_chip(text: "Open") %>
  <% list.with_chip(text: "Closed") %>
<% end %>

JS Events

This component does not emit custom events.