LoopOS UI v1.1.29.0

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
<div class="space-y-4">
  <div class="flex gap-2 flex-wrap">
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Todos
      </span>
      <i class="lui-m_icon lui-filter_pill__close material-symbols-outlined" style="--lui-micon-size: 16px;" data-action="click->lui--filter-pills#removePill" onclick="event.preventDefault(); event.stopPropagation();">
        close
      </i>
    </button>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled lui-filter_pill--selected">
      <span class="lui-filter_pill__label">
        Ativos
      </span>
      <i class="lui-m_icon lui-filter_pill__close material-symbols-outlined" style="--lui-micon-size: 16px;" data-action="click->lui--filter-pills#removePill" onclick="event.preventDefault(); event.stopPropagation();">
        close
      </i>
    </button>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Concluídos
      </span>
      <i class="lui-m_icon lui-filter_pill__close material-symbols-outlined" style="--lui-micon-size: 16px;" data-action="click->lui--filter-pills#removePill" onclick="event.preventDefault(); event.stopPropagation();">
        close
      </i>
    </button>
  </div>
</div>

FilterPill

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
<div class="space-y-4">
  <div class="flex gap-2 flex-wrap">
    <%= render LooposUi::FilterPill.new(text: "Todos", selected: false) %>
    <%= render LooposUi::FilterPill.new(text: "Ativos", selected: true) %>
    <%= render LooposUi::FilterPill.new(text: "Concluídos", selected: false) %>
  </div>
</div>

No notes provided.

No params configured.

Description

FilterPill is used to represent applicable filters in listings and searches, in a compact pill format.

Arguments

Property Default Required Description
text - X Main text displayed in the pill
size :medium - Size of the pill (:small, :medium)
state :enabled - Visual state (:enabled, :focus, :active, :state2)
selected false - Indicates if the filter is selected
count nil - Optional counter displayed next to the text
hasCloseButton true - Shows (true) or hides (false) the close button/icon (X)

When count is provided and greater than zero, a small numeric badge is rendered to the right of the text. By default, the component shows a small close button (X); to hide it, pass hasCloseButton: false.

Slots

No slots available at the moment.

JS Events

No specific JS events. The component is rendered as a standard button and can be combined with Stimulus controllers as needed.