MazPagination

MazPagination lets users navigate between the pages of a list or a table, with first, previous, next and last buttons and the current page in v-model

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

This component can be translated globally using the MazUi plugin.

Basic usage

v-model="1"

<script lang="ts" setup>
import { MazPagination, type MazPaginationProps } from 'maz-ui/components'

import { ref } from 'vue'

const currentPage = ref(1)

const props: MazPaginationProps = {
  totalPages: 10,
  activeColor: 'contrast',
}
</script>

<template>
  <MazPagination v-bind="props" v-model="currentPage" size="md" />
</template>

Sizes

<MazPagination v-bind="props" v-model="currentPage" size="xs" />
<MazPagination v-bind="props" v-model="currentPage" size="sm" />
<MazPagination v-bind="props" v-model="currentPage" size="md" />
<MazPagination v-bind="props" v-model="currentPage" size="lg" />
<MazPagination v-bind="props" v-model="currentPage" size="xl" />

Colors

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model The current page number.	number	No	1	-
button-props	Props apply to the MazBtn components.	Partial<MazBtnProps>	No	-	-
active-color	Color of the active button.	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"	No	"surface"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent' | 'surface'
size	Size of the buttons.	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	'md'	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
total-pages	Total number of pages.	number	Yes	10	-
page-range	Number of buttons to display before and after the current page.	number	No	1	-
loading	Enable loading state of current button	boolean	No	false	-

Events

Event name	Payload	Description
update:model-value	value: number

Slots

Name	Description	Bindings
first-page-sr	Accessible text for screen reader of the previous page button	page number - first page number
previous-page-sr	Accessible text for screen reader of the first page button	page number - previous page number
page-sr	Accessible text for screen reader of the current page button	page number - current page number
next-page-sr	Accessible text for screen reader of the next page button	page number - next page number
last-page-sr	Accessible text for screen reader of the last page button	page number - last page number