# IndexBar

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

Arrange the content according to the letters A-Z.

## 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.

Arrange the content according to the letters A-Z.

## When to Use

Category display and quick positioning for lists.

## Demos

## IndexBar

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| onIndexChange | Trigger when the anchor point changed | `(index: string) => void` | - |
| sticky | Whether to turn on the anchor point automatic ceiling | `boolean` | `true` |

### Ref

| Name     | Description                          | Type                      |
| -------- | ------------------------------------ | ------------------------- |
| scrollTo | Scroll to the specified anchor point | `(index: string) => void` |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --sticky-offset-top | The distance between the anchor point and the top when it is automatically ceiling | `0` | - |

## IndexBar.Panel

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| brief | The brief title in the right sidebar. | `ReactNode` | The first character of `index` would be used by default. |
| index | Unique index. | `string` | - |
| title | The panel title in the main area. | `ReactNode` | `index` would be used by default. |

---

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