feat(card): adds content-class footer-class header-class ..... (#…

…5262) * feat(n-card): adds `content-class` `footer-class` `header-class` `header-extra-class` props * Apply suggestions from code review --------- Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Nov 11, 2023 · 098058c · 098058c
1 parent 3d97d11
commit 098058c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -20,7 +20,8 @@
 - `n-message` adds `container-class` prop.
 - `n-loading-bar` adds `container-class` prop.
 - `n-thing` adds `content-class` and `description-class` props.
-
+- `n-card` adds `content-class`, `footer-class`, `header-class` and `header-extra-class` props.
+- 
 ## 2.35.0
 
 ### Breaking Changes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -20,6 +20,7 @@
 - `n-message` 新增 `container-class` 属性
 - `n-loading-bar` 新增 `container-class` 属性
 - `n-thing` 新增 `content-class` 和 `description-class` 属性
+- `n-card` 新增 `content-class`、`footer-class`、`header-class` 和 `header-extra-class` 属性
 
 ## 2.35.0
 

diff --git a/src/card/demos/enUS/index.demo-entry.md b/src/card/demos/enUS/index.demo-entry.md
@@ -27,10 +27,14 @@ embedded.vue
 | --- | --- | --- | --- | --- |
 | bordered | `boolean` | `true` | Whether to show the card border. |  |
 | closable | `boolean` | `false` | Is it allowed to close. |  |
+| content-class | `string` | `undefined` | The class of the card content area. |  NEXT_VERSION |
 | content-style | `Object \| string` | `undefined` | The style of the card content area. |  |
 | embedded | `boolean` | `false` | Use a darker background color to show the embedding effect (only for bright themes) |  |
+| footer-class | `string` | `undefined` | The class of the bottom area of the card. | NEXT_VERSION |
 | footer-style | `Object \| string` | `undefined` | The style of the bottom area of the card. |  |
+| header-class | `string` | `undefined` | The class of the card head area. | NEXT_VERSION |
 | header-style | `Object \| string` | `undefined` | The style of the card head area. |  |
+| header-extra-class | `string` | `undefined` | The class of the card head extra area. | NEXT_VERSION |
 | header-extra-style | `Object \| string` | `undefined` | The style of the card head extra area. | 2.25.0 |
 | hoverable | `boolean` | `false` | Whether to show shadow when hovering on the card. |  |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' }` | `false` | Segment divider settings of the card. |  |

diff --git a/src/card/demos/zhCN/index.demo-entry.md b/src/card/demos/zhCN/index.demo-entry.md
@@ -29,10 +29,14 @@ embedded-debug.vue
 | --- | --- | --- | --- | --- |
 | bordered | `boolean` | `true` | 是否显示卡片边框 |  |
 | closable | `boolean` | `false` | 是否允许关闭 |  |
+| content-class | `string` | `undefined` | 卡片内容区域的类名 | NEXT_VERSION |
 | content-style | `Object \| string` | `undefined` | 卡片内容区域的样式 |  |
 | embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 |  |
+| footer-class | `string` | `undefined` | 卡片底部区域的类名 | NEXT_VERSION |
 | footer-style | `Object \| string` | `undefined` | 卡片底部区域的样式 |  |
+| header-class | `string` | `undefined` | 卡片头部区域的类名 | NEXT_VERSION |
 | header-style | `Object \| string` | `undefined` | 卡片头部区域的样式 |  |
+| header-extra-class | `string` | `undefined` | 卡片头部额外内容的类名 | NEXT_VERSION |
 | header-extra-style | `Object \| string` | `undefined` | 卡片头部额外内容的样式 | 2.25.0 |
 | hoverable | `boolean` | `false` | 卡片是否可悬浮 |  |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' }` | `false` | 卡片的分段区域设置 |  |

diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
@@ -24,9 +24,13 @@ export interface CardSegmented {
 
 export const cardBaseProps = {
   title: String,
+  contentClass: String,
   contentStyle: [Object, String] as PropType<CSSProperties | string>,
+  headerClass: String,
   headerStyle: [Object, String] as PropType<CSSProperties | string>,
+  headerExtraClass: String,
   headerExtraStyle: [Object, String] as PropType<CSSProperties | string>,
+  footerClass: String,
   footerStyle: [Object, String] as PropType<CSSProperties | string>,
   embedded: Boolean,
   segmented: {
@@ -172,6 +176,10 @@ export default defineComponent({
   },
   render () {
     const {
+      footerStyle,
+      headerExtraClass,
+      headerClass,
+      contentClass,
       segmented,
       bordered,
       hoverable,
@@ -224,7 +232,7 @@ export default defineComponent({
         {resolveWrappedSlot($slots.header, (children) => {
           return children || this.title || this.closable ? (
             <div
-              class={`${mergedClsPrefix}-card-header`}
+              class={[`${mergedClsPrefix}-card-header`, headerClass]}
               style={this.headerStyle}
             >
               <div
@@ -238,7 +246,10 @@ export default defineComponent({
                 (children) =>
                   children && (
                     <div
-                      class={`${mergedClsPrefix}-card-header__extra`}
+                      class={[
+                        `${mergedClsPrefix}-card-header__extra`,
+                        headerExtraClass
+                      ]}
                       style={this.headerExtraStyle}
                     >
                       {children}
@@ -261,7 +272,7 @@ export default defineComponent({
           (children) =>
             children && (
               <div
-                class={`${mergedClsPrefix}-card__content`}
+                class={[`${mergedClsPrefix}-card__content`, contentClass]}
                 style={this.contentStyle}
                 role="none"
               >
@@ -274,7 +285,7 @@ export default defineComponent({
           (children) =>
             children && [
               <div
-                class={`${mergedClsPrefix}-card__footer`}
+                class={[`${mergedClsPrefix}-card__footer`, footerStyle]}
                 style={this.footerStyle}
                 role="none"
               >