Sayfa numaraları, prev/next ve ilk/son atlama — büyük listelerde okunabilir aralık ile. Sonuç sayacı ve "sayfa başına" seçici aynı bar'da; sipariş listesi ve müşteri tablosu örnekleriyle.
01 · Sayfa numarası varyantları
Az sayfa, orta, çok sayfa — ortayı ellipsis ile katla, ilk + son her zaman görünür
5 sayfa — hepsi sığar
Orta — tek tarafta ellipsis
Çok sayfa — iki tarafta ellipsis
Son sayfa — Sonraki disabled
02 · Tam pagination bar
Sonuç sayacı + sayfa başına seçici + sayfalama — tek satır, üç bölge
1.234 sonuçtan 21–40 arası
Sayfa başına
03 · Sipariş listesi kullanımı
Liste alt çizgisinde minimal pagination — sayaç solda, controller sağda
Bugünün siparişleri
Son güncelleme 14:42
Sipariş
Müşteri
Saat
Tutar
Durum
#4721
Ahmet Yılmaz
14:32
475,00 TL
Hazırlanıyor
#4720
Zehra Kaya
14:28
238,00 TL
Bekliyor
#4719
Mehmet Demir
14:11
612,50 TL
Teslim
#4718
Elif Çelik
13:54
184,00 TL
Teslim
87 siparişten 1–4 arası
04 · Müşteri tablosu — minimal
Az sayfa olduğunda sadece prev/next + sayaç — numaraları gizle
Müşteriler
VIP filtreli
Müşteri
Toplam sipariş
Toplam ciro
Son sipariş
Mehmet Demir
128
42.840,00 TL
3 saat önce
Ahmet Yılmaz
47
12.310,00 TL
2 gün önce
Burak Aksoy
31
8.760,00 TL
5 gün önce
14 müşteriden 1–3 arası · sayfa 1 / 5
Yapı kuralları
· Buton boyutu: 32×32 (ikon-only) veya min-width 32, padding 0 10 (sayı). Radius 7px, gap 4px.
· Current state: dolgu --primary, beyaz metin, font-weight 600. Hover engellenir, cursor default.
· Disabled: opacity 0.55, cursor not-allowed. İlk/son sayfada prev/next + skip-to-edge butonları devre dışı.
· Sayfa aralığı: aktif sayfa ± 2 + ilk + son. Ortada … ile boşluk (28px gap, hover yok).
· Skip-to-edge ikonları («») yalnızca 10+ sayfa varsa gösterilir.
· Toolbar: sol = "1.234 sonuçtan 21–40 arası", orta = "Sayfa başına" select (10/20/50/100), sağ = pagination.
· Sayı formatı: Türkçe binlik ayırıcı . (1.234), monospace tabular-nums kullan.
· Az sayfa (≤5) ise minimalize: yalnızca prev/next + sayaç metni "sayfa 1 / 5".
· Klavye: ← önceki, → sonraki, Home ilk, End son. Liste filtre değiştiğinde sayfa 1'e atla.
· Erişilebilirlik: nav aria-label="Sayfalama", current sayfa aria-current="page", ikon-only butonlar için aria-label.