Anchor锚点

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

何时使用

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

  1. import { NzAnchorModule } from 'ng-zorro-antd/anchor';

代码演示

Anchor锚点 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-anchor-basic',
  5.   template: `
  6.     <nz-anchor>
  7.       <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
  8.       <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
  9.       <nz-link nzHref="#api" nzTitle="API">
  10.         <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
  11.         <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
  12.       </nz-link>
  13.     </nz-anchor>
  14.   `
  15. })
  16. export class NzDemoAnchorBasicComponent {}

Anchor锚点 - 图2

静态位置

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

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-anchor-static',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <nz-anchor [nzAffix]="false">
  8.       <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
  9.       <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
  10.       <nz-link nzHref="#api" nzTitle="API">
  11.         <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
  12.         <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
  13.       </nz-link>
  14.     </nz-anchor>
  15.   `
  16. })
  17. export class NzDemoAnchorStaticComponent {}

API

nz-anchorcomponent

成员说明类型默认值全局配置
[nzAffix]固定模式booleantrue
[nzBounds]锚点区域边界，单位：pxnumber5✅
[nzOffsetTop]距离窗口顶部达到指定偏移量后触发number-✅
[nzShowInkInFixed]固定模式是否显示小圆点booleanfalse✅
[nzContainer]指定滚动的容器string | HTMLElementwindow
(nzClick)点击项触发EventEmitter<string>-
(nzScroll)滚动至某锚点时触发EventEmitter<NzAnchorLinkComponent>-

nz-linkcomponent

成员说明类型默认值
[nzHref]锚点链接string-
[nzTitle]文字内容string | TemplateRef<void>-