# 页脚 Footer

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/footer
- 资源: 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。

## 何时使用

适用于页面底部信息描述。

## 示例

## Footer

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 带分割线的顶部内容 | `string \| ReactNode` | - |
| links | 链接内容 | `LinkItem[]` | - |
| content | 普通的内容部分 | `string \| ReactNode` | - |
| chips | 底部标签 | `ChipItem[]` | - |
| onChipClick | 点击底部标签触发，仅在标签 `type` 为 `link` 生效 | `(item: ChipItem, index: number) => void` | - |
| onLinkClick | 点击链接触发事件，拦截 a 标签的 href 跳转 | `(item: LinkItem, index: number) => void` | - |

### ChipItem

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| text | 标签内容 | `string \| ReactNode` | - |
| type | 标签类型，`plain` 为纯展示，`link` 为可点击 | `'plain' \| 'link'` | `'plain'` |

### LinkItem

| 属性 | 说明        | 类型     | 默认值 |
| ---- | ----------- | -------- | ------ |
| text | 链接的文字  | `string` | -      |
| href | 链接的 href | `string` | -      |

### CSS 变量

| 属性               | 说明   | 默认值                        |
| ------------------ | ------ | ----------------------------- |
| --background-color | 背景色 | `var(--adm-color-background)` |

---

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