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,