feat(module:anchor): horizontal anchors (#8342)

* feat(module:anchor): horizontal anchors * feat(module:anchor): horizontal anchors * feat(module:anchor): horizontal anchors * feat(module:anchor): horizontal anchors * feat(module:anchor): horizontal anchors * feat(module:anchor): horizontal anchors
NG-ZORRO · Mar 11, 2024 · 9cc44f8 · 9cc44f8
1 parent e7b1fa0
commit 9cc44f8
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 40 deletions.
diff --git a/components/anchor/anchor-link.component.ts b/components/anchor/anchor-link.component.ts
@@ -19,7 +19,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
-import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzDirectionVHType, NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzAnchorComponent } from './anchor.component';
 
@@ -44,7 +44,9 @@ import { NzAnchorComponent } from './anchor.component';
         <ng-template [ngTemplateOutlet]="titleTpl || nzTemplate" />
       }
     </a>
-    <ng-content></ng-content>
+    @if (nzDirection === 'vertical') {
+      <ng-content></ng-content>
+    }
   `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -58,6 +60,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
   titleStr: string | null = '';
   titleTpl?: TemplateRef<NzSafeAny>;
+  nzDirection: NzDirectionVHType = 'vertical';
 
   @Input()
   set nzTitle(value: string | TemplateRef<void>) {
@@ -81,6 +84,7 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.anchorComp.registerLink(this);
+    this.nzDirection = this.anchorComp.nzDirection;
   }
 
   getLinkTitleElement(): HTMLAnchorElement {

diff --git a/components/anchor/anchor.component.ts b/components/anchor/anchor.component.ts
@@ -29,7 +29,7 @@ import { takeUntil, throttleTime } from 'rxjs/operators';
 import { NzAffixModule } from 'ng-zorro-antd/affix';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzScrollService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NgStyleInterface, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NgStyleInterface, NumberInput, NzDirectionVHType, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
 
 import { NzAnchorLinkComponent } from './anchor-link.component';
@@ -61,7 +61,11 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
     }
 
     <ng-template #content>
-      <div class="ant-anchor-wrapper" [ngStyle]="wrapperStyle">
+      <div
+        class="ant-anchor-wrapper"
+        [ngClass]="{ 'ant-anchor-wrapper-horizontal': nzDirection === 'horizontal' }"
+        [ngStyle]="wrapperStyle"
+      >
         <div class="ant-anchor" [ngClass]="{ 'ant-anchor-fixed': !nzAffix && !nzShowInkInFixed }">
           <div class="ant-anchor-ink">
             <div class="ant-anchor-ink-ball" #ink></div>
@@ -107,6 +111,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
 
   @Input() nzContainer?: string | HTMLElement;
   @Input() nzCurrentAnchor?: string;
+  @Input() nzDirection: NzDirectionVHType = 'vertical';
 
   @Output() readonly nzClick = new EventEmitter<string>();
   @Output() readonly nzChange = new EventEmitter<string>();
@@ -219,7 +224,11 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
 
     targetComp.setActive();
     const linkNode = targetComp.getLinkTitleElement();
-    this.ink.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+    if (this.nzDirection === 'vertical') {
+      this.ink.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+    } else {
+      this.ink.nativeElement.style.left = `${linkNode.offsetLeft + linkNode.clientWidth / 2}px`;
+    }
     this.activeLink = (comp || targetComp).nzHref;
     if (originalActiveLink !== this.activeLink) {
       this.nzChange.emit(this.activeLink);

diff --git a/components/anchor/anchor.spec.ts b/components/anchor/anchor.spec.ts
@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import { NzScrollService } from 'ng-zorro-antd/core/services';
 import { NzAnchorModule } from './anchor.module';
 import { NzAnchorComponent } from './anchor.component';
+import { NzDirectionVHType } from 'ng-zorro-antd/core/types';
 
 const throttleTime = 51;
 
@@ -61,6 +62,19 @@ describe('anchor', () => {
       }, throttleTime);
     });
 
+    it('should actived when scrolling to the anchor - horizontal', (done: () => void) => {
+      context.nzDirection = 'horizontal';
+      fixture.detectChanges();
+      expect(context._scroll).not.toHaveBeenCalled();
+      page.scrollTo();
+      setTimeout(() => {
+        const inkNode = page.getEl('.ant-anchor-ink-ball');
+        expect(+inkNode.style.left!.replace('px', '')).not.toBeNull();
+        expect(context._scroll).toHaveBeenCalled();
+        done();
+      }, throttleTime);
+    });
+
     it('should clean actived when leave all anchor', fakeAsync(() => {
       spyOn(context.comp, 'clearActive' as any);
       page.scrollTo();
@@ -226,6 +240,20 @@ describe('anchor', () => {
     });
   });
 
+  describe('direction', () => {
+    it(`should have vertical direction by default`, () => {
+      const wrapperEl = dl.query(By.css('.ant-anchor-wrapper'));
+      expect(wrapperEl.nativeElement.classList).not.toContain('ant-anchor-wrapper-horizontal');
+    });
+
+    it(`should have correct class name in horizontal mode`, () => {
+      context.nzDirection = 'horizontal';
+      fixture.detectChanges();
+      const wrapperEl = dl.query(By.css('.ant-anchor-wrapper'));
+      expect(wrapperEl.nativeElement.classList).toContain('ant-anchor-wrapper-horizontal');
+    });
+  });
+
   describe('**boundary**', () => {
     it('#getOffsetTop', (done: () => void) => {
       const el1 = document.getElementById('何时使用')!;
@@ -273,6 +301,7 @@ describe('anchor', () => {
       [nzTargetOffset]="nzTargetOffset"
       [nzContainer]="nzContainer"
       [nzCurrentAnchor]="nzCurrentAnchor"
+      [nzDirection]="nzDirection"
       (nzClick)="_click($event)"
       (nzScroll)="_scroll($event)"
       (nzChange)="_change($event)"
@@ -332,6 +361,7 @@ export class TestComponent {
   nzShowInkInFixed = false;
   nzContainer: any = null;
   nzCurrentAnchor?: string;
+  nzDirection: NzDirectionVHType = 'vertical';
   _click() {}
   _change() {}
   _scroll() {}

diff --git a/components/anchor/demo/horizontal-anchor.md b/components/anchor/demo/horizontal-anchor.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: 横向 Anchor
+  en-US: Horizontal Anchor
+---
+
+## zh-CN
+
+横向 Anchor。
+
+## en-US
+
+Horizontally aligned anchors
diff --git a/components/anchor/demo/horizontal-anchor.ts b/components/anchor/demo/horizontal-anchor.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-anchor-horizontal-anchor',
+  template: `
+    <nz-anchor [nzDirection]="'horizontal'">
+      <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 NzDemoAnchorHorizontalAnchorComponent {}
diff --git a/components/anchor/doc/index.en-US.md b/components/anchor/doc/index.en-US.md
@@ -19,23 +19,24 @@ import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 
 ### nz-anchor:standalone
 
