Pagination

Kompakt ve tam düzenleri destekleyen sayfa navigasyonu.

Pagination.tsx

Standart Sayfalama & Sayfa Boyutu

Yuvarlak Butonlar (Pills)

Kompakt Görünüm (Mobil veya Dar Alanlar)

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/pagination.json

Kullanım Örneği

import { Pagination } from "@/components/ui/Pagination"

<Pagination
  currentPage={page}
  totalPages={12}
  totalItems={237}
  pageSize={25}
  pageSizeOptions={[10, 25, 50]}
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
currentPage	number	—	Bir tabanlı aktif sayfa; güvenli aralığa normalize edilir.
totalPages	number	—	Toplam sayfa sayısı; minimum bir kabul edilir.
onPageChange	(page: number) => void	—	Farklı ve geçerli bir sayfa seçildiğinde çağrılır.
showPrevNext	boolean	true	Önceki ve sonraki kontrollerini gösterir.
pageSize	number	—	Sayfa başına kayıt sayısı.
pageSizeOptions	number[]	—	Pozitif ve benzersiz sayfa boyutu seçenekleri.
onPageSizeChange	(size: number) => void	—	Sayfa boyutu seçildiğinde çağrılır.
variant	"default" \| "compact" \| "pills"	"default"	Sayfalama sunumu.
totalItems	number	—	Kayıt aralığı özetinde kullanılan toplam öğe sayısı.
disabled	boolean	false	Tüm sayfalama kontrollerini kapatır.
ariaLabel	string	"Sayfalama"	Navigasyon bölgesinin erişilebilir adı.