# PageIndicator

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/page-indicator
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Indicates which page of the multi-page view is currently displayed.

## Install

```bash
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` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt