feat(module:carousel): support dot position (#3575)

* feat(module:carousel): support dot position * fix(module:carousel): fix content height in vertical mode * fix: typo
NG-ZORRO · Jun 22, 2019 · 0566331 · 0566331
1 parent 3c82f26
commit 0566331
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 92 deletions.
diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md
@@ -0,0 +1,16 @@
+---
+order: 1
+title:
+  zh-CN: 位置
+  en-US: Position
+---
+
+## zh-CN
+
+位置有 4 个方向。
+
+## en-US
+
+There are four positions available.
+
+
diff --git a/components/carousel/demo/position.ts b/components/carousel/demo/position.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-carousel-position',
+  template: `
+    <nz-radio-group [(ngModel)]="dotPosition">
+      <label nz-radio-button nzValue="bottom">Bottom</label>
+      <label nz-radio-button nzValue="top">Top</label>
+      <label nz-radio-button nzValue="left">Left</label>
+      <label nz-radio-button nzValue="right">Right</label>
+    </nz-radio-group>
+    <nz-carousel [nzDotPosition]="dotPosition">
+      <div nz-carousel-content *ngFor="let index of array">
+        <h3>{{ index }}</h3>
+      </div>
+    </nz-carousel>
+  `,
+  styles: [
+    `
+      nz-radio-group {
+        margin-bottom: 8px;
+      }
+
+      [nz-carousel-content] {
+        text-align: center;
+        height: 160px;
+        line-height: 160px;
+        background: #364d79;
+        color: #fff;
+        overflow: hidden;
+      }
+
+      h3 {
+        color: #fff;
+      }
+    `
+  ]
+})
+export class NzDemoCarouselPositionComponent {
+  array = [1, 2, 3, 4];
+  dotPosition = 'bottom';
+}
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
diff --git a/components/carousel/demo/vertical.ts b/components/carousel/demo/vertical.ts
diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
@@ -24,17 +24,17 @@ import { NzCarouselModule } from 'ng-zorro-antd';
 
 ### nz-carousel
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` |
-| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` |
-| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - |
-| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` |
-| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` |
-| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` |
-| `[nzVertical]` | Whether to use a vertical display | `boolean` | `false` |
-| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter<number>` | - |
-| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - |
+| Property | Description | Type | Default | Version since |
+| -------- | ----------- | ---- | ------- | ------------- |
+| `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | |
+| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | |
+| `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | |
+| `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 |
+| `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | |
+| `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | |
+| `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | |
+| `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter<number>` | - | |
+| `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | |
 
 #### Methods
 

diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
@@ -25,17 +25,17 @@ import { NzCarouselModule } from 'ng-zorro-antd';
 
 ### nz-carousel
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` |
-| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` |
-| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - |
-| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` |
-| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` |
-| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` |
-| `[nzVertical]` | 垂直显示 | `boolean` | `false` |
-| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | - |
-| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | |
+| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | |
+| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - | |
+| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | 8.0.0 | |
+| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | |
+| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | |
+| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | |
+| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | - | |
+| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - | |
 
 #### 方法
 

diff --git a/components/carousel/nz-carousel-definitions.ts b/components/carousel/nz-carousel-definitions.ts
@@ -10,19 +10,28 @@ import { InjectionToken, QueryList } from '@angular/core';
 import { NzCarouselContentDirective } from './nz-carousel-content.directive';
 import { NzCarouselBaseStrategy } from './strategies/base-strategy';
 
-// Support string for custom transition effect.
 export type NzCarouselEffects = 'fade' | 'scrollx' | string;
+export type NzCarouselDotPosition = 'top' | 'bottom' | 'left' | 'right';
 
 export interface NzCarouselComponentAsSource {
   carouselContents: QueryList<NzCarouselContentDirective>;
   el: HTMLElement;
   nzTransitionSpeed: number;
-  nzVertical: boolean;
+  vertical: boolean;
   slickListEl: HTMLElement;
   slickTrackEl: HTMLElement;
   activeIndex: number;
 }
 
+export interface NzCarouselStrategyRegistryItem {
+  name: string;
+  strategy: NzCarouselBaseStrategy;
+}
+
+export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken<NzCarouselStrategyRegistryItem[]>(
+  'nz-carousel-custom-strategies'
+);
+
 export interface PointerVector {
   x: number;
   y: number;
@@ -32,12 +41,3 @@ export interface FromToInterface {
   from: number;
   to: number;
 }
-
-export interface CarouselStrategyRegistryItem {
-  name: string;
-  strategy: NzCarouselBaseStrategy;
-}
-
-export const NZ_CAROUSEL_CUSTOM_STRATEGIES = new InjectionToken<CarouselStrategyRegistryItem[]>(
-  'nz-carousel-custom-strategies'
-);
diff --git a/components/carousel/nz-carousel.component.html b/components/carousel/nz-carousel.component.html
@@ -13,7 +13,14 @@
     </div>
   </div>
   <!-- Render dots. -->
-  <ul class="slick-dots" *ngIf="nzDots">
+  <ul
+    class="slick-dots"
+    *ngIf="nzDots"
+    [class.slick-dots-top]="nzDotPosition === 'top'"
+    [class.slick-dots-bottom]="nzDotPosition === 'bottom'"
+    [class.slick-dots-left]="nzDotPosition === 'left'"
+    [class.slick-dots-right]="nzDotPosition === 'right'"
+  >
     <li
       *ngFor="let content of carouselContents; let i = index"
       [class.slick-active]="content.isActive"

diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -10,6 +10,7 @@ import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import {
+  isDevMode,
   AfterContentInit,
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -39,9 +40,10 @@ import { takeUntil, throttleTime } from 'rxjs/operators';
 
 import { NzCarouselContentDirective } from './nz-carousel-content.directive';
 import {
-  CarouselStrategyRegistryItem,
   FromToInterface,
+  NzCarouselDotPosition,
   NzCarouselEffects,
+  NzCarouselStrategyRegistryItem,
   NZ_CAROUSEL_CUSTOM_STRATEGIES,
   PointerVector
 } from './nz-carousel-definitions';
@@ -57,7 +59,7 @@ import { NzCarouselTransformStrategy } from './strategies/transform-strategy';
   preserveWhitespaces: false,
   templateUrl: './nz-carousel.component.html',
   host: {
-    '[class.ant-carousel-vertical]': 'nzVertical'
+    '[class.ant-carousel-vertical]': 'vertical'
   },
   styles: [
     `
@@ -89,11 +91,39 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   @Input() nzEffect: NzCarouselEffects = 'scrollx';
   @Input() @InputBoolean() nzEnableSwipe = true;
   @Input() @InputBoolean() nzDots: boolean = true;
-  @Input() @InputBoolean() nzVertical: boolean = false;
   @Input() @InputBoolean() nzAutoPlay = false;
   @Input() @InputNumber() nzAutoPlaySpeed = 3000;
   @Input() @InputNumber() nzTransitionSpeed = 500;
 
+  @Input()
+  @InputBoolean()
+  get nzVertical(): boolean {
+    return this.vertical;
+  }
+
+  set nzVertical(value: boolean) {
+    if (isDevMode()) {
+      console.warn(`'nzVertical' is deprecated and will be removed in 9.0.0. Please use 'nzDotPosition' instead.`);
+    }
+    this.vertical = value;
+  }
+
+  @Input()
+  set nzDotPosition(value: NzCarouselDotPosition) {
+    this._dotPosition = value;
+    if (value === 'left' || value === 'right') {
+      this.vertical = true;
+    } else {
+      this.vertical = false;
+    }
+  }
+
+  get nzDotPosition(): NzCarouselDotPosition {
+    return this._dotPosition;
+  }
+
+  private _dotPosition: NzCarouselDotPosition = 'bottom';
+
   @Output() readonly nzBeforeChange = new EventEmitter<FromToInterface>();
   @Output() readonly nzAfterChange = new EventEmitter<number>();
 
@@ -102,6 +132,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   slickListEl: HTMLElement;
   slickTrackEl: HTMLElement;
   strategy: NzCarouselBaseStrategy;
+  vertical = false;
   transitionInProgress: number | null;
 
   private destroy$ = new Subject<void>();
@@ -114,12 +145,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
 
   constructor(
     elementRef: ElementRef,
-    @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
     private ngZone: NgZone,
     private platform: Platform,
-    @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: CarouselStrategyRegistryItem[]
+    @Inject(DOCUMENT) document: any, // tslint:disable-line:no-any
+    @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[]
   ) {
     this.document = document;
     this.renderer.addClass(elementRef.nativeElement, 'ant-carousel');
@@ -165,14 +196,20 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzEffect } = changes;
+    const { nzEffect, nzDotPosition } = changes;
 
     if (nzEffect && !nzEffect.isFirstChange()) {
       this.switchStrategy();
       this.markContentActive(0);
       this.syncStrategy();
     }
 
+    if (nzDotPosition && !nzDotPosition.isFirstChange()) {
+      this.switchStrategy();
+      this.markContentActive(0);
+      this.syncStrategy();
+    }
+
     if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) {
       this.clearScheduledTransition();
     } else {

diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
@@ -18,6 +18,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy';
       [nzEffect]="effect"
       [nzVertical]="vertical"
       [nzDots]="dots"
+      [nzDotPosition]="dotPosition"
       [nzDotRender]="dotRender"
       [nzAutoPlay]="autoPlay"
       [nzAutoPlaySpeed]="autoPlaySpeed"
@@ -36,6 +37,7 @@ import { NzCarouselOpacityStrategy } from './strategies/opacity-strategy';
 export class NzTestCarouselBasicComponent {
   @ViewChild(NzCarouselComponent, { static: false }) nzCarouselComponent: NzCarouselComponent;
   dots = true;
+  dotPosition = 'bottom';
   vertical = false;
   effect = 'scrollx';
   array = [1, 2, 3, 4];
@@ -135,6 +137,7 @@ describe('carousel', () => {
       expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
     }));
 
+    // @deprecated 9.0.0
     it('should vertical work', () => {
       fixture.detectChanges();
 
@@ -149,6 +152,12 @@ describe('carousel', () => {
       expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical');
     });
 
+    it('should nzDotPosition work', () => {
+      testComponent.dotPosition = 'left';
+      fixture.detectChanges();
+      expect(carouselWrapper.nativeElement.firstElementChild!.classList).toContain('slick-vertical');
+    });
+
     it('should effect change work', fakeAsync(() => {
       fixture.detectChanges();
       tick(1000);
@@ -381,8 +390,9 @@ function tickMilliseconds<T>(fixture: ComponentFixture<T>, seconds: number = 1):
 
 /*
  * Swipe a carousel.
+ *
  * @param carousel: Carousel component.
- * @Distance: Positive to right. Nagetive to left.
+ * @param Distance: Positive to right. Negative to left.
  */
 function swipe(carousel: NzCarouselComponent, distance: number): void {
   carousel.pointerDown(new MouseEvent('mousedown', { clientX: 500, clientY: 0 }));