代码拉取完成，页面将自动刷新
通用卡片容器，将信息聚合在卡片容器中展示，用来显示文字、列表、图文等内容。
import { Card } from 'uiw';
// or
import Card from '@uiw/react-card';
包含标题、内容、操作区域。
import React from 'react';
import { Card } from 'uiw';
export default function Demo() {
return(
<div>
<Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>
</div>
)
}
在灰色背景上使用无边框的卡片。
import React from 'react';
import { Card } from 'uiw';
export default function Demo() {
return(
<Card title="Card标题" bordered={false} style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>
)
}
只包含内容区域。
import React from 'react';
import { Card } from 'uiw';
export default function Demo() {
return(
<Card style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>
)
}
可以调整默认边距，设定宽度。
import React from 'react';
import { Card } from 'uiw';
let titleStyle = { padding: `10px 16px` };
export default function Demo() {
return(
<Card style={{ width: 240 }} bodyStyle={{ padding: 10 }}>
<div>
<img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
</div>
<div style={titleStyle}>
<h3 style={{margin:0}}>我爱漂亮妹妹</h3>
<p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
</div>
</Card>
)
}
import React from 'react';
import { Card, Icon } from 'uiw';
const footer = (
<a href="https://uiwjs.github.io">
<Icon type='user' />
16 Friends
</a>
)
export default function Demo() {
return(
<Card
title="Card标题"
footer={footer}
style={{ width: 240 }}
bodyStyle={{ padding: 0 }}
>
<div>
<img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
</div>
<div style={{ padding: `10px 16px` }}>
<h3 style={{margin:0}}>我爱漂亮妹妹</h3>
<p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
</div>
</Card>
)
}
设置属性 active=true 将激活卡片，默认展示鼠标经过的样式。
import React from 'react';
import { Card, Icon } from 'uiw';
const footer = (
<a href="https://uiwjs.github.io">
<Icon type='user' />
16 Friends
</a>
)
export default function Demo() {
return(
<Card
active
title="Card标题"
footer={footer}
style={{ width: 240 }}
bodyStyle={{ padding: 0 }}
>
<div>
<img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
</div>
<div style={{ padding: `10px 16px` }}>
<h3 style={{margin:0}}>我爱漂亮妹妹</h3>
<p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
</div>
</Card>
);
}
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 卡片标题 | String/ReactNode | - |
| footer | 页脚内容的简写 | String/ReactNode | - |
| extra | 卡片右上角的操作区域 | String/ReactNode | - |
| bordered | 是否显示边框 | Boolean | true |
| active | 展示鼠标经过的样式。 | Boolean | false |
| noHover | 取消鼠标移过时边框阴影 | Boolean | false |
| bodyStyle | 设置 body 的样式 |
Object | - |
| bodyClassName | 设置 body 的 className |
String | - |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手