feat(card): css variables for border radius and padding

guoyunhe · Mar 29, 2024 · 8348aca · 8348aca
1 parent bfbc96e
commit 8348aca
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/components/card/card.less b/src/components/card/card.less
@@ -1,16 +1,20 @@
 @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);
+
   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);
     }
@@ -21,6 +25,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,11 @@ 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` |
diff --git a/src/components/card/index.zh.md b/src/components/card/index.zh.md
@@ -25,3 +25,11 @@
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | title | header 左边区域 | `ReactNode` | - |
+
+### CSS 变量
+
+| 属性            | 说明       | 默认值  | 全局变量                   |
+| --------------- | ---------- | ------- | -------------------------- |
+| --border-radius | 圆角大小   | `4px`   | `--adm-card-border-radius` |
+| --padding-x     | 水平内边距 | `solid` | `--adm-card-padding-x`     |
+| --padding-y     | 垂直内边距 | `solid` | `--adm-card-padding-y`     |