mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

AnchorLink -> Link and bug fix

Browse Source
This commit is contained in:
RaoHai 2016-11-07 11:04:36 +08:00
parent 954c3a13f1
commit 03b4edee4a
7 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/anchor/anchorHelper.tsx
View File

@ -40,11 +40,12 @@ 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, offsetTop, 450);
document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
if (time < 450) {
reqAnimFrame(frameFunc);
}

6
components/anchor/demo/basic.md
View File

@ -15,12 +15,12 @@ The simplest usage.
```jsx
import { Anchor } from 'antd';
const { AnchorLink } = Anchor;
const { Link } = Anchor;
ReactDOM.render(
<Anchor>
<AnchorLink href="#components-anchor-demo-basic" title="基本" />
<AnchorLink href="#components-anchor-demo-independ" title="独立使用" />
<Link href="#components-anchor-demo-basic" title="Basic" />
<Link href="#components-anchor-demo-independ" title="Independent AnchorLink" />
</Anchor>
, mountNode);
```

4
components/anchor/demo/independ.md
View File

@ -15,9 +15,9 @@ Independent AnchorLink
```jsx
import { Anchor } from 'antd';
const { AnchorLink } = Anchor;
const { Link } = Anchor;
ReactDOM.render(
<AnchorLink href="#components-anchor-demo-basic" title="基本" />
<Link href="#components-anchor-demo-basic" title="Basic" />
, mountNode);
```

10
components/anchor/demo/mix.md
View File

@ -15,14 +15,14 @@ The simplest usage.
```jsx
import { Anchor } from 'antd';
const { AnchorLink } = Anchor;
const { Link } = Anchor;
ReactDOM.render(
<Anchor offsetTop={100}>
<AnchorLink href="#components-anchor-demo-basic" title="基本">
<AnchorLink href="#components-anchor-demo-mix" title="嵌套的 AnchorLink" />
</AnchorLink>
<AnchorLink href="#components-anchor-demo-independ" title="独立使用" />
<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);
```

2
components/anchor/index.en-US.md
View File

@ -21,7 +21,7 @@ For displaying anchor hyperlink on page, and jump between then.
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
| bounds | Bounding distance of anchor area | Number | 5(px) |
### AnchorLink Props
### Link Props
| Property | Description | Type | Default |
|-------------|----------------|--------------------|--------------|

2
components/anchor/index.tsx
View File

@ -14,7 +14,7 @@ export interface AnchorProps {
}
export default class Anchor extends React.Component<AnchorProps, any> {
static AnchorLink = AnchorLink;
static Link = AnchorLink;
static defaultProps = {
prefixCls: 'ant-anchor',

3
components/anchor/index.zh-CN.md
View File

@ -21,7 +21,8 @@ title: Anchor
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
| bounds | 锚点区域边界 | Number | 5(px) |
### AnchorLink Props
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|