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-countDefines the amount of pages to show next to the outer arrow buttons.number | undefined1
_customClass_custom-classDefines the custom class attribute for the buttons.string | undefinedundefined
_hasButtons_has-buttonsDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }true
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_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)_pageDefines the current page.numberundefined
_pageSize_page-sizeDefines the amount of entries to show per page.number1
_pageSizeOptions_page-size-optionsDefines the options for the page-size-select.number[] | string[]
_siblingCount_sibling-countDefines the amount of pages to show next to the current page.number | undefined1
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_total (required)_totalSetzt die Gesamtanzahl der Seiten.numberundefined
_variant_variantDefines which variant should be used for presentation."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined'normal'

Dependencies

Used by

Depends on

Graph


Live-Editor

Beispiele