Card

Example
基本
分割线
多媒体内容
自定义卡片
无边框模式
API

一个通用的卡片组件。

何时使用 #

当一个模块的同类信息不能自然形成区块感，可借助 Card 组件将信息整合，帮助界面信息模块感更强。

代码演示 #

基本 #

最简单的用法。

分割线 #

卡片分割线

import ReactDOM from 'react-dom';
import { Card, Button, Box } from '@alifd/next';
const commonProps = {
  title: 'Simple Card',
  style: { width: 300 },
  subTitle: 'Sub-title',
  extra: (
    <Button text type="primary">
      Link
    </Button>
  ),
};
ReactDOM.render(
  <Box direction="row" spacing={20}>
    <Card free style={{ width: 300 }}>
      <Card.Header {...commonProps} />
      <Card.Divider />
      <Card.Content>
        Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec,
        eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an,
        cu verterem praesent quo.
      </Card.Content>
      <Card.Divider />
      <Card.Actions>
        <Button type="primary" key="action1" text>
          Action 1
        </Button>
        <Button type="primary" key="action2" text>
          Action 2
        </Button>
      </Card.Actions>
    </Card>
    <Card free style={{ width: 300 }}>
      <Card.Header {...commonProps} />
      <Card.Divider inset />
      <Card.Content>
        Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec,
        eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an,
        cu verterem praesent quo.
      </Card.Content>
      <Card.Divider inset />
      <Card.Actions>
        <Button type="primary" key="action1" text>
          Action 1
        </Button>
        <Button type="primary" key="action2" text>
          Action 2
        </Button>
      </Card.Actions>
    </Card>
  </Box>,
  mountNode
);

多媒体内容 #

下面是一个使用图像来增强内容的卡片示例。

自定义卡片 #

与子组件的组合来自定义卡片样式

import ReactDOM from 'react-dom';
import { Card, Button } from '@alifd/next';
ReactDOM.render(
  <div>
    <Card className="free-card custom" free>
      <Card.Media image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />
      <div className="free-card-main">
        <Card.Header
          title="Title"
          subTitle="Sub Title"
          extra={
            <Button type="primary" text>
              Link
            </Button>
          }
        />
        <Card.Content>Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et.</Card.Content>
        <Card.Actions>
          <Button type="primary" key="action1" text>
            Action 1
          </Button>
          <Button type="primary" key="action2" text>
            Action 2
          </Button>
        </Card.Actions>
      </div>
    </Card>
    <br />
    <Card className="free-card" free>
      <Card.Media
        style={{ height: 140 }}
        image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png"
      />
      <Card.Header
        title="Title"
        subTitle="Sub Title"
        extra={
          <Button type="primary" text>
            Link
          </Button>
        }
      />
      <Card.Divider />
      <Card.Content>
        Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec,
        eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an,
        cu verterem praesent quo.
      </Card.Content>
      <Card.Actions>
        <Button type="primary" key="action1" text>
          Action 1
        </Button>
        <Button type="primary" key="action2" text>
          Action 2
        </Button>
      </Card.Actions>
    </Card>
  </div>,
  mountNode
);

无边框模式 #

最简单的用法。

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	-

参数	说明	类型	默认值	是否必填
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'