Перейти к содержимому
1.6k

Пагинация

Ссылки на пронумерованные страницы с элементами управления «Предыдущая» и «Следующая» для результатов поиска, таблиц и архивов — в стиле необрутализма с использованием рамок и теней.

import {
  Pagination,
  PaginationContent,

Pagination разбивает длинный набор результатов на нумерованные ссылки страниц с controls «назад» и «вперёд». Под капотом нет примитива — landmark nav оборачивает обычные якоря, каждый через Button, и оформлен по рецепту необрутализма: толстые рамки, жёсткие тени и жирный шрифт.

Когда это пригодится:

  • Поиск и листинги — сетки товаров, доски вакансий, каталоги, где пользователь прыгает сразу на страницу 12.
  • Таблицы данных — icons-only вариант вместе с селектором rows-per-page в админке.
  • Архивы блога и docs — настоящие <a> дают каждой странице crawlable URL, чего infinite scroll не умеет.

Установка

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
npx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/pagination.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/pagination.json

Скопируйте и вставьте следующий код в свой проект.

components/ui/pagination.tsx
import * as React from "react"
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn("flex items-center gap-0.5", className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) {
  return (
    <Button
      asChild
      variant={isActive ? "default" : "ghost"}
      size={size}
      className={cn(className)}
    >
      <a
        aria-current={isActive ? "page" : undefined}
        data-slot="pagination-link"
        data-active={isActive}
        {...props}
      />
    </Button>
  )
}

function PaginationPrevious({
  className,
  text = "Previous",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn("pl-1.5!", className)}
      {...props}
    >
      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
      <span className="hidden sm:block">{text}</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  text = "Next",
  ...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn("pr-1.5!", className)}
      {...props}
    >
      <span className="hidden sm:block">{text}</span>
      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn(
        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <MoreHorizontalIcon />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}

Обновите пути импорта в соответствии с настройками вашего проекта.

Использование

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Композиция

Используйте следующую композицию, чтобы собрать Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext

Примеры

Простая

Простая пагинация только с номерами страниц.

import {
  Pagination,
  PaginationContent,

Только иконки

Используйте только кнопки «назад» и «вперёд» без номеров страниц. Это удобно для таблиц данных с выбором количества строк на странице.

import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,

Next.js

По умолчанию компонент <PaginationLink /> рендерит тег <a />.

Чтобы использовать компонент <Link /> из Next.js, внесите следующие изменения в pagination.tsx.

+ import Link from "next/link"
 
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
 
const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

RTL

Чтобы включить поддержку RTL в Neobrutalism, см. руководство по настройке RTL.

"use client"

import * as React from "react"

Журнал изменений

Поддержка RTL

Если вы обновляетесь с предыдущей версии компонента Pagination, вам нужно внести следующие изменения, чтобы добавить проп text:

Обновите PaginationPrevious.

  function PaginationPrevious({
    className,
+   text = "Previous",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to previous page"
        size="default"
        className={cn("cn-pagination-previous", className)}
        {...props}
      >
        <ChevronLeftIcon />
        <span className="cn-pagination-previous-text hidden sm:block">
-         Previous
+         {text}
        </span>
      </PaginationLink>
    )
  }

Обновите PaginationNext.

  function PaginationNext({
    className,
+   text = "Next",
    ...props
- }: React.ComponentProps<typeof PaginationLink>) {
+ }: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
    return (
      <PaginationLink
        aria-label="Go to next page"
        size="default"
        className={cn("cn-pagination-next", className)}
        {...props}
      >
-       <span className="cn-pagination-next-text hidden sm:block">Next</span>
+       <span className="cn-pagination-next-text hidden sm:block">{text}</span>
        <ChevronRightIcon />
      </PaginationLink>
    )
  }

Доступность

Pagination — навигация ссылками, а не composite-виджет, поэтому отдельного WAI-ARIA-паттерна нет — работают нативные семантики ссылок. Корень рендерит landmark <nav> с aria-label="pagination", активный PaginationLink несёт aria-current="page", controls «назад»/«вперёд» имеют явные aria-label, а PaginationEllipsis — aria-hidden с sr-only текстом «More pages».

Клавиатурные взаимодействия — нативное поведение ссылок браузера:

КлавишаДействие
Tab / Shift + TabПеремещать фокус между ссылками страниц и за пределы
EnterПерейти по ссылке в фокусе