# Card 卡片

[toc]

`Card` 组件提供最基础的卡片容器，可承载文字、表格、表单、图表信息。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-card": "../dist/card/index"
  }
}

```

## 用法

### 基础用法

```html
<tea-card>
  <view slot="header">卡片header</view>
  <view slot="body">卡片body</view>
  <view slot="footer">卡片footer</view>
</tea-card>
```

### 高级用法

`Card` 组件提供的是一个基础的布局容器，可以依照具体场景自定义或搭配其它组件使用。

#### Card组件 + 图片信息

```html
<!-- 上文下图 -->
<tea-card>
  <view slot="body">
    <view class="card__title">
      <text>标题文字</text>
    </view>
    <view class="card__image"></view>
  </view>
</tea-card>
```

```html
<!-- 上图下文 -->
<tea-card>
  <view class="card__image"></view>
  <view slot="body">
      <view class="card__title">
        <text>标题文字</text>
      </view>
      <view class="card__content">
          描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案
      </view>
  </view>
</tea-card>
```

#### Card组件 + Item组件

```html
<tea-card>
  <view slot="body">
    <view class="card__title tea-hairline--bottom">
      <text>图文列表</text>
    </view>
    <view>
      <tea-item thumb="{{ thumb }}" thumbPosition="right" title="标题文字标题文字标题文字" description="描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案" bordered></tea-item>
      <tea-item thumb="{{ thumb }}" thumbPosition="right" title="标题文字标题文字标题文字" description="描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案" bordered></tea-item>
      <tea-item title="查看更多" clickable detail></tea-item>
    </view>
  </view>
</tea-card>
```

```javascript
Page({
  data: {
    thumb: "https://imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/image.svg"
  }
})
```

#### Card组件 + Level组件

```html
<tea-card>
  <view slot="body">
    <view class="card__title">
      <text>个人信息</text>
    </view>
    <view>
      <tea-level start-width="6em" end-flex="1">
        <view slot="start">
          <view class="title">用户名称</view>
        </view>
        <view slot="end" class="preview__details">
          <view class="details">user001</view>
        </view>
      </tea-level>
      <tea-level start-width="6em" end-flex="1">
        <view slot="start">
          <view class="title">密码</view>
        </view>
        <view slot="end" class="preview__details">
          <view class="details">123456</view>
        </view>
      </tea-level>
      <tea-level start-width="6em" end-flex="1">
        <view slot="start">
          <view class="title">身份证号码</view>
        </view>
        <view slot="end" class="preview__details">
          <view class="details">123456789012345678</view>
        </view>
      </tea-level>
      <tea-level start-width="6em" end-flex="1">
        <view slot="start">
          <view class="title">创建时间</view>
        </view>
        <view slot="end" class="preview__details">
          <view class="details">2020-01-01 17:27:56</view>
        </view>
      </tea-level>
      <tea-level start-width="6em" end-flex="1">
        <view slot="start">
          <view class="title">过期时间</view>
        </view>
        <view slot="end" class="preview__details tea-text--danger">
          <view class="details">2021-01-01 17:27:56</view>
        </view>
      </tea-level>
    </view>
  </view>
</tea-card>
```

## Slots

| 名称     | 描述          |
| ------ | ----------- |
| -      | 自定义卡片布局上方内容 |
| header | 自定义 header  |
| body   | 自定义 body    |
| footer | 自定义 footer  |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                   | 默认值                    | 描述  |
| --------------------- | ---------------------- | --- |
| card-padding          | @padding-md            | -   |
| card-background-color | @background-base-color | -   |