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.

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/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;