Pagination

Features:

• Item links
• Active item
• Prev and next button

Usage

Set the total items using the total props.

<script setup>
import { Pagination } from 'gurunkit';
</script>

<template>
  <Pagination :total="5" />
</template>

12345

Active

Set the active item using the active props.

<script setup>
import { Pagination } from 'gurunkit';
</script>

<template>
  <Pagination :total="5" :active="2" />
</template>

12345

Active V-Model

Use v-model:active to bind the active item.

<script setup>
import { Pagination } from 'gurunkit';
import { ref } from 'vue';

const active = ref(1);
</script>

<template>
  <Pagination :total="5" v-model:active="active" />
</template>

12345

Change Event

Use the change event to detect when the active page changes.

<script setup>
import { Pagination } from 'gurunkit';
import { ref } from 'vue';

const active = ref(1);
const onChangePage = () => alert('page changed');
</script>

<template>
  <Pagination :total="5" v-model:active="active" @change="onChangePage" />
</template>

12345

API

Props

Name	Type	Required	Default	Description
total	number	✅	0	Total items
active	number	❌	null	Active item

Events

Name	Type	Description
update:active	number	active prop value is updated
change	void	active prop value is updated

Model Value

Name	Type	Description
active	number	Set active item