LoopOS UI v1.1.29.1

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
<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/default?page=2" class="lui-pagination__item" disabled="disabled">2</a>
  <a href="/lookbook/inspect/pagination/default?page=3" class="lui-pagination__item" disabled="disabled">3</a>
  <span class="lui-pagination__divider">...</span>
  <a href="/lookbook/inspect/pagination/default?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/default?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>

Pagination

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
<%= render LooposUi::Pagination.new(
  count: preview_params[:count],
  page: preview_params[:page],
  items: preview_params[:items]
) %>

No notes provided.

Param Description Input

Total number of items

Current page number

Number of items per page

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.