Card卡片
通用卡片容器。
何时使用#
最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。
代码演示
Default size card
Card content
Card content
Card content
Small size card
Card content
Card content
Card content
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<>
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</>
);
export default App;
Default size card
Card content
Card content
Card content
import { Card } from 'infrad';
ReactDOM.render(
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }} mode="gray">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>,
mountNode,
);
Default size card
Card content
Card content
Card content
import { Card } from 'infrad';
ReactDOM.render(
<Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }} mode="shadow">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>,
mountNode,
);
Card title
Card content
Card content
Card content
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<div className="site-card-border-less-wrapper">
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</div>
);
export default App;
.site-card-border-less-wrapper {
padding: 30px;
background: #ececec;
}
Card content
Card content
Card content
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Card style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
);
export default App;
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const { Meta } = Card;
const App: React.FC = () => (
<Card
hoverable
style={{ width: 240 }}
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
);
export default App;
Card title
Card content
Card title
Card content
Card title
Card content
TypeScript
JavaScript
import { Card, Col, Row } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<div className="site-card-wrapper">
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
<Col span={8}>
<Card title="Card title" bordered={false}>
Card content
</Card>
</Col>
</Row>
</div>
);
export default App;
TypeScript
JavaScript
import { EditOutlined, EllipsisOutlined, SettingOutlined } from 'infra-design-icons';
import { Avatar, Card, Skeleton, Switch } from 'infrad';
import React, { useState } from 'react';
const { Meta } = Card;
const App: React.FC = () => {
const [loading, setLoading] = useState(true);
const onChange = (checked: boolean) => {
setLoading(!checked);
};
return (
<>
<Switch checked={!loading} onChange={onChange} />
<Card style={{ width: 300, marginTop: 16 }} loading={loading}>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Skeleton loading={loading} avatar active>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Skeleton>
</Card>
</>
);
};
export default App;
Card Title
Content
Content
Content
Content
Content
Content
Content
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const gridStyle: React.CSSProperties = {
width: '25%',
textAlign: 'center',
};
const App: React.FC = () => (
<Card title="Card Title">
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid hoverable={false} style={gridStyle}>
Content
</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
<Card.Grid style={gridStyle}>Content</Card.Grid>
</Card>
);
export default App;
TypeScript
JavaScript
import { Card } from 'infrad';
import React from 'react';
const App: React.FC = () => (
<Card title="Card title">
<Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
Inner Card content
</Card>
<Card
style={{ marginTop: 16 }}
type="inner"
title="Inner Card title"
extra={<a href="#">More</a>}
>
Inner Card content
</Card>
</Card>
);
export default App;
Card title
tab1
tab2
content1
article
app
project
app content
TypeScript
JavaScript
import { Card } from 'infrad';
import React, { useState } from 'react';
const tabList = [
{
key: 'tab1',
tab: 'tab1',
},
{
key: 'tab2',
tab: 'tab2',
},
];
const contentList: Record<string, React.ReactNode> = {
tab1: <p>content1</p>,
tab2: <p>content2</p>,
};
const tabListNoTitle = [
{
key: 'article',
tab: 'article',
},
{
key: 'app',
tab: 'app',
},
{
key: 'project',
tab: 'project',
},
];
const contentListNoTitle: Record<string, React.ReactNode> = {
article: <p>article content</p>,
app: <p>app content</p>,
project: <p>project content</p>,
};
const App: React.FC = () => {
const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
const [activeTabKey2, setActiveTabKey2] = useState<string>('app');
const onTab1Change = (key: string) => {
setActiveTabKey1(key);
};
const onTab2Change = (key: string) => {
setActiveTabKey2(key);
};
return (
<>
<Card
style={{ width: '100%' }}
title="Card title"
extra={<a href="#">More</a>}
tabList={tabList}
activeTabKey={activeTabKey1}
onTabChange={key => {
onTab1Change(key);
}}
>
{contentList[activeTabKey1]}
</Card>
<br />
<br />
<Card
style={{ width: '100%' }}
tabList={tabListNoTitle}
activeTabKey={activeTabKey2}
tabBarExtraContent={<a href="#">More</a>}
onTabChange={key => {
onTab2Change(key);
}}
>
{contentListNoTitle[activeTabKey2]}
</Card>
</>
);
};
export default App;
TypeScript
JavaScript
import { EditOutlined, EllipsisOutlined, SettingOutlined } from 'infra-design-icons';
import { Avatar, Card } from 'infrad';
import React from 'react';
const { Meta } = Card;
const App: React.FC = () => (
<Card
style={{ width: 300 }}
cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Meta
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
title="Card title"
description="This is the description"
/>
</Card>
);
export default App;
API#
<Card title="卡片标题">卡片内容</Card>
Card#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
mode | 设置卡片是普通模式还是灰色模式还是阴影模式 | normal | gray | shadow | normal | |
actions | 卡片操作组,位置在卡片底部 | Array<ReactNode> | - | |
activeTabKey | 当前激活页签的 key | string | - | |
bodyStyle | 内容区域自定义样式 | CSSProperties | - | |
bordered | 是否有边框 | boolean | true | |
cover | 卡片封面 | ReactNode | - | |
defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签 | |
extra | 卡片右上角的操作区域 | ReactNode | - | |
headStyle | 自定义标题区域样式 | CSSProperties | - | |
hoverable | 鼠标移过时可浮起 | boolean | false | |
loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false | |
size | card 的尺寸 | default | small | default | |
tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
tabProps | Tabs | - | - | |
title | 卡片标题 | ReactNode | - | |
type | 卡片类型,可设置为 inner 或 不设置 | string | - | |
onTabChange | 页签切换的回调 | (key) => void | - |
Card.Grid#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
className | 网格容器类名 | string | - | |
hoverable | 鼠标移过时可浮起 | boolean | true | |
style | 定义网格容器类名的样式 | CSSProperties | - |
Card.Meta#
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
avatar | 头像/图标 | ReactNode | - | |
className | 容器类名 | string | - | |
description | 描述内容 | ReactNode | - | |
style | 定义容器类名的样式 | CSSProperties | - | |
title | 标题内容 | ReactNode | - |