NG-ZORRO · vthinkxie · Jun 22, 2019 · Jun 22, 2019 · Jun 22, 2019 · Jun 22, 2019
@@ -12,16 +12,16 @@ When user browses a long web page, some content need to stick to the viewport. T
 
 Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzAffixModule } from 'ng-zorro-antd';
+import { NzAffixModule } from 'ng-zorro-antd/affix';
 ```
 
+## API
+
 ### nz-affix
 
 | Property | Description | Type | Default |

@@ -13,16 +13,17 @@ title: Affix
 
 页面可视范围过小时，慎用此功能以免遮挡页面内容。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzAffixModule } from 'ng-zorro-antd';
+import { NzAffixModule } from 'ng-zorro-antd/affix';
 ```
 
+## API
+
+
 ### nz-affix
 
 | 成员 | 说明 | 类型 | 默认值 |

@@ -11,16 +11,16 @@ Alert component for feedback.
 - When you need to show alert messages to users.
 - When you need a persistent static container which is closable by user actions.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzAlertModule } from 'ng-zorro-antd';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
 ```
 
+## API
+
 ### nz-alert
 
 | Property | Description | Type | Default |

@@ -12,16 +12,16 @@ title: Alert
 - 当某个页面需要向用户显示警告的信息时。
 - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzAlertModule } from 'ng-zorro-antd';
+import { NzAlertModule } from 'ng-zorro-antd/alert';
 ```
 
+## API
+
 ### nz-alert
 
 | 参数 | 说明 | 类型 | 默认值 |

@@ -10,16 +10,16 @@ Hyperlinks to scroll on one page.
 
 For displaying anchor hyperlinks on page and jumping between them.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzAnchorModule } from 'ng-zorro-antd';
+import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 ```
 
+## API
+
 ### nz-anchor
 
 | Property | Description | Type | Default |

@@ -11,16 +11,17 @@ title: Anchor
 
 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzAnchorModule } from 'ng-zorro-antd';
+import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 ```
 
+
+## API
+
 ### nz-anchor
 
 | 成员 | 说明 | 类型 | 默认值 |

@@ -10,6 +10,14 @@ Autocomplete function of input field.
 
 When there is a need for autocomplete functionality.
 
+## Import this Component Individually
+
+You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
+
+```ts
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+```
+
 ## API
 
 ```html
@@ -26,14 +34,6 @@ When there is a need for autocomplete functionality.
 </nz-autocomplete>
 ```
 
-### Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
-```ts
-import { NzAutocompleteModule } from 'ng-zorro-antd';
-```
-
 ### [nzAutocomplete]
 
 | Property | Description | Type | Default |

@@ -11,6 +11,14 @@ subtitle: 自动完成
 
 需要自动完成时。
 
+## 单独引入此组件
+
+想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
+
+```ts
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+```
+
 ## API
 
 ```html
@@ -27,14 +35,6 @@ subtitle: 自动完成
 </nz-autocomplete>
 ```
 
-### 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
-```ts
-import { NzAutocompleteModule } from 'ng-zorro-antd';
-```
-
 ### [nzAutocomplete]
 
 | 属性 | 说明 | 类型 | 默认值 |

@@ -6,16 +6,16 @@ title: Avatar
 
 Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzAvatarModule } from 'ng-zorro-antd';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 ```
 
+## API
+
 ### nz-avatar
 
 | Property | Description | Type | Default |

@@ -7,16 +7,16 @@ title: Avatar
 
 用来代表用户或事物，支持图片、图标或字符展示。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzAvatarModule } from 'ng-zorro-antd';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 ```
 
+## API
+
 ### nz-avatar
 
 | 参数 | 说明 | 类型 | 默认值 |

@@ -11,16 +11,16 @@ title: BackTop
 - When the page content is very long.
 - When you need to go back to the top very frequently in order to view the contents.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzBackTopModule } from 'ng-zorro-antd';
+import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 ```
 
+## API
+
 ### nz-back-top
 
 > The distance to the bottom is set to `50px` by default, which is overridable.

@@ -12,16 +12,16 @@ title: BackTop
 - 当页面内容区域比较长时；
 - 当用户需要频繁返回顶部查看相关内容时。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzBackTopModule } from 'ng-zorro-antd';
+import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 ```
 
+## API
+
 ### nz-back-top
 
 > 有默认样式，距离底部 `50px`，可覆盖。

@@ -10,6 +10,14 @@ Small numerical value or status descriptor for UI elements.
 
 Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
 
+## Import this Component Individually
+
+You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
+
+```ts
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+```
+
 ## API
 
 ```html
@@ -22,14 +30,6 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 <nz-badge [nzCount]="5"></nz-badge>
 ```
 
-### Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
-```ts
-import { NzBadgeModule } from 'ng-zorro-antd';
-```
-
 ### nz-badge
 
 | Property | Description | Type | Default |

@@ -11,6 +11,14 @@ title: Badge
 
 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
 
+## 单独引入此组件
+
+想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
+
+```ts
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+```
+
 ## API
 
 ```html
@@ -23,14 +31,6 @@ title: Badge
 <nz-badge [nzCount]="5"></nz-badge>
 ```
 
-### 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
-```ts
-import { NzBadgeModule } from 'ng-zorro-antd';
-```
-
 ### nz-badge
 
 | 参数 | 说明 | 类型 | 默认值 |

@@ -13,16 +13,16 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 - When the user may need to navigate back to a higher level.
 - When the application has multi-layer architecture.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzBreadCrumbModule } from 'ng-zorro-antd';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 ```
 
+## API
+
 ### nz-breadcrumb
 
 | Property | Description | Type | Default |

@@ -13,16 +13,16 @@ title: Breadcrumb
 - 当需要告知用户『你在哪里』时；
 - 当需要向上导航的功能时。
 
-## API
-
-### 单独引入此组件
+## 单独引入此组件
 
 想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
 
 ```ts
-import { NzBreadCrumbModule } from 'ng-zorro-antd';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 ```
 
+## API
+
 ### nz-breadcrumb
 
 | 参数 | 说明 | 类型 | 默认值 |

@@ -10,16 +10,16 @@ To trigger an operation.
 
 A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
 
-## API
-
-### Import this Component Individually
+## Import this Component Individually
 
 You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
 
 ```ts
-import { NzButtonModule } from 'ng-zorro-antd';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 ```
 
+## API
+
 ### [nz-button]
 
 To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`.