Anchor ink in fixed (#4960)

*  A config for displaying ink-balls of fixed Anchor

 + close #4930
 + add `inkInFixed` props to show ink-balls in fixed mode.

* rename
This commit is contained in:
陆离 2017-02-21 14:44:20 +08:00 committed by 偏右
parent a80d6b7231
commit 36fd55c441
3 changed files with 10 additions and 3 deletions

View File

@ -20,6 +20,8 @@ For displaying anchor hyperlinks on page and jumping between them.
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| bounds | Bounding distance of anchor area | number | 5(px) |
| affix | Fixed mode of Anchor | boolean | false |
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
### Link Props

View File

@ -14,6 +14,7 @@ export interface AnchorProps {
className?: string;
style?: React.CSSProperties;
affix?: boolean;
showInkInFixed?: boolean;
}
export default class Anchor extends React.Component<AnchorProps, any> {
@ -22,6 +23,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
static defaultProps = {
prefixCls: 'ant-anchor',
affix: true,
showInkInFixed: false,
};
static childContextTypes = {
@ -91,6 +93,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
}
renderAnchorLink = (child) => {
const { href } = child.props;
if (href) {
this.anchorHelper.addLink(href);
@ -98,7 +101,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
onClick: this.clickAnchorLink,
prefixCls: this.props.prefixCls,
bounds: this.props.bounds,
affix: this.props.affix,
affix: this.props.affix || this.props.showInkInFixed,
offsetTop: this.props.offsetTop,
});
}
@ -106,7 +109,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
}
render() {
const { prefixCls, offsetTop, style, className = '', affix } = this.props;
const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props;
const { activeAnchor, animated } = this.state;
const inkClass = classNames({
[`${prefixCls}-ink-ball`]: true,
@ -119,7 +122,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
}, className);
const anchorClass = classNames(prefixCls, {
'fixed': !affix,
'fixed': !affix && !showInkInFixed,
});
const anchorContent = (

View File

@ -21,6 +21,8 @@ title: Anchor
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| bounds | 锚点区域边界 | number | 5(px) |
| affix | 固定模式 | boolean | false |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
### Link Props