Naar inhoud
1.6k

Paginering

Gegenummerde paginalinks met knoppen voor ‘vorige’ en ‘volgende’ bij zoekresultaten, tabellen en archieven — in de neobrutalistische stijl met randen en schaduwen.

import {
  Pagination,
  PaginationContent,

Pagination hakt een lange resultatenlijst op in genummerde paginalinks met knoppen voor vorige en volgende. Er zit geen primitive onder — een nav-landmark om gewone ankertags heen, elk gerenderd via Button en vormgegeven volgens het neobrutalistische recept: dikke randen, scherpe schaduwen en vette typografie.

Ideaal voor:

  • Zoek- en overzichtspagina’s — productgrids, vacaturesites en gidsen waar gebruikers rechtstreeks naar pagina 12 springen.
  • Datatabellen — combineer de variant met alleen iconen met een rijen-per-pagina-selector in beheerweergaven.
  • Blog- en documentatiearchieven — echte <a>-links geven elke pagina een eigen crawlbare URL, en dat kan infinite scroll niet.

Installatie

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

Kopieer en plak de volgende code in je project.

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,
}

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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>

Compositie

Gebruik de volgende compositie om een Pagination op te bouwen:

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

Voorbeelden

Eenvoudig

Een eenvoudige paginering met alleen paginanummers.

import {
  Pagination,
  PaginationContent,

Alleen iconen

Gebruik alleen de knoppen voor vorige en volgende zonder paginanummers. Dit is handig voor datatabellen met een selector voor rijen per pagina.

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

Next.js

Standaard rendert de component <PaginationLink /> een <a />-tag.

Om de component <Link /> van Next.js te gebruiken, breng je de volgende wijzigingen aan in 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

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Changelog

RTL-ondersteuning

Als je upgradet vanaf een eerdere versie van de component Pagination, moet je de volgende wijzigingen aanbrengen om de prop text toe te voegen:

Werk PaginationPrevious bij.

  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>
    )
  }

Werk PaginationNext bij.

  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>
    )
  }

Toegankelijkheid

Pagination is navigatie met links, geen samengestelde widget, dus er bestaat geen apart WAI-ARIA-patroon — de native linksemantiek doet het werk. De root rendert een <nav>-landmark met aria-label="pagination", de actieve PaginationLink draagt aria-current="page", de knoppen voor vorige/volgende hebben expliciete aria-labels, en PaginationEllipsis is aria-hidden, met een alleen voor schermlezers hoorbare tekst ‘More pages’.

De toetsenbordinteracties zijn het native linkgedrag van de browser:

ToetsActie
Tab / Shift + TabVerplaatst de focus tussen de paginalinks en eruit
EnterVolgt de link met focus