mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
update anchor docs
This commit is contained in:
afc163
parent
a91a7208a6
commit
2df6476572
@ -40,6 +40,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
anchorHelper: this.context.anchorHelper,
|
||||
};
|
||||
}
|
||||
|
||||
renderAnchorLink = (child) => {
|
||||
const { href } = child.props;
|
||||
if (href) {
|
||||
@ -51,6 +52,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
}
|
||||
return child;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls, href, children, onClick, title, bounds } = this.props;
|
||||
const { anchorHelper } = this.context;
|
||||
@ -60,13 +62,17 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
[`${prefixCls}-link-active`]: active,
|
||||
});
|
||||
const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
|
||||
return <div className={cls}>
|
||||
<span
|
||||
ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
|
||||
className={`${prefixCls}-link-title`}
|
||||
onClick={() => onClick ? onClick(href) : scrollToFn(href)}
|
||||
>{title}</span>
|
||||
{React.Children.map(children, this.renderAnchorLink)}
|
||||
</div>;
|
||||
return (
|
||||
<div className={cls}>
|
||||
<span
|
||||
ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
|
||||
className={`${prefixCls}-link-title`}
|
||||
onClick={() => onClick ? onClick(href) : scrollToFn(href)}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
{React.Children.map(children, this.renderAnchorLink)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,12 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
export const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
export const easeInOutCubic = (t, b, c, d) => {
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
}
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
const cc = c - b;
|
||||
t /= d / 2;
|
||||
if (t < 1) {
|
||||
return cc / 2 * t * t * t + b;
|
||||
}
|
||||
return cc / 2 * ((t -= 2) * t * t + 2) + b;
|
||||
};
|
||||
|
||||
export function getDefaultTarget() {
|
||||
@ -38,21 +38,21 @@ export function getOffsetTop(element): number {
|
||||
}
|
||||
|
||||
export function scrollTo(href, target = getDefaultTarget) {
|
||||
const scrollTop = getScroll(target(), true);
|
||||
const offsetTop = getOffsetTop(document.querySelector(href));
|
||||
const targetScrollTop = scrollTop + offsetTop;
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
history.pushState(null, undefined, href);
|
||||
}
|
||||
const scrollTop = getScroll(target(), true);
|
||||
const offsetTop = getOffsetTop(document.querySelector(href));
|
||||
const targetScrollTop = scrollTop + offsetTop;
|
||||
const startTime = Date.now();
|
||||
const frameFunc = () => {
|
||||
const timestamp = Date.now();
|
||||
const time = timestamp - startTime;
|
||||
document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
|
||||
if (time < 450) {
|
||||
reqAnimFrame(frameFunc);
|
||||
}
|
||||
};
|
||||
reqAnimFrame(frameFunc);
|
||||
history.pushState(null, undefined, href);
|
||||
}
|
||||
|
||||
class AnchorHelper {
|
||||
private links: Array<string>;
|
||||
|
||||
@ -19,8 +19,11 @@ const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic" />
|
||||
<Link href="#components-anchor-demo-independ" title="Independent AnchorLink" />
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-independ" title="Independ demo" />
|
||||
<Link href="#API" title="API" />
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Anchor>
|
||||
, mountNode);
|
||||
```
|
||||
```
|
||||
|
||||
29
components/anchor/demo/fixed.md
Normal file
29
components/anchor/demo/fixed.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 固定
|
||||
en-US: Fixed Anchor
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
不会随页面滚动变化。
|
||||
|
||||
## en-US
|
||||
|
||||
Do not change state when page is scrolling.
|
||||
|
||||
```jsx
|
||||
import { Anchor } from 'antd';
|
||||
const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor affix={false}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-independ" title="Independ demo" />
|
||||
<Link href="#API" title="API" />
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Anchor>
|
||||
, mountNode);
|
||||
```
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 独立使用 AnchorLink
|
||||
en-US: Independent AnchorLink
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
独立使用 AnchorLink
|
||||
|
||||
## en-US
|
||||
|
||||
Independent AnchorLink
|
||||
|
||||
```jsx
|
||||
import { Anchor } from 'antd';
|
||||
const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Link href="#components-anchor-demo-basic" title="Basic" />
|
||||
, mountNode);
|
||||
```
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 嵌套的 AnchorLink
|
||||
en-US: Mixed AnchorLink
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The simplest usage.
|
||||
|
||||
```jsx
|
||||
import { Anchor } from 'antd';
|
||||
const { Link } = Anchor;
|
||||
|
||||
ReactDOM.render(
|
||||
<Anchor offsetTop={100}>
|
||||
<Link href="#components-anchor-demo-basic" title="Bacis">
|
||||
<Link href="#components-anchor-demo-mix" title="Mixed AnchorLink" />
|
||||
</Link>
|
||||
<Link href="#components-anchor-demo-independ" title="Independent AnchorLink" />
|
||||
</Anchor>
|
||||
, mountNode);
|
||||
```
|
||||
@ -9,7 +9,7 @@ A hyperlink to a location on same page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlink on page, and jump between then.
|
||||
For displaying anchor hyperlink on page, and jump between them.
|
||||
|
||||
## API
|
||||
|
||||
@ -27,4 +27,3 @@ For displaying anchor hyperlink on page, and jump between then.
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | target of hyperlink | String | |
|
||||
| title | content of hyperlink | String | |
|
||||
|
||||
|
||||
@ -38,6 +38,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
};
|
||||
this.anchorHelper = new AnchorHelper();
|
||||
}
|
||||
|
||||
handleScroll = () => {
|
||||
this.setState({
|
||||
activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds),
|
||||
@ -49,6 +50,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
anchorHelper: this.anchorHelper,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleScroll();
|
||||
this.updateInk();
|
||||
@ -93,15 +95,17 @@ export default class Anchor extends React.Component<AnchorProps, any> {
|
||||
visible: !!activeAnchor,
|
||||
});
|
||||
|
||||
return <Affix offsetTop={offsetTop}>
|
||||
<div className={`${prefixCls}-wrapper`}>
|
||||
<div className={prefixCls}>
|
||||
<div className={`${prefixCls}-ink`} >
|
||||
<span className={inkClass} ref="ink"/>
|
||||
return (
|
||||
<Affix offsetTop={offsetTop}>
|
||||
<div className={`${prefixCls}-wrapper`}>
|
||||
<div className={prefixCls}>
|
||||
<div className={`${prefixCls}-ink`} >
|
||||
<span className={inkClass} ref="ink" />
|
||||
</div>
|
||||
{React.Children.map(this.props.children, this.renderAnchorLink)}
|
||||
</div>
|
||||
{React.Children.map(this.props.children, this.renderAnchorLink)}
|
||||
</div>
|
||||
</div>
|
||||
</Affix>;
|
||||
</Affix>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ type: Other
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
@ -28,4 +28,3 @@ title: Anchor
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | 锚点链接 | String | |
|
||||
| title | 文字内容 | String | |
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user