Stratton.Cologne

Appearance

Pagination ​

Seitennavigation mit Barrierefreiheit und flexiblem Layout.

vue
<script setup lang="ts">
import { Pagination } from '@stratton-cologne/ui'
import { ref } from 'vue'

const page = ref(1)
const pageSize = ref(10)
const total = 123
</script>

<template>
  <Pagination v-model:page="page" v-model:page-size="pageSize" :total="total" />
</template>

Props ​

  • page: aktuelle Seite (Default: 1), v-model: v-model:page.
  • pageSize: Einträge pro Seite (Default: 25), v-model: v-model:page-size.
  • total: Gesamtanzahl Einträge (Default: 0).
  • pageSizes: Auswahl-Liste (Default: [5,10,25,50,100]).
  • ariaLabel: role="navigation" Beschriftung (Default i18n).
  • id / instance: Stabile Root-ID und data-instance für Styling/Tests.

Events ​

  • update:page(number)
  • update:pageSize(number)
  • change({ page, pageSize })

Slots ​

  • status: { from, to, total } – ersetzt den linken Status-Text.

Styling (data-Attribute) ​

  • Root: [data-component="sc-pagination"]
  • Zonen: [data-role="status"|"pager"|"pagesize"]
  • Buttons: [data-role="first"|"prev"|"next"|"last"]