feat(module:divider): support nzPlain property

NG-ZORRO · Jul 14, 2020 · d5232ac · d5232ac
1 parent 1a408ee
commit d5232ac
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 1 deletion.
diff --git a/components/divider/demo/horizontal.ts b/components/divider/demo/horizontal.ts
@@ -21,6 +21,7 @@ import { Component } from '@angular/core';
       <nz-divider nzDashed [nzText]="text">
         <ng-template #text><i nz-icon nzType="plus"></i> Add</ng-template>
       </nz-divider>
+
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
         tamen, quo modo.

diff --git a/components/divider/demo/module b/components/divider/demo/module
@@ -1,3 +1,4 @@
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
-export const moduleList = [ NzDividerModule ];
+export const moduleList = [ NzDividerModule, NzIconModule ];
diff --git a/components/divider/demo/orientation.ts b/components/divider/demo/orientation.ts
@@ -4,6 +4,15 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-divider-orientation',
   template: `
     <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
+      <nz-divider nzText="Text"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
       <nz-divider nzText="Left Text" nzOrientation="left"></nz-divider>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert

diff --git a/components/divider/demo/plain.md b/components/divider/demo/plain.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 分割文字使用正文样式
+  en-US: Text without heading style
+---
+
+## zh-CN
+
+使用 `nzPlain` 可以设置为更轻量的分割文字样式。
+
+## en-US
+
+You can use non-heading style of divider text by setting `nzPlain`.
diff --git a/components/divider/demo/plain.ts b/components/divider/demo/plain.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-divider-plain',
+  template: `
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Text"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Left Text" nzOrientation="left"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Right Text" nzOrientation="right"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
+        tamen, quo modo.
+      </p>
+    </div>
+  `
+})
+export class NzDemoDividerPlainComponent {}
diff --git a/components/divider/divider.component.ts b/components/divider/divider.component.ts
@@ -23,6 +23,8 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
     '[class.ant-divider]': 'true',
     '[class.ant-divider-horizontal]': `nzType === 'horizontal'`,
     '[class.ant-divider-vertical]': `nzType === 'vertical'`,
+    '[class.ant-divider-with-text]': `nzText`,
+    '[class.ant-divider-plain]': `nzPlain`,
     '[class.ant-divider-with-text-left]': `nzText && nzOrientation === 'left'`,
     '[class.ant-divider-with-text-right]': `nzText && nzOrientation === 'right'`,
     '[class.ant-divider-with-text-center]': `nzText && nzOrientation === 'center'`,
@@ -31,9 +33,11 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
 })
 export class NzDividerComponent {
   static ngAcceptInputType_nzDashed: BooleanInput;
+  static ngAcceptInputType_nzPlain: BooleanInput;
 
   @Input() nzText?: string | TemplateRef<void>;
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
   @Input() nzOrientation: 'left' | 'right' | 'center' = 'center';
   @Input() @InputBoolean() nzDashed = false;
+  @Input() @InputBoolean() nzPlain = false;
 }
diff --git a/components/divider/doc/index.en-US.md b/components/divider/doc/index.en-US.md
@@ -24,4 +24,5 @@ import { NzDividerModule } from 'ng-zorro-antd/divider';
 | `[nzDashed]` | whether line is dasded | `boolean` | `false` |
 | `[nzType]` | direction type of divider | `'horizontal' \| 'vertical'` | `'horizontal'` |
 | `[nzText]` | inner text of divider | `string \| TemplateRef<void>` | - |
+| `[nzPlain]` | Divider text show as plain style | `boolean` | `false` |
 | `[nzOrientation]` | inner text orientation | `'center' \| 'left' \| 'right'` | `'center'` |
diff --git a/components/divider/doc/index.zh-CN.md b/components/divider/doc/index.zh-CN.md
@@ -25,4 +25,5 @@ import { NzDividerModule } from 'ng-zorro-antd/divider';
 | `[nzDashed]` | 是否虚线 | `boolean` | `false` |
 | `[nzType]` | 水平还是垂直类型 | `'horizontal' \| 'vertical'` | `'horizontal'` |
 | `[nzText]` | 中间文字 | `string \| TemplateRef<void>` | - |
+| `[nzPlain]` | 文字是否显示为普通正文样式	 | `boolean` | `false` |
 | `[nzOrientation]` | 中间文字方向 | `'center' \| 'left' \| 'right'` | `'center'` |