Anchor锚点
用于跳转到页面指定位置。
何时使用#
需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。
代码演示
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React from 'react';
const { Link } = Anchor;
const App: React.FC = () => (
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
export default App;
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React from 'react';
const { Link } = Anchor;
const handleClick = (
e: React.MouseEvent<HTMLElement>,
link: {
title: React.ReactNode;
href: string;
},
) => {
e.preventDefault();
console.log(link);
};
const App: React.FC = () => (
<Anchor affix={false} onClick={handleClick}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
export default App;
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React, { useEffect, useState } from 'react';
const { Link } = Anchor;
const App: React.FC = () => {
const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
useEffect(() => {
setTargetOffset(window.innerHeight / 2);
}, []);
return (
<Anchor targetOffset={targetOffset}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
};
export default App;
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React from 'react';
const { Link } = Anchor;
const App: React.FC = () => (
<Anchor affix={false}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
export default App;
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React from 'react';
const { Link } = Anchor;
const getCurrentAnchor = () => '#components-anchor-demo-static';
const App: React.FC = () => (
<Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
export default App;
TypeScript
JavaScript
import { Anchor } from 'infrad';
import React from 'react';
const { Link } = Anchor;
const onChange = (link: string) => {
console.log('Anchor:OnChange', link);
};
const App: React.FC = () => (
<Anchor affix={false} onChange={onChange}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
);
export default App;
API#
Anchor Props#
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
affix | 固定模式 | boolean | true | |
bounds | 锚点区域边界 | number | 5 | |
getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | ||
showInkInFixed | affix={false} 时是否显示小圆点 | boolean | false | |
targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同,例子 | number | - | |
onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
onClick | click 事件的 handler | function(e: Event, link: Object) | - |
Link Props#
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
href | 锚点链接 | string | - | |
target | 该属性指定在何处显示链接的资源。 | string | - | |
title | 文字内容 | ReactNode | - |