PrevNext 上下页

页面底部通往相邻两页的一对链接。

import { PrevNext, PrevNextLink } from '@hina-ui/react'

export default function Demo() {
  return (
    <PrevNext className="w-full max-w-2xl">
      <PrevNextLink direction="prev" href="#">
        第 II 章
      </PrevNextLink>
      <PrevNextLink direction="next" href="#">
        第 IV 章
      </PrevNextLink>
    </PrevNext>
  )
}

tsx

用法

import { PrevNext, PrevNextLink } from '@hina-ui/react'

PrevNext 是导航地标与两栏容器，PrevNextLink 是其中一侧的链接。direction 必填，取 prev 或 next，它决定链接落在哪一栏、箭头朝向，以及默认的提示文字。

children 是目标页面的标题，提示文字（「上一页」「下一页」）由组件按 direction 与界面语言给出。

import { PrevNext, PrevNextLink } from '@hina-ui/react'

export default function Demo() {
  return (
    <PrevNext className="w-full max-w-2xl">
      <PrevNextLink direction="prev" href="#">
        Breadcrumb
      </PrevNextLink>
      <PrevNextLink direction="next" href="#">
        Splitter
      </PrevNextLink>
    </PrevNext>
  )
}

tsx

它用于线性阅读顺序中的前后相邻页，例如文档的上下篇、小说的上下章。分页器与筛选结果的翻页是另一回事，不用这个组件。

示例

只有一侧

首尾两页只有一个方向可去，此时只放一个 PrevNextLink 即可。next 始终占据右栏，因此单独出现时仍然靠右，与两侧齐全时的位置一致。

只有下一项

只有上一项

import { PrevNext, PrevNextLink, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="lg" className="w-full max-w-2xl">
      <Stack gap="sm">
        <Text size="sm" tone="faint">
          只有下一项
        </Text>
        <PrevNext>
          <PrevNextLink direction="next" href="#">
            第 I 章
          </PrevNextLink>
        </PrevNext>
      </Stack>

      <Stack gap="sm">
        <Text size="sm" tone="faint">
          只有上一项
        </Text>
        <PrevNext>
          <PrevNextLink direction="prev" href="#">
            第十二章 终章
          </PrevNextLink>
        </PrevNext>
      </Stack>
    </Stack>
  )
}

tsx

文案

PrevNextLink 的 label 覆盖提示文字，PrevNext 的 label 覆盖导航地标的无障碍名。两者都有随界面语言给出的默认值，按内容层级改写即可，例如把「上一页」改为「上一卷」。

import { PrevNext, PrevNextLink } from '@hina-ui/react'

export default function Demo() {
  return (
    <PrevNext label="卷内翻页" className="w-full max-w-2xl">
      <PrevNextLink direction="prev" label="上一卷" href="#">
        第二卷
      </PrevNextLink>
      <PrevNextLink direction="next" label="下一卷" href="#">
        第四卷
      </PrevNextLink>
    </PrevNext>
  )
}

tsx

路由链接

as 指定渲染为何种元素，默认为 a。传入 next/link 等路由组件即可获得客户端跳转，href 等属性会透传过去。Server Component 无法把组件传给 as，这类组合需要放在 'use client' 模块中。

'use client'

import NextLink from 'next/link'
import { PrevNext, PrevNextLink } from '@hina-ui/react'

export default function Demo() {
  return (
    <PrevNext className="w-full max-w-2xl">
      <PrevNextLink direction="prev" as={NextLink} href="/components/nav-link">
        NavLink
      </PrevNextLink>
      <PrevNextLink direction="next" as={NextLink} href="/components/anchor">
        Anchor
      </PrevNextLink>
    </PrevNext>
  )
}

tsx

行为

窄屏单栏排布，sm 断点及以上分为两栏。
prev 内容靠左，next 内容靠右，箭头分别位于文字的外侧。
next 恒定占据右栏，单独出现时不会滑到左侧。
链接带 rel="prev" 或 rel="next"，供搜索引擎与浏览器识别阅读顺序。
点击时从落点扩散一圈涟漪。

API

PrevNext

属性	类型	默认值	说明
`label`	`string`	取自界面语言	导航地标的无障碍名
`className`	`string`	—	追加到根元素的类

属性	说明
`children`	一个或两个方向的链接

PrevNextLink

属性	类型	默认值	说明
`direction`	`'prev' \| 'next'`	必填	方向，决定栏位、箭头与文案
`label`	`string`	取自界面语言	提示文字
`as`	`string \| Component`	`'a'`	渲染成的元素或组件
`asChild`	`boolean`	`false`	由子元素承担渲染
`className`	`string`	—	追加到根元素的类

其余属性透传到实际渲染的元素上，例如 href，或者路由组件自己的属性。

属性	说明
`children`	目标页面的标题