mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
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:
parent
a80d6b7231
commit
36fd55c441
@ -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
|
||||
|
||||
|
@ -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 = (
|
||||
|
@ -21,6 +21,8 @@ title: Anchor
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
|
||||
| bounds | 锚点区域边界 | number | 5(px) |
|
||||
| affix | 固定模式 | boolean | false |
|
||||
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
|
||||
|
||||
### Link Props
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user