फ़ीचर्ड
पेजिनेशनNumbered Pagination
A numbered page strip that collapses long runs to an ellipsis.
#pagination#links#ellipsis
6 फ्रेमवर्कमध्यम
Loading…
A segmented group of page links joined by a shared border and hairline dividers.
<!--
One shared border on the group and divide-x hairlines between cells, so the
segments read as a single control. overflow-hidden clips the fill of the
current cell to the rounded corners; overflow-x-auto lets the strip scroll
rather than overflow the viewport if the range is wide on a narrow screen.
-->
<nav aria-label="Pagination" class="max-w-full overflow-x-auto">
<ul class="inline-flex list-none divide-x divide-gray-300 overflow-hidden rounded-lg border border-gray-300 p-0 dark:divide-gray-700 dark:border-gray-700">
<li><a href="?page=1" aria-current="page" class="inline-flex h-10 min-w-10 items-center justify-center bg-blue-600 px-3 text-sm font-semibold tabular-nums text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400">1</a></li>
<li><a href="?page=2" class="inline-flex h-10 min-w-10 items-center justify-center px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100">2</a></li>
<li><a href="?page=3" class="inline-flex h-10 min-w-10 items-center justify-center px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100">3</a></li>
<li><span class="inline-flex h-10 min-w-10 items-center justify-center px-3 text-sm text-gray-500 dark:text-gray-400" aria-hidden="true">…</span></li>
<li><a href="?page=10" class="inline-flex h-10 min-w-10 items-center justify-center px-3 text-sm font-medium tabular-nums text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 motion-reduce:transition-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100">10</a></li>
</ul>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
currentPageआवश्यक | number | - | सक्रिय पृष्ठ संख्या, 1 से शुरू। |
totalPagesआवश्यक | number | - | कुल कितने पृष्ठ हैं। |
buildHrefआवश्यक | (page: number) => string | - | पृष्ठ संख्या के लिए URL बनाता है, ताकि पृष्ठ वास्तविक लिंक बने रहें। |
siblingCount | number | 1 | वर्तमान पृष्ठ के दोनों ओर कितनी पृष्ठ संख्याएँ दिखें। |
ariaLabel | string | 'Pagination' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
One border wraps the whole group and `divide-x` draws the hairlines between cells, so the segments read as a single control rather than loose buttons; `overflow-hidden` clips the current cell fill to the rounded corners. The container scrolls (`overflow-x-auto`) instead of overflowing the viewport when the range is wide on a narrow screen. Focus rings are inset so they are not clipped by that same overflow.