javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [card] add header-class and footer-class for slots (#20408)

Browse Source
This commit is contained in:
Noblet Ouways
2025-04-13 09:51:57 +02:00
committed by GitHub
parent 9473f9dcb9
commit 72e202f74b
4 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/en-US/component/card.md
View File

@@ -51,13 +51,15 @@ card/shadow
### Attributes
| Name | Description | Type | Default |
| -------------------- | -------------------------------------------------------------- | --------------------------------- | ------- |
| header | title of the card. Also accepts a DOM passed by `slot#header` | ^[string] | — |
| footer ^(2.4.3) | footer of the card. Also accepts a DOM passed by `slot#footer` | ^[string] | — |
| body-style | CSS style of card body | ^[object]`CSSProperties` | — |
| body-class ^(2.3.10) | custom class name of card body | ^[string] | — |
| shadow | when to show card shadows | ^[enum]`always \| never \| hover` | always |
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------------- | --------------------------------- | ------- |
| header | title of the card. Also accepts a DOM passed by `slot#header` | ^[string] | — |
| footer ^(2.4.3) | footer of the card. Also accepts a DOM passed by `slot#footer` | ^[string] | — |
| body-style | CSS style of card body | ^[object]`CSSProperties` | — |
| header-class ^(2.9.8) | custom class name of card header | ^[string] | — |
| body-class ^(2.3.10) | custom class name of card body | ^[string] | — |
| footer-class ^(2.9.8) | custom class name of card footer | ^[string] | — |
| shadow | when to show card shadows | ^[enum]`always \| never \| hover` | always |
### Slots

15
packages/components/card/__tests__/card.test.tsx
View File

@@ -59,11 +59,22 @@ describe('Card.vue', () => {
).toBe('font-size:14px;color:blue;')
})
test('should render body-class props', async () => {
test('should render header-class, body-class and footer-class props', async () => {
const bodyClass = 'test-body-class'
const wrapper = mount(() => <Card body-class={bodyClass} />)
const headerClass = 'test-header-class'
const footerClass = 'test-footer-class'
const wrapper = mount(() => (
<Card
header-class={headerClass}
body-class={bodyClass}
footer-class={footerClass}
v-slots={{ header: () => <div />, footer: () => <div /> }}
/>
))
expect(wrapper.find('.el-card__body').classes()).toContain(bodyClass)
expect(wrapper.find('.el-card__header').classes()).toContain(headerClass)
expect(wrapper.find('.el-card__footer').classes()).toContain(footerClass)
})
test('shadow', () => {

8
packages/components/card/src/card.ts
View File

@@ -20,10 +20,18 @@ export const cardProps = buildProps({
type: definePropType<StyleValue>([String, Object, Array]),
default: '',
},
/**
* @description custom class name of card footer
*/
headerClass: String,
/**
* @description custom class name of card body
*/
bodyClass: String,
/**
* @description custom class name of card footer
*/
footerClass: String,
/**
* @description when to show card shadows
*/

4
packages/components/card/src/card.vue
View File

@@ -1,12 +1,12 @@
<template>
<div :class="[ns.b(), ns.is(`${shadow}-shadow`)]">
<div v-if="$slots.header || header" :class="ns.e('header')">
<div v-if="$slots.header || header" :class="[ns.e('header'), headerClass]">
<slot name="header">{{ header }}</slot>
</div>
<div :class="[ns.e('body'), bodyClass]" :style="bodyStyle">
<slot />
</div>
<div v-if="$slots.footer || footer" :class="ns.e('footer')">
<div v-if="$slots.footer || footer" :class="[ns.e('footer'), footerClass]">
<slot name="footer">{{ footer }}</slot>
</div>
</div>