Pagination

Pagination is used in tables to divide a large amount of data into several pages and serves as an alternative to lazy loading. Pagination inherits style and behavior from the checkbox button group.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=592-169308

Basic usage

Source code

<script setup>
  import { ref } from 'vue';
  import { AcvPagination } from '@acronis-platform/ui-component-library';

  const currentPage = ref(1);
</script>

<template>
  <AcvPagination
    v-model="currentPage"
    :total="7"
    :limit="1"
  />
</template>

Examples

With router

Source code

<script setup>
  import { computed, getCurrentInstance } from 'vue';
  import { createRouter, createWebHashHistory, useRoute, useRouter } from 'vue-router';
  import { AcvPagination, getAcvPaginationQuery } from '@acronis-platform/ui-component-library';

  const routers = createRouter({
    history: createWebHashHistory(),
    routes: [
      {
        path: '/',
        component: {
          template: '<div>Test</div>',
        },
      },
    ],
  });

  const { app } = getCurrentInstance().appContext;
  app.use(routers);

  const route = useRoute();
  const router = useRouter();
  const currentPage = computed(() => (route.query.page ? +route.query.page : 1));

  async function setActivePage(newPage) {
    await router.push({ query: getAcvPaginationQuery(route.query, newPage) });
  }
</script>

<template>
  <AcvPagination
    :total="20"
    :limit="1"
    :model-value="currentPage"
    @update:model-value="setActivePage"
  />
</template>

Related components

• Button

Props

Prop name	Description	Type	Values	Default
title	Title of the Pagination	string	-
description	Description of the Pagination	string	-

Events

Event name	Properties	Description
close	eventName string - The name of the event visible string - The visibility state of the component	Triggered when the component is closed

Slots

Name	Description	Bindings
default	The default slot content
description	The description slot content