diff --git a/packages/components/divider/__tests__/divider.test.tsx b/packages/components/divider/__tests__/divider.test.tsx
index 93b71ea32c..555147997e 100644
--- a/packages/components/divider/__tests__/divider.test.tsx
+++ b/packages/components/divider/__tests__/divider.test.tsx
@@ -29,8 +29,7 @@ describe('Divider', () => {
text
,
);
- expect(wrapper.classes('t-divider--with-text-left')).toBeTruthy();
- expect(wrapper.element).toMatchSnapshot('align-vertical-left');
+ expect(wrapper.classes('t-divider--with-text-left')).toBeFalsy();
});
it(':dashed[true/false]', () => {
@@ -69,15 +68,6 @@ describe('Divider', () => {
});
});
- it(':theme[horizontal/vertical]', () => {
- const { validator } = props.theme;
- expect(validator('horizontal')).toBeTruthy();
- expect(validator('vertical')).toBeTruthy();
- // @ts-expect-error types error
- expect(validator('other')).toBeFalsy();
- expect(validator(undefined)).toBeTruthy();
- });
-
it(':content[string/function]', () => {
// string
const wrapperString = mount();
@@ -115,5 +105,19 @@ describe('Divider', () => {
expect(wrapper.text()).toBe('TDesign');
expect(wrapper.element).toMatchSnapshot('default-priority');
});
+
+ it(':size[string/number]', () => {
+ // string
+ const wrapperString = mount();
+ expect(wrapperString.attributes('style')).toContain('margin: 20px 0px;');
+
+ // number
+ const wrapperNumber = mount();
+ expect(wrapperNumber.attributes('style')).toContain('margin: 30px 0px;');
+
+ // vertical
+ const wrapperVertical = mount();
+ expect(wrapperVertical.attributes('style')).toContain('margin: 0px 40px;');
+ });
});
});
diff --git a/packages/components/divider/_usage/props.json b/packages/components/divider/_usage/props.json
index 413f3d6824..e5b9a7e37a 100644
--- a/packages/components/divider/_usage/props.json
+++ b/packages/components/divider/_usage/props.json
@@ -38,20 +38,5 @@
"value": "vertical"
}
]
- },
- {
- "name": "theme",
- "type": "enum",
- "defaultValue": "horizontal",
- "options": [
- {
- "label": "horizontal",
- "value": "horizontal"
- },
- {
- "label": "vertical",
- "value": "vertical"
- }
- ]
}
]
\ No newline at end of file
diff --git a/packages/components/divider/divider.en-US.md b/packages/components/divider/divider.en-US.md
index f9f6cd6d85..09af5a070f 100644
--- a/packages/components/divider/divider.en-US.md
+++ b/packages/components/divider/divider.en-US.md
@@ -1,13 +1,14 @@
:: BASE_DOC ::
## API
+
### Divider Props
name | type | default | description | required
-- | -- | -- | -- | --
-align | String | center | options:left/right/center | N
+align | String | center | options: left/right/center | N
content | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
dashed | Boolean | false | \- | N
default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-layout | String | horizontal | options:horizontal/vertical | N
-theme | String | - | `deprecated`。options:horizontal/vertical | N
+layout | String | horizontal | options: horizontal/vertical | N
+size | String / Number | - | Spacing size | N
diff --git a/packages/components/divider/divider.md b/packages/components/divider/divider.md
index f1a22a716b..a4e154f026 100644
--- a/packages/components/divider/divider.md
+++ b/packages/components/divider/divider.md
@@ -1,13 +1,14 @@
:: BASE_DOC ::
## API
+
### Divider Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
align | String | center | 文本位置(仅在水平分割线有效)。可选项:left/right/center | N
content | String / Slot / Function | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
dashed | Boolean | false | 是否虚线(仅在水平分割线有效) | N
default | String / Slot / Function | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
layout | String | horizontal | 分隔线类型有两种:水平和垂直。可选项:horizontal/vertical | N
-theme | String | - | 已废弃。请更为使用 `layout`。分隔线类型有两种:水平和垂直。可选项:horizontal/vertical | N
+size | String / Number | - | 间距大小 | N
diff --git a/packages/components/divider/divider.tsx b/packages/components/divider/divider.tsx
index ddade89527..d933e4cf8e 100644
--- a/packages/components/divider/divider.tsx
+++ b/packages/components/divider/divider.tsx
@@ -1,6 +1,7 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import props from './props';
import { useContent, usePrefixClass } from '@tdesign/shared-hooks';
+import { pxCompat } from '@tdesign/common-js/utils/helper';
export default defineComponent({
name: 'TDivider',
@@ -9,22 +10,30 @@ export default defineComponent({
const COMPONENT_NAME = usePrefixClass('divider');
const renderContent = useContent();
return () => {
- const { layout, dashed, align } = props;
const children = renderContent('default', 'content');
+ const isHorizontal = computed(() => props.layout !== 'vertical');
+ const showText = computed(() => isHorizontal.value && !!children);
const dividerClassNames = [
`${COMPONENT_NAME.value}`,
- [`${COMPONENT_NAME.value}--${layout}`],
+ [`${COMPONENT_NAME.value}--${props.layout}`],
{
- [`${COMPONENT_NAME.value}--dashed`]: !!dashed,
- [`${COMPONENT_NAME.value}--with-text`]: !!children,
- [`${COMPONENT_NAME.value}--with-text-${align}`]: !!children,
+ [`${COMPONENT_NAME.value}--dashed`]: !!props.dashed,
+ [`${COMPONENT_NAME.value}--with-text`]: !!showText.value,
+ [`${COMPONENT_NAME.value}--with-text-${props.align}`]: !!showText.value,
},
];
+ const dividerWrapperStyle = computed(() => {
+ if (props.size) {
+ const margin = isHorizontal.value ? `${pxCompat(props.size)} 0` : `0 ${pxCompat(props.size)}`;
+ return { margin };
+ }
+ return null;
+ });
return (
-
- {children &&
{children}}
+
+ {showText.value && {children}}
);
};
diff --git a/packages/components/divider/props.ts b/packages/components/divider/props.ts
index 9f5155e99e..4c0995799f 100644
--- a/packages/components/divider/props.ts
+++ b/packages/components/divider/props.ts
@@ -36,12 +36,8 @@ export default {
return ['horizontal', 'vertical'].includes(val);
},
},
- /** 已废弃。请更为使用 `layout`。分隔线类型有两种:水平和垂直 */
- theme: {
- type: String as PropType
,
- validator(val: TdDividerProps['theme']): boolean {
- if (!val) return true;
- return ['horizontal', 'vertical'].includes(val);
- },
+ /** 间距大小 */
+ size: {
+ type: [String, Number] as PropType,
},
};
diff --git a/packages/components/divider/type.ts b/packages/components/divider/type.ts
index 8a5536f0db..8c24a508aa 100644
--- a/packages/components/divider/type.ts
+++ b/packages/components/divider/type.ts
@@ -31,8 +31,7 @@ export interface TdDividerProps {
*/
layout?: 'horizontal' | 'vertical';
/**
- * 请更为使用 `layout`。分隔线类型有两种:水平和垂直
- * @deprecated
+ * 间距大小
*/
- theme?: 'horizontal' | 'vertical';
+ size?: string | number;
}