## Anchor 组件示例
### 基本
最简单的用法。
```tsx
import React from 'react';
import { Anchor, Col, Row } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 横向 Anchor
横向 Anchor。
```tsx
import React from 'react';
import { Anchor } from 'antd';
const App: React.FC = () => (
<>
);
export default App;
```
### 静态位置
不浮动，状态不随页面滚动变化。
```tsx
import React from 'react';
import { Anchor } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 自定义 onClick 事件
点击锚点不记录历史。
```tsx
import React from 'react';
import { Anchor } from 'antd';
const handleClick = (
e: React.MouseEvent,
link: {
title: React.ReactNode;
href: string;
},
) => {
e.preventDefault();
console.log(link);
};
const App: React.FC = () => (
);
export default App;
```
### 自定义锚点高亮
自定义锚点高亮。
```tsx
import React from 'react';
import { Anchor } from 'antd';
const getCurrentAnchor = () => '#anchor-demo-static';
const App: React.FC = () => (
);
export default App;
```
### 设置锚点滚动偏移量
锚点目标滚动到屏幕正中间。
```tsx
import React, { useEffect, useState } from 'react';
import { Anchor, Col, Row } from 'antd';
const style: React.CSSProperties = {
height: '30vh',
backgroundColor: 'rgba(0, 0, 0, 0.85)',
position: 'fixed',
top: 0,
insetInlineStart: 0,
width: '75%',
color: '#fff',
};
const App: React.FC = () => {
const topRef = React.useRef(null);
const [targetOffset, setTargetOffset] = useState();
useEffect(() => {
setTargetOffset(topRef.current?.clientHeight);
}, []);
return (
);
};
export default App;
```
### 监听锚点链接改变
监听锚点链接改变
```tsx
import React from 'react';
import { Anchor } from 'antd';
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
const App: React.FC = () => (
);
export default App;
```
### 替换历史中的 href
替换浏览器历史记录中的路径，后退按钮将返回到上一页而不是上一个锚点。
```tsx
import React from 'react';
import { Anchor, Col, Row } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 废弃的 JSX 示例
调试使用
```tsx
import React from 'react';
import { Anchor } from 'antd';
const { Link } = Anchor;
const App: React.FC = () => (
);
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Anchor 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Anchor, Col, Row } from 'antd';
import type { AnchorProps } from 'antd';
const classNamesObject: AnchorProps['classNames'] = {
root: 'demo-anchor-root',
item: 'demo-anchor-item',
itemTitle: 'demo-anchor-title',
indicator: 'demo-anchor-indicator',
};
const stylesFn: AnchorProps['styles'] = (info) => {
if (info.props.direction === 'vertical') {
return {
root: {
backgroundColor: 'rgba(255,251,230,0.5)',
height: '100vh',
},
} satisfies AnchorProps['styles'];
}
return {};
};
const items: NonNullable = [
{
key: 'part-1',
href: '#part-1',
title: 'Part 1',
},
{
key: 'part-2',
href: '#part-2',
title: 'Part 2',
},
{
key: 'part-3',
href: '#part-3',
title: 'Part 3',
},
];
const App: React.FC = () => {
return (
);
};
export default App;
```
### 组件 Token
Component Token Debug.
```tsx
import React from 'react';
import { Anchor, Col, ConfigProvider, Row } from 'antd';
/** Test usage. Do not use in your production. */
export default () => (
);
```