pagination

Pagination with circle buttons.

Загрузка превью…

src/pagination/c-pagination-4.vue

<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
</script>

<template>
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" class="rounded-full" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" class="rounded-full">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" :is-active="true" class="rounded-full">2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" class="rounded-full">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" class="rounded-full" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

Установка

npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-pagination-4.json

Зависимости реестра

Источник: порт из ReUI (Keenthemes, MIT)