MazPagination

MazPagination is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

v-model="1"

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

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

  import { ref } from 'vue'

  const currentPage = ref(1)

  const props: Props = {
    resultsSize: 100,
    totalPages: 10,
    activeColor: 'primary',
  }
</script>

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, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	@model The current page number.	number	-	1
buttonProps	Props apply to the MazBtn components.	Partial	-	undefined
resultsSize	Number of results in this page. Useful for accessibility to set aria-setsize attribute. Partial of MazBtn props.	number	-	undefined
activeColor	Color of the active button.	Color	-	'primary'
size	Color of the active button.	Size	-	'md'
totalPages	Total number of pages.	number	-
pageRange	Number of buttons to display before and after the current page.	number	-	2
loading	Enable loading state of current button	boolean	-

Events

Event name	Properties	Description
update:model-value	value number - new page number	Emitted when the current page number is changed.

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