Pagination
With the help of the Pagination component, extensive, divided content, such as search results, can be scrolled through in order.
Construction
Code
<div>
<kol-pagination _max="100" _page="6"></kol-pagination>
<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
</div>
Events
For the handling of events or callbacks, see
| Event | trigger | Value |
|---|---|---|
click | Page is clicked | Number of selected page |
changePage | Page is clicked | Number of selected page |
changePageSize | Page size is changed | New page size |
Example
Usage
The Pagination component can be configured via your properties.
- The
_maxattribute determines the total number of elements. - The
boundary-countattribute determines the number of elements that are displayed on the right and left in the Pagination component, while the remaining elements - The
_pageattribute sets the currently active element. This is highlighted in color. - The
_sibling-countattribute can be used to determine how many elements should be displayed to the left and right of the current one.
Use cases
The Pagination component can be used in a variety of ways. Especially where extensive content is to be displayed on a content page, it helps to improve the structure and clarity. Classic areas of application for pagination include blog-like content, lists and tables. Pagination can also be used for certain navigation tasks within a page.
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 if _variant="custom" is set. | 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 |
_max (required) | _max | Defines the maximum value of the element. | number | 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' |