Anchor锚点
- 何时使用
- 单独引入此组件
- 代码演示
- API
  - nz-anchorcomponent
  - nz-linkcomponent

Anchor锚点

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

何时使用

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

单独引入此组件

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

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

代码演示

Anchor锚点 - 图1

基本

最简单的用法。

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 {}

Anchor锚点 - 图2

静态位置

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

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

nz-anchorcomponent

成员	说明	类型	默认值
`[nzAffix]`	固定模式	`boolean`	`true`
`[nzBounds]`	锚点区域边界，单位：px	`number`	`5`
`[nzOffsetTop]`	距离窗口顶部达到指定偏移量后触发	`number`	-
`[nzShowInkInFixed]`	固定模式是否显示小圆点	`boolean`	`false`
`[nzTarget]`	指定滚动的容器	`string \| HTMLElement`	`window`
`(nzClick)`	点击项触发	`EventEmitter<string>`	-
`(nzScroll)`	滚动至某锚点时触发	`EventEmitter<NzAnchorLinkComponent>`	-

nz-linkcomponent

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