分页

以分页格式展示数据，并提供页面间的导航功能。

View code

功能特点

支持快速跳转到首页或末页
可配置是否始终显示边缘页码

安装

通过命令行安装该组件。

$ 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 参考

Root

包含分页组件的所有部件。

Prop	Default	Type
`as`	`'nav'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultPage`	`1`	`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*`		`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

Emit	Payload
`update:page`	`[value: number]` Event handler called when the page value changes

Slots (default)	Payload
`page`	`number` Current page state
`pageCount`	`number` Number of pages

List

用于显示页码列表，同时使分页组件可供辅助技术访问。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Slots (default)	Payload
`items`	`{ type: 'ellipsis'; } \| { type: 'page'; value: number; }` Pages item

Item

用于渲染切换当前页面的按钮。

Data Attribute	Value
`[data-selected]`	`"true" \| ""`
`[data-type]`	`"page"`

Ellipsis

当列表较长且仅设置了少量 siblingCount 并且 showEdges 设置为 true 时的占位元素。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-type]`	`"ellipsis"`

First

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Last

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

示例

带省略号

您可以添加 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>

键盘交互

Key	Description
`Tab`	将焦点移动到下一个可聚焦元素
`Space`	当焦点位于任意触发器上时，触发选定页面或箭头导航
`Enter`	当焦点位于任意触发器上时，触发选定页面或箭头导航

分页 ​

功能特点 ​

安装 ​

结构剖析 ​

API 参考 ​

Root ​

List ​

Item ​

Ellipsis ​

First ​

Prev ​

Next ​

Last ​

示例 ​

带省略号 ​

带首页/末页按钮 ​

以编程方式控制页面 ​

键盘交互 ​

分页