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 | | 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 | - | | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| bounds | Bounding distance of anchor area | number | 5(px) | | 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 ### Link Props

View File

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

View File

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