Pagination

Önceki ve sonraki kontrolleri ve kompakt bir sayfa aralığıyla sonuç sayfaları arasında gezinir.

import { Pagination } from "@merid/react";

export function Example() {
  return (
    <Pagination
      pageCount={12}
      defaultPage={5}
      aria-label="Sayfalama"
      previousLabel="Önceki sayfa"
      nextLabel="Sonraki sayfa"
      pageLabel={(p) => `Sayfa ${p}`}
    />
  );
}

Import

import { Pagination, getPageRange } from "@merid/react";

Anatomi

Pagination tek bir component'tir. Şunları render'lar:

• içinde bir liste olan bir <nav> landmark'ı,
• bir önceki ve bir sonraki kontrolü (etiketli ikon butonlar),
• sayfa butonları: ilk sayfa, son sayfa ve geçerli sayfanın her iki yanında siblingCount kadar sayfa,
• iki ya da daha fazla sayfanın atlandığı her yerde bir üç nokta.

Örnekler

Controlled

Sayfa senin state'inde ya da URL'de tutuluyorsa page ve onPageChange ver.

import { useState } from "react";
import { Pagination } from "@merid/react";

export function Example() {
  const [page, setPage] = useState(1);
  return (
    <div>
      <p>{(page - 1) * 20 + 1}–{page * 20} arası sonuçlar gösteriliyor</p>
      <Pagination
        pageCount={8}
        page={page}
        onPageChange={setPage}
        aria-label="Sayfalama"
        previousLabel="Önceki sayfa"
        nextLabel="Sonraki sayfa"
        pageLabel={(p) => `Sayfa ${p}`}
      />
    </div>
  );
}

Daha fazla komşu sayfa

siblingCount, geçerli sayfanın her iki yanında kaç sayfa gösterileceğini belirler.

<Pagination
  pageCount={40}
  defaultPage={20}
  siblingCount={2}
  aria-label="Sayfalama"
  previousLabel="Önceki sayfa"
  nextLabel="Sonraki sayfa"
  pageLabel={(p) => `Sayfa ${p}`}
/>

Link olarak

getHref verildiğinde diğer her sayfa bir <a> olarak render'lanır; böylece sonuçlar taranabilir ve yeni bir tab'da açılabilir. Geçerli sayfa (kendine link vermek yerine) aria-current="page" ile düz metin olarak render'lanır. Devre dışı önceki/sonraki kontrolleri buton olarak kalır.

<Pagination
  pageCount={6}
  defaultPage={2}
  getHref={(page) => `?page=${page}`}
  aria-label="Arama sonucu sayfaları"
  previousLabel="Önceki sayfa"
  nextLabel="Sonraki sayfa"
  pageLabel={(p) => `Sayfa ${p}`}
/>

Client-side routing için renderLink ekle. Link'in tüm prop'larını (href, className, aria-label, aria-current, onClick, children, …) ve hedef page değerini alır:

import NextLink from "next/link";

<Pagination
  pageCount={12}
  page={page}
  getHref={(p) => `/invoices?page=${p}`}
  renderLink={({ page, ...props }) => <NextLink {...props} />}
/>

getPageRange ile özel layout'lar

getPageRange(page, pageCount, siblings = 1), component'in kullandığı aralığın aynısını sayfa numaraları ile "ellipsis-start" / "ellipsis-end" işaretlerinden oluşan bir dizi olarak döndürür.

getPageRange(5, 12); // [1, "ellipsis-start", 4, 5, 6, "ellipsis-end", 12]

API referansı

Pagination

<nav> render'lar ve onChange dışındaki HTML attribute'larını kabul eder.

getPageRange

PageRangeItem[] döndürür; burada PageRangeItem = number | "ellipsis-start" | "ellipsis-end".

Stil verme

• .mrd-pagination / .mrd-pagination__list: nav kökü ve flex liste.
• .mrd-pagination__page: bir sayfa butonu, linki ya da (link modunda geçerli sayfa için) metni: --mrd-icon-button-md boyutunda kare, --mrd-radius-md.
• .mrd-pagination__page[aria-current="page"] (ayrıca data-state="active"): geçerli sayfa; --mrd-accent-soft dolgu, --mrd-accent-strong metin.
• data-direction="previous" ya da "next" ile .mrd-pagination__control: chevron kontrolleri; :disabled durumunda --mrd-placeholder kullanılır.
• .mrd-pagination__ellipsis: … boşluğu, yardımcı teknolojilerden gizlenir.

Kaba işaretçilerde (coarse pointer) kontroller --mrd-icon-button-lg boyutuna büyür. Azaltılmış hareket basma ölçeğini kaldırır.

Erişilebilirlik

Sayfalama için ayrı bir APG deseni yok; adlandırılmış bir navigation bölgesi için landmark bölgeleri rehberini izler.

• Liste, "Pagination" adlı bir nav içinde durur. Sayfada birden fazla varsa daha belirgin bir ad ver (örneğin "Arama sonucu sayfaları").
• Her sayfa kontrolünün pageLabel'dan gelen erişilebilir bir etiketi vardır; geçerli sayfada aria-current="page" bulunur.
• Önceki ve sonraki, uçlarda gizlenmez, devre dışı bırakılır; böylece layout kaymaz.
• Üç noktalar aria-hidden'dır.

Kullanım ilkeleri

İlgili sayfalar

• Table
• Stepper
• Breadcrumb