Pagination
Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that's divided into multiple pages.
The total attribute sets the total amount of pages. If set to 0 (it’s default value) both ‘Previous’ and ‘Next’ links will be disabled.
<script setup lang="ts">import { VPagination } from '@vonage/vivid-api-vue';</script>
<template> <VPagination :total="20" /></template><vwc-pagination total="20"></vwc-pagination>The selected-index attribute sets the currently selected page.
The value is zero-indexed. It is set to 0 if total pages is 0.
<script setup lang="ts">import { VPagination } from '@vonage/vivid-api-vue';</script>
<template> <VPagination :total="20" :selected-index="5" /></template><vwc-pagination total="20" selected-index="5"></vwc-pagination>The size attribute sets the pagination’s buttons sizes.
<script setup lang="ts">import { VPagination } from '@vonage/vivid-api-vue';</script>
<template> <p>super-condensed (default)</p> <VPagination size="super-condensed" :total="20" /> <p>condensed</p> <VPagination size="condensed" :total="20" /> <p>normal</p> <VPagination size="normal" :total="20" /></template><p>super-condensed (default)</p><vwc-pagination size="super-condensed" total="20"></vwc-pagination><p>condensed</p><vwc-pagination size="condensed" total="20"></vwc-pagination><p>normal</p><vwc-pagination size="normal" total="20"></vwc-pagination>The shape attribute sets the pagination’s buttons shapes.
<script setup lang="ts">import { VPagination } from '@vonage/vivid-api-vue';</script>
<template> <p>rounded (default)</p> <VPagination shape="rounded" :total="20" /> <p>pill</p> <VPagination shape="pill" :total="20" /></template><p>rounded (default)</p><vwc-pagination shape="rounded" total="20"></vwc-pagination><p>pill</p><vwc-pagination shape="pill" total="20"></vwc-pagination>The nav-icons attribute changes the pagination’s “Previous” and “Next” buttons to be chevron icons.
<script setup lang="ts">import { VPagination } from '@vonage/vivid-api-vue';</script>
<template> <VPagination :total="20" nav-icons :selected-index="2" /></template><vwc-pagination total="20" nav-icons selected-index="2"></vwc-pagination>