Reka UI 标志Reka
backdrop
示例
组件

分页

以分页格式显示数据，并提供页面之间的导航。

功能

  • 启用快速访问第一页或最后一页
  • 启用常时显示边缘，或不显示

安装

从命令行安装此组件。

sh
$ npm add reka-ui

结构

导入所有部分并将其组合。

vue
<script setup>
import { PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot } from 'reka-ui'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <PaginationFirst />
      <PaginationPrev />
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
      <PaginationNext />
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

API 参考

根

包含所有分页组件部分。

属性默认类型
as
'nav'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

defaultPage
1
数字

初始渲染时应激活的页面值。

当您不需要控制值状态时使用。

disabled
布尔值

当为 true 时，阻止用户与项目交互

itemsPerPage*
数字

每页项数

page
数字

当前页的受控值。可绑定为 v-model:page。

showEdges
false
布尔值

当 true 时，总是显示第一页、最后一页和省略号

siblingCount
2
数字

当前页周围应显示的相邻页码数量

total
0
数字

列表中的项数

事件触发载荷
update:page
[value: number]

当页码值改变时调用的事件处理函数

插槽（默认）载荷
page
数字

当前页面状态

pageCount
数字

总页数

列表

用于显示页码列表。它也使分页功能可供辅助技术访问。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

插槽（默认）载荷
items
{ type: 'ellipsis'; } | { type: 'page'; value: number; }

页面项

项

用于渲染更改当前页面的按钮。

数据属性值
[data-selected]"true" | ""
[data-type]"page"

省略号

当列表很长，且 siblingCount 值设置得很小、showEdges 设置为 true 时的占位符元素。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

数据属性值
[data-type]"ellipsis"

首页

将页码值设置为 1 的触发器

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

上一页

将页码值设置为上一页的触发器

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

下一页

将页码值设置为下一页的触发器

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

尾页

将页码值设置为最后一页的触发器

属性默认类型
as
'button'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

示例

带省略号

您可以添加 PaginationEllipsis 作为更多前后项的视觉提示。

vue
<script setup lang="ts">
import { PaginationEllipsis, PaginationList, PaginationListItem, PaginationRoot } from 'reka-ui'
</script>

<template>
  <PaginationRoot>
    <PaginationList v-slot="{ items }">
      <template v-for="(page, index) in items">
        <PaginationListItem
          v-if="page.type === 'page'"
          :key="index"
        />
        <PaginationEllipsis
          v-else
          :key="page.type"
          :index="index"
        >
          &#8230;
        </PaginationEllipsis>
      </template>
    </PaginationList>
  </PaginationRoot>
</template>

带首页/尾页按钮

您可以添加 PaginationFirst 允许用户导航到第一页，或 PaginationLast 导航到最后一页。

vue
<script setup lang="ts">
import { PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationRoot } from 'reka-ui'
</script>

<template>
  <PaginationRoot>
    <PaginationList>
      <PaginationFirst />
      ...
      <PaginationLast />
    </PaginationList>
  </PaginationRoot>
</template>

编程式控制页面

您可以通过传入响应式值来控制当前页面。

vue
<script setup lang="ts">
import { PaginationRoot } from 'reka-ui'
import { ref } from 'vue'
import { Select } from './custom-select'

const currentPage = ref(1)
</script>

<template>
  <Select v-model="currentPage" />
  <PaginationRoot v-model:page="currentPage">
    ...
  </PaginationRoot>
</template>

键盘交互

键描述
Tab
将焦点移动到下一个可聚焦元素。
空格键
当焦点在任何触发器上时，触发选中页面或箭头导航
回车键
当焦点在任何触发器上时，触发选中页面或箭头导航