Skip to main content

Pagination

Mit Hilfe der Paginierung-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen.

Konstruktion

Code

<div>
<kol-pagination _total="100" _page="6"></kol-pagination>
<kol-pagination _total="100" _page="6" _sibling-count="2"></kol-pagination>
<kol-pagination _total="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
</div>

Beispiel

Verwendung

Die Paginierung-Komponente kann über Ihre Properties konfiguriert werden.

  • Das Attribut _total bestimmt die Gesamtanzahl der Elemente.
  • Über das Attribut boundary-count wird die Anzahl von Elementen bestimmt, die in der Paginierung-Komponente rechts und links angezeigt werden, während die übrigen Elemente
  • Das Attribut _page legt das gerade aktive Element fest. Dieses wird farblich hervorgehoben dargestellt.
  • Über das Attribut _sibling-count kann festgelegt werden, wie viele Elemente jeweils links und rechts des Aktuellen angezeigt werden sollen.

Anwendungsfälle

Die Paginierung-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei. Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.

Properties

PropertyAttributeDescriptionTypeDefault
_boundaryCount_boundary-countGibt an, wie viele Seiten neben den am Rand liegenden Pfeil-Schaltern angezeigt werden sollen.number | undefined1
_customClass_custom-classGibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.string | undefinedundefined
_hasButtons_has-buttonsSetzt die Sichtbarkeit der Anfang/zurück/weiter/Ende-Schaltflächen.boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }true
_on (required)--Gibt an, auf welche Callback-Events reagiert werden.{ onChangePage?: EventValueOrEventCallback<Event, number> | undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> | undefined; onClick?: EventValueOrEventCallback<Event, number> | undefined; }undefined
_page (required)_pageGibt an, welche Seite aktuell ausgewählt ist.numberundefined
_pageSize_page-sizeGibt an, wie viele Einträge pro Seite angezeigt werden.number1
_pageSizeOptions_page-size-optionsSetzt die Optionen für das Seitenlängenselect.number[] | string[]
_siblingCount_sibling-countGibt an, wie viele Seiten neben der aktuell Ausgewählten angezeigt werden.number | undefined1
_tooltipAlign_tooltip-alignGibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden."bottom" | "left" | "right" | "top" | undefined'top'
_total (required)_totalSetzt die Gesamtanzahl der Seiten.numberundefined
_variant_variantGibt an, welche Button-Variante verwendet werden soll."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | undefined'normal'

Dependencies

Used by

Depends on

Graph


Live-Editor

Beispiele