MazPagination

MazPagination is a standalone component

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 = {
  resultsSize: 100,
  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	undefined	-
results-size	Number of results in this page. Useful for accessibility to set aria-setsize attribute. Partial of MazBtn props.	number	No	undefined	-
active-color	Color of the active button.	MazColor | "background"	No	contrast	contrast', 'primary', 'secondary', 'info', 'success', 'warning', 'destructive', 'accent', 'background
size	Size of the buttons.	MazSize	No	md	mini', 'xs', 'sm', 'md', 'lg', 'xl
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	-

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