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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<h2>
  Multiple paginations components on the same page, using the same param, isolated with turbo frames:
</h2>
<br>
<turbo-frame id="pagination-1">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
</turbo-frame>
<turbo-frame id="pagination-2">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
</turbo-frame>
<turbo-frame id="pagination-3">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
</turbo-frame>
<br>
<h2>
  Multiple paginations components on the same page, isolated with different paths:
</h2>
<br>
<turbo-frame id="multiple-paginatiors-param">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+1?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+1?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+1?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+1?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+2?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+2?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+2?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+2?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit relative" data-controller="lui--button" disabled="disabled">
      <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-regular fa-chevron-left" 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>
    </button>
    <a class="lui-pagination__item lui-pagination__item--active" disabled="disabled">1</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+3?page=2" class="lui-pagination__item" disabled="disabled">2</a>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+3?page=3" class="lui-pagination__item" disabled="disabled">3</a>
    <span class="lui-pagination__divider">...</span>
    <a href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+3?page=11" class="lui-pagination__item" disabled="disabled">11</a>
    <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-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+3?page=2" disabled="disabled">
      <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-regular fa-chevron-right" 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>
  </span>
</turbo-frame>
<br>
<a class="lui-button lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/lookbook/inspect/pagination/multiple_paginations&id&page=1">
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
    Reset
  </span>          
  <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: 16px;">
      progress_activity
    </i>
  </div>
</a>

Pagination

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
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
<h2>
    Multiple paginations components on the same page, using the same param, isolated with turbo frames:
</h2>
<br>
<%= turbo_frame_tag "pagination-1" do %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10) %>
<% end %>
<%= turbo_frame_tag "pagination-2" do %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10) %>
<% end %>
<%= turbo_frame_tag "pagination-3" do %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10) %>
<% end %>
<br>
<h2>
    Multiple paginations components on the same page, isolated with different paths:
</h2>
<%
    # NOTE: Utility to mock different paths, in this case differenciated via url parameters
    # you will not need this in your code if you follow the documentation and the path indeed is different, and you have your
    # paginators wrapped in turbo frames. For display purposes only.
    def some_path(**params)
        "#{request.fullpath}&#{params.to_query}"
    end
%>
<br>
<%= turbo_frame_tag "multiple-paginatiors-param" do %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10, path: some_path(id: "paginator 1")) if params[:id].blank? || params[:id] == "paginator 1" %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10, path: some_path(id: "paginator 2")) if params[:id].blank? || params[:id] == "paginator 2" %>
    <%= render LooposUi::Pagination.new(count: 101, page: params[:page], items: 10, path: some_path(id: "paginator 3")) if params[:id].blank? || params[:id] == "paginator 3" %>
    <%= tag.div("Pagination from #{params[:id]}") if params[:id].present? %>
<% end %>
<br>
<%= render LooposUi::Button.new(text: "Reset", href: some_path(id: nil, page: 1)) %>

No notes provided.

No params configured.

Pagination

Description

The Pagination component provides navigation for paginated data sets, allowing users to move between pages of results. It supports integration with the Pagy gem or can be used with explicit count, page, and items arguments for flexibility. Pagy usage is recommended, and internally the other arguments will be converted to a pagy object.

Arguments

Property Default Description
pagy nil A Pagy object. If provided, takes precedence over manual arguments.
count nil Total number of items (used if not using pagy).
page 1 Current page number (used if not using pagy).
items nil Items per page (used if not using pagy).
path request.fullpath The path to use for pagination links.
link_attrs {} Additional attributes for the link elements.

You must provide either a pagy object or all of count, page, and items.

If you have several pagination on the same page, you can provide a path argument to each pagination to make sure they have different links. The path can contain query parameters, so you can use those to paginate different data sets on the same page also. We recommend also wrapping the paginated component in a turbo frame container, so only the clicked element will be updated.

If the element you need to update is deeply nested and you can't wrap it in a turbo frame, you can use the link_attrs argument to add additional attributes to the link elements.

<%= render LooposUi::Pagination.new(link_attrs: { data: { turbo_frame: "my_frame" } }) %>

Usage

Using a Pagy object

<%= render LooposUi::Pagination.new(pagy: @pagy) %>

Using count, page, and items arguments

<%= render LooposUi::Pagination.new(count: 101, page: 3, items: 10) %>

Future improvements

mode argument - in event mode, the pagination will not render as a list of links, but as a set of elements that will trigger bubbling events.