LoopOS UI v1.1.26.2

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
<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--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </a>
  </span>
</turbo-frame>
<turbo-frame id="pagination-2">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </a>
  </span>
</turbo-frame>
<turbo-frame id="pagination-3">
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+1?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </a>
  </span>
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+2?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </a>
  </span>
  <span class="lui-pagination" data-controller="lui--pagination">
    <button class="lui-button lui-button--neutral--secondary lui-button--size-small lui-button--disabled w-fit w-fit" data-controller="lui--button" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i>
    </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--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations&id=paginator+3?page=2" disabled="disabled">
      <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i>
    </a>
  </span>
</turbo-frame>
<br>
<a class="lui-button lui-button--size-default lui-button--core--primary w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/multiple_paginations&id=&page=1">
  <span class="lui-button__text" data-lui--button-target="text">
    Reset
  </span>
</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.