Anchor锚点

用于跳转到页面指定位置。

何时使用#

需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。

代码演示

最简单的用法。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-anchor-basic',
  template: `
    <nz-anchor>
      <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
      <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
      <nz-link nzHref="#api" nzTitle="API">
        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
      </nz-link>
    </nz-anchor>
  `
})
export class NzDemoAnchorBasicComponent {}

不浮动,状态不随页面滚动变化。

expand codeexpand code
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'nz-demo-anchor-static',
  encapsulation: ViewEncapsulation.None,
  template: `
    <nz-anchor [nzAffix]="false">
      <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
      <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
      <nz-link nzHref="#api" nzTitle="API">
        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
      </nz-link>
    </nz-anchor>
  `
})
export class NzDemoAnchorStaticComponent {}

API#

单独引入此组件#

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

import { NzAnchorModule } from 'ng-zorro-antd';

nz-anchor#

成员说明类型默认值
[nzAffix]固定模式booleantrue
[nzBounds]锚点区域边界,单位:pxnumber5
[nzOffsetBottom]距离窗口底部达到指定偏移量后触发number-
[nzOffsetTop]距离窗口顶部达到指定偏移量后触发number-
[nzShowInkInFixed]固定模式是否显示小圆点booleanfalse
[nzTarget]指定滚动的容器string|HTMLElementwindow
(nzClick)点击项触发EventEmitter<string>-
(nzScroll)滚动至某锚点时触发EventEmitter<NzAnchorLinkComponent>-
成员说明类型默认值
[nzHref]锚点链接string-
[nzTitle]文字内容string|TemplateRef<void>-