Nuxt UI v3-alpha 已发布！

试用
组件

分页

GitHub
添加分页以处理页面。

使用

使用 v-model 来获取一个响应式的页面，以及一个代表项目总数的 total。你也可以使用 page-count 属性来定义每页的项目数，默认值为 10。

<script setup lang="ts">
const page = ref(1)
const items = ref(Array(55))
</script>

<template>
  <UPagination v-model="page" :page-count="5" :total="items.length" />
</template>

最大值

使用 max 属性来设置显示页面的最大值。默认值为 7，为最小值。

<template>
  <UPagination :max="5" :page-count="5" :total="100" :model-value="1" />
</template>

尺寸

使用 size 属性来更改按钮的大小。

<template>
  <UPagination size="sm" :model-value="1" :total="100" show-last show-first />
</template>

链接

使用 to 属性将按钮转换为链接。注意，它必须是一个接受页面号并返回路由目的地的函数。

1234510
<script setup lang="ts">
const page = ref(1)
const items = ref(Array(50))
</script>

<template>
  <UPagination
    v-model="page"
    :page-count="5"
    :total="items.length"
    :to="(page: number) => ({
      query: { page },
      // Hash is specified here to prevent the page from scrolling to the top
      hash: '#links'
    })"
  />
</template>

禁用

使用 disabled 属性来禁用所有按钮。

<template>
  <UPagination disabled :model-value="1" :total="100" show-last show-first />
</template>

活动/非活动

使用 active-button 和 inactive-button 属性来自定义分页的活动按钮和非活动按钮。

<template>
  <UPagination
    :active-button="{ variant: 'outline' }"
    :inactive-button="{ color: 'gray' }"
    :model-value="1"
    :total="100"
  />
</template>

上一页/下一页

使用 prev-button 和 next-button 属性来自定义分页的上一页和下一页按钮。

<template>
  <UPagination
    :prev-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'Prev', color: 'gray' }"
    :next-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Next', color: 'gray' }"
    :model-value="1"
    :total="100"
  />
</template>

首页/尾页

使用 first-button 和 last-button 属性来自定义分页的首页和尾页按钮。

<template>
  <UPagination
    :first-button="{ icon: 'i-heroicons-arrow-small-left-20-solid', label: 'First', color: 'gray' }"
    :last-button="{ icon: 'i-heroicons-arrow-small-right-20-solid', trailing: true, label: 'Last', color: 'gray' }"
    :model-value="1"
    :total="100"
    show-first
    show-last
  />
</template>

插槽

prev / next

使用 #prev 和 #next 插槽来设置上一页和下一页按钮的内容。

<script setup lang="ts">
const page = ref(1)
const items = ref(Array(55))
</script>

<template>
  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
    <template #prev="{ onClick, canGoPrev }">
      <UTooltip text="Previous page">
        <UButton
          icon="i-heroicons-arrow-small-left-20-solid"
          color="primary"
          :ui="{ rounded: 'rounded-full' }"
          class="rtl:[&_span:first-child]:rotate-180 me-2"
          :disabled="!canGoPrev"
          @click="onClick"
        />
      </UTooltip>
    </template>

    <template #next="{ onClick, canGoNext }">
      <UTooltip text="Next page">
        <UButton
          icon="i-heroicons-arrow-small-right-20-solid"
          color="primary"
          :ui="{ rounded: 'rounded-full' }"
          class="rtl:[&_span:last-child]:rotate-180 ms-2"
          :disabled="!canGoNext"
          @click="onClick"
        />
      </UTooltip>
    </template>
  </UPagination>
</template>

first / last

使用 #first 和 #last 插槽来设置首页和尾页按钮的内容。

<script setup lang="ts">
const page = ref(1)
const items = ref(Array(55))
</script>

<template>
  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
    <template #first="{ onClick, canGoFirst }">
      <UTooltip text="First page">
        <UButton
          icon="i-heroicons-arrow-uturn-left"
          color="primary"
          :ui="{ rounded: 'rounded-full' }"
          class="rtl:[&_span:first-child]:rotate-180 me-2"
          :disabled="!canGoFirst"
          @click="onClick"
        />
      </UTooltip>
    </template>

    <template #last="{ onClick, canGoLast }">
      <UTooltip text="Last page">
        <UButton
          icon="i-heroicons-arrow-uturn-right-20-solid"
          color="primary"
          :ui="{ rounded: 'rounded-full' }"
          class="rtl:[&_span:last-child]:rotate-180 ms-2"
          :disabled="!canGoLast"
          @click="onClick"
        />
      </UTooltip>
    </template>
  </UPagination>
</template>

属性

modelValue必填
数字
total必填
数字
size
按钮大小
config.default.size
"md""2xs""xs""sm""lg""xl"
max
数字
7
ui
{ wrapper?: string; base?: string; rounded?: string; default?: DeepPartial<{ size: string; activeButton: { color: "primary"; }; inactiveButton: { color: "white"; }; firstButton: { color: "white"; class: string; icon: string; }; lastButton: { ...; }; prevButton: { ...; }; nextButton: { ...; }; }, any>; } & { ...; } &...
{}
to
(page: number) => string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
null
divider
字符串
"\u2026"
pageCount
数字
10
activeButton
按钮
config.default.activeButton as Button
inactiveButton
按钮
config.default.inactiveButton as Button
firstButton
按钮
config.default.firstButton as Button
lastButton
按钮
config.default.lastButton as Button
prevButton
按钮
config.default.prevButton as Button
nextButton
按钮
config.default.nextButton as Button
disabled
布尔值
false
showFirst
布尔值
false
showLast
布尔值
false

配置

{
  wrapper: 'flex items-center -space-x-px',
  base: '',
  rounded: 'first:rounded-s-md last:rounded-e-md',
  default: {
    size: 'sm',
    activeButton: {
      color: 'primary'
    },
    inactiveButton: {
      color: 'white'
    },
    firstButton: {
      color: 'white',
      class: 'rtl:[&_span:first-child]:rotate-180',
      icon: 'i-heroicons-chevron-double-left-20-solid'
    },
    lastButton: {
      color: 'white',
      class: 'rtl:[&_span:last-child]:rotate-180',
      icon: 'i-heroicons-chevron-double-right-20-solid'
    },
    prevButton: {
      color: 'white',
      class: 'rtl:[&_span:first-child]:rotate-180',
      icon: 'i-heroicons-chevron-left-20-solid'
    },
    nextButton: {
      color: 'white',
      class: 'rtl:[&_span:last-child]:rotate-180',
      icon: 'i-heroicons-chevron-right-20-solid'
    }
  }
}

通知

在你的应用程序中显示一个吐司通知。

气泡

显示一个非模态对话框，它悬浮在触发元素周围。