Pagination

Pagination with page navigation, next and previous links. The page window comes from the pure function sparkPaginationRange(page, total, siblings) (-1 = ellipsis).

Usage

SPagination({ total: 10, defaultPage: 2 })

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind the 1-based page with !!.

@Local page: number = 5;

SPagination({ total: 20, page: this.page!!, siblingCount: 1 })

Approximate web preview — the HarmonyOS rendering is the reference.

Responsive

Measures its own width: when narrower than 480vp the labels collapse to icons and siblingCount drops to 0.

// below 480vp of its own width: icon-only Previous / Next, no sibling pages
Column() { SPagination({ total: 20, defaultPage: 10 }) }.width(340)

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SPagination

shadcn-vue Pagination (rendered as one component): Previous, page links, ellipses and Next. Page links use the button recipe (ghost, active page outline, icon size).

Responsive without breakpoints: when the pagination itself is narrower than 480vp the Previous / Next labels collapse to icons and siblingCount drops to 0. The page window comes from {@link sparkPaginationRange}.

Prop	Type	Default	Description
page!!	number | undefined	undefined	Controlled current page, 1-based (use with !!). Leave undefined for uncontrolled.
defaultPage	number	1
total	number	1	Number of pages.
siblingCount	number	1	Pages shown on each side of the current page (wide layout).
previousText	ResourceStr	$r('app.string.spark_previous')
nextText	ResourceStr	$r('app.string.spark_next')

Event	Type	Default	Description
onPageChange	(page: number) => void	() => { }