Pagination

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Pagination } from '@bigbang/ui';

Kaynak

Pagination.tsx

Storybook

Pagination · Playground

Pagination, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Pagination } from '@bigbang/ui';

<Pagination page={page} pageCount={20} onPageChange={setPage} />;

Parça prop tipleri de dışa açılır: PaginationListProps, PaginationPageProps.

Özellikler

pageSize

Açıklama

Sayfa başına satır sayısı. Özetteki aralık ve sayfa boyutu seçimi için gerekir.

Tür

number

pageSizeOptions

Açıklama

Sayfa boyutu seçiminde sunulan boyutlar. Seçim yalnızca onPageSizeChange ve pageSize ile birlikte görünür.

Tür

readonly number[]

onPageSizeChange

Açıklama

Seçilen boyutla çağrılır. Eski sayfa artık olmayabileceği için sayfayı burada 1'e döndürün.

Tür

(pageSize: number) => void

totalCount

Açıklama

Toplam satır sayısı. Özeti gösterir: pageSize ile aralık ("1-20 / 345"), pageSize olmadan ya da imleç modunda "Toplam 345".

Tür

number

siblingCount

Açıklama

Geçerli sayfanın her iki yanında gösterilen sayfa numarası sayısı.

Tür

number

Varsayılan

1

boundaryCount

Açıklama

Başta ve sonda her zaman gösterilen sayfa numarası sayısı.

Tür

number

Varsayılan

1

disabled

Açıklama

Tüm kontrolleri etkisiz yapar, örneğin sonraki sayfa yüklenirken. Kontroller odaklanabilir kalır (aria-disabled), odak kaybolmaz.

Tür

boolean

Varsayılan

false

label

Açıklama

Gezinti bölgesinin erişilebilir adı. Varsayılan kütüphane metnidir: "Sayfalama" ya da "Pagination". Sayfada birden çok Pagination varsa adlandırın.

Tür

string

getPageHref

Açıklama

Sayfa kontrollerini bağlantı yapar (URL ile yönetilen sayfalar): bir sayfanın adresini döndürür. Güvensiz şemalar atılır. Tıklamada onPageChange yine çağrılır. Yalnızca sayfa modunda.

Tür

(page: number) => string

size

Açıklama

Öğe yüksekliği: 32 ya da 36 px. Yoğun tabloların altında sm kullanın.

Tür

Size

Varsayılan

'md'

className

Açıklama

Yalnızca yerleşim için: kenar boşluğu ve yerleşim.

Tür

string

children

Açıklama

Parçalarla özel yerleşim. Verilirse varsayılan yerleşimin yerine geçer. Önceki, sayfalar ve sonrakini Pagination.List içine koyun.

Tür

ReactNode

mode

Açıklama

Gezinti türü: numaralı sayfalar (page, varsayılan) ya da yalnızca önceki ve sonraki (cursor).

Tür

'page' | 'cursor'

Varsayılan

'page'

pageZorunlu

Açıklama

Geçerli sayfa, 1'den başlar. Sayfa modunda zorunlu.

Tür

number

pageCountZorunlu

Açıklama

Sayfa sayısı. Sayfa modunda zorunlu.

Tür

number

onPageChangeZorunlu

Açıklama

Yeni sayfa numarasıyla çağrılır. Sayfa modunda zorunlu.

Tür

(page: number) => void

hasPreviousZorunlu

Açıklama

Daha önceki bir sayfa olup olmadığı. Yoksa önceki kontrolü etkisizdir. İmleç modunda zorunlu.

Tür

boolean

hasNextZorunlu

Açıklama

Daha sonraki bir sayfa olup olmadığı. Yoksa sonraki kontrolü etkisizdir. İmleç modunda zorunlu.

Tür

boolean

onPreviousZorunlu

Açıklama

Kullanıcı önceki sayfaya gittiğinde çağrılır. İmleç modunda zorunlu.

Tür

() => void

onNextZorunlu

Açıklama

Kullanıcı sonraki sayfaya gittiğinde çağrılır. İmleç modunda zorunlu.

Tür

() => void

mode ile iki biçim vardır. Sayfa modunda (mode verilmez ya da 'page') page, pageCount ve onPageChange zorunludur. İmleç modunda (mode="cursor") hasPrevious, hasNext, onPrevious ve onNext zorunludur; getPageHref yalnızca sayfa modunda çalışır.

Parçalar

Varsayılan yerleşim yeterliyse parça kullanmayın. Özel yerleşim için children verin; verirseniz varsayılan yerleşimin yerine geçer. Önceki, sayfalar ve sonraki Pagination.List içinde durur.

Parça	Öğe	Özellikler
Pagination.List	<ul>	Yerel öznitelikler.
Pagination.Previous	<li> içinde düğme ya da bağlantı	Yok; durumu kökten alır.
Pagination.Next	<li> içinde düğme ya da bağlantı	Yok; durumu kökten alır.
Pagination.Page	<li> içinde düğme ya da bağlantı	page: bu kontrolün sayfası.
Pagination.Ellipsis	<li>	Yok. aria-hidden.
Pagination.PageSize	<div> içinde Select	Yok; pageSize, pageSizeOptions ve onPageSizeChange yoksa görünmez.
Pagination.Summary	<p>	Yok; totalCount yoksa görünmez.

Veri öznitelikleri

• data-component="pagination", data-size, data-mode: kök öğede.
• data-part: list, previous, next, page, ellipsis, page-size, summary, page-of, text.

Sayfa aralığı

paginationRange aynı algoritmayı saf bir işlev olarak verir; özel bir gösterim yazarken kullanın.

import { paginationRange } from '@bigbang/ui';

paginationRange(10, 20); // [1, 'ellipsis-start', 9, 10, 11, 'ellipsis-end', 20]
paginationRange(1, 20, 2, 1); // [1, 2, 3, 4, 5, 6, 7, 'ellipsis-end', 20]