BetterUi Components

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
<nav aria-label="Pagination" class="flex flex-col items-center">
  <ul role="list" class="flex items-center gap-1.5">
    <li>
      <a href="#page-4" rel="prev" aria-label="Previous page" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </li>
    <li>
      <a href="#page-1" aria-label="Go to page 1" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">1</a>
    </li>
    <li>
      <a href="#page-2" aria-label="Go to page 2" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">2</a>
    </li>
    <li>
      <a href="#page-3" aria-label="Go to page 3" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">3</a>
    </li>
    <li>
      <a href="#page-4" aria-label="Go to page 4" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">4</a>
    </li>
    <li>
      <span aria-current="page" aria-label="Page 5" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-primary-600 bg-primary-50 text-primary-700">5</span>
    </li>
    <li>
      <a href="#page-6" aria-label="Go to page 6" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">6</a>
    </li>
    <li>
      <a href="#page-7" aria-label="Go to page 7" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">7</a>
    </li>
    <li>
      <span aria-hidden="true" class="inline-flex items-center justify-center min-w-9 h-9 text-sm px-3 text-grayscale-400 select-none">…</span>
    </li>
    <li>
      <a href="#page-20" aria-label="Go to page 20" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">20</a>
    </li>
    <li>
      <a href="#page-6" rel="next" aria-label="Next page" class="inline-flex items-center justify-center font-medium transition-colors duration-200 min-w-9 h-9 text-sm px-3 rounded-md border border-grayscale-200 text-grayscale-700 hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
current_page = current_page.to_i
total_pages = total_pages.to_i
window = window.to_i
show_first_last = ActiveModel::Type::Boolean.new.cast(show_first_last)
show_prev_next = ActiveModel::Type::Boolean.new.cast(show_prev_next)
show_page_numbers = ActiveModel::Type::Boolean.new.cast(show_page_numbers)
render BetterUi::Pagination::PaginationComponent.new(
  current_page: current_page,
  total_pages: total_pages,
  url: ->(page) { "#page-#{page}" },
  variant: variant,
  style: style,
  size: size,
  rounded: rounded,
  window: window,
  show_first_last: show_first_last,
  show_prev_next: show_prev_next,
  show_page_numbers: show_page_numbers
)

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

—

—