Pagination
Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that's divided into multiple pages.
import { VPagination } from '@vonage/vivid-api-vue';
<VPagination :total="10" />
import { registerPagination } from '@vonage/vivid-api';
registerPagination('your-prefix');
import { registerPagination } from '@vonage/vivid-api';
registerPagination('your-prefix');
<your-prefix-pagination total="10"></your-prefix-pagination>
| Property | Type | Default | Description |
|---|
| navIcons | boolean | | |
selectedIndex
(modelValue) | number | | |
| shape | 'rounded' | 'pill' | | The shape the pagination should have. |
| size | 'condensed' | 'normal' | 'super-condensed' | | The size the pagination should have. |
| total | number | | |
| Property | Type | Default | Description |
|---|
| nav-icons | boolean | | |
| selected-index | number | | |
| shape | 'rounded' | 'pill' | | The shape the pagination should have. |
| size | 'condensed' | 'normal' | 'super-condensed' | | The size the pagination should have. |
| total | number | | |
| Name | Type | Description |
|---|
| pagination-change | CustomEvent<{selectedIndex: number, total: number, oldIndex: number}> | Fires when the page changes. |
| Name | Type | Description |
|---|
| pagination-change | CustomEvent<{selectedIndex: number, total: number, oldIndex: number}> | Fires when the page changes. |
