feat: completed all functions of the card component and wrote test sa…

site/sidebar.config.ts

@@ -166,6 +166,12 @@ export default [
         path: '/components/calendar',
         // component: () => import('tdesign-web-components/calendar/README.md'),
       },
+      {
+        title: 'Card 卡片',
+        name: 'card',
+        path: '/components/card',
+        component: () => import('tdesign-web-components/card/README.md'),
+      },
       {
         title: 'Collapse 折叠面板',
         name: 'Collapse',

src/card/README.md

@@ -0,0 +1,109 @@
+---
+title: Card 卡片
+description: 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+isComponent: true
+usage: { title: '', description: '' }
+spline: base
+---
+
+### 极简卡片
+
+仅有内容的卡片形式。
+
+#### 有边框
+
+{{ bordered }}
+
+#### 无边框
+
+{{ bordered-none }}
+
+### 带header的卡片
+
+由极简卡片上方的标题栏组成，标题栏中可包含标题、图片、操作区、状态等内容。顶部栏可以定义所有的内容，以用户的自定义元素为准
+
+#### 不带分割线
+
+{{ header }}
+
+#### 带分割线
+
+{{ header-bordered }}
+
+### 带footer的卡片
+
+由极简卡片下方的底部栏组成，可包含标题、图片、操作区、状态等内容。
+
+{{ footer }}
+
+#### 全部为操作内容的底部栏
+
+{{ footer-actions }}
+
+#### 全部为展示内容的底部栏
+
+{{ footer-content }}
+
+#### 同时带展示内容与操作内容的底部栏
+
+{{ footer-content-actions }}
+
+### 同时带header和footer的卡片
+
+由顶部栏、底部栏和极简卡片组成的复杂卡片，三个区域内容可根据需要对内容进行配置。
+
+{{ header-subtitle-footer-actions }}
+
+{{ header-footer-actions }}
+
+### 不同标题内容的卡片
+
+带有主标题、副标题、或标题描述的卡片。
+
+#### 带主副标题的卡片
+
+{{ header-subtitle }}
+
+#### 带标题描述的卡片
+
+{{ header-description }}
+
+#### 同时带主副标题与标题描述的卡片
+
+{{ header-all-props }}
+
+#### 自定义loadingProps的卡片
+
+{{ custom-loading-props }}
+
+
+
+## API
+
+### Card Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+actions | TNode | - | 卡片操作区。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+avatar | TNode | - | 卡片中的用户头像，仅在海报风格的卡片中有效。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+bordered | Boolean | true | 是否有边框 | N
+children | TNode | - | 卡片内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 卡片内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+cover | TNode | - | 卡片封面图。值类型为字符串，会自动使用 `img` 标签输出封面图；也可以完全最定义封面图。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+description | TNode | - | 卡片描述文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+footer | TNode | - | 卡片底部内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+header | TNode | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
+hoverShadow | Boolean | false | hover时是否有阴影 | N
+loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
+shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
+size | String | medium | 尺寸。可选项：medium/small | N
+status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N
+subtitle | TNode | - | 卡片副标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | normal | 卡片风格：普通风格、海报风格1（操作区域在顶部）、海报风格2（操作区域在底部）。可选项：normal/poster1/poster2 | N
+title | TNode | - | 卡片标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+
+

src/card/_example/base.tsx

@@ -0,0 +1,13 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card bordered hoverShadow style={{ width: '400px' }}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/bordered-none.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/card';
+
+import { bind, Component } from 'omi';
+
+export default class Button extends Component {
+  @bind
+  clickHandler() {
+    window.alert('操作');
+  }
+
+  render() {
+    return (
+      <div style={{ padding: '16px', backgroundColor: 'var(--td-bg-color-container-hover)' }}>
+        <t-card
+          title="标题"
+          actions={
+            <a href={null} onClick={this.clickHandler} style={{ cursor: 'pointer' }}>
+              操作
+            </a>
+          }
+          hoverShadow
+          style={{ width: '400px' }}
+        >
+          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+        </t-card>
+      </div>
+    );
+  }
+}

src/card/_example/bordered.tsx

@@ -0,0 +1,13 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card bordered style={{ width: '400px' }}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/custom-loading-props.tsx

@@ -0,0 +1,17 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  customProps = {
+    text: 'TDesign努力加载中...',
+  };
+
+  render() {
+    return (
+      <t-card title="标题" loading bordered style={{ width: '400px' }} loadingProps={this.customProps}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/footer-actions.tsx

@@ -0,0 +1,97 @@
+import 'tdesign-web-components/card';
+import 'tdesign-web-components/tag';
+import 'tdesign-web-components/icon';
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/divider';
+import 'tdesign-web-components/row';
+import 'tdesign-web-components/col';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <>
+        <t-space direction="vertical">
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            footer={
+              // 缺少row、col 组件，暂用临时组件替代
+              <t-row style={{ display: 'flex', justifyContent: 'space-around' }} ignoreAttributes={['style']}>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon name="thumb-up-1"></t-icon>
+                  </t-button>
+                </t-col>
+                <t-divider layout="vertical"></t-divider>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon name="chat"></t-icon>
+                  </t-button>
+                </t-col>
+                <t-divider layout="vertical"></t-divider>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon name="share"></t-icon>
+                  </t-button>
+                </t-col>
+              </t-row>
+            }
+          ></t-card>
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            actions={
+              <t-col flex="auto">
+                {/* 此处由于缺少dropdown组件，暂时用button替代，不影响aciton测试 */}
+                <t-button>action按钮</t-button>
+              </t-col>
+            }
+            footer={
+              // 缺少row、col 组件，暂用临时组件替代
+              <t-row style={{ flex: 'auto' }} ignoreAttributes={['style']}>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon name="heart"></t-icon>
+                  </t-button>
+                </t-col>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon name="share"></t-icon>
+                  </t-button>
+                </t-col>
+              </t-row>
+            }
+          ></t-card>
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            actions={
+              <t-col flex="auto">
+                {/* 此处由于缺少dropdown组件，暂时用button替代，不影响aciton测试 */}
+                <t-button>action按钮</t-button>
+              </t-col>
+            }
+            footer={
+              <t-avatar-group max={2}>
+                <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+                <t-avatar>Z</t-avatar>
+                <t-avatar>Y</t-avatar>
+                <t-avatar>Y</t-avatar>
+              </t-avatar-group>
+            }
+          ></t-card>
+        </t-space>
+      </>
+    );
+  }
+}

src/card/_example/footer-content-actions.tsx

@@ -0,0 +1,26 @@
+import 'tdesign-web-components/card';
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/comment';
+import 'tdesign-web-components/col';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card
+        actions={
+          <t-col flex="auto">
+            {/* 此处由于缺少dropdown组件，暂时用button替代，不影响aciton测试 */}
+            <t-button>action按钮</t-button>
+          </t-col>
+        }
+        bordered
+        theme="poster2"
+        cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+        style={{ width: '400px' }}
+        footer={<t-comment></t-comment>}
+      ></t-card>
+    );
+  }
+}

src/card/_example/footer-content.tsx

@@ -0,0 +1,20 @@
+import 'tdesign-web-components/card';
+import 'tdesign-web-components/comment';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <>
+        <t-card
+          bordered
+          theme="poster2"
+          cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+          style={{ width: '400px' }}
+          footer={<t-comment></t-comment>}
+        ></t-card>
+      </>
+    );
+  }
+}

src/card/_example/footer.tsx

@@ -0,0 +1,47 @@
+import 'tdesign-web-components/card';
+import 'tdesign-web-components/tag';
+import 'tdesign-web-components/icon';
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/divider';
+import 'tdesign-web-components/row';
+import 'tdesign-web-components/col';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card
+        actions={<t-tag theme="success">默认标签</t-tag>}
+        bordered
+        cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+        style={{ width: '400px' }}
+        headerBordered
+        avatar={<t-avatar size="56px" icon={<t-icon name="user-1"></t-icon>} style={{ marginTop: '0px' }} />}
+        footer={
+          // 缺少row、col 组件，暂用临时组件替代
+          <t-row style={{ display: 'flex', justifyContent: 'space-around' }} ignoreAttributes={['style']}>
+            <t-col>
+              <t-button theme="default" variant="text">
+                <t-icon name="thumb-up-1"></t-icon>
+              </t-button>
+            </t-col>
+            <t-divider layout="vertical"></t-divider>
+            <t-col>
+              <t-button theme="default" variant="text">
+                <t-icon name="chat"></t-icon>
+              </t-button>
+            </t-col>
+            <t-divider layout="vertical"></t-divider>
+            <t-col>
+              <t-button theme="default" variant="text">
+                <t-icon name="share"></t-icon>
+              </t-button>
+            </t-col>
+          </t-row>
+        }
+      ></t-card>
+    );
+  }
+}