-| Property | Description | Type | Default | Global Config |
-| -------- | ----------- | ---- | ------- | ------------- |
-| `[nzAffix]` | Fixed mode of Anchor | `boolean` | `true` |
-| `[nzBounds]` | Bounding distance of anchor area, unit: px | `number` | `5` | ✅ |
-| `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | ✅ |
-| `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode | `boolean` | `false` | ✅ |
-| `[nzTargetOffset]` | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - |  |
-| `[nzContainer]` | Scrolling container | `string \| HTMLElement` | `window` |
-| `[nzCurrentAnchor]` | Customize the anchor highlight | string | - |  |
-| `(nzClick)` | Click of Anchor item | `EventEmitter<string>` | - |
-| `(nzChange)` | Listening for anchor link change | `EventEmitter<string>` | - |  |
-| `(nzScroll)` | The scroll function that is triggered when scrolling to an anchor. | `EventEmitter<NzAnchorLinkComponent>` | - |
+| Property             | Description                                                                                   | Type                                  | Default      | Global Config |
+| -------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------- | ------------ | ------------- |
+| `[nzAffix]`          | Fixed mode of Anchor                                                                          | `boolean`                             | `true`       |
+| `[nzBounds]`         | Bounding distance of anchor area, unit: px                                                    | `number`                              | `5`          | ✅            |
+| `[nzOffsetTop]`      | Pixels to offset from top when calculating position of scroll                                 | `number`                              | `0`          | ✅            |
+| `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode                                                          | `boolean`                             | `false`      | ✅            |
+| `[nzTargetOffset]`   | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number                                | -            |               |
+| `[nzContainer]`      | Scrolling container                                                                           | `string \| HTMLElement`               | `window`     |
+| `[nzCurrentAnchor]`  | Customize the anchor highlight                                                                | string                                | -            |               |
+| `[nzDirection]`      | Set Anchor direction                                                                          | `'vertical' \| 'horizontal'`          | `'vertical'` |               |
+| `(nzClick)`          | Click of Anchor item                                                                          | `EventEmitter<string>`                | -            |
+| `(nzChange)`         | Listening for anchor link change                                                              | `EventEmitter<string>`                | -            |               |
+| `(nzScroll)`         | The scroll function that is triggered when scrolling to an anchor.                            | `EventEmitter<NzAnchorLinkComponent>` | -            |
 
 ### nz-link:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzHref]` | target of hyperlink | `string` | - |
