Pagination

A Warcraft-themed page navigation component with gold border-image styled links, Previous/Next buttons, and ellipsis support.

Standard

First Page

Last Page

Many Pages

Usage

<script>
  import {
    Pagination, PaginationContent, PaginationItem,
    PaginationLink, PaginationPrevious,
    PaginationNext, PaginationEllipsis
  } from 'warcraftcn-ui-svelte';
</script>

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive={true}>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Props

PaginationLink

Prop	Type	Default
isActive	boolean	false
disabled	boolean	false
href	string	—

PaginationPrevious / PaginationNext

Prop	Type	Default
href	string	""
disabled	boolean	false