diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap
index 03ebf6dc6..582d2fb35 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.js.snap
@@ -47,4 +47,8 @@ exports[`renders ./components/divider/demo/with-text.vue correctly 1`] = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
Right Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+ Left Text with 0 orientationMargin
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+ Right Text with 50px orientationMargin
+ 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/with-text.vue b/components/divider/demo/with-text.vue
index c3495c9fa..da7201109 100644
--- a/components/divider/demo/with-text.vue
+++ b/components/divider/demo/with-text.vue
@@ -35,4 +35,18 @@ Divider with inner title, set `orientation="left/right"` to align it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
probare, quae sunt a te dicta? Refert tamen, quo modo.
+
+ Left Text with 0 orientationMargin
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+ probare, quae sunt a te dicta? Refert tamen, quo modo.
+
+
+ Right Text with 50px orientationMargin
+
+
+ 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/index.en-US.md b/components/divider/index.en-US.md
index 628349abd..89c375619 100644
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@@ -20,3 +20,4 @@ A divider line separates different content.
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` | |
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` | |
| plain | Divider text show as plain style | boolean | true | 2.2.0 |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - | 3.0 |
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index 9a620d9a3..78b55d63e 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -22,6 +22,7 @@ export const dividerProps = {
type: Boolean,
default: false,
},
+ orientationMargin: [String, Number],
};
export type DividerProps = Partial>;
@@ -30,7 +31,12 @@ const Divider = defineComponent({
props: dividerProps,
setup(props, { slots }) {
const { prefixCls: prefixClsRef, direction } = useConfigInject('divider', props);
-
+ const hasCustomMarginLeft = computed(
+ () => props.orientation === 'left' && props.orientationMargin != null,
+ );
+ const hasCustomMarginRight = computed(
+ () => props.orientation === 'right' && props.orientationMargin != null,
+ );
const classString = computed(() => {
const { type, dashed, plain } = props;
const prefixCls = prefixClsRef.value;
@@ -40,9 +46,20 @@ const Divider = defineComponent({
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: direction.value === 'rtl',
+ [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft.value,
+ [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight.value,
+ };
+ });
+ const innerStyle = computed(() => {
+ const marginValue =
+ typeof props.orientationMargin === 'number'
+ ? `${props.orientationMargin}px`
+ : props.orientationMargin;
+ return {
+ ...(hasCustomMarginLeft.value && { marginLeft: marginValue }),
+ ...(hasCustomMarginRight.value && { marginRight: marginValue }),
};
});
-
const orientationPrefix = computed(() =>
props.orientation.length > 0 ? '-' + props.orientation : props.orientation,
);
@@ -60,7 +77,9 @@ const Divider = defineComponent({
role="separator"
>
{children.length ? (
- {children}
+
+ {children}
+
) : null}
);
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index 23c3a697c..4cd462fc4 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -15,9 +15,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
## API
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |
-| dashed | 是否虚线 | Boolean | false | |
-| orientation | 分割线标题的位置 | enum: `left` `right` | `center` | |
-| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |
-| plain | 文字是否显示为普通正文样式 | boolean | false | 2.2.0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| dashed | 是否虚线 | Boolean | false | |
+| orientation | 分割线标题的位置 | enum: `left` `right` | `center` | |
+| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |
+| plain | 文字是否显示为普通正文样式 | boolean | false | 2.2.0 |
+| orientationMargin | 标题和最近 left/right 边框之间的距离,去除了分割线,同时 `orientation` 必须为 `left` 或 `right` | string \| number | - | 3.0 |
diff --git a/components/divider/style/index.less b/components/divider/style/index.less
index 82377f7c9..ba271e053 100644
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -57,6 +57,7 @@
top: 50%;
width: @divider-orientation-margin;
}
+
&::after {
top: 50%;
width: 100% - @divider-orientation-margin;
@@ -68,6 +69,7 @@
top: 50%;
width: 100% - @divider-orientation-margin;
}
+
&::after {
top: 50%;
width: @divider-orientation-margin;
@@ -87,7 +89,6 @@
}
&-horizontal&-with-text&-dashed {
- border-top: 0;
&::before,
&::after {
border-style: dashed none none;
@@ -103,6 +104,34 @@
font-weight: normal;
font-size: @font-size-base;
}
+
+ &-horizontal&-with-text-left&-no-default-orientation-margin-left {
+ &::before {
+ width: 0;
+ }
+
+ &::after {
+ width: 100%;
+ }
+
+ .ant-divider-inner-text {
+ padding-left: 0;
+ }
+ }
+
+ &-horizontal&-with-text-right&-no-default-orientation-margin-right {
+ &::before {
+ width: 100%;
+ }
+
+ &::after {
+ width: 0;
+ }
+
+ .ant-divider-inner-text {
+ padding-right: 0;
+ }
+ }
}
@import './rtl';
diff --git a/components/divider/style/index.ts b/components/divider/style/index.tsx
similarity index 100%
rename from components/divider/style/index.ts
rename to components/divider/style/index.tsx
diff --git a/components/divider/style/rtl.less b/components/divider/style/rtl.less
index 3b3bcf9f0..7cdc84f00 100644
--- a/components/divider/style/rtl.less
+++ b/components/divider/style/rtl.less
@@ -14,6 +14,7 @@
width: 100% - @divider-orientation-margin;
}
}
+
&::after {
.@{divider-prefix-cls}-rtl& {
width: @divider-orientation-margin;
@@ -27,6 +28,7 @@
width: @divider-orientation-margin;
}
}
+
&::after {
.@{divider-prefix-cls}-rtl& {
width: 100% - @divider-orientation-margin;