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
29
30
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Com contador simples</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Pendentes
      </span>
      <span class="lui-filter_pill__count">
        3
      </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>
    <p class="text-sm font-medium mb-2">Selecionado com contador</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--active lui-filter_pill--selected">
      <span class="lui-filter_pill__label">
        Com alerta
      </span>
      <span class="lui-filter_pill__count">
        10
      </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
8
9
10
11
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Com contador simples</p>
    <%= render LooposUi::FilterPill.new(text: "Pendentes", count: 3) %>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Selecionado com contador</p>
    <%= render LooposUi::FilterPill.new(text: "Com alerta", count: 10, selected: true, state: :active) %>
  </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.