Pagination 页码导航

用于页码导航场景的 MoriUI 组件。

导入

import { Pagination, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationList, PaginationNext, PaginationPrev } from 'moriui'

示例

概览

<script setup lang="ts">
  import {
    Pagination,
    PaginationEllipsis,
    PaginationItem,
    PaginationList,
    PaginationNext,
    PaginationPrev
  } from 'moriui'
</script>

<template>
  <Pagination :total="100">
    <PaginationList v-slot="{ items }">
      <PaginationPrev />
      <template v-for="item in items" :key="item.type === 'page' ? item.value : 'ellipsis'">
        <PaginationItem v-if="item.type === 'page'" :value="item.value" />
        <PaginationEllipsis v-else />
      </template>
      <PaginationNext />
    </PaginationList>
  </Pagination>
</template>

简洁

<script setup lang="ts">
  import { Pagination, PaginationItem, PaginationList } from 'moriui'
</script>

<template>
  <Pagination :total="5" :default-page="2">
    <PaginationList v-slot="{ items }">
      <template v-for="item in items" :key="item.type === 'page' ? item.value : 'ellipsis'">
        <PaginationItem v-if="item.type === 'page'" :value="item.value" />
      </template>
    </PaginationList>
  </Pagination>
</template>

仅图标

仅图标的分页按钮。

每页行数

<script setup lang="ts">
  import { ChevronLeft, ChevronRight } from '@lucide/vue'
  import {
    Field,
    FieldLabel,
    Pagination,
    PaginationList,
    PaginationNext,
    PaginationPrev,
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue

  } from 'moriui'
</script>

<template>
  <div class="flex items-center justify-between gap-4">
    <Field orientation="horizontal" class="w-fit">
      <FieldLabel>每页行数</FieldLabel>
      <Select default-value="25">
        <SelectTrigger class="w-20">
          <SelectValue />
        </SelectTrigger>
        <SelectContent align="start">
          <SelectGroup>
            <SelectItem value="10">
              10
            </SelectItem>
            <SelectItem value="25">
              25
            </SelectItem>
            <SelectItem value="50">
              50
            </SelectItem>
            <SelectItem value="100">
              100
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
    <Pagination class="mx-0 w-auto">
      <PaginationList>
        <PaginationPrev><ChevronLeft class="size-4" /></PaginationPrev>
        <PaginationNext><ChevronRight class="size-4" /></PaginationNext>
      </PaginationList>
    </Pagination>
  </div>
</template>

RTL

从右到左的分页导航。

<script setup lang="ts">
  import {
    DirectionProvider,
    Pagination,
    PaginationEllipsis,
    PaginationItem,
    PaginationList,
    PaginationNext,
    PaginationPrev
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Pagination :total="10">
      <PaginationList v-slot="{ items }">
        <PaginationPrev />
        <template v-for="item in items" :key="item.type === 'page' ? item.value : 'ellipsis'">
          <PaginationItem v-if="item.type === 'page'" :value="item.value" />
          <PaginationEllipsis v-else />
        </template>
        <PaginationNext />
      </PaginationList>
    </Pagination>
  </DirectionProvider>
</template>

使用说明

组合方式

Pagination 通过 List 组织 Item，Item 包含页码，可选 Ellipsis、First、Last、Prev、Next 等导航子组件。

RTL

方向由 DirectionProvider 控制。

变体

Pagination 没有视觉变体；当前页码通过 Reka UI 自动管理。

可访问性

Pagination 默认输出 role="navigation" 和 aria-label="Pagination"。列表使用 role="list"，当前页使用 aria-current="page"。导航按钮图标应提供 aria-label。

API 参考

属性	类型	默认值	说明
`PaginationList class`	`HTMLAttributes["class"]`	`undefined`	合并到页码列表的调用方类。
`PaginationItem class`	`HTMLAttributes["class"]`	`undefined`	合并到页码项的调用方类。
`PaginationPrev / Next href`	`string`	`undefined`	导航按钮的链接地址。
`PaginationEllipsis class`	`HTMLAttributes["class"]`	`undefined`	合并到省略号的调用方类。