Pagination

用于浏览页面的按钮或链接列表。

用法

使用default-page prop或v-model:page指令控制当前页面。

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

Pagination组件使用一些Button来显示页面，使用color，variant和size道具来样式化它们。

总计

使用total属性设置列表中的项目总数。

page

total

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" />
</template>

每页项目数

使用items-per-page属性将每页的项目数设置为10。

itemsPerPage

total

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>

同胞计数

使用sibling-count属性将要显示的兄弟节点数设置为2。

siblingCount

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>

显示边缘

使用show-edges属性总是显示省略号，第一页和最后一页。

showEdges

siblingCount

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>

显示控件

使用show-controls道具来显示第一个，上一个，下一个和最后一个按钮。

showControls

showEdges

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :show-controls="false" show-edges :total="100" />
</template>

Color

使用color属性将非活动控件的颜色设置为neutral。

color

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="primary" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="primary" :total="100" />
</template>

Variant

使用variant属性将非活动控件的变量设置为outline。

color

variant

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>

Active Color

使用active-color属性将活动控件的颜色设置为primary。

activeColor

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="neutral" :total="100" />
</template>

活动变体

使用active-variant prop将活动控件的变量. css设置为solid。

activeColor

activeVariant

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>

Size

使用size属性将controls.xml的大小设置为md。

size

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" size="xl" :total="100" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" size="xl" :total="100" />
</template>

禁用

使用disabled属性禁用分页控件。

disabled

<script setup lang="ts">
const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)
</script>

<template>
  <UPagination v-model:page="page" :total="100" disabled />
</template>

示例

带链接

使用to prop将按钮转换为链接。传递一个函数，该函数接收页码并返回路由目的地。

<script setup lang="ts">
const page = ref(5)

function to(page: number) {
  return {
    query: {
      page
    },
    hash: '#with-links'
  }
}
</script>

<template>
  <UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const page = ref(5)

function to(page: number) {
  return {
    query: {
      page
    },
    hash: '#with-links'
  }
}
</script>

<template>
  <UPagination v-model:page="page" :total="100" :to="to" :sibling-count="1" show-edges />
</template>

在这个例子中，我们添加了#with-links散列，以避免进入页面顶部。

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`firstIcon`	`appConfig.ui.icons.chevronDoubleLeft`	`any` The icon to use for the first page control.
`prevIcon`	`appConfig.ui.icons.chevronLeft`	`any` The icon to use for the previous page control.
`nextIcon`	`appConfig.ui.icons.chevronRight`	`any` The icon to use for the next page control.
`lastIcon`	`appConfig.ui.icons.chevronDoubleRight`	`any` The icon to use for the last page control.
`ellipsisIcon`	`appConfig.ui.icons.ellipsis`	`any` The icon to use for the ellipsis control.
`color`	`'neutral'`	`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"` The color of the pagination controls.
`variant`	`'outline'`	`"outline" \| "solid" \| "soft" \| "subtle" \| "ghost" \| "link"` The variant of the pagination controls.
`activeColor`	`'primary'`	`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"` The color of the active pagination control.
`activeVariant`	`'solid'`	`"outline" \| "solid" \| "soft" \| "subtle" \| "ghost" \| "link"` The variant of the active pagination control.
`showControls`	`true`	`boolean` Whether to show the first, previous, next, and last controls.
`size`		`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`to`		`(page: number): string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` A function to render page controls as links.
`defaultPage`		`number` The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
`disabled`		`boolean` When `true`, prevents the user from interacting with item
`itemsPerPage`	`10`	`number` Number of items per page
`page`		`number` The controlled value of the current page. Can be binded as `v-model:page`.
`showEdges`	`false`	`boolean` When `true`, always show first page, last page, and ellipsis
`siblingCount`	`2`	`number` Number of sibling should be shown around the current page
`total`	`0`	`number` Number of items in your list
`ui`		`{ root?: SlotClass; list?: SlotClass; ellipsis?: SlotClass; label?: SlotClass; first?: SlotClass; prev?: SlotClass; item?: SlotClass; next?: SlotClass; last?: SlotClass; }`

Slots

Slot	Type
`first`	`{}`
`prev`	`{}`
`next`	`{}`
`last`	`{}`
`ellipsis`	`{ ui: object; }`
`item`	`{ page: number; pageCount: number; item: { type: "ellipsis"; } \| { type: "page"; value: number; }; index: number; }`

Emits

Event	Type
`update:page`	`[value: number]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    pagination: {
      slots: {
        root: '',
        list: 'flex items-center gap-1',
        ellipsis: 'pointer-events-none',
        label: 'min-w-5 text-center',
        first: '',
        prev: '',
        item: '',
        next: '',
        last: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pagination: {
          slots: {
            root: '',
            list: 'flex items-center gap-1',
            ellipsis: 'pointer-events-none',
            label: 'min-w-5 text-center',
            first: '',
            prev: '',
            item: '',
            next: '',
            last: ''
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

NavigationMenu

A list of links that can be displayed horizontally or vertically.

Stepper

A set of steps that are used to indicate progress through a multi-step process.