Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@uiw/react-card
Advanced tools
通用卡片容器,将信息聚合在卡片容器中展示,用来显示文字、列表、图文等内容。
import { Card } from 'uiw';
// or
import Card from '@uiw/react-card';
包含标题、内容、操作区域。
import ReactDOM from 'react-dom';
import { Card } from 'uiw';
ReactDOM.render(
<div>
<Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>
</div>,
_mount_
);
在灰色背景上使用无边框的卡片。
import ReactDOM from 'react-dom';
import { Card } from 'uiw';
ReactDOM.render(
<Card title="Card标题" bordered={false} style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>,
_mount_
);
只包含内容区域。
import ReactDOM from 'react-dom';
import { Card } from 'uiw';
ReactDOM.render(
<Card style={{ width: 300 }}>
卡片内容<br/>
卡片内容<br/>
卡片内容<br/>
</Card>,
_mount_
);
可以调整默认边距,设定宽度。
import ReactDOM from 'react-dom';
import { Card } from 'uiw';
let titleStyle = { padding: `10px 16px` };
ReactDOM.render(
<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>,
_mount_
);
import ReactDOM from 'react-dom';
import { Card, Icon } from 'uiw';
const footer = (
<a href="https://uiwjs.github.io">
<Icon type='user' />
16 Friends
</a>
)
ReactDOM.render(
<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>,
_mount_
);
设置属性 active=true
将激活卡片,默认展示鼠标经过的样式。
import ReactDOM from 'react-dom';
import { Card, Icon } from 'uiw';
const footer = (
<a href="https://uiwjs.github.io">
<Icon type='user' />
16 Friends
</a>
)
ReactDOM.render(
<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>,
_mount_
);
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | - |
FAQs
Card component
The npm package @uiw/react-card receives a total of 136 weekly downloads. As such, @uiw/react-card popularity was classified as not popular.
We found that @uiw/react-card demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.