From 13d186983fb4d02e09971b480c1b159498e4b12b Mon Sep 17 00:00:00 2001 From: Laffery <49607541+Laffery@users.noreply.github.com> Date: Mon, 24 Feb 2025 18:34:18 +0800 Subject: [PATCH] refactor(module:icon): migrate usage from [nz-icon] to nz-icon (#9019) --- components/code-editor/demo/complex.ts | 5 +- .../collapse/collapse-panel.component.ts | 7 +- components/comment/demo/basic.ts | 10 +-- components/form/demo/dynamic-form-item.ts | 7 +- components/icon/demo/custom.md | 2 +- components/icon/doc/index.en-US.md | 36 +++++---- components/icon/doc/index.zh-CN.md | 42 +++++----- components/image/image-preview.component.ts | 5 +- components/input/demo/allow-clear.ts | 16 +--- components/input/demo/password-input.ts | 5 +- components/layout/demo/custom-trigger.ts | 5 +- components/menu/doc/index.en-US.md | 52 ++++++++----- components/menu/doc/index.zh-CN.md | 78 +++++++++++-------- .../notification/notification.component.ts | 20 ++--- .../pagination/pagination-item.component.ts | 9 +-- components/resizable/demo/customize.ts | 5 +- .../table/src/addon/sorters.component.ts | 14 +--- .../time-picker/time-picker.component.ts | 8 +- components/tree-view/demo/line.ts | 6 +- components/tree/demo/customized-icon.ts | 6 +- .../tree/tree-node-switcher.component.ts | 11 +-- components/upload/demo/avatar.ts | 2 +- docs/global-config.en-US.md | 2 +- docs/global-config.zh-CN.md | 2 +- .../files/src/app/app.component.html.template | 5 +- .../doc/app/codebox/codebox.component.html | 15 ++-- .../doc/app/header/header.component.html | 5 +- scripts/site/utils/generate-demo.js | 4 +- 28 files changed, 173 insertions(+), 211 deletions(-) diff --git a/components/code-editor/demo/complex.ts b/components/code-editor/demo/complex.ts index 205d962818b..328639412f9 100644 --- a/components/code-editor/demo/complex.ts +++ b/components/code-editor/demo/complex.ts @@ -25,14 +25,13 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography'; [nzEditorOption]="{ language: 'javascript' }" > - + /> `, styles: [ diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts index 9317d06b9e2..88dd158668e 100644 --- a/components/collapse/collapse-panel.component.ts +++ b/components/collapse/collapse-panel.component.ts @@ -45,12 +45,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel'; @if (nzShowArrow) {
- +
} diff --git a/components/comment/demo/basic.ts b/components/comment/demo/basic.ts index b0de5e86aac..9f81e68c9df 100644 --- a/components/comment/demo/basic.ts +++ b/components/comment/demo/basic.ts @@ -24,25 +24,23 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

