IndexBar
Arrange the content according to the letters A-Z.
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.
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. |