元件
pinion-ui

Theme

Tune

Lang

Pagination

完整 (已編號) / 簡單 (前-當前/總計-後) — 顏色 × 外觀 × 尺寸，支援 Laravel paginator

Full — 最簡（soft primary, md）

共 237 筆中第 51–75 筆

<x-pagination.full :current="3" :last="10" :total="237" :perPage="25" />

<div x-data="{ current: 3, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(10)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">10</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

full — near start (no left dots) / near end (no right dots)

共 237 筆中第 26–50 筆

共 237 筆中第 201–225 筆

<x-pagination.full :current="2" :last="10" :total="237" :perPage="25" />
<x-pagination.full :current="9" :last="10" :total="237" :perPage="25" />

<div x-data="{ current: 2, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">26</span>–<span class="font-medium text-base-content">50</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">2</button>
<button type="button" @click="goToPage(3)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">3</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(10)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">10</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>
<div x-data="{ current: 9, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">201</span>–<span class="font-medium text-base-content">225</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(8)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">8</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">9</button>
<button type="button" @click="goToPage(10)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">10</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

full — wide window (onEachSide=2)

共 487 筆中第 126–150 筆

<x-pagination.full :current="6" :last="20" :total="487" :perPage="25" :on-each-side="2" />

<div x-data="{ current: 6, last: 20, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">487</span> 筆中第 <span class="font-medium text-base-content">126</span>–<span class="font-medium text-base-content">150</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<button type="button" @click="goToPage(5)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">5</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">6</button>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(8)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">8</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(20)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">20</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

Full — appearance + color（solid, accent）

共 160 筆中第 51–75 筆

共 160 筆中第 51–75 筆

共 160 筆中第 51–75 筆

<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" color="accent" appearance="soft" />
<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" color="accent" appearance="solid" />
<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" color="accent" appearance="outline" />

<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-accent/15 text-accent border-accent/40 focus-visible:ring-accent cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>
<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-accent text-accent-content border-accent focus-visible:ring-accent cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>
<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-base-100 text-accent border-accent focus-visible:ring-accent cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

full — size sm / md / lg

共 160 筆中第 51–75 筆

共 160 筆中第 51–75 筆

共 160 筆中第 51–75 筆

<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" size="sm" />
<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" size="md" />
<x-pagination.full :current="3" :last="7" :total="160" :perPage="25" size="lg" />

<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-3.5 h-3.5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-3.5 h-3.5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>
<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>
<div x-data="{ current: 3, last: 7, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        共 <span class="font-medium text-base-content">160</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-5 h-5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(7)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">7</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-5 h-5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

Full — showInfo=false

<x-pagination.full :current="3" :last="10" :total="237" :perPage="25" :show-info="false" />

<div x-data="{ current: 3, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<div class="hidden sm:block"></div>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(10)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">10</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

full — custom labels (prev-label / next-label / info-template)

Showing 51 - 75 of 237

<x-pagination.full :current="3" :last="10" :total="237" :perPage="25"
    prev-label="Previous" next-label="Next"
    info-template="Showing :first - :last of :total" />

<div x-data="{ current: 3, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="flex flex-col sm:flex-row items-center justify-between gap-4 py-4 w-full">
<p class="text-sm text-base-content/60 order-2 sm:order-1">
        Showing <span class="font-medium text-base-content">51</span> - <span class="font-medium text-base-content">75</span> of <span class="font-medium text-base-content">237</span>
</p>
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)] order-1 sm:order-2">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="Previous"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<button type="button" @click="goToPage(1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">1</button>
<button type="button" @click="goToPage(2)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">2</button>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 relative z-10 bg-primary/15 text-primary border-primary/40 focus-visible:ring-primary cursor-default" aria-current="page">3</button>
<button type="button" @click="goToPage(4)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">4</button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none">…</span>
<button type="button" @click="goToPage(10)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer">10</button>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="Next"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
</div>

Simple — 最簡（soft primary, md）

共 237 筆中第 51–75 筆

<x-pagination.simple :current="3" :last="10" :total="237" :perPage="25" />

<div x-data="{ current: 3, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">3</span>
<span class="text-base-content/50 mx-1">/</span>
<span>10</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">51</span>–<span class="font-medium text-base-content">75</span> 筆
    </p>
</div>

simple — onFirstPage / last page

共 237 筆中第 1–25 筆

共 237 筆中第 226–237 筆

<x-pagination.simple :current="1" :last="10" :total="237" :perPage="25" />
<x-pagination.simple :current="10" :last="10" :total="237" :perPage="25" />

<div x-data="{ current: 1, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/30 border-base-content/10 cursor-not-allowed pointer-events-none" disabled aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">1</span>
<span class="text-base-content/50 mx-1">/</span>
<span>10</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">1</span>–<span class="font-medium text-base-content">25</span> 筆
    </p>
</div>
<div x-data="{ current: 10, last: 10, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">10</span>
<span class="text-base-content/50 mx-1">/</span>
<span>10</span></span>
<button type="button" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/30 border-base-content/10 cursor-not-allowed pointer-events-none" disabled aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">237</span> 筆中第 <span class="font-medium text-base-content">226</span>–<span class="font-medium text-base-content">237</span> 筆
    </p>
</div>

Simple — appearance + color（soft, success）

共 115 筆中第 26–50 筆

<x-pagination.simple :current="2" :last="5" :total="115" :perPage="25" color="success" appearance="soft" />

<div x-data="{ current: 2, last: 5, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">2</span>
<span class="text-base-content/50 mx-1">/</span>
<span>5</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">115</span> 筆中第 <span class="font-medium text-base-content">26</span>–<span class="font-medium text-base-content">50</span> 筆
    </p>
</div>

simple — size sm / md / lg

共 115 筆中第 26–50 筆

共 115 筆中第 26–50 筆

共 115 筆中第 26–50 筆

<x-pagination.simple :current="2" :last="5" :total="115" :perPage="25" size="sm" />
<x-pagination.simple :current="2" :last="5" :total="115" :perPage="25" size="md" />
<x-pagination.simple :current="2" :last="5" :total="115" :perPage="25" size="lg" />

<div x-data="{ current: 2, last: 5, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-3.5 h-3.5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">2</span>
<span class="text-base-content/50 mx-1">/</span>
<span>5</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-sm)] min-w-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-3.5 h-3.5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">115</span> 筆中第 <span class="font-medium text-base-content">26</span>–<span class="font-medium text-base-content">50</span> 筆
    </p>
</div>
<div x-data="{ current: 2, last: 5, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">2</span>
<span class="text-base-content/50 mx-1">/</span>
<span>5</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-md)] min-w-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">115</span> 筆中第 <span class="font-medium text-base-content">26</span>–<span class="font-medium text-base-content">50</span> 筆
    </p>
</div>
<div x-data="{ current: 2, last: 5, baseUrl: '', pageParam: 'page', goToPage(page) { if (page &lt; 1 || page &gt; this.last || page === this.current) return; this.$dispatch('page-change', { page }); if (this.baseUrl) { const url = new URL(this.baseUrl, window.location.origin); url.searchParams.set(this.pageParam, page); window.location.href = url.toString(); } } }" class="inline-flex flex-col items-center gap-3">
<nav aria-label="分頁" class="flex shadow-[var(--shadow-box)]">
<button type="button" @click="goToPage(current - 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="上一頁"><svg class="w-5 h-5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15 5l-6 7l6 7"></path></svg></button>
<span class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content/50 border-base-content/10 cursor-default pointer-events-none font-normal"><span class="font-medium">2</span>
<span class="text-base-content/50 mx-1">/</span>
<span>5</span></span>
<button type="button" @click="goToPage(current + 1)" class="rounded-none first:rounded-l-[var(--radius-field)] last:rounded-r-[var(--radius-field)] inline-flex items-center justify-center font-medium transition-colors border-[length:var(--border)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 h-[var(--h-field-lg)] min-w-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)] gap-2.5 border-l-0 first:border-l has-[+[aria-current=page]]:border-r-0 bg-base-100 text-base-content border-base-content/10 hover:bg-base-200 focus-visible:ring-base-content cursor-pointer" aria-label="下一頁"><svg class="w-5 h-5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9 5l6 7l-6 7"></path></svg></button>
</nav>
<p class="text-sm text-base-content/60">
        共 <span class="font-medium text-base-content">115</span> 筆中第 <span class="font-medium text-base-content">26</span>–<span class="font-medium text-base-content">50</span> 筆
    </p>
</div>

page-change event (no baseUrl, Alpine $dispatch)

共 200 筆中第 51–75 筆

※ 在實際應用中，基本做法是透過 :paginator="$paginator" 傳入 Eloquent 的 LengthAwarePaginator（上例是直接傳入 current/last/total/perPage 的簡化範例）。