72Başlayın
HextaUI

Pagination

Her düğmeyi yerinde tutan, geçerli sayfaya kayan ve üç noktadan herhangi bir sayfaya atlayan sayfa gezintisi.

Showing 1–10 of 248 results

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

const perPage = 10
const total = 248

export function PaginationDemo() {
  const [page, setPage] = React.useState(1)
  const first = (page - 1) * perPage + 1
  const last = Math.min(page * perPage, total)

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination
        page={page}
        count={Math.ceil(total / perPage)}
        onPageChange={setPage}
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        Showing {first}–{last} of {total} results
      </p>
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Pagination } from "@/components/ui/pagination"
const [page, setPage] = React.useState(1)

<Pagination page={page} count={25} onPageChange={setPage} />

Pagination'a bir count verin, tüm çubuğu o oluşturur. Her zaman aynı sayıda yuva gösterir; böylece sayfalarda gezinirken Previous, Next ve sayılar imlecinizin altında kaymaz. Parçaları kendiniz birleştirmek için count vermeyin.

Kompozisyon

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Örnekler

Bir sayfaya atla

Sayfa numarası yazmak için bir üç noktaya tıklayın. Enter atlar, aralık dışı bir sayı alanı sallar ve Esc üç noktayı geri koyar. jump={false} ile kapatın.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLong() {
  const [page, setPage] = React.useState(480)

  return <Pagination page={page} count={1000} onPageChange={setPage} />
}

Kompakt

Çubuk kapsayıcısına sığmadığında Previous, “Page 4 of 24” ve Next düzenine geçer, yer olunca geri döner. Etiket aynı zamanda bir atlama alanıdır. İki düzenden birini compact ile zorlayın.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationCompact() {
  const [page, setPage] = React.useState(4)

  return (
    <div className="w-full max-w-72 rounded-xl border p-2">
      <Pagination page={page} count={24} onPageChange={setPage} />
    </div>
  )
}

Bağlantılar

getPageHref ile her sayfa gerçek bir bağlantıdır, bu yüzden yeni sekmede açılabilir. Düz tıklamalar yine onPageChange çağırır.

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

export function PaginationLinks() {
  const [page, setPage] = React.useState(3)

  return (
    <Pagination
      page={page}
      count={12}
      getPageHref={(target) => `#page-${target}`}
      onPageChange={setPage}
    />
  )
}

Birleştirilebilir

count olmadan çubuğu shadcn/ui'daki gibi parçalardan oluşturun. Router'ınızın bağlantısını kullanmak için render verin.

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

const pages = [1, 2, 3]

export function PaginationComposable() {
  const [page, setPage] = React.useState(2)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            render={<button type="button" />}
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>
        {pages.map((item) => (
          <PaginationItem key={item}>
            <PaginationLink
              render={<button type="button" />}
              isActive={item === page}
              onClick={() => setPage(item)}
            >
              {item}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            render={<button type="button" />}
            disabled={page === pages.length}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Sağdan sola

usePagination özel düzenler için sayfa ve üç nokta öğelerini döndürür. Sağdan sola metinde ok işaretleri döner.

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  usePagination,
} from "@/components/ui/pagination"

export function PaginationRtl() {
  const [page, setPage] = React.useState(2)
  const { items, hasPrevious, hasNext } = usePagination({ page, count: 3 })

  return (
    <div dir="rtl">
      <Pagination aria-label="التنقل بين الصفحات">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              text="السابق"
              aria-label="الصفحة السابقة"
              render={<button type="button" />}
              disabled={!hasPrevious}
              onClick={() => setPage(page - 1)}
            />
          </PaginationItem>
          {items.map((item) =>
            item.type === "page" ? (
              <PaginationItem key={item.page}>
                <PaginationLink
                  render={<button type="button" />}
                  isActive={item.page === page}
                  onClick={() => setPage(item.page)}
                >
                  {item.page.toLocaleString("ar-EG")}
                </PaginationLink>
              </PaginationItem>
            ) : null
          )}
          <PaginationItem>
            <PaginationNext
              text="التالي"
              aria-label="الصفحة التالية"
              render={<button type="button" />}
              disabled={!hasNext}
              onClick={() => setPage(page + 1)}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

Klavye

TuşAction
TabÇubuğa girer ve çıkar. Previous ve Next uçlarda da odaklanabilir kalır.
←→Previous, sayfalar ve Next arasında gezinir. Sağdan sola düzenlerde yön değişir.
HomeEndİlk veya son öğeye gider.
EnterOdaktaki sayfayı veya sayfa alanını açar. Alanda o sayfaya atlar ve ona odaklanır.
EscSayfa alanını kapatır ve odağı üç noktaya döndürür.

Erişilebilirlik

  • Kök, “Pagination” etiketli bir <nav>'dur ve geçerli sayfada aria-current="page" bulunur.
  • İlk ve son sayfada Previous ve Next, disabled yerine aria-disabled kullanır, böylece sona geldiğinizde odak kaybolmaz.
  • Azaltılmış hareket açıkken kayan gösterge solmaya dönüşür.

API referansı

Pagination

PropTürVarsayılan
countToplam sayfa. Ayarlandığında çubuk sizin için oluşturulur; parçaları kendiniz birleştirmek için vermeyin.
number–
page
number–
defaultPage
number1
onPageChange
(page: number) => void–
getPageHrefSayfaları düğme yerine bağlantı olarak işler.
(page: number) => string–
siblingsGeçerli sayfanın her iki yanında gösterilen sayfalar.
number1
boundariesBaşta ve sonda her zaman gösterilen sayfalar.
number1
compactauto, çubuk sığmadığında Previous, “Page x of y” ve Next düzenine geçer.
boolean | "auto""auto"
jumpÜç noktanın bir sayfa alanı açmasına izin verir.
booleantrue
ÖznitelikAçıklama
data-slot="pagination"Gezinti.
data-slot="pagination-indicator"Geçerli sayfaya kayan arka plan.

PaginationLink

PropTürVarsayılan
isActiveGeçerli sayfayı aria-current="page" ile işaretler.
booleanfalse
disabledaria-disabled ayarlar ve tıklamaları yok sayar.
booleanfalse
render
ReactElement | (props, state) => ReactElement<a>
ÖznitelikAçıklama
data-slot="pagination-link"CSS'te sayfa bağlantılarını hedefler.
data-activeGeçerli sayfada bulunur.

PaginationPrevious / PaginationNext

PropTürVarsayılan
textYalnızca simgeli bir düğme için null verin.
ReactNode"Previous" / "Next"
disabled
booleanfalse

PaginationEllipsis

PropTürVarsayılan
onJumpÜç noktayı bir sayfa alanı yapar. Bu olmadan üç nokta dekoratiftir.
(page: number) => void–
countAlanın kabul ettiği en yüksek sayfa.
number–

usePagination

PropTürVarsayılan
page
number–
count
number–
siblings
number1
boundaries
number1

items, sınırlanmış page ve count ile hasPrevious ve hasNext döndürür. Kendi sayfalayıcınızı oluşturmak için usePagination kılavuzuna bakın.

İlgili