ant-design/components/card/demo/border-less.md

45 lines
701 B
Markdown
Raw Normal View History

2016-04-10 15:38:52 +08:00
---
order: 1
title:
zh-CN: 无边框
en-US: No border
2016-04-10 15:38:52 +08:00
---
## zh-CN
2016-04-10 15:38:52 +08:00
在灰色背景上使用无边框的卡片。
## en-US
A borderless card on a gray background.
```tsx
2016-04-10 15:38:52 +08:00
import { Card } from 'antd';
2022-05-23 14:37:16 +08:00
import React from 'react';
2016-04-10 15:38:52 +08:00
const App: React.FC = () => (
2019-12-23 20:07:56 +08:00
<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>
2016-04-10 15:38:52 +08:00
</Card>
</div>
2018-11-28 15:00:03 +08:00
);
export default App;
2019-05-07 14:57:32 +08:00
```
2019-12-23 20:07:56 +08:00
```css
.site-card-border-less-wrapper {
padding: 30px;
background: #ececec;
2019-12-23 20:07:56 +08:00
}
```
<style>
[data-theme="dark"] .site-card-border-less-wrapper {
background: #303030;
}
</style>