Hire us

Paging

<script lang="ts" setup>
import { NNPaging } from "@fronntui/vue";
import { ref } from "vue";


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


<template>
  <NNPaging v-model="page" :entries="3" :total="48" />


  <NNPaging v-model="page" :entries="5" :total="48" />


  <NNPaging
    v-model="page"
    :entries="5"
    :total="48"
    url="https://www.fronntui.pro/components/paging/"
    page-param="p"
    prevent-click
  />
</template>

Props

Name
Type
modelValue
number

The current page. Defaults to 1.

total
number

The total number of pages. Defaults to 0.

entries
number

Number of pages to show as individual buttons. Defaults to 5. The component always centers the displayed range, which means that odd numbers work best.

url
string?

If set, the buttons will be a tags with href set to the given URL and a corresponding page query parameter. See pageParam prop.

pageParam
string?

When using links, this prop will be used as page query parameter. Defaults to page.

preventClick
boolean?

Whether button clicks shall be prevented. This can be useful when using links, but the update event shall be handled separately. Disabled by default.

Events

Name
Payload
update:modelValue
number

Fired after the modelValue ( = page) has been changed.

© 2024  inniti