pagination
Pagination without labels.
Pagination without labels.
Загрузка превью…
src/pagination/c-pagination-2.vue
<!--
Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
(lucide-react v0.545.0 "chevron-left"/"chevron-right") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationLink } from "@/components/ui/pagination"
</script>
<template>
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationLink href="#" aria-label="Go to previous page" size="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left size-4">
<path d="m15 18-6-6 6-6" />
</svg>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" :is-active="true">2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" aria-label="Go to next page" size="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right size-4">
<path d="m9 18 6-6-6-6" />
</svg>
</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>
</template>
Установка
npx shadcn-vue@latest add https://revueui.rootapi.dev/r/c-pagination-2.jsonЗависимости реестра
Источник: порт из ReUI (Keenthemes, MIT)