-| `[nzTarget]` | Specifies where to display the linked URL | string    | -      |      |
-| `[nzTitle]` | content of  hyperlink | `string \| TemplateRef<void>` | - |
+| Property     | Description                               | Type                          | Default |
+| ------------ | ----------------------------------------- | ----------------------------- | ------- | --- |
+| `[nzHref]`   | target of hyperlink                       | `string`                      | -       |
+| `[nzTarget]` | Specifies where to display the linked URL | string                        | -       |     |
+| `[nzTitle]`  | content of hyperlink                      | `string \| TemplateRef<void>` | -       |
diff --git a/components/anchor/doc/index.zh-CN.md b/components/anchor/doc/index.zh-CN.md
@@ -16,28 +16,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 ```
 
-
 ## API
 
 ### nz-anchor:standalone
 
-| 成员 | 说明 | 类型 | 默认值 | 全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzAffix]` | 固定模式 | `boolean` | `true` |
-| `[nzBounds]` | 锚点区域边界，单位：px | `number` | `5` | ✅ |
-| `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | `number` | - | ✅ |
-| `[nzShowInkInFixed]` | 固定模式是否显示小圆点 | `boolean` | `false` | ✅ |
-| `[nzTargetOffset]` | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - |  |
-| `[nzContainer]` | 指定滚动的容器 | `string \| HTMLElement` | `window` |
-| `[nzCurrentAnchor]` | 自定义高亮的锚点 | string | - |  |
-| `(nzClick)` | 点击项触发 | `EventEmitter<string>` | - |
-| `(nzChange)` | 监听锚点链接改变 | `EventEmitter<string>` | - |  |
-| `(nzScroll)` | 滚动至某锚点时触发 | `EventEmitter<NzAnchorLinkComponent>` | - |
+| 成员                 | 说明                                                                                | 类型                                  | 默认值       | 全局配置 |
+| -------------------- | ----------------------------------------------------------------------------------- | ------------------------------------- | ------------ | -------- |
+| `[nzAffix]`          | 固定模式                                                                            | `boolean`                             | `true`       |
+| `[nzBounds]`         | 锚点区域边界，单位：px                                                              | `number`                              | `5`          | ✅       |
+| `[nzOffsetTop]`      | 距离窗口顶部达到指定偏移量后触发                                                    | `number`                              | -            | ✅       |
+| `[nzShowInkInFixed]` | 固定模式是否显示小圆点                                                              | `boolean`                             | `false`      | ✅       |
+| `[nzTargetOffset]`   | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number                                | -            |          |
+| `[nzContainer]`      | 指定滚动的容器                                                                      | `string \| HTMLElement`               | `window`     |
+| `[nzCurrentAnchor]`  | 自定义高亮的锚点                                                                    | string                                | -            |          |
+| `[nzDirection]`      | 设置导航方向                                                                        | `'vertical' \| 'horizontal'`          | `'vertical'` |          |
+| `(nzClick)`          | 点击项触发                                                                          | `EventEmitter<string>`                | -            |
+| `(nzChange)`         | 监听锚点链接改变                                                                    | `EventEmitter<string>`                | -            |          |
+| `(nzScroll)`         | 滚动至某锚点时触发                                                                  | `EventEmitter<NzAnchorLinkComponent>` | -            |
 
 ### nz-link:standalone
 
-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzHref]` | 锚点链接 | `string` | - |
-| `[nzTarget]` | 该属性指定在何处显示链接的资源。 | string    | -      |      |
-| `[nzTitle]` | 文字内容 | `string \| TemplateRef<void>` | - |
+| 成员         | 说明                             | 类型                          | 默认值 |
+| ------------ | -------------------------------- | ----------------------------- | ------ | --- |
+| `[nzHref]`   | 锚点链接                         | `string`                      | -      |
+| `[nzTarget]` | 该属性指定在何处显示链接的资源。 | string                        | -      |     |
+| `[nzTitle]`  | 文字内容                         | `string \| TemplateRef<void>` | -      |
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -14,6 +14,39 @@
     padding-left: 4px;
     overflow: auto;
     background-color: @anchor-bg;
+
+    &-horizontal {
+      margin-left: unset;
+      padding-left: unset;
+      margin-bottom: -4px;
+      padding-bottom: 4px;
+
+      .ant-anchor {
+        display: flex;
+
+        &-ink {
+          top: unset;
+          bottom: 0;
+          width: 100%;
+          height: unset;
+
+          &:before {
+            width: 100%;
+            height: 2px;
+          }
+
+          &-ball {
+            transform: translate(-50%, -50%);
+          }
+        }
+
+        &-link {
+          &:first-of-type {
+            padding-inline: 0;
+          }
+        }
+      }
+    }
   }
 
   &-ink {