Pagination

State belongs to the parent. Compose this component with the props and slots below.

Preview

Open in the playground

Usage

PaginationExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzPagination } from '@chrisdalbano/forza-ui'
const page = ref<number>(1)
</script>

<template>
  <FzPagination v-model="page" :total="100" :page-size="10" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
total	number	Yes	None
pageSize	number | undefined	No	5
label	string | undefined	No	"Pagination"
modelValue	number	Yes	None

Events and state

v-model: number (1-based)

• update:modelValue: [value: number]

Slots

none

Add from source

forza add pagination

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.