feat(card): add boxShadow prop (#1754)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Dec 31, 2021 · 9843887 · 9843887 · vercel · Dec 31, 2021
1 parent 760f763
commit 9843887
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -13,6 +13,7 @@ export const Card = WithRef<HTMLDivElement, CardProps>(
       children,
       className,
       prefixCls: customizePrefixCls,
+      boxShadow = false,
       ...restProps
     }: CardProps,
     ref?
@@ -22,6 +23,7 @@ export const Card = WithRef<HTMLDivElement, CardProps>(
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-clickable`]: clickable,
       [`${prefixCls}-full-width-content`]: fullWidthContent,
+      [`${prefixCls}-box-shadow`]: boxShadow,
     });
 
     return (

diff --git a/src/card/interfaces.ts b/src/card/interfaces.ts
@@ -25,11 +25,13 @@ export interface CardMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * 是否宽度平铺
+   * 是否宽度平铺(没有 padding)
+   * @default false
    */
   fullWidthContent?: boolean;
   /**
    * 不可选
+   * @default false
    */
   disabled?: boolean;
   /**
@@ -38,10 +40,16 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /**
    * 卡片是否可点击
+   * @default true
    */
   clickable?: boolean;
   /**
    * 自定义className前缀
    */
   prefixCls?: string;
+  /**
+   * 是否显示阴影 ( box-shadow: 0px 3px 8px rgba(36, 46, 89, 0.05); )
+   * @default false
+   */
+  boxShadow?: boolean;
 }
diff --git a/src/card/style/index.less b/src/card/style/index.less
@@ -32,6 +32,9 @@
   &-disabled .@{card-meta-prefix-cls}-description {
     color: @gray-3;
   }
+  &-box-shadow {
+    .elevation(1);
+  }
 }
 
 .@{card-meta-prefix-cls} {