feat(module:divider): add nzOrientation property (#1126)

NG-ZORRO · Mar 13, 2018 · e100681 · e100681
1 parent 457981d
commit e100681
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 6 deletions.
diff --git a/components/divider/demo/horizontal.ts b/components/divider/demo/horizontal.ts
@@ -13,6 +13,10 @@ import { Component } from '@angular/core';
         <ng-template #text><i class="anticon anticon-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.</p>
+      <nz-divider nzText="With 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 nzText="With 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>
   `
 })

diff --git a/components/divider/divider.spec.ts b/components/divider/divider.spec.ts
@@ -56,21 +56,33 @@ describe('divider', () => {
       expect(fixtureTemplate.debugElement.query(By.css('.anticon-plus')) != null).toBe(true);
     });
   });
+
+  describe('#nzOrientation', () => {
+    [ 'left', 'right' ].forEach(type => {
+      it(`with ${type}`, () => {
+        context.nzOrientation = type;
+        fixture.detectChanges();
+        expect(dl.query(By.css(`.ant-divider-with-text-${type}`)) != null).toBe(true);
+      });
+    });
+  });
 });
 
 @Component({
   template: `
   <nz-divider #comp
     [nzDashed]="nzDashed"
     [nzType]="nzType"
-    [nzText]="nzText"></nz-divider>
+    [nzText]="nzText"
+    [nzOrientation]="nzOrientation"></nz-divider>
   `
 })
 class TestDividerComponent {
   @ViewChild('comp') comp: NzDividerComponent;
   nzDashed = false;
   nzType = 'horizontal';
   nzText = 'with text';
+  nzOrientation: string = '';
 }
 
 @Component({

diff --git a/components/divider/doc/index.en-US.md b/components/divider/doc/index.en-US.md
@@ -2,7 +2,7 @@
 category: Components
 type: Other
 title: Divider
-cols: 1
+cols: 2
 ---
 
 A divider line separates different content.
@@ -21,3 +21,4 @@ A divider line separates different content.
 | nzDashed | whether line is dasded | Boolean | false |
 | nzType | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
 | nzText | inner text of divider | `string丨TemplateRef<void>` | - |
+| nzOrientation | inner text orientation | enum: `left` `right` | - |
diff --git a/components/divider/doc/index.zh-CN.md b/components/divider/doc/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 type: Other
 title: Divider
 subtitle: 分割线
-cols: 1
+cols: 2
 ---
 
 区隔内容的分割线。
@@ -20,3 +20,4 @@ cols: 1
 | nzDashed | 是否虚线 | Boolean | false |
 | nzType | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
 | nzText | 中间文字 | `string丨TemplateRef<void>` | - |
+| nzOrientation | 中间文字方向 | enum: `left` `right` | - |
diff --git a/components/divider/nz-divider.component.ts b/components/divider/nz-divider.component.ts
@@ -33,6 +33,8 @@ export class NzDividerComponent implements OnChanges, OnInit {
 
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
 
+  @Input() nzOrientation: 'left' | 'right' | '' = '';
+
   private _dashed = false;
   @Input()
   set nzDashed(value: boolean) {
@@ -44,10 +46,11 @@ export class NzDividerComponent implements OnChanges, OnInit {
 
   // endregion
   private setClass(): void {
+    const orientationPrefix = (this.nzOrientation.length > 0) ? '-' + this.nzOrientation : this.nzOrientation;
     const classMap = {
       ['ant-divider']: true,
       [`ant-divider-${this.nzType}`]: true,
-      [`ant-divider-with-text`]: this.isText,
+      [`ant-divider-with-text${orientationPrefix}`]: this.isText,
       [`ant-divider-dashed`]: this.nzDashed
     };
     this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -44,17 +44,81 @@
       transform: translateY(50%);
     }
   }
-
   &-inner-text {
     display: inline-block;
     padding: 0 24px;
   }
+  &-horizontal&-with-text-left {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
 
+  &-horizontal&-with-text-right {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
   &-dashed {
     background: none;
     border-top: 1px dashed @border-color-split;
   }
-
   &-horizontal&-with-text&-dashed {
     border-top: 0;
     &:before,