फ़ीचर्ड
पेजिनेशनNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 फ्रेमवर्कमध्यम
Loading…
A "Showing 11–20 of 240" readout paired with previous and next links.
<nav aria-label="Pagination" class="flex w-full max-w-md flex-col items-center gap-3 sm:flex-row sm:justify-between">
<p class="m-0 text-sm tabular-nums text-gray-600 dark:text-gray-400" role="status" aria-live="polite">
Showing <span class="font-medium text-gray-900 dark:text-gray-100">11–20</span> of <span class="font-medium text-gray-900 dark:text-gray-100">240</span>
</p>
<div class="flex items-center gap-2">
<a href="?page=1" rel="prev" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Previous</a>
<a href="?page=3" rel="next" class="inline-flex h-10 items-center rounded-lg border border-gray-300 px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Next</a>
</div>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
currentPageआवश्यक | number | - | सक्रिय पृष्ठ संख्या, 1 से शुरू। |
pageSizeआवश्यक | number | - | हर पृष्ठ पर कितने आइटम दिखें। |
totalItemsआवश्यक | number | - | सभी पृष्ठों में कुल कितने आइटम हैं। |
buildHrefआवश्यक | (page: number) => string | - | पृष्ठ संख्या के लिए URL बनाता है, ताकि पृष्ठ वास्तविक लिंक बने रहें। |
ariaLabel | string | 'Pagination' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The range is derived from `currentPage` and `pageSize` on every render rather than stored, so it can never drift from the page it describes. It sits in a polite live region so the count is re-announced after a client-side navigation. On a phone the readout stacks above the controls; from `sm` up they sit on one row, justified apart. `totalItems === 0` guards the first index so an empty list reads "0" rather than "1".