admin/registry
Admin 元件

Pagination

參考API
分頁導覽。頁碼、資訊區、每頁筆數選擇。

安裝

Terminal
pnpm dlx shadcn-vue add @admin/pagination
import {  AdminPagination,  AdminPaginationContent,  AdminPaginationEllipsis,  AdminPaginationFirst,  AdminPaginationInfo,  AdminPaginationItem,  AdminPaginationLast,  AdminPaginationNext,  AdminPaginationPerPage,  AdminPaginationPrevious,} from '@/components/admin/pagination'

用法

<script setup lang="ts">import { ref } from 'vue'import {  AdminPagination,  AdminPaginationContent,  AdminPaginationEllipsis,  AdminPaginationItem,  AdminPaginationNext,  AdminPaginationPrevious} from '@/components/admin/pagination'​const page = ref(1)</script>​<template>  <admin-pagination    v-model:page="page"    :items-per-page="10"    :show-edges="true"    :sibling-count="1"    :total="100"  >    <admin-pagination-content v-slot="{ items }">      <admin-pagination-previous />      <template v-for="(item, idx) in items" :key="idx">        <admin-pagination-item v-if="item.type === 'page'" :value="item.value">{{          item.value        }}</admin-pagination-item>        <admin-pagination-ellipsis v-else />      </template>      <admin-pagination-next />    </admin-pagination-content>  </admin-pagination></template>

場景

完整樣式（含資訊 + 每頁筆數）

<script setup lang="ts">import { ref, watch } from 'vue'import {  AdminPagination,  AdminPaginationContent,  AdminPaginationEllipsis,  AdminPaginationFirst,  AdminPaginationInfo,  AdminPaginationItem,  AdminPaginationLast,  AdminPaginationNext,  AdminPaginationPerPage,  AdminPaginationPrevious} from '@/components/admin/pagination'​const page = ref(3)const itemsPerPage = ref(10)​watch(itemsPerPage, () => {  page.value = 1})</script>​<template>  <admin-pagination v-model:items-per-page="itemsPerPage" v-model:page="page" :total="235">    <admin-pagination-info :total="235" />    <admin-pagination-content v-slot="{ items }">      <admin-pagination-first />      <admin-pagination-previous />      <template v-for="(item, index) in items" :key="index">        <admin-pagination-item v-if="item.type === 'page'" :value="item.value">          {{ item.value }}        </admin-pagination-item>        <admin-pagination-ellipsis v-else :index="index" />      </template>      <admin-pagination-next />      <admin-pagination-last />    </admin-pagination-content>    <admin-pagination-per-page v-model="itemsPerPage" :options="[10, 20, 50, 100]" />  </admin-pagination></template>

API 參考

組成

<template>  <admin-pagination v-model:page="page" :items-per-page="perPage" :total="total">    <admin-pagination-content>      <admin-pagination-first />      <admin-pagination-previous />      <admin-pagination-item :value="1" />      <admin-pagination-ellipsis />      <admin-pagination-next />      <admin-pagination-last />    </admin-pagination-content>    <admin-pagination-info />    <admin-pagination-per-page v-model="perPage" />  </admin-pagination></template>

admin-pagination

Props

名稱型別預設值說明
pagenumber | undefined—The controlled value of the current page. Can be binded as `v-model:page`.
defaultPagenumber | undefined—The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
itemsPerPage*number—Number of items per page
totalnumber | undefined—Number of items in your list
siblingCountnumber | undefined—Number of sibling should be shown around the current page
disabledboolean | undefined—When `true`, prevents the user from interacting with item
showEdgesboolean | undefined—When `true`, always show first page, last page, and ellipsis
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

* 代表必填

Events

名稱Payload說明
update:pagenumber—

Slots

名稱Bindings說明
default{ page: number; pageCount: number; }—

admin-pagination-item

Props

名稱型別預設值說明
value*number—Value for the page
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

* 代表必填

Slots

名稱Bindings說明
default{}—

admin-pagination-info

Props

名稱型別預設值說明
totalnumber | undefined—顯示總筆數
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{ pageCount: number; total?: number | undefined; }—

admin-pagination-per-page

Props

名稱型別預設值說明
optionsnumber[] | undefined[10, 20, 50, 100]每頁筆數選項
labelFormat((value: number) => string) | undefined—自訂選項 label 格式化函式
classClassValue—根元素之自訂 class
modelValue*number——

* 代表必填

Events

名稱Payload說明
update:modelValuenumber—

admin-pagination-content

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{ items: ({ type: "ellipsis"; } | { type: "page"; value: number; })[]; }—

admin-pagination-ellipsis

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{}—

admin-pagination-first

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{}—

admin-pagination-last

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{}—

admin-pagination-next

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{}—

admin-pagination-previous

Props

名稱型別預設值說明
asChildboolean | undefined—Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
asglobalThis.Component | AsTag | undefined"div"The element or component this component should render as. Can be overwritten by `asChild`.
classClassValue—根元素之自訂 class

Slots

名稱Bindings說明
default{}—

更新紀錄

  • fix: 補上 Vue 核心 API 的顯式 import3c2c030
  • BREAKING feat!: 收斂為 compound + type-safe，displayValue 取代 options12d3b34
  • BREAKING refactor!: 對齊 shadcn-vue combobox 分件結構並收斂選取狀態a2fc6b7
  • fix: 修正當前頁高亮並在切換每頁筆數時復位頁碼5d98df2
  • refactor: 將剩餘 lucide-vue-next icon 遷移至 @tabler/icons-vue 並移除依賴1d9d1e4

Overlay

程式化開啟 Dialog、Drawer 等浮層。可動態更新 props；結果以 Promise 回傳。

Pdf Viewer

內嵌 PDF 檢視器（EmbedPDF）。