फ़ीचर्ड
पेजिनेशनNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 फ्रेमवर्कमध्यम
Loading…
Two chevron links either side of a compact "Page 3 of 12" readout.
<nav aria-label="Pagination" class="inline-flex items-center gap-3">
<a href="?page=2" rel="prev" aria-label="Previous page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 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:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 18-6-6 6-6" /></svg>
</a>
<span class="text-sm tabular-nums text-gray-700 dark:text-gray-300" role="status" aria-live="polite">Page <span class="font-semibold text-gray-900 dark:text-gray-100">3</span> of 12</span>
<a href="?page=4" rel="next" aria-label="Next page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-gray-600 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:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m9 18 6-6-6-6" /></svg>
</a>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
currentPageआवश्यक | number | - | सक्रिय पृष्ठ संख्या, 1 से शुरू। |
totalPagesआवश्यक | number | - | कुल कितने पृष्ठ हैं। |
buildHrefआवश्यक | (page: number) => string | - | पृष्ठ संख्या के लिए URL बनाता है, ताकि पृष्ठ वास्तविक लिंक बने रहें। |
ariaLabel | string | 'Pagination' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The smallest complete pager: where can I go, and where am I, in one line. The count is a live region so it is re-announced after a client navigation, and the chevron links carry `aria-label`s because their glyphs have no text. Bounds disable by dropping the href. Reach for this in a card footer or a detail panel where a full numbered strip would be too much furniture.