feat(n-card): adds action-class action-style props

tusen-ai · Oct 16, 2024 · 69b4131 · 69b4131
1 parent acced75
commit 69b4131
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -16,6 +16,7 @@
 - `n-progress`'s `color` prop supports gradient config.
 - `n-select` adds `font-weight` theme variable
 - `n-input` adds `font-weight` theme variable
+- `n-card` adds `action-class`、`action-style` props
 
 ## 2.40.1
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -16,6 +16,7 @@
 - `n-progress` 的 `color` 属性支持渐变色配置
 - `n-select` 新增 `font-weight` 主题变量
 - `n-input` 新增 `font-weight` 主题变量
+- `n-card` 新增 `action-class`、`action-style` 属性
 
 ## 2.40.1
 

diff --git a/src/card/demos/enUS/index.demo-entry.md b/src/card/demos/enUS/index.demo-entry.md
@@ -26,6 +26,8 @@ embedded.vue
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
 | action | `() => VNodeChild` | `undefined` | Operating area content, must be a render function. | 2.38.2 |
+| action-class | `string` | `undefined` | The class of the action area of the card. | NEXT_VERSION |
+| action-style | `Object \| string` | `undefined` | The style of the action area of the card. | NEXT_VERSION |
 | bordered | `boolean` | `true` | Whether to show the card border. |  |
 | closable | `boolean` | `false` | Is it allowed to close. |  |
 | content | `string \| (() => VNodeChild)` | `undefined` | Card content, can be a render function. | 2.38.2 |

diff --git a/src/card/demos/zhCN/index.demo-entry.md b/src/card/demos/zhCN/index.demo-entry.md
@@ -28,6 +28,8 @@ embedded-debug.vue
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
 | action | `() => VNodeChild` | `undefined` | 操作区域内容，需要是 render 函数 | 2.38.2 |
+| action-class | `string` | `undefined` | 操作区域内容的类名 | NEXT_VERSION |
+| action-style | `Object \| string` | `undefined` | 操作区域内容的样式 | NEXT_VERSION |
 | bordered | `boolean` | `true` | 是否显示卡片边框 |  |
 | closable | `boolean` | `false` | 是否允许关闭 |  |
 | content | `string \| (() => VNodeChild)` | `undefined` | 卡片内容，可以是 render 函数 | 2.38.2 |

diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
@@ -34,6 +34,8 @@ export const cardBaseProps = {
   headerExtraStyle: [Object, String] as PropType<CSSProperties | string>,
   footerClass: String,
   footerStyle: [Object, String] as PropType<CSSProperties | string>,
+  actionClass: String,
+  actionStyle: [Object, String] as PropType<CSSProperties | string>,
   embedded: Boolean,
   segmented: {
     type: [Boolean, Object] as PropType<boolean | CardSegmented>,
@@ -325,7 +327,11 @@ export default defineComponent({
             : children
           return (
             mergedChildren && (
-              <div class={`${mergedClsPrefix}-card__action`} role="none">
+              <div
+                class={[`${mergedClsPrefix}-card__action`, this.actionClass]}
+                style={this.actionStyle}
+                role="none"
+              >
                 {mergedChildren}
               </div>
             )