cnd-components-mcp/componentData/components/卡片 Card.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

卡片常用于将一组相关信息或操作聚合在一起以固定模式进行展示，方便用户阅读或完成操作，常用于概览页及需要区域化展示信息的场景。

## 示例

```tsx
import React from 'react';
import { Card } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  height: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  lineHeight: '100%',
  color: '#aaaaaa',
  position: 'relative',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

export default () => {
  const CardContent = () => (
    <div style={cardContent}>
      <div style={contentext}>Card Content</div>
    </div>
  );
  return (
    <Card style={{ width: 500 }}>
      <CardContent />
    </Card>
  );
};

export const meta = {
  title: '空白卡片',
  describe: '不包含标题，仅内容',
};

```

```tsx
import React from 'react';
import { Card, Icon } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  height: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  lineHeight: '100%',
  color: '#aaaaaa',
  position: 'relative',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

const CardContent = () => (
  <div style={cardContent}>
    <div style={contentext}>Card Content</div>
  </div>
);

const commonProps = {
  extra: <Icon type="more" size="small" />,
  showHeadDivider: false,
  title: '标题Title',
  style: { width: 500 },
};

export default () => {
  return (
    <Card {...commonProps}>
      <CardContent />
    </Card>
  );
};

export const meta = {
  title: '带标题卡片',
  describe: '标题可通过title属性定制',
};

```

```tsx
import React from 'react';
import { Card, Button } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  height: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  lineHeight: '100%',
  color: '#aaaaaa',
  position: 'relative',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

const CardContent = () => (
  <div style={cardContent}>
    <div style={contentext}>Card Content</div>
  </div>
);

export default () => {
  return (
    <Card style={{ width: 500 }} free>
      <div style={{ height: '100px' }}>
        <CardContent />
      </div>
      <div style={{ marginTop: '16px' }}>
        <Button size="medium">基础按钮</Button>
      </div>
    </Card>
  );
};

export const meta = {
  title: '带操作区卡片',
  describe: '包含内容、操作区域、底部操作按钮',
};

```

```tsx
import React from 'react';
import { Card } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  color: '#aaaaaa',
  position: 'relative',
  height: '300px',
  lineHeight: '300px',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

const CardContent = () => (
  <div style={cardContent}>
    <div style={contentext}>Card Content</div>
  </div>
);

export default () => {
  return (
    <Card style={{ width: 500 }} contentHeight={160}>
      <CardContent />
    </Card>
  );
};

export const meta = {
  title: '内容区可收展',
  describe: '用于需要进行针对卡片整体进行操作的场景',
};

```

```tsx
import React from 'react';
import { Card, Tab } from '@alicloud/console-components';

const cardContent: React.CSSProperties = {
  background: '#f6f6f6',
  width: '100%',
  borderRadius: '4px',
  textAlign: 'center',
  color: '#aaaaaa',
  position: 'relative',
  height: '100%',
  lineHeight: '100%',
};

const contentext: React.CSSProperties = {
  lineHeight: '20px',
  position: 'absolute',
  top: '50%',
  width: '100%',
  marginTop: '-10px',
};

const itemStyle = {
  height: '200px',
  marginTop: 16,
};

const CardContent = () => (
  <div style={cardContent}>
    <div style={contentext}>Card Content</div>
  </div>
);

export default () => {
  return (
    <Card style={{ width: 500 }} free>
      <Tab size="small">
        <Tab.Item title="当前选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item title="可选选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item title="悬浮选项">
          <div style={itemStyle}>
            <CardContent />
          </div>
        </Tab.Item>
        <Tab.Item disabled title="禁用选项">
          <CardContent />
        </Tab.Item>
      </Tab>
    </Card>
  );
};

export const meta = {
  title: '带Tab卡片',
  describe: '可承载更多内容，标题区可选',
};

```

## API

### Card

| 参数            | 说明                                                                                             | 类型             | 默认值 | 是否必填 | 支持版本 |
| --------------- | ------------------------------------------------------------------------------------------------ | ---------------- | ------ | -------- | -------- |
| media           | 卡片的上的图片 / 视频                                                                            | ReactNode        | -      |          | -        |
| title           | 卡片的标题                                                                                       | ReactNode        | -      |          | -        |
| subTitle        | 卡片的副标题                                                                                     | ReactNode        | -      |          | -        |
| actions         | 卡片操作组，位置在卡片底部                                                                       | ReactNode        | -      |          | -        |
| showTitleBullet | 是否显示标题的项目符号                                                                           | boolean          | true   |          | -        |
| showHeadDivider | 是否展示头部的分隔线                                                                             | boolean          | true   |          | -        |
| contentHeight   | 内容区域的固定高度                                                                               | string | number | 120    |          | -        |
| extra           | 标题区域的用户自定义内容                                                                         | ReactNode        | -      |          | -        |
| free            | 是否开启自由模式，开启后 card 将使用子组件配合使用，设置此项后 title, subtitle, 等等属性都将失效 | boolean          | false  |          | -        |
| hasBorder       | 是否带边框                                                                                       | boolean          | true   |          | 1.24     |

### Card.Media

| 参数      | 说明           | 类型        | 默认值 | 是否必填 |
| --------- | -------------- | ----------- | ------ | -------- |
| component | 设置标签类型   | ElementType | 'div'  |          |
| image     | 背景图片地址   | string      | -      |          |
| src       | 媒体源文件地址 | string      | -      |          |

### Card.Header

| 参数      | 说明                     | 类型        | 默认值 | 是否必填 |
| --------- | ------------------------ | ----------- | ------ | -------- |
| title     | 卡片的标题               | ReactNode   | -      |          |
| subTitle  | 卡片的副标题             | ReactNode   | -      |          |
| extra     | 标题区域的用户自定义内容 | ReactNode   | -      |          |
| component | 设置标签类型             | ElementType | 'div'  |          |

### Card.Content

| 参数      | 说明         | 类型        | 默认值 | 是否必填 |
| --------- | ------------ | ----------- | ------ | -------- |
| component | 设置标签类型 | ElementType | 'div'  |          |

### Card.Divider

| 参数      | 说明               | 类型        | 默认值 | 是否必填 |
| --------- | ------------------ | ----------- | ------ | -------- |
| component | 设置标签类型       | ElementType | 'hr'   |          |
| inset     | 分割线是否向内缩进 | boolean     | -      |          |

### Card.Actions

| 参数      | 说明         | 类型        | 默认值 | 是否必填 |
| --------- | ------------ | ----------- | ------ | -------- |
| component | 设置标签类型 | ElementType | 'div'  |          |