# 序列 IndexBar

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/index-bar
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

根据字母 A ～ Z 排列内容。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

根据字母 A ～ Z 排列内容。

## 何时使用

适用于列表的分类显示和快速定位。

## 示例

## IndexBar

### 属性

| 属性          | 说明                 | 类型                      | 默认值 |
| ------------- | -------------------- | ------------------------- | ------ |
| onIndexChange | 当锚点变化时回调     | `(index: string) => void` | -      |
| sticky        | 是否开启锚点自动吸顶 | `boolean`                 | `true` |

### Ref

| 属性     | 说明           | 类型                      |
| -------- | -------------- | ------------------------- |
| scrollTo | 滚动到指定锚点 | `(index: string) => void` |

### CSS 变量

| 属性                | 说明                       | 默认值 | 全局变量 |
| ------------------- | -------------------------- | ------ | -------- |
| --sticky-offset-top | 锚点自动吸顶时与顶部的距离 | `0`    | -        |

## IndexBar.Panel

### 属性

| 属性  | 说明                   | 类型        | 默认值                      |
| ----- | ---------------------- | ----------- | --------------------------- |
| brief | 右侧索引条中的显示内容 | `ReactNode` | 默认取 `index` 的第一个字符 |
| index | 索引（不可以重复）     | `string`    | -                           |
| title | 左侧主内容区的分组标题 | `ReactNode` | 默认取 `index`              |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt