diff --git a/components/divider/demo/horizontal.ts b/components/divider/demo/horizontal.ts index 8f99f72119..d9f4741834 100644 --- a/components/divider/demo/horizontal.ts +++ b/components/divider/demo/horizontal.ts @@ -13,6 +13,10 @@ import { Component } from '@angular/core'; Add

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

+ +

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/divider.spec.ts b/components/divider/divider.spec.ts index e5b1a24100..68fe2cf77b 100644 --- a/components/divider/divider.spec.ts +++ b/components/divider/divider.spec.ts @@ -56,6 +56,16 @@ 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({ @@ -63,7 +73,8 @@ describe('divider', () => { + [nzText]="nzText" + [nzOrientation]="nzOrientation"> ` }) class TestDividerComponent { @@ -71,6 +82,7 @@ class TestDividerComponent { 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 index a02104647a..8e9d56a6b7 100644 --- 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` | - | +| 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 index af0919ca53..65d0e8a504 100644 --- 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` | - | +| nzOrientation | 中间文字方向 | enum: `left` `right` | - | diff --git a/components/divider/nz-divider.component.ts b/components/divider/nz-divider.component.ts index b15f73aafd..f88cd6bdd6 100644 --- 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 index d38fb0daa1..055c91ece4 100644 --- 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,