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

Property	Attribute	Description	Type	Default
_boundaryCount	_boundary-count	Defines the amount of pages to show next to the outer arrow buttons.	number | undefined	1
_customClass	_custom-class	Defines the custom class attribute for the buttons.	string | undefined	undefined
_hasButtons	_has-buttons	Defines which navigation buttons to render (first, last, next, previous buttons).	boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }	true
_label	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string | undefined	undefined
_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)	_page	Defines the current page.	number	undefined
_pageSize	_page-size	Defines the amount of entries to show per page.	number	1
_pageSizeOptions	_page-size-options	Defines the options for the page-size-select.	number[] | string	[]
_siblingCount	_sibling-count	Defines the amount of pages to show next to the current page.	number | undefined	1
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'
_total (required)	_total	Setzt die Gesamtanzahl der Seiten.	number	undefined
_variant	_variant	Defines which variant should be used for presentation.	"custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined	'normal'

Dependencies

Used by

• kol-table

Depends on

• kol-button
• kol-select
• kol-button-wc

Graph

---

Live-Editor

Beispiele