Card 卡片

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

一个通用的卡片组件。

何时使用

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

API

卡片

代码示例

基本

最简单的用法。

查看源码在线预览

import { Card } from "@icedesign/base";
ReactDOM.render(
  <Card
    style={{ width: 300 }}
    title="阿里老黄历"
    subTitle="没品位"
    extra="Link"
    language="en-us"
  >
    <h3>Card title</h3>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
  mountNode
);

自定义内容高度

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

查看源码在线预览

import { Card } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Card
      style={{ width: 300 }}
      title="阿里老黄历"
      subTitle="没品位"
      bodyHeight="auto"
    >
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>,
  mountNode
);

自定义卡片样式

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

查看源码在线预览

import { Card } from "@icedesign/base";
const cardStyle = {
  padding: 0,
  boxShadow: "none"
};
ReactDOM.render(
  <Card style={cardStyle} bodyHeight="auto">
    <img
      src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png"
      alt="father day"
    />
    <div className="custom-card">
      <h3>父亲节</h3>
      <p>Father's Day</p>
    </div>
  </Card>,
  mountNode
);

.custom-card {
    text-align: center;
    padding: 10px 16px;
}
.custom-card p {
    color: #999;
}

自定义标题样式

可以通过设置 titleBottomLine 属性为 false 关闭显示头部区域的底部边框线。可以通过设置 titlePrefixLine 属性为 false 关闭显示标题前的前缀线。

查看源码在线预览

import { Card } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Card
      style={{ width: 300 }}
      title="Title"
      subTitle="Here is added words"
      titlePrefixLine={false}
      extra={<a href="#">Link &gt;</a>}
    >
      Custom Content
    </Card>
    <br />
    <br />
    <Card
      style={{ width: 300 }}
      title="Title"
      subTitle="Here is added words"
      titleBottomLine={false}
      extra={<a href="#">Link &gt;</a>}
    >
      Custom Content
    </Card>
    <br />
    <br />
    <Card
      style={{ width: 300 }}
      title={<i>Title</i>}
      subTitle={<i>Sub</i>}
      titlePrefixLine={false}
      titleBottomLine={false}
      extra={<a href="#">Link &gt;</a>}
    >
      Custom Content
    </Card>
  </div>,
  mountNode
);

相关区块

暂无相关区块