Bileşenler

Pagination

Tablo ve listelerin altında sayfa ya da imleç gezintisi ve sayfa boyutu seçimi sağlar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Pagination sayfayı denetlemez; page ve onPageChange ile siz yönetirsiniz. Uzun listede ilk ve son sayfa, geçerli sayfa ve iki yanı gösterilir; atlanan sayfalar … ile belirtilir. 1024 px’ten dar ekranda sayfa numaraları gizlenir; önceki, sonraki ve “4 / 20” sayacı kalır.

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

export default function Default() {
  const [page, setPage] = useState(4);
  return <Pagination page={page} pageCount={20} onPageChange={setPage} />;
}

Boyutlar

Öğeler md boyutunda 36 px, sm boyutunda 32 px yüksekliğindedir. Yoğun tabloların altında sm kullanın.

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

export default function Sizes() {
  const [page, setPage] = useState(4);
  return (
    <div className="flex flex-col gap-3xl">
      <Pagination size="sm" page={page} pageCount={20} onPageChange={setPage} />
      <Pagination size="md" page={page} pageCount={20} onPageChange={setPage} />
    </div>
  );
}

Sayfa boyutu ve özet

pageSize, pageSizeOptions ve onPageSizeChange verirseniz “Sayfa başına” seçimi görünür. totalCount ile “21-40 / 345” özeti eklenir. Boyut değişince sayfayı 1’e döndürün; eski sayfa artık olmayabilir.

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

const total = 345;

export default function WithPageSize() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  return (
    <Pagination
      page={page}
      pageCount={Math.ceil(total / pageSize)}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 20, 50]}
      onPageSizeChange={(next) => {
        setPageSize(next);
        setPage(1);
      }}
      totalCount={total}
    />
  );
}

İmleç modu

Toplam sayfa sayısı bilinmiyorsa mode="cursor" kullanın. Yalnızca önceki ve sonraki vardır; sayfa numarası ve sayaç yoktur. totalCount biliniyorsa “Toplam 345” gösterilir.

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

export default function Cursor() {
  const [index, setIndex] = useState(0);
  return (
    <Pagination
      mode="cursor"
      hasPrevious={index > 0}
      hasNext={index < 4}
      onPrevious={() => setIndex((value) => value - 1)}
      onNext={() => setIndex((value) => value + 1)}
    />
  );
}

Bağlantılar

Sayfa adresi URL’de tutuluyorsa getPageHref verin. Sayfa, önceki ve sonraki kontrolleri düğme yerine bağlantı olur; onPageChange yine çağrılır.

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

export default function Links() {
  const [page, setPage] = useState(3);
  return <Pagination page={page} pageCount={12} onPageChange={setPage} getPageHref={(next) => `#page-${next}`} />;
}

Açık ve koyu mod

Pagination renklerini eylem, yüzey ve kenarlık token’larından alır.

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

export default function Default() {
  const [page, setPage] = useState(4);
  return <Pagination page={page} pageCount={20} onPageChange={setPage} />;
}