mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06: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 |
|
| 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
|
||||||
|
|
||||||
|
@ -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 = (
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user