Pagination

Ne zaman kullanılır

Pagination, çok sayıda kaydı sayfalara bölen tablo ve listelerin altında gezinti sağlar. Sayfa sayısı biliniyorsa numaralı sayfalar, bilinmiyorsa imleç modu kullanılır.

Ne zaman kullanılmaz

• Az kayıt için: Tek sayfaya sığan listeyi sayfalamayın.
• Sonsuz akış için: Kullanıcı sürekli aşağı kaydırıyorsa “Daha fazla yükle” düğmesi ya da sanal liste kullanın.
• Adım adım akış için: Sıralı adımlar için Stepper kullanın; Pagination aynı türden kayıtları gezer.
• Sekmeler için: Farklı içerik görünümleri için Tabs kullanın.

Anatomi

1. Kök (nav): adı olan gezinti bölgesi.
2. Sayfa boyutu (Pagination.PageSize): “Sayfa başına” seçimi, isteğe bağlı.
3. Özet (Pagination.Summary): “1-20 / 345”, isteğe bağlı.
4. Önceki, sonraki (Pagination.Previous, Pagination.Next): ok ve metin; dar ekranda yalnızca ok.
5. Sayfa (Pagination.Page): numaralı kontrol; geçerli sayfa seçili.
6. Üç nokta (Pagination.Ellipsis): atlanan sayfalar.
7. Sayaç: dar ekranda “3 / 12”.

Davranış

• Sayfa listesi, uzun listede her sayfada aynı sayıda öğe tutar (2 × boundaryCount + 2 × siblingCount + 3); kontroller yer değiştirmez.
• Geçerli sayfaya tıklamak bir şey yapmaz. İlk sayfada önceki, son sayfada sonraki etkisizdir ama odaklanabilir kalır.
• disabled iken (örneğin yeni sayfa yüklenirken) tüm kontroller etkisizdir ve odaklanabilir kalır.
• Sayfa değişince odak tıklanan kontrolde kalır. Kontrol kalkarsa odak geçerli sayfaya geçer.
• 1024 px’ten dar ekranda sayfa numaraları gizlenir; önceki, sonraki ve sayaç kalır.
• Özet metni, aralık değişince kısa bir geçişle belirir.

Yönergeler

Boyut değişince sayfayı sıfırlayın

Sayfa boyutu değişince geçerli sayfa artık olmayabilir. onPageSizeChange içinde sayfayı 1 yapın.

1-50 / 230

• Önceki
• 1
• 2
• 3
• 4
• 5
• 1 / 5
• Sonraki

YapınBoyut değişince sayfa 1'e döner; özet doğru kalır.

201-230 / 230

• Önceki
• 1
• 2
• 3
• 4
• 5
• 5 / 5
• Sonraki

YapmayınSayfa 9 kalmış, liste 5 sayfa: bileşen 5'e sıkıştırır ama veriyi yanlış sayfa için yüklediniz.

Sayfa sayısı bilinmiyorsa imleç kullanın

Sayfa sayısını hesaplamak pahalıysa ya da yoksa numara göstermeyin.

• Önceki
• Sonraki

Yapınİmleç modu: yalnızca önceki ve sonraki.

• Önceki
• 1
• 2
• 3
• 4
• 5
• …
• 999
• 1 / 999
• Sonraki

YapmayınToplam bilinmiyorken uydurulmuş bir sayfa sayısı.

Tek sayfa varsa gizleyin

Tek sayfalık listede Pagination göstermek gürültüdür; uygulamanız pageCount > 1 iken gösterebilir.

• Önceki
• 1
• 2
• 3
• 1 / 3
• Sonraki

YapınBirden çok sayfa varken gösterilir.

• Önceki
• 1
• 1 / 1
• Sonraki

YapmayınTek sayfa için iki etkisiz ok ve bir numara.

İçerik

• Gezinti bölgesine adı label ile verin; sayfada birden çok Pagination varsa her biri farklı adlı olsun (“Sonuç sayfaları”).
• Sayfa boyutu seçeneklerini 10, 20, 50 gibi yuvarlak sayılardan seçin.
• Sayıları Intl ile biçimlendirmeyi Pagination yapar; dili Provider belirler.
• Kitaplık metinleri (Önceki, Sonraki, Sayfa 3) Provider diline göre gelir.

İlgili bileşenler

• Select: “Sayfa başına” seçimi bu bileşenle yapılır.
• Button: Sayfa ve ok kontrollerinin temeli.
• Table: Pagination’ın altında durduğu tablo.