Pagination

Add a pagination to handle pages.

Usage

Use a v-model to get a reactive page alongside a total which represents the total of items. You can also use the page-count prop to define the number of items per page which defaults to 10.

<script setup>
import {ref} from 'vue'

const page = ref(1)
const items = ref(Array(55))
</script>

<template>
  <s-pagination v-model="page" :page-count="5" :total="items.length"/>
</template>

Max

Use the max prop to set a maximum of displayed pages. Defaults to 7, being the minimum.

<template>
  <s-pagination :max="5" :page-count="5" :total="100" :model-value="1" />
</template>

Size

Use the size prop to change the size of the buttons.

<template>
  <s-pagination size="sm" :model-value="1" :total="100" show-last show-first />
</template>

Active / Inactive

Use the active-button and inactive-button props to customize the active and inactive buttons of the Pagination.

<template>
  <s-pagination
      :active-button="{ variant: 'outline' }"
      :inactive-button="{ color: 'gray' }"
      :model-value="1"
      :total="100"
  />
</template>