eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsNavigation
PageIndicator
View source
1 min read
Dots marking position in a carousel or onboarding pager.
1
using eQuantic.UI.Components;
DEFAULT
page 2 of 5
Usage
1
new PageIndicator { Count = 5, CurrentIndex = _page, OnSelected = i => SetState(() => _page = i) }
API
Prop
Type
Default
Description
Count
int
Number of pages. Past eight, switch to a counter.
CurrentIndex
int
0
Active page.
OnSelected
Action<int>?
null
Optional jump handler.
Variant
Variant
Primary
Colour of the active pill.
States
State
Rendering
Active
Elongated Primary pill
Inactive
Small neutral dot
Accessibility
With no handler the dots are decorative and the carousel announces "page 2 of 5". With OnSelected each dot must reach a 48 dp target.
When to use
Carousels and onboarding pagers.
Avoid
Wizard steps — show step text and a ProgressBar.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/PageIndicator.cs.