Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(module:carousel): support standalone component #8272

Merged
merged 1 commit into from
Dec 5, 2023
Merged

feat(module:carousel): support standalone component #8272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/carousel/carousel-content.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { Directive, ElementRef, Renderer2 } from '@angular/core';
exportAs: 'nzCarouselContent',
host: {
class: 'slick-slide'
}
},
standalone: true
})
export class NzCarouselContentDirective {
readonly el: HTMLElement;
Expand Down
7 changes: 5 additions & 2 deletions components/carousel/carousel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { Direction, Directionality } from '@angular/cdk/bidi';
import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { Platform } from '@angular/cdk/platform';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import {
AfterContentInit,
AfterViewInit,
Expand Down Expand Up @@ -105,8 +106,10 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'carousel';
host: {
class: 'ant-carousel',
'[class.ant-carousel-vertical]': 'vertical',
'[class.ant-carousel-rtl]': `dir ==='rtl'`
}
'[class.ant-carousel-rtl]': `dir === 'rtl'`
},
imports: [NgIf, NgForOf, NgTemplateOutlet],
standalone: true
})
export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges, OnInit {
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
Expand Down
8 changes: 2 additions & 6 deletions components/carousel/carousel.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,13 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { BidiModule } from '@angular/cdk/bidi';
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { NzCarouselContentDirective } from './carousel-content.directive';
import { NzCarouselComponent } from './carousel.component';

@NgModule({
declarations: [NzCarouselComponent, NzCarouselContentDirective],
exports: [NzCarouselComponent, NzCarouselContentDirective],
imports: [BidiModule, CommonModule, PlatformModule]
imports: [NzCarouselComponent, NzCarouselContentDirective],
exports: [NzCarouselComponent, NzCarouselContentDirective]
})
export class NzCarouselModule {}
42 changes: 21 additions & 21 deletions components/carousel/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel';

## API

### nz-carousel

| Property | Description | Type | Default | Global Config |
| -------- | ----------- | ---- | ------- | ------------- |
| `[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` | ✅ |
| `[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` | ✅ |
| `[nzLoop]` | Whether to enable the carousel to go in a loop | `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 }>` | - |
### nz-carousel:standalone

| Property | Description | Type | Default | Global Config |
| ------------------- | --------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------- |
| `[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` | ✅ |
| `[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` | ✅ |
| `[nzLoop]` | Whether to enable the carousel to go in a loop | `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

| Name | Description |
| ---- | ----------- |
| Name | Description |
| ------------------- | ------------------------------------------ |
| `goTo(slideNumber)` | Change current slide to given slide number |
| `next()` | Change current slide to next slide |
| `pre()` | Change current slide to previous slide |
| `next()` | Change current slide to next slide |
| `pre()` | Change current slide to previous slide |

### InjectionToken

| Token | Description | Parameters | Default Value |
| ----- | --- | ---- | --- |
| `NZ_CAROUSEL_CUSTOM_STRATEGIES` | Provide custom transitioning strategies | `CarouselStrategyRegistryItem[]` | - |
| Token | Description | Parameters | Default Value |
| ------------------------------- | --------------------------------------- | -------------------------------- | ------------- |
| `NZ_CAROUSEL_CUSTOM_STRATEGIES` | Provide custom transitioning strategies | `CarouselStrategyRegistryItem[]` | - |

### Customizing transition effects

Expand Down
42 changes: 21 additions & 21 deletions components/carousel/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,34 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel';

## API

### nz-carousel

| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
| --- | --- | --- | --- | --- |
| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | ✅ |
| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | `number` | `3000` | ✅ |
| `[nzDotRender]` | Dot渲染模板 | `TemplateRef<{ $implicit: number }>` | - |
| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | ✅ |
| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | ✅ |
| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'`|`'scrollx'` | ✅ |
| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | ✅ |
| `[nzLoop]` | 是否支持循环 | `boolean` | `true` | ✅ |
| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | - |
| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - |
### nz-carousel:standalone

| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
| ------------------- | -------------------------------------------------- | -------------------------------------------- | ----------- | ------------ |
| `[nzAutoPlay]` | 是否自动切换 | `boolean` | `false` | ✅ |
| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为 0 时不切换 | `number` | `3000` | ✅ |
| `[nzDotRender]` | Dot 渲染模板 | `TemplateRef<{ $implicit: number }>` | - |
| `[nzDotPosition]` | 面板指示点位置，可选 `top` `bottom` `left` `right` | `string` | `bottom` | ✅ |
| `[nzDots]` | 是否显示面板指示点 | `boolean` | `true` | ✅ |
| `[nzEffect]` | 动画效果函数，可取 `scrollx`, `fade` | `'scrollx'\|'fade'` | `'scrollx'` | ✅ |
| `[nzEnableSwipe]` | 是否支持手势划动切换 | `boolean` | `true` | ✅ |
| `[nzLoop]` | 是否支持循环 | `boolean` | `true` | ✅ |
| `(nzAfterChange)` | 切换面板的回调 | `EventEmitter<number>` | - |
| `(nzBeforeChange)` | 切换面板的回调 | `EventEmitter<{ from: number; to: number }>` | - |

#### 方法

| 名称 | 描述 |
| --- | --- |
| 名称 | 描述 |
| ------------------- | -------------- |
| `goTo(slideNumber)` | 切换到指定面板 |
| `next()` | 切换到下一面板 |
| `pre()` | 切换到上一面板 |
| `next()` | 切换到下一面板 |
| `pre()` | 切换到上一面板 |

### InjectionToken

| Token | 说明 | 参数 | 默认值 |
| ----- | --- | ---- | --- |
| `NZ_CAROUSEL_CUSTOM_STRATEGIES` | 提供用户自定义的切换效果 | `CarouselStrategyRegistryItem[]` | - |
| Token | 说明 | 参数 | 默认值 |
| ------------------------------- | ------------------------ | -------------------------------- | ------ |
| `NZ_CAROUSEL_CUSTOM_STRATEGIES` | 提供用户自定义的切换效果 | `CarouselStrategyRegistryItem[]` | - |

### 自定义切换效果

Expand Down