RapidRails UI Book
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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="mb-6 p-4 bg-blue-50 border-l-4 border-blue-400 text-blue-800 rounded">
      <strong>Accessibility:</strong> All pagination controls use ARIA roles/attributes, live region for screen readers, and proper disabled states.
    </div>
    <div class="flex flex-col gap-6">
      <div>
        <h3 class="mb-2 text-lg font-semibold">Playground: Default Pagination</h3>
        <div aria-live="polite" class="sr-only">
          Page 3 of 10
        </div>
        <nav aria-label="Pagination Navigation" role="navigation" class="w-full">
          <ul class="inline-flex gap-2 select-none text-base h-10 px-4 w-48 -space-x-px" role="list">
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Previous" role="button" href="/demo?page=2">
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 inline shrink-0" role="img" focusable="false" aria-labelledby="icon-title-chevron-left icon-desc-chevron-left"><title id="icon-title-chevron-left">Chevron-left</title>
                  <desc id="icon-desc-chevron-left">Chevron-left icon</desc>
                  <path d="m15 18-6-6 6-6"></path>
                </svg>
                <span class="ml-1">Previous</span>
              </a></li>
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Go to page 1" href="/demo?page=1">
                1
              </a></li>
          
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Go to page 2" href="/demo?page=2">
                2
              </a></li>
          
            <li class="" role="listitem">
              <span class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4 z-10 font-semibold ring-2 ring-offset-1 ring-zinc-500 bg-zinc-600 text-white border border-zinc-700 shadow-sm" aria-current="page" tabindex="-1">
                3
              </span>
            </li>
          
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Go to page 4" href="/demo?page=4">
                4
              </a></li>
          
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Go to page 5" href="/demo?page=5">
                5
              </a></li>
          
            <li class="" role="listitem">
              <span class="px-3 py-1 text-gray-400 dark:text-gray-500" aria-hidden="true">…</span>
            </li>
          
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Go to page 10" href="/demo?page=10">
                10
              </a></li>
            <li class="" role="listitem">
              <a class="flex items-center justify-center focus:z-10 focus:outline-none focus:ring-2 bg-zinc-50 hover:bg-zinc-100 border border-zinc-200 hover:border-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-700/75 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100 rounded-lg text-base h-10 px-4" aria-label="Next" role="button" href="/demo?page=4">
                <span class="mr-1">Next</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 inline shrink-0" role="img" focusable="false" aria-labelledby="icon-title-chevron-right icon-desc-chevron-right"><title id="icon-title-chevron-right">Chevron-right</title>
                  <desc id="icon-desc-chevron-right">Chevron-right icon</desc>
                  <path d="m9 18 6-6-6-6"></path>
                </svg>
              </a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Current Page: 3</li>
      <li>Total Pages: 10</li>
      <li>Size: md</li>
      <li>Mode: full</li>
      <li>Summary: </li>
      <li>Window: 2</li>
      <li>Show Arrows: true</li>
      <li>Previous Label: Previous</li>
      <li>Next Label: Next</li>
      <li>Path: /demo?page=%{page}</li>
    </ul>
  </div>
</div>
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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="mb-6 p-4 bg-blue-50 border-l-4 border-blue-400 text-blue-800 rounded">
      <strong>Accessibility:</strong> All pagination controls use ARIA roles/attributes, live region for screen readers, and proper disabled states.
    </div>
    <div class="flex flex-col gap-6">
      <div>
        <h3 class="mb-2 text-lg font-semibold">Playground: Default Pagination</h3>
        <%= rui_pagination(current_page: current_page, total_pages: total_pages, size: size, window: window, show_arrow_icons: show_arrow_icons, show_text: show_text, mode: mode, summary: summary, previous_label: previous_label, next_label: next_label, path: path) %>
      </div>
    </div>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Current Page: <%= current_page %></li>
      <li>Total Pages: <%= total_pages %></li>
      <li>Size: <%= size %></li>
      <li>Mode: <%= mode %></li>
      <li>Summary: <%= summary %></li>
      <li>Window: <%= window %></li>
      <li>Show Arrows: <%= show_arrow_icons %></li>
      <li>Previous Label: <%= previous_label %></li>
      <li>Next Label: <%= next_label %></li>
      <li>Path: <%= path %></li>
    </ul>
  </div>
</div>

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—