PageIndicator
Indicates which page of the multi-page view is currently displayed.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Indicates which page of the multi-page view is currently displayed.
When to Use
Applicable to indicate that the current content block can be scrolled horizontally to turn pages.
Demos
PageIndicator
Props
| Name | Description | Type | Default |
|---|---|---|---|
| color | Color | 'primary' | 'white' | 'primary' |
| current | Current page (counting from 0) | number | - |
| direction | Layout direction | 'horizontal' | 'vertical' | 'horizontal' |
| total | Total page number | number | - |
CSS Variables
| Name | Description | Default |
|---|---|---|
| --active-dot-border-radius | rounded corner size the current page | var(--dot-border-radius) |
| --active-dot-color | dot color of the current page | var(--adm-color-primary) |
| --active-dot-size | dot size of the current page | 13px |
| --dot-border-radius | rounded corner size the non-current pages | 1px |
| --dot-color | dot color of the non-current pages | var(--adm-color-light) |
| --dot-size | dot size of the non-current pages | 3px |
| --dot-spacing | space between dots of the page indicators | 3px |