components/io.github.maniramezan.kmpcomponents/PageIndicator

PageIndicator

fun PageIndicator(pageCount: Int, currentPage: Int, modifier: Modifier = Modifier, pagePositionDescription: (pageIndex: Int, pageCount: Int) -> String? = null, activeColor: Color = MaterialTheme.colorScheme.primary, inactiveColor: Color = MaterialTheme.colorScheme.outlineVariant)

A row of dots marking the current position within pageCount pages, for carousels, onboarding flows, and any pager. PaginatedContent uses it for its dots footer.

The current page's dot is a wider pill as well as activeColor, so the position does not rely on color alone. The dots are hidden from accessibility services unless you supply pagePositionDescription; the indicator then reads as one node (for example "Page 2 of 5"), announces changes politely, and is at least the minimum touch-target height so assistive technology can land on it.

Parameters

pageCount

total number of pages. Nothing is drawn when it is below 1.

currentPage

zero-based index of the current page, clamped into range.

pagePositionDescription

builds the localized announcement from the zero-based page index and the page count. Omit it, or return a blank string, to keep the dots decorative.

activeColor

color of the current page's dot.

inactiveColor

color of the other dots. The default keeps 3:1 contrast on surfaces.

@Composable

fun PageIndicator(pagerState: PagerState, modifier: Modifier = Modifier, pagePositionDescription: (pageIndex: Int, pageCount: Int) -> String? = null, activeColor: Color = MaterialTheme.colorScheme.primary, inactiveColor: Color = MaterialTheme.colorScheme.outlineVariant)

PageIndicator bound to a PagerState. The current dot follows PagerState.currentPage, and the page is read inside this composable, so the caller does not recompose as the pager moves.