Pagination

Pagination with page navigation, next and previous links.

Examples

Default

More pages

<script setup>
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationPrevious
} from '@empathyds/vue'
</script>

<template>
  <Pagination :total="10" :sibling-count="1" show-edges :default-page="1">
    <PaginationContent v-slot="{ items }">
      <PaginationItem>
        <PaginationPrevious />
      </PaginationItem>
      <template v-for="(item, index) in items">
        <PaginationItem v-if="item.type === 'page'" :key="index" :value="item.value">
          {{ item.value }}
        </PaginationItem>
        <PaginationEllipsis v-else :key="item.type + index" :index="index" />
      </template>
      <PaginationItem>
        <PaginationNext />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

Props

Pagination

Prop	Type	Default	Description
count	number	-	The total number of items
total	number	0	The total number of pages
page	number	-	The current page
default-page	number	1	The default page
items-per-page	number	10	The number of items per page
sibling-count	number	1	The number of sibling pages to show
show-edges	boolean	false	Whether to show edge pages

Events

Pagination

Event	Payload	Description
update:page	number	Event handler called when the page changes.

Slots

Pagination

Slot	Description
default	The pagination content

PaginationContent

Slot	Description
default	The list of pagination items. Exposes { items }

PaginationItem

Slot	Description
default	The item content

PaginationPrevious

Slot	Description
default	The previous button content
icon	The icon content

PaginationNext

Slot	Description
default	The next button content
icon	The icon content

PaginationEllipsis

Slot	Description
default	The ellipsis content
icon	The icon content