diff --git a/docs/en-US/component/card.md b/docs/en-US/component/card.md index 290c0e1256..6398a99a2d 100644 --- a/docs/en-US/component/card.md +++ b/docs/en-US/component/card.md @@ -55,6 +55,7 @@ card/shadow | ---------- | ------------------------------------------------------------- | --------------------------------- | ------- | | header | title of the card. Also accepts a DOM passed by `slot#header` | ^[string] | — | | body-style | CSS style of card body | ^[object]`CSSProperties` | — | +| body-class | custom class name of card body | ^[string] | — | | shadow | when to show card shadows | ^[enum]`always \| never \| hover` | always | ### Slots diff --git a/packages/components/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx index 663f1a6db0..65e89c8723 100644 --- a/packages/components/card/__tests__/card.test.tsx +++ b/packages/components/card/__tests__/card.test.tsx @@ -59,6 +59,13 @@ describe('Card.vue', () => { ).toBe('font-size:14px;color:blue;') }) + test('should render body-class props', async () => { + const bodyClass = 'test-body-class' + const wrapper = mount(() => ) + + expect(wrapper.find('.el-card__body').classes()).toContain(bodyClass) + }) + test('shadow', () => { const shadow = 'always' const wrapper = mount(() => {AXIOM}) diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts index 81305c01df..ee14e1769a 100644 --- a/packages/components/card/src/card.ts +++ b/packages/components/card/src/card.ts @@ -16,6 +16,10 @@ export const cardProps = buildProps({ type: definePropType([String, Object, Array]), default: '', }, + /** + * @description custom class name of card body + */ + bodyClass: String, /** * @description when to show card shadows */ diff --git a/packages/components/card/src/card.vue b/packages/components/card/src/card.vue index 35b98f9889..e364835564 100644 --- a/packages/components/card/src/card.vue +++ b/packages/components/card/src/card.vue @@ -3,7 +3,7 @@
{{ header }}
-
+