feat(Card): icon prop

src/components/card/card.less

@@ -9,6 +9,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: var(--adm-card-header-gap, 8px);
     box-sizing: border-box;
     padding: var(--adm-card-header-padding-block, 12px) 0;
     &:not(:last-child) {

src/components/card/card.patch.less

@@ -12,6 +12,9 @@
     &-title {
       font-size: 15px;
     }
+    &-icon {
+      margin-right: 8px;
+    }
   }
   &-body {
     padding: 12px 0;

src/components/card/card.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import type { FC, ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
+import type { CSSProperties, FC, ReactNode } from 'react'
+import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-card`
 
 export type CardProps = {
   title?: ReactNode
+  icon?: ReactNode
   extra?: ReactNode
   headerStyle?: CSSProperties
   headerClassName?: string
@@ -29,8 +30,13 @@ export const Card: FC<CardProps> = props => {
         style={props.headerStyle}
         onClick={props.onHeaderClick}
       >
+        {props.icon && (
+          <div className={`${classPrefix}-header-icon`}>{props.icon}</div>
+        )}
         <div className={`${classPrefix}-header-title`}>{props.title}</div>
-        {props.extra}
+        {props.extra && (
+          <div className={`${classPrefix}-header-extra`}>{props.extra}</div>
+        )}
       </div>
     )
   }

src/components/card/demos/demo1.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { Card, Toast, Button } from 'antd-mobile'
-import { DemoBlock } from 'demos'
+import { Button, Card, Toast } from 'antd-mobile'
 import { AntOutline, RightOutline } from 'antd-mobile-icons'
+import { DemoBlock } from 'demos'
+import React from 'react'
 
 import styles from './demo1.less'
 
@@ -35,12 +35,8 @@ export default () => {
 
       <DemoBlock title='自定义卡片内容' background='gray'>
         <Card
-          title={
-            <div style={{ fontWeight: 'normal' }}>
-              <AntOutline style={{ marginRight: '4px', color: '#1677ff' }} />
-              卡片标题
-            </div>
-          }
+          icon={<AntOutline style={{ color: '#1677ff' }} />}
+          title={<div style={{ fontWeight: 'normal' }}>卡片标题</div>}
           extra={<RightOutline />}
           onBodyClick={onBodyClick}
           onHeaderClick={onHeaderClick}

src/components/card/index.en.md

@@ -21,6 +21,7 @@ It can carry text, lists, pictures, paragraphs, etc., which is convenient for us
 | extra | The right area of the header | `ReactNode` | - |
 | headerClassName | The custom class name of the header | `string` | - |
 | headerStyle | The custom style of the header | `React.CSSProperties` | - |
+| icon | The left icon of the header | `ReactNode` | - |
 | onBodyClick | The click event of the body area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | 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` | - |

src/components/card/index.zh.md

@@ -21,6 +21,7 @@
 | extra | header 右边区域 | `ReactNode` | - |
 | headerClassName | header 自定义类名 | `string` | - |
 | headerStyle | header 自定义样式 | `React.CSSProperties` | - |
+| icon | header 左边图标 | `ReactNode` | - |
 | onBodyClick | body 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onClick | 卡片点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | onHeaderClick | header 区域点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |