გვერდები · Pagination

გვერდების არჩევა ლოკალიზებული ღილაკებითა და რიცხვებით.

მაგალითი

@llc-conciergia/ui/pagination

"use client";
import { useState } from "react";
import { SimplePagination } from "@llc-conciergia/ui/pagination";
export function Example() { const [page, setPage] = useState(5); return <SimplePagination page={page} total={20} onPageChange={setPage} />; }

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import { SimplePagination } from "@llc-conciergia/ui/pagination";

Conciergia CLI

npx @llc-conciergia/cli add pagination

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/pagination.json

შენიშვნები

SimplePagination რიცხვებს Intl.NumberFormat(locale)-ით წერს. page კონტროლირებადია; მონაცემების ჩატვირთვა მშობელს ეკუთვნის. არაკორექტული რიცხვები ნორმალიზდება. URL-ზე გადასასვლელად დაბალი დონის PaginationLink გამოიყენეთ.

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
SimplePagination: page / total / siblings	number	—	ერთიდან ათვლა; total არის გვერდების რაოდენობა; siblings ნაგულისხმევად 1.
SimplePagination: onPageChange / disabled	(page: number) => void / boolean	—	კონტროლირებადი არჩევა; გამორთული ღილაკები არ აქტიურდება.
usePagination({ page, total, siblings })	(number \| ellipsis-start \| ellipsis-end)[]	—	პირველი/ბოლო გვერდები და მეზობლები; total=0 აბრუნებს ცარიელ სიას.
Pagination	nav props	—	ლოკალიზებული aria-label; შესაძლებელია გადაფარვა.
PaginationContent / PaginationItem	ul / li props	—	ნავიგაციის სიის სემანტიკა.
PaginationLink: isActive	boolean	—	ამატებს aria-current="page" და outline სტილს.
PaginationLink / PaginationPrevious / PaginationNext	ButtonProps	—	render, nativeButton, disabled, size, children; ბმულისთვის nativeButton=false.
PaginationEllipsis	span props	—	მეტი გვერდის ლოკალიზებული ტექსტი.
ყველა ნაწილი: className / ref	native HTML props	—	სტილის და ref-ის გადაცემა.