- + /> {{ likes }} - + /> {{ dislikes }} Reply to diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts index 0d4b7a853e1..6bc61294f39 100644 --- a/components/form/demo/dynamic-form-item.ts +++ b/components/form/demo/dynamic-form-item.ts @@ -29,12 +29,7 @@ import { NzInputModule } from 'ng-zorro-antd/input'; [attr.id]="control.id" [formControlName]="control.controlInstance" /> - + } diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md index 7e762651479..249986d9697 100644 --- a/components/icon/demo/custom.md +++ b/components/icon/demo/custom.md @@ -11,4 +11,4 @@ title: ## en-US -You can just put a `svg` element inside of a `nz-icon` to render custom content. We would take care of size and color things for you. +You can just put a `svg` element inside a `nz-icon` to render custom content. We would take care of size and color for you. diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md index c43ea7dcfc1..e7089cb6957 100755 --- a/components/icon/doc/index.en-US.md +++ b/components/icon/doc/index.en-US.md @@ -21,7 +21,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ### nz-icon, [nz-icon] | Property | Description | Type | Default | Global Config | -| ------------------ | ----------------------------------------------------------- | ------------------------------ | ----------- | ------------- | +|--------------------|-------------------------------------------------------------|--------------------------------|-------------|---------------| | `[nzType]` | Type of the ant design icon | `string` | - | | `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ | | `[nzSpin]` | Rotate icon with animation | `boolean` | `false` | @@ -32,10 +32,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ### NzIconService | Methods/Properties | Description | Parameters | -| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ | +|------------------------|--------------------------------------------------------------------------------------------------|--------------------------| | `addIcon()` | To import icons statically | `IconDefinition` | | `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` | -| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` | +| `fetchFromIconfont()` | To get icon assets from iconfont | `NzIconfontOption` | | `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` | ### SVG icons @@ -49,16 +49,18 @@ We synced to Ant Design and replaced font icons with svg icons which bring benef You can join in [this discussion of Ant Design](https://github.com/ant-design/ant-design/issues/10353). -NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons. But the best practice is always to use `nz-icon` directive and specify the `theme` prop. +NG-ZORRO hadn't provided an icon component at the beginning. Instead, icon based on font files was provided. +We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons. +But the best practice is always to use `nz-icon` component and specify the `theme` prop. ```html - + ``` All the icons will be rendered to ``, and styles and classes applied to `` would work. ```html - + ``` ### Static loading and dynamic loading @@ -102,11 +104,15 @@ export const appConfig = { } ``` -Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can. +Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading +would increase your bundle's size so we recommend use dynamic importing as much as you can. -> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically. +> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the +> official website are loaded dynamically. -Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your `angular.json` like this: +Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to +render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your +`angular.json` like this: ```json { @@ -120,9 +126,11 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO } ``` -You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`. +You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can +deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`. -Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call `changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there. +Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call +`changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there. Please call this in component's constructor or `AppInitService`. @@ -134,7 +142,7 @@ Sometimes, you want to import icons in lazy modules to avoid increasing the size import { NzIconModule } from 'ng-zorro-antd/icon'; @NgModule({ - imports: [CommonModule, NzIconModule.forChild([QuestionOutline])] + imports: [NzIconModule.forChild([QuestionOutline])] }) class ChildModule {} ``` @@ -178,7 +186,7 @@ this._iconService.fetchFromIconfont({ ``` ```html - + ``` It creates a component that uses SVG sprites in essence. @@ -186,7 +194,7 @@ It creates a component that uses SVG sprites in essence. The following option are available: | Property | Description | Type | Default | -| ----------- | ----------------------------------------- | -------- | ------- | +|-------------|-------------------------------------------|----------|---------| | `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - | The property scriptUrl should be set to import the svg sprite symbols. diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md index b156158eb6d..c18aa50e0bc 100755 --- a/components/icon/doc/index.zh-CN.md +++ b/components/icon/doc/index.zh-CN.md @@ -21,22 +21,22 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; ### nz-icon, [nz-icon] -| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | -| ------------------ | -------------------------------------------------------------- | ------------------------------ | ----------- | ------------ | -| `[nzType]` | 图标类型，遵循图标的命名规范 | string | - | -| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅ | -| `[nzSpin]` | 是否有旋转动画 | `boolean` | `false` | -| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)` | - | ✅ | -| `[nzIconfont]` | 指定来自 IconFont 的图标类型 | string | - | -| `[nzRotate]` | 图标旋转角度（7.0.0 开始支持） | `number` | - | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +|--------------------|---------------------------------------|------------------------------|-------------|--------| +| `[nzType]` | 图标类型，遵循图标的命名规范 | string | - | +| `[nzTheme]` | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅ | +| `[nzSpin]` | 是否有旋转动画 | `boolean` | `false` | +| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)` | - | ✅ | +| `[nzIconfont]` | 指定来自 IconFont 的图标类型 | string | - | +| `[nzRotate]` | 图标旋转角度（7.0.0 开始支持） | `number` | - | ### NzIconService -| 方法/属性 | 说明 | 参数 | -| ---------------------- | ------------------------------------------------------------------------------------ | ------------------------ | -| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` | -| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` | -| `fetchFromIconfont()` | 用于从 FontIcon 获取图标资源文件 | `NzIconfontOption` | +| 方法/属性 | 说明 | 参数 | +|------------------------|-------------------------------------------------|--------------------------| +| `addIcon()` | 用于静态引入图标，可传入多个值（或者用数组解构赋值） | `IconDefinition` | +| `addIconLiteral()` | 用于静态引入用户自定义图标 | `string`, `string (SVG)` | +| `fetchFromIconfont()` | 用于从 IconFont 获取图标资源文件 | `NzIconfontOption` | | `changeAssetsSource()` | 用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn | `string` | ### SVG 图标 @@ -50,16 +50,16 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; 可参与 Ant Design 的相关讨论：[#10353](https://github.com/ant-design/ant-design/issues/10353)。 -NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的指令 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如： +NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的组件 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如： ```html - + ``` 所有的图标都会以 `` 标签渲染，但是你还是可以用之前对 i 标签设置的样式和类来控制 svg 的样式，例如： ```html - + ``` ### 静态加载与动态加载 @@ -133,7 +133,7 @@ export const appConfig = { ```typescript @NgModule({ - imports: [CommonModule, NzIconModule.forChild([QuestionOutline])] + imports: [NzIconModule.forChild([QuestionOutline])] }) class ChildModule {} ``` @@ -177,16 +177,16 @@ this._iconService.fetchFromIconfont({ ``` ```html - + ``` 其本质上是创建了一个使用 `` 标签渲染图标的组件。 `options` 的配置项如下： -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | ---------------------------------------------------------------------------------------------- | ------ | ------ | -| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +|-------------|----------------------------------------------------------------------------|--------|-----| +| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | - | 在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。 diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts index 450be63c2a5..18d1d68eb58 100644 --- a/components/image/image-preview.component.ts +++ b/components/image/image-preview.component.ts @@ -87,13 +87,12 @@ const NZ_DEFAULT_ROTATE = 0; [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'" (click)="option.onClick()" > - + /> } diff --git a/components/input/demo/allow-clear.ts b/components/input/demo/allow-clear.ts index 2b5a8326af5..bc34749ba83 100644 --- a/components/input/demo/allow-clear.ts +++ b/components/input/demo/allow-clear.ts @@ -13,13 +13,7 @@ import { NzInputModule } from 'ng-zorro-antd/input'; @if (inputValue) { - + }
@@ -29,13 +23,7 @@ import { NzInputModule } from 'ng-zorro-antd/input'; @if (textValue) { - + } ` diff --git a/components/input/demo/password-input.ts b/components/input/demo/password-input.ts index 42a86ad736c..3652841f385 100644 --- a/components/input/demo/password-input.ts +++ b/components/input/demo/password-input.ts @@ -17,12 +17,11 @@ import { NzInputModule } from 'ng-zorro-antd/input'; /> - + /> ` }) diff --git a/components/layout/demo/custom-trigger.ts b/components/layout/demo/custom-trigger.ts index 185cba1c829..520988dcaaa 100644 --- a/components/layout/demo/custom-trigger.ts +++ b/components/layout/demo/custom-trigger.ts @@ -34,12 +34,11 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; - + /> diff --git a/components/menu/doc/index.en-US.md b/components/menu/doc/index.en-US.md index ca0a1d82c25..d3283bb8923 100755 --- a/components/menu/doc/index.en-US.md +++ b/components/menu/doc/index.en-US.md @@ -10,7 +10,9 @@ Menu list of Navigation. ## When To Use -Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website. +Navigation menu is important for a website, it helps users jump from one site section to another quickly. +Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. +Side navigation provides the multi-level structure of the website. More layouts with navigation: [layout](/components/layout/en). @@ -36,19 +38,19 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; ### [nz-menu] -| Param | Description | Type | Default value | -| --------------------- | ----------------------------------------------------------------------------- | ---------------------------------------- | ------------- | -| `[nzInlineCollapsed]` | specifies the collapsed status when menu is `inline` mode | `boolean` | - | -| `[nzInlineIndent]` | indent px of `inline` menu item on each level | `number` | `24` | +| Param | Description | Type | Default value | +|-----------------------|------------------------------------------------------------------------------|------------------------------------------|---------------| +| `[nzInlineCollapsed]` | specifies the collapsed status when menu is `inline` mode | `boolean` | - | +| `[nzInlineIndent]` | indent px of `inline` menu item on each level | `number` | `24` | | `[nzMode]` | type of the menu; `vertical`、 `horizontal`, and `inline` modes are supported | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | -| `[nzSelectable]` | allow selecting menu items | `boolean` | `true` | -| `[nzTheme]` | color theme of the menu | `'light' \| 'dark'` | `'light'` | -| `(nzClick)` | the Output when click `nz-menu-item` inside nz-menu | `EventEmitter` | | +| `[nzSelectable]` | allow selecting menu items | `boolean` | `true` | +| `[nzTheme]` | color theme of the menu | `'light' \| 'dark'` | `'light'` | +| `(nzClick)` | the Output when click `nz-menu-item` inside nz-menu | `EventEmitter` | | ### [nz-menu-item] | Param | Description | Type | Default value | -| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------- | +|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------| | `[nzDisabled]` | whether menu item is disabled or not | `boolean` | `false` | | `[nzSelected]` | whether menu item is selected or not | `boolean` | `false` | | `[nzMatchRouter]` | whether auto set `nzSelected` according to [routerLink](https://www.angular.io/api/router/RouterLink) | `boolean` | `false` | @@ -62,16 +64,22 @@ You can set the title of `[nz-submenu]` in the following ways. ```html
  • -
  • SubTitle
    • +
  • + + + SubTitle + +
  • -SubTitle + + + SubTitle + ``` | Param | Description | Type | Default value | -| -------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------- | +|----------------------------|-------------------------------------------------|---------------------------------------------------------------------------------------------|----------------| | `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` | | `[nzOpen]` | whether sub menu is open or not, double binding | `boolean` | `false` | | `[nzDisabled]` | whether sub menu is disabled or not | `boolean` | `false` | @@ -88,16 +96,22 @@ You can set the title of `[nz-menu-group]` in the following ways. ```html
  • -
  • SubTitle
    • +
  • + < title> + + SubTitle + +
  • -SubTitle + + + SubTitle + ``` | Param | Description | Type | Default value | -| ----------- | -------------------- | ----------------------------- | ------------- | +|-------------|----------------------|-------------------------------|---------------| | `[nzTitle]` | set menu group title | `string \| TemplateRef` | - | ### [nz-menu-divider] diff --git a/components/menu/doc/index.zh-CN.md b/components/menu/doc/index.zh-CN.md index dcab2133afe..479a754deda 100755 --- a/components/menu/doc/index.zh-CN.md +++ b/components/menu/doc/index.zh-CN.md @@ -37,24 +37,24 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; ### [nz-menu] -| 参数 | 说明 | 类型 | 默认值 | -| --------------------- | -------------------------------------------- | ---------------------------------------- | ------------ | -| `[nzInlineCollapsed]` | `inline` 时菜单是否收起状态 | `boolean` | - | -| `[nzInlineIndent]` | `inline` 模式的菜单缩进宽度 | `number` | `24` | +| 参数 | 说明 | 类型 | 默认值 | +|-----------------------|------------------------|------------------------------------------|--------------| +| `[nzInlineCollapsed]` | `inline` 时菜单是否收起状态 | `boolean` | - | +| `[nzInlineIndent]` | `inline` 模式的菜单缩进宽度 | `number` | `24` | | `[nzMode]` | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | -| `[nzSelectable]` | 是否允许选中 | `boolean` | `true` | -| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `'light'` | -| `(nzClick)` | 点击 `nz-menu-item` 输出属性 | `EventEmitter` | | +| `[nzSelectable]` | 是否允许选中 | `boolean` | `true` | +| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `'light'` | +| `(nzClick)` | 点击 `nz-menu-item` 输出属性 | `EventEmitter` | | ### [nz-menu-item] -| 参数 | 说明 | 类型 | 默认值 | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | -| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | -| `[nzSelected]` | 是否被选中 | `boolean` | `false` | -| `[nzMatchRouter]` | 是否根据 [routerLink](https://www.angular.cn/api/router/RouterLink) 自动设定 `nzSelected` | `boolean` | `false` | +| 参数 | 说明 | 类型 | 默认值 | +|------------------------|------------------------------------------------------------------------------------------------------------------|-----------|---------| +| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzSelected]` | 是否被选中 | `boolean` | `false` | +| `[nzMatchRouter]` | 是否根据 [routerLink](https://www.angular.cn/api/router/RouterLink) 自动设定 `nzSelected` | `boolean` | `false` | | `[nzMatchRouterExact]` | 是否路由完整精确匹配, 详见 [routerLinkActiveOptions](https://angular.cn/api/router/RouterLinkActive#routerLinkActiveOptions) | `boolean` | `false` | -| `[nzDanger]` | 展示错误状态样式 | `boolean` | `false` | +| `[nzDanger]` | 展示错误状态样式 | `boolean` | `false` | ### [nz-submenu] @@ -63,24 +63,30 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; ```html
  • -
  • SubTitle
    • +
  • + + + SubTitle + +
  • -SubTitle + + + SubTitle + ``` -| 参数 | 说明 | 类型 | 默认值 | -| -------------------------- | --------------------------- | ------------------------------------------------------------------------------------------- | -------------- | -| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` | -| `[nzOpen]` | 是否展开，可双向绑定 | `boolean` | `false` | -| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | -| `[nzTitle]` | 标题内容 | `string \| TemplateRef` | - | -| `[nzIcon]` | 标题中 `icon` 类型 | `string` | - | -| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - | +| 参数 | 说明 | 类型 | 默认值 | +|----------------------------|--------------------|---------------------------------------------------------------------------------------------|----------------| +| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` | +| `[nzOpen]` | 是否展开，可双向绑定 | `boolean` | `false` | +| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzTitle]` | 标题内容 | `string \| TemplateRef` | - | +| `[nzIcon]` | 标题中 `icon` 类型 | `string` | - | +| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - | | `[nzTriggerSubMenuAction]` | SubMenu 展开/关闭的触发行为 | `'hover' \| 'click'` | `'hover'` | -| `(nzOpenChange)` | 展开回调 | `EventEmitter` | - | +| `(nzOpenChange)` | 展开回调 | `EventEmitter` | - | ### [nz-menu-group] @@ -89,17 +95,23 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; ```html
  • -
  • SubTitle
    • +
  • + < title> + + SubTitle + +
  • -SubTitle + + + SubTitle + ``` -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | -------- | ----------------------------- | ------ | -| `[nzTitle]` | 标题内容 | `string \| TemplateRef` | - | +| 参数 | 说明 | 类型 | 默认值 | +|-------------|------|-------------------------------|-----| +| `[nzTitle]` | 标题内容 | `string \| TemplateRef` | - | ### [nz-menu-divider] diff --git a/components/notification/notification.component.ts b/components/notification/notification.component.ts index 80b63e42817..bca2772b07d 100644 --- a/components/notification/notification.component.ts +++ b/components/notification/notification.component.ts @@ -41,32 +41,28 @@ import { NzNotificationData } from './typings';
    @switch (instance.type) { @case ('success') { - + /> } @case ('info') { - + /> } @case ('warning') { - + /> } @case ('error') { - + /> } }
    diff --git a/components/pagination/pagination-item.component.ts b/components/pagination/pagination-item.component.ts index b5a8a2059c6..6d398a87462 100644 --- a/components/pagination/pagination-item.component.ts +++ b/components/pagination/pagination-item.component.ts @@ -56,19 +56,14 @@ import { PaginationItemRenderContext, PaginationItemType } from './pagination.ty @switch (type) { @case ('prev_5') { @if (direction === 'rtl') { - + } @else { } } @case ('next_5') { @if (direction === 'rtl') { - + } @else { } diff --git a/components/resizable/demo/customize.ts b/components/resizable/demo/customize.ts index 8e1d736fbfe..c9bc441decb 100644 --- a/components/resizable/demo/customize.ts +++ b/components/resizable/demo/customize.ts @@ -10,11 +10,11 @@ import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable';
    content - +
    - +
    @@ -46,6 +46,7 @@ import { NzResizableModule, NzResizeEvent } from 'ng-zorro-antd/resizable'; align-items: center; justify-content: center; } + .right { background: #fff; border: 1px solid #ddd; diff --git a/components/table/src/addon/sorters.component.ts b/components/table/src/addon/sorters.component.ts index 21894e5ab96..d435e08bbf1 100644 --- a/components/table/src/addon/sorters.component.ts +++ b/components/table/src/addon/sorters.component.ts @@ -29,20 +29,10 @@ import { NzTableSortOrder } from '../table.types'; @if (isUp) { - + } @if (isDown) { - + } diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts index 545733f8145..dc2c34070cf 100644 --- a/components/time-picker/time-picker.component.ts +++ b/components/time-picker/time-picker.component.ts @@ -85,13 +85,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker'; @if (nzAllowEmpty && !nzDisabled && value) { - + }
    diff --git a/components/tree-view/demo/line.ts b/components/tree-view/demo/line.ts index 72c1936e13c..158d1d8948a 100644 --- a/components/tree-view/demo/line.ts +++ b/components/tree-view/demo/line.ts @@ -65,11 +65,7 @@ interface FlatNode { - + {{ node.name }} diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts index 0b1c1c9696c..31f88fe3d29 100644 --- a/components/tree/demo/customized-icon.ts +++ b/components/tree/demo/customized-icon.ts @@ -11,11 +11,7 @@ import { NzTreeModule } from 'ng-zorro-antd/tree'; @if (!origin.isLeaf) { - + } @else { } diff --git a/components/tree/tree-node-switcher.component.ts b/components/tree/tree-node-switcher.component.ts index b7baf9ae83d..38b11803a34 100644 --- a/components/tree/tree-node-switcher.component.ts +++ b/components/tree/tree-node-switcher.component.ts @@ -15,12 +15,11 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; @if (isShowSwitchIcon) { @if (!isLoading) { - + /> } @else { @@ -30,11 +29,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; @if (!isLoading) { @if (isShowLineIcon) { - + } @else { } diff --git a/components/upload/demo/avatar.ts b/components/upload/demo/avatar.ts index 3d7c189e565..32ba76cc714 100644 --- a/components/upload/demo/avatar.ts +++ b/components/upload/demo/avatar.ts @@ -19,7 +19,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload'; (nzChange)="handleChange($event)" > @if (!avatarUrl) { - +
    Upload
    } @else { diff --git a/docs/global-config.en-US.md b/docs/global-config.en-US.md index a3d31648189..a6cdf97fdd7 100644 --- a/docs/global-config.en-US.md +++ b/docs/global-config.en-US.md @@ -62,7 +62,7 @@ To solve this, it is recommended to use a `FactoryProvider` instead of a `ValueP template: ` - + ` diff --git a/docs/global-config.zh-CN.md b/docs/global-config.zh-CN.md index b5a5e945613..b917efeb498 100644 --- a/docs/global-config.zh-CN.md +++ b/docs/global-config.zh-CN.md @@ -63,7 +63,7 @@ export class AppComponent implements OnInit { template: ` - + ` diff --git a/schematics/ng-generate/side-menu/files/src/app/app.component.html.template b/schematics/ng-generate/side-menu/files/src/app/app.component.html.template index 9f1e2edba29..08d16652031 100644 --- a/schematics/ng-generate/side-menu/files/src/app/app.component.html.template +++ b/schematics/ng-generate/side-menu/files/src/app/app.component.html.template @@ -38,10 +38,7 @@
    - +
    diff --git a/scripts/site/_site/doc/app/codebox/codebox.component.html b/scripts/site/_site/doc/app/codebox/codebox.component.html index d91f853dce0..838ce5c73fa 100644 --- a/scripts/site/_site/doc/app/codebox/codebox.component.html +++ b/scripts/site/_site/doc/app/codebox/codebox.component.html @@ -26,7 +26,7 @@
    - - + + /> @if (nzGenerateCommand) { - + /> } @if (isMobile) { - + /> }
    diff --git a/scripts/site/utils/generate-demo.js b/scripts/site/utils/generate-demo.js index e8819978f75..9264914d44d 100644 --- a/scripts/site/utils/generate-demo.js +++ b/scripts/site/utils/generate-demo.js @@ -204,9 +204,9 @@ function wrapperHeader(title, whenToUse, language, example, hasPageDemo, name) { }

    ${language === 'zh' ? '代码演示' : 'Examples'} - + }" (click)="expandAllCode()" />

    ${example}`;