Nuxt Pagination - Argon

The ArgonPagination helps you to create a beautiful pagination list with its items.

Demo

<template>
 <ArgonPagination>
  <ArgonPaginationItem prev />
  <ArgonPaginationItem label="1" active />
  <ArgonPaginationItem label="2" disabled />
  <ArgonPaginationItem label="3" />
  <ArgonPaginationItem next />
 </ArgonPagination>
</template>

1<template>
2 <ArgonPagination>
3  <ArgonPaginationItem prev />
4  <ArgonPaginationItem label="1" active />
5  <ArgonPaginationItem label="2" disabled />
6  <ArgonPaginationItem label="3" />
7  <ArgonPaginationItem next />
8 </ArgonPagination>
9</template>

Props Information

Name	Type	Default	Description
slot	node		The `ArgonPagination` has a default slot that receives `ArgonPaginationItem` as node.
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Used to set the background of the `ArgonPagination`.
size	'sm''md''lg'	md	Used to set the size of the `ArgonPagination`.
label	string		Used to set `label` of the `ArgonPaginationItem`.
active	bool	false	Used to mark the `ArgonPaginationItem` as active.
disabled	bool	false	Used to mark the `ArgonPaginationItem` as disabled.
prev	bool	false	Used to add left-arrow to the `ArgonPaginationItem`. Avoid using it with the `label`.
next	bool	false	Used to add right-arrow to the `ArgonPaginationItem`. Avoid using it with the `label`.

Sizes

<template>
 <ArgonPagination color="success" size="sm">
  <ArgonPaginationItem prev />
  <ArgonPaginationItem label="1" active />
  <ArgonPaginationItem label="2" />
  <ArgonPaginationItem label="3" />
  <ArgonPaginationItem next />
 </ArgonPagination>

<ArgonPagination color="primary" size="md">
 <ArgonPaginationItem prev />
 <ArgonPaginationItem label="1" active />
 <ArgonPaginationItem label="2" />
 <ArgonPaginationItem label="3" />
 <ArgonPaginationItem next />
</ArgonPagination>

 <ArgonPagination color="info" size="lg">
  <ArgonPaginationItem prev />
  <ArgonPaginationItem label="1" active />
  <ArgonPaginationItem label="2" />
  <ArgonPaginationItem label="3" />
  <ArgonPaginationItem next />
 </ArgonPagination>
</template>

1<template>
2 <ArgonPagination color="success" size="sm">
3  <ArgonPaginationItem prev />
4  <ArgonPaginationItem label="1" active />
5  <ArgonPaginationItem label="2" />
6  <ArgonPaginationItem label="3" />
7  <ArgonPaginationItem next />
8 </ArgonPagination>
9
10<ArgonPagination color="primary" size="md">
11 <ArgonPaginationItem prev />
12 <ArgonPaginationItem label="1" active />
13 <ArgonPaginationItem label="2" />
14 <ArgonPaginationItem label="3" />
15 <ArgonPaginationItem next />
16</ArgonPagination>
17
18 <ArgonPagination color="info" size="lg">
19  <ArgonPaginationItem prev />
20  <ArgonPaginationItem label="1" active />
21  <ArgonPaginationItem label="2" />
22  <ArgonPaginationItem label="3" />
23  <ArgonPaginationItem next />
24 </ArgonPagination>
25</template>