nili/ui
enfaartr
Tüm bileşenler

Pagination

Genel görünüm
19 export4 varyant ekseni34 prop4 dosya
import { Pagination, PaginationAlign, PaginationEllipsis, PaginationLabels, PaginationSlot, PaginationType } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

count sayfa sayısıdır; page birden başlar. defaultPage ile denetimsiz ya da page artı onPageChange ile denetimli.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(3)

  return (
    <Pagination
      count={16}
      page={page}
      onPageChange={setPage}
      labels={{ root: "Pagination" }}
    />
  )
}

Türler

basic ayrı hücrelerdir; full-radius onları hap yapar; group onları tek bir bölümlü denetimde birleştirir.

basic
full-radius
group
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} type="basic" />
      <Pagination count={16} defaultPage={3} type="full-radius" />
      <Pagination count={16} defaultPage={3} type="group" />
    </>
  )
}

Pencere

siblingCount, geçerli sayfanın iki yanında kaç sayfa duracağıdır; boundaryCount, her uçta kaçının sabit kalacağı. showEdges okların dışına ilk/son atlamalarını ekler.

siblingCount=1 (varsayılan)
siblingCount=2 · boundaryCount=2
showEdges
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={40} defaultPage={20} siblingCount={1} />
      <Pagination count={40} defaultPage={20} siblingCount={2} boundaryCount={2} />
      <Pagination count={40} defaultPage={20} showEdges />
    </>
  )
}

Hizalama ve cihaz kipi

align satırı konumlandırır. Mobil cihaz kipi hücreleri bırakıp bir çift ok ve “16 sayfadan 3.” özetini koyar — on altı sayfalık bir iz telefona sığmaz.

align=start
align=center
align=end
align=between
mobil
import { Pagination } from "@nili/ui"

export function Example() {
  return (
    <>
      <Pagination count={16} defaultPage={3} align="start" />
      <Pagination count={16} defaultPage={3} align="between" />
      <Pagination count={16} defaultPage={3} deviceMode="mobile" />
    </>
  )
}

Gelişmiş

advanced özeti izden önce, sayfa başına satır denetimini sonra ekler. Görünen her dize bir prop’tur — metnine sahip çıkan bir tasarım sistemi çeviri yığınını her tüketiciye dayatır.

import { Pagination } from "@nili/ui"

export function Example() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <Pagination
      advanced
      count={16}
      page={page}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 20, 50]}
      onPageSizeChange={setPageSize}
      labels={{
        root: "Pagination",
        summary: (page, count) => `Page ${page} of ${count}`,
        perPage: (size) => `${size} / page`,
      }}
    />
  )
}

Devre dışı

Tüm denetimi soluklaştırır — örneğin yeniden yüklenen bir tablo.

import { Pagination } from "@nili/ui"

export function Example() {
  return <Pagination count={16} defaultPage={3} disabled />
}