Lzh on GitHub

Pagination

PaginationGitHub
一个用于在页面之间导航的按钮或链接列表。

用法

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

Pagination 组件使用一些 Button 来显示页面，使用 color、variant 和 size props 来设置它们的样式。

总数 (Total)

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

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

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

每页项目数 (Items Per Page)

使用 items-per-page prop 设置每页显示的项目数。默认为 10。

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

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

兄弟数量 (Sibling Count)

使用 sibling-count prop 设置要显示的兄弟页码数量。默认为 2。

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

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

显示边缘 (Show Edges)

使用 show-edges prop 始终显示省略号、第一页和最后一页。默认为 false。

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

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

显示控制 (Show Controls)

使用 show-controls prop 显示第一页、上一页、下一页和最后一页按钮。默认为 true。

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

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

颜色 (Color)

使用 color prop 设置非活动控件的颜色。默认为 neutral。

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

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

变体 (Variant)

使用 variant prop 设置非活动控件的变体。默认为 outline。

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

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

活动颜色 (Active Color)

使用 active-color prop 设置活动控件的颜色。默认为 primary。

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

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

活动变体 (Active Variant)

使用 active-variant prop 设置活动控件的变体。默认为 solid。

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

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

尺寸 (Size)

使用 size prop 设置控件的尺寸。默认为 md。

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

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

禁用 (Disabled)

使用 disabled prop 禁用分页控件。

<script setup lang="ts">
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>
在此示例中，我们添加 #with-links hash 以避免跳转到页面顶部。

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

firstIcon

appConfig.ui.icons.chevronDoubleLeft

string

The icon to use for the first page control.

prevIcon

appConfig.ui.icons.chevronLeft

string

The icon to use for the previous page control.

nextIcon

appConfig.ui.icons.chevronRight

string

The icon to use for the next page control.

lastIcon

appConfig.ui.icons.chevronDoubleRight

string

The icon to use for the last page control.

ellipsisIcon

appConfig.ui.icons.ellipsis

string

The icon to use for the ellipsis control.

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

The color of the pagination controls.

variant

'outline'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

The variant of the pagination controls.

activeColor

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

The color of the active pagination control.

activeVariant

'solid'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

The variant of the active pagination control.

showControls

true

boolean

Whether to show the first, previous, next, and last controls.

size

"md" | "xs" | "sm" | "lg" | "xl"

to

(page: number): string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

A function to render page controls as links.

disabled

boolean

When true, prevents the user from interacting with item

page

number

The controlled value of the current page. Can be binded as v-model:page.

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.

itemsPerPage

10

number

Number of items per 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?: ClassNameValue; list?: ClassNameValue; ellipsis?: ClassNameValue; label?: ClassNameValue; first?: ClassNameValue; prev?: ClassNameValue; item?: ClassNameValue; next?: ClassNameValue; last?: ClassNameValue; }

Slots

Slot Type
first

{}

prev

{}

next

{}

last

{}

ellipsis

{}

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: ''
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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: ''
          }
        }
      }
    })
  ]
})

NavigationMenu

一个可以水平或垂直显示的链接列表。

PinInput

一个用于输入 PIN 码的输入元素。