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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Enabled</p>
    <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>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Focus (pseudo-classe CSS - clique no elemento)</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--enabled">
      <span class="lui-filter_pill__label">
        Com foco
      </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">Active</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">
        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>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">State2</p>
    <button type="button" class="lui-filter_pill lui-filter_pill--medium lui-filter_pill--state2">
      <span class="lui-filter_pill__label">
        Outro estado
      </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
12
13
14
15
16
17
18
<div class="space-y-4">
  <div>
    <p class="text-sm font-medium mb-2">Enabled</p>
    <%= render LooposUi::FilterPill.new(text: "Todos", state: :enabled) %>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Focus (pseudo-classe CSS - clique no elemento)</p>
    <%= render LooposUi::FilterPill.new(text: "Com foco", state: :enabled) %>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Active</p>
    <%= render LooposUi::FilterPill.new(text: "Ativos", state: :active, selected: true) %>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">State2</p>
    <%= render LooposUi::FilterPill.new(text: "Outro estado", state: :state2) %>
  </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.