# 侧边导航 SideBar

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

垂直展示导航栏。

## 安装

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

垂直展示导航栏。

## 何时使用

需要用户快速导航至某一项内容集合，并可以在多个内容之间来回切换。

## 示例

## SideBar

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 `item` 的 `key` | `string \| null` | - |
| defaultActiveKey | 初始化选中 `item` 的 `key`，如果没有设置 `activeKey` | `string \| null` | 第一个 `item` 的 `key` |
| onChange | 切换面板的回调 | `(key: string) => void` | - |

### CSS 变量

| 属性                 | 说明                 | 默认值    |
| -------------------- | -------------------- | --------- |
| --background-color   | 背景颜色             | `#f5f5f5` |
| --height             | 侧边导航高度         | `100%`    |
| --item-border-radius | 当前激活`item`的圆角 | `8px`     |
| --width              | 侧边导航宽度         | `105px`   |

## SideBar.Item

### 属性

| 属性     | 说明             | 类型                    | 默认值  |
| -------- | ---------------- | ----------------------- | ------- |
| badge    | 徽标             | `BadgeProps['content']` | -       |
| disabled | 是否禁用         | `boolean`               | `false` |
| key      | 对应 `activeKey` | `string`                | -       |
| title    | 显示内容         | `ReactNode`             | -       |

---

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