feat(card): css variables for border and padding

ant-design · Mar 29, 2024 · 073def4 · 073def4
1 parent bfbc96e
commit 073def4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/components/card/card.less b/src/components/card/card.less
@@ -1,18 +1,27 @@
 @class-prefix-card: ~'adm-card';
 
 .@{class-prefix-card} {
+  --border-radius: var(--adm-card-border-radius, 8px);
+  --padding-x: var(--adm-card-padding-x, 12px);
+  --padding-y: var(--adm-card-padding-y, 12px);
+  --header-border-width: var(--adm-card-header-border-width, 0.5px);
+  --header-border-color: var(
+    --adm-card-header-border-color,
+    var(--adm-color-border)
+  );
+
   background: var(--adm-color-background);
-  border-radius: 8px;
-  padding: 0 12px;
+  border-radius: var(--border-radius);
+  padding: 0 var(--padding-x);
   &-header {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    padding: 12px 0;
+    padding: var(--padding-y) 0;
     &:not(:last-child) {
-      border-bottom: solid 0.5px var(--adm-color-border);
+      border-bottom: solid var(--header-border-width) var(--header-border-color);
     }
     &-title {
       font-size: var(--adm-font-size-7);
@@ -21,6 +30,6 @@
     }
   }
   &-body {
-    padding: 12px 0;
+    padding: var(--padding-y) 0;
   }
 }
diff --git a/src/components/card/index.en.md b/src/components/card/index.en.md
@@ -25,3 +25,13 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | The left area of the header | `ReactNode` | - |
+
+### CSS Variables
+
+| Name | Description | Default | Global |
+| --- | --- | --- | --- |
+| --border-radius | Border radius of the button. | `8px` | `--adm-card-border-radius` |
+| --padding-x | Horizontal padding of the card. | `12px` | `--adm-card-padding-x` |
+| --padding-y | Vertical padding of the card. | `12px` | `--adm-card-padding-y` |
+| --header-border-width | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |
+| --header-border-color | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
@@ -25,3 +25,13 @@
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | header 左边区域 | `ReactNode` | - |
+
+### CSS 变量
+
+| 属性 | 说明 | 默认值 | 全局变量 |
+| --- | --- | --- | --- |
+| --border-radius | 圆角大小 | `8px` | `--adm-card-border-radius` |
+| --padding-x | 水平内边距 | `12px` | `--adm-card-padding-x` |
+| --padding-y | 垂直内边距 | `12px` | `--adm-card-padding-y` |
+| --header-border-width | 头部分割线宽度 | `0.5px` | `--adm-card-header-border-width` |
+| --header-border-color | 头部分割线颜色 | `var(--adm-color-border)` | `--adm-card-header-border-color` |