Card 卡片

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

一个通用的卡片组件。

何时使用

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

API

Card

代码示例

基本

最简单的用法。

查看源码在线预览

import { Card } from '@alifd/next';
const commonProps = {
    style: { width: 300 },
    subTitle: 'SubTitle',
    extra: 'Link'
};
ReactDOM.render(<div>
    <Card {...commonProps} title="Simple Card">
        <div className="card-placeholder"></div>
    </Card>
</div>, mountNode);

.card-placeholder {
    height: 500px;
    text-align: center;
    background: #F7F8FA;
}

自定义内容高度

可以通过 contentHeight 属性自定义内容区的高度。例如取值为 auto 的时候会默认关闭卡片的收缩效果。

查看源码在线预览

import { Card } from '@alifd/next';
const commonProps = {
    style: { width: 300 },
    title: 'Title',
    subTitle: 'Sub-title'
};
ReactDOM.render(<div>
    <Card {...commonProps} contentHeight="auto">
        <div className="custom-content">
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
        </div>
    </Card>
    &nbsp;&nbsp;
    <Card {...commonProps} contentHeight={200}>
        <div className="custom-content">
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
        </div>
    </Card>
</div>, mountNode);

.custom-content p {
    margin: 0;
}

自定义卡片样式

如果默认的卡片样式不能满足您的需求，除了通过 Fusion 配置平台修改，还可以通过传入自定义样式修改。如果 title 属性不传入任何值，则默认会去除整个头部区域。

查看源码在线预览

import { Card } from '@alifd/next';
ReactDOM.render(<Card className="image-card" contentHeight="auto">
    <img src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" alt="father day" />
    <div className="custom-card">
        <h3>Father's Day</h3>
        <p>Thank you, papa</p>
    </div>
</Card>, mountNode);

.image-card {
    display: inline-block;
    text-align: center;
}
.custom-card p {
    color: #999;
}

标题无项目符号

可以通过配置 hasTitleBullet 属性配置卡片标题是否显示项目符号。此外，extra 允许用户传入自定义的 React 组件。

查看源码在线预览

import { Card, Button } from '@alifd/next';
const commonProps = {
    style: { width: 300 },
    title: 'Title',
    extra: <Button text>More</Button>
};
ReactDOM.render(<div>
    <Card {...commonProps} showTitleBullet={false}>
        Card Content
    </Card>
</div>, mountNode);

隐藏头部下划线

可以通过设置 showHeadDivider={false} 隐藏头部下划线。

查看源码在线预览

import { Card } from '@alifd/next';
const commonProps = {
    title: 'Title',
    style: { width: 300 },
    subTitle: 'Sub-title',
    extra: 'Link'
};
ReactDOM.render(<div>
    <Card {...commonProps} showHeadDivider={false}>
        <div className="card-placeholder"></div>
    </Card>
</div>, mountNode);

.card-placeholder {
    height: 500px;
    text-align: center;
    background: #F7F8FA;
}

相关区块

暂无相关区块