---
title: AnchorTabs 锚点标签页
group:
  path: /components
nav:
  path: /components
---

**PC Web 端高级 UI 组件还未开放，本页面仅为示例页面。敬请期待！**

## AnchorTabs 锚点标签页

锚点标签页用于在纵向内容较多的页面进行锚点跳转导航。点击 Tab，滚动至锚点位置。

## 代码演示

### 基本使用

<code src="./demos/basic"></code>

### 综合示例

在新标签页查看效果更佳。

<code src="./demos/comprehensive"></code>

## API

| 属性                | 说明              | 类型                                                                             | 默认值         |
|--------------------|-------------------|---------------------------------------------------------------------------------|---------------|
| tabs               | 必传。标签页配置项   | `{ title, id }[]`，其中 `title` 是标签页标题，`id` 是锚点元素 `id`，都是 string 类型   | -             |
| smooth             | 是否平滑滚动        | boolean                                                                         | false         |
| tabBarExtraContent | 标签页右侧额外的元素 | ReactNode                                                                       | -             |
| affixTarget        | 设置 AntD `<Affix/>` 需要监听其滚动事件的元素，将透传给 AntD 的 `<Affix/>` `target` 属性 | () => HTMLElement | () => window |
| className          | 透传给 AntD `<Affix/>` 的 `className` | string                                                       | -             |
| style              | 透传给 AntD `<Affix/>` 的 `style`     | React.CSSProperties                                          | -             |
| tabsWrapperStyle   | 标签页容器的 `style`                  | React.CSSProperties                                           | -             |
| onChange           | 激活新的标签页触发的回调                 | `(tabOption?: { title, id }) => void`                        | -             |