SearchApi Design System
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
<div class="space-y-6">
  <div>
    <p class="mb-2 text-xs text-ink-muted">google_product_page — declares no pagination parameter</p>
    <div class="rounded-lg border border-dashed border-line p-4">
    </div>
  </div>
  <div>
    <p class="mb-2 text-xs text-ink-muted">google — one recorded page</p>
    <div class="rounded-lg border border-dashed border-line p-4">
    </div>
  </div>
  <div>
    <p class="mb-2 text-xs text-ink-muted">google — two recorded pages</p>
    <div class="rounded-lg border border-dashed border-line p-4">
      <nav aria-label="Result pages" class="mt-6" data-pager-mode="numbered">
        <ul class="flex flex-wrap items-center gap-1.5">
          <li>
            <span class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface-sunk text-ink-muted cursor-not-allowed" aria-disabled="true">
              Prev
            </span>
          </li>
          <li>
            <a href="#page-1" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-nav-active font-medium text-nav-active-ink"
           aria-current="page">1</a>
          </li>
          <li>
            <a href="#page-2" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface text-ink hover:bg-surface-subtle hover:border-line-strong"
           >2</a>
          </li>
          <li>
            <a href="#page-2" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface text-ink hover:bg-surface-subtle hover:border-line-strong">
              Next
            </a>
          </li>
        </ul>
        <p class="mt-2 text-xs text-ink-muted">2 pages are recorded for this engine; the pager offers those and no others.</p>
      </nav>
    </div>
  </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
<% api = ->(engine) { Searchapi::Apis::BY_ENGINE.fetch(engine) } %>
<% href = ->(page) { "#page-#{page}" } %>
<div class="space-y-6">
  <div>
    <p class="mb-2 text-xs text-ink-muted">google_product_page — declares no pagination parameter</p>
    <div class="rounded-lg border border-dashed border-line p-4">
      <%= render PagerComponent.new(api: api.call("google_product_page"), pages: [ 1, 2 ], current: 1, href: href) %>
    </div>
  </div>
  <div>
    <p class="mb-2 text-xs text-ink-muted">google — one recorded page</p>
    <div class="rounded-lg border border-dashed border-line p-4">
      <%= render PagerComponent.new(api: api.call("google"), pages: [ 1 ], current: 1, href: href) %>
    </div>
  </div>
  <div>
    <p class="mb-2 text-xs text-ink-muted">google — two recorded pages</p>
    <div class="rounded-lg border border-dashed border-line p-4">
      <%= render PagerComponent.new(api: api.call("google"), pages: [ 1, 2 ], current: 1, href: href) %>
    </div>
  </div>
</div>

Two reasons not to render, and both are the same rule seen from two sides: the control may only offer navigation that exists. An engine declaring no pagination parameter has none to offer, and a single recorded page is not a set to move through — so both of these render nothing at all.

No params configured.