Pagination

EPagination uses a numbering system to make it simple for users to browse a webpage. It divides a webpage into many pages, making it easier for viewers to locate what they're searching for. Demo Here

Usage

<template>
  <EPagination v-model="page" :totalCount="5"/>
</template>

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

Props

For EPagination component, the following props are available:

Prop	Type	Default	Note
modelValue	Number	-	Current page state
totalCount	Number	5	Specifies pagination length.
disabled	Boolean	false	Disables the pagination buttons.
rounded	Boolean	false	It creates a circular pagination buttons.
square	Boolean	false	Removes rounded corners of the element.
siblingCount	Number	1	Specifies the number of sibling buttons when the limit is exceeded
size	String	"md"	The EPagination element has three predefined sizes: sm, md, lg.
customColor	String	-	A custom color in rgb format is applied to the btn (e.g, customColor="101, 89, 204").
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container.
nextIcon	Object	-	Customizes the next icon of the pagination. More Info about icons here.
prevIcon	Object	-	Customizes the previous icon of the pagination. More Info about icons here.
color	String	"primary"	The given color is applied to the pagination buttons - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	Pagination buttons can be represented in two ways: fill, alternate, outline ,text. alternate displays the btn with a light background, outline draws a border around an element and text displays the btn with only text and no background color.

Emits

The EPagination component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.