# 标签页 Tabs

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

内容组之间进行导航切换。

## 何时使用

当前内容需要分成同层级结构的组，进行内容切换展示，常用在表单或者列表的顶部。

## 示例

## Tabs

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 `tab` 面板的 `key` | `string \| null` | - |
| activeLineMode | 激活 `tab` 下划线的模式 | `'auto' \| 'full' \| 'fixed'` | `'auto'` |
| defaultActiveKey | 初始化选中面板的 `key`，如果没有设置 `activeKey` | `string \| null` | 第一个面板的 `key` |
| onChange | 切换面板的回调 | `(key: string) => void` | - |
| stretch | 选项卡头部是否拉伸 | `boolean` | `true` |
| direction | 文档排版方向 | `'ltr' \| 'rtl'` | `'ltr'` |

### CSS 变量

| 属性 | 说明 | 默认值 |
| --- | --- | --- |
| --active-line-border-radius | 当前激活 `tab` 下划线的圆角 | `var(--active-line-height)` |
| --active-line-color | 当前激活 `tab` 下划线的颜色 | `var(--adm-color-primary)` |
| --active-line-height | 当前激活 `tab` 下划线的高度 | `2px` |
| --active-title-color | 当前激活 `tab` 选项文字颜色 | `var(--adm-color-primary)` |
| --content-padding | `tab` 内容区的 `padding` | `12px` |
| --fixed-active-line-width | 当前激活 `tab` 下划线的宽度，仅在 `activeLineMode` 为 `'fixed'` 时有效 | `30px` |
| --title-font-size | 选项卡头文字的大小 | `17px` |

## Tabs.Tab

| 属性           | 说明                        | 类型        | 默认值  |
| -------------- | --------------------------- | ----------- | ------- |
| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean`   | `false` |
| disabled       | 是否禁用                    | `boolean`   | `false` |
| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
| key            | 对应 `activeKey`            | `string`    | -       |
| title          | 选项卡头显示文字            | `ReactNode` | -       |

## FAQ

### Tabs 是否支持 sticky 吸顶效果？

支持，但是 Tabs 并没有一个类似于 `sticky` 的属性。你可以自己在 Tabs 的外层容器中增加一下 `position: sticky` 的 CSS 样式，从而实现吸顶效果。

### Tabs 怎么配合 Swiper、PullToRefresh、InfiniteScroll 实现一个复杂的信息流界面？

可以参考这个 [demo](https://codesandbox.io/s/mystifying-glitter-knpc7u?file=/src/components/getPullToRefreshlData.tsx)。

### Tabs.Tab 关于 key 的类型问题

因为 `React` 内部会把传入的 `key` 转为 `string`，所以这里 `key` 的类型其实只要是符合 `React.Key` 都是可以的。

---

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