Pagination

Stable

Display clickable page numbers with the current page highlighted.

<script setup lang="ts">
import { ref } from 'vue'
import { HPagination } from '@holistics/design-system'

const page = ref(1)
</script>

<template>
  <HPagination
    v-model="page"
    :pages="100"
  />
</template>

API

Pass-through: <nav>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
pages *	number
modelValue *	number
max	number = 7	Maximum number of pages displayed (including the ellipsis ...). Minimal value: 5
disabled	boolean

Events

Name	Parameters	Description
@update:modelValue	[currPage: number]