mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
docs: translate Card's documentation to English
This commit is contained in:
Leon Shi
parent
d7e1794711
commit
d70637022d
@ -1,18 +1,26 @@
|
||||
---
|
||||
order: 0
|
||||
title: 典型卡片
|
||||
title:
|
||||
zh-CN: 典型卡片
|
||||
en-US: Basic card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
包含标题、内容、操作区域。
|
||||
|
||||
## en-US
|
||||
|
||||
A basic card containing a title, content and an extra corner content.
|
||||
|
||||
````jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -1,19 +1,27 @@
|
||||
---
|
||||
order: 1
|
||||
title: 无边框
|
||||
title:
|
||||
zh-CN: 无边框
|
||||
en-US: No border
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在灰色背景上使用无边框的卡片。
|
||||
|
||||
## en-US
|
||||
|
||||
A borderless card on a gray background.
|
||||
|
||||
````jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={{ background: '#ECECEC', padding: '30px' }}>
|
||||
<Card title="卡片标题" bordered={false} style={{ width: 300 }}>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<Card title="Card title" bordered={false} style={{ width: 300 }}>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
</div>
|
||||
, mountNode);
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 4
|
||||
title: 栅格卡片
|
||||
title:
|
||||
zh-CN: 栅格卡片
|
||||
en-US: Grid card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
在系统概览页面常常和栅格进行配合。
|
||||
|
||||
## en-US
|
||||
|
||||
Cards usually cooperate with grid layout in overview page.
|
||||
|
||||
````jsx
|
||||
import { Card, Col, Row } from 'antd';
|
||||
|
||||
@ -12,13 +20,13 @@ ReactDOM.render(
|
||||
<div style={{ background: '#ECECEC', padding: '30px' }}>
|
||||
<Row>
|
||||
<Col span="8">
|
||||
<Card title="卡片标题" bordered={false}>卡片的内容</Card>
|
||||
<Card title="Card title" bordered={false}>Card content</Card>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<Card title="卡片标题" bordered={false}>卡片的内容</Card>
|
||||
<Card title="Card title" bordered={false}>Card content</Card>
|
||||
</Col>
|
||||
<Col span="8">
|
||||
<Card title="卡片标题" bordered={false}>卡片的内容</Card>
|
||||
<Card title="Card title" bordered={false}>Card content</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
@ -26,7 +34,7 @@ ReactDOM.render(
|
||||
````
|
||||
|
||||
````css
|
||||
/* 增加 16px 栅格间距 */
|
||||
/* Increase grid spacing of 16px */
|
||||
.code-box-demo .row {
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
---
|
||||
order: 5
|
||||
title: 预加载的卡片
|
||||
title:
|
||||
zh-CN: 预加载的卡片
|
||||
en-US: Loading card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
数据读入前会有文本块样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Shows a loading indicator while the contents of the card are being fetched.
|
||||
|
||||
````jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Card loading title="卡片标题" style={{ width: '34%' }}>
|
||||
<Card loading title="Card title" style={{ width: '34%' }}>
|
||||
Whatever content
|
||||
</Card>
|
||||
, mountNode);
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
---
|
||||
order: 3
|
||||
title: 更灵活的内容展示
|
||||
title:
|
||||
zh-CN: 更灵活的内容展示
|
||||
en-US: Customized content
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以调整默认边距，设定宽度。
|
||||
|
||||
## en-US
|
||||
|
||||
Customizing default width and margin.
|
||||
|
||||
|
||||
````jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
@ -14,7 +23,7 @@ ReactDOM.render(
|
||||
<img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
|
||||
</div>
|
||||
<div className="custom-card">
|
||||
<h3>欧美街拍</h3>
|
||||
<h3>Europe Street beat</h3>
|
||||
<p>www.instagram.com</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
---
|
||||
order: 2
|
||||
title: 简洁卡片
|
||||
title:
|
||||
zh-CN: 简洁卡片
|
||||
en-US: Simple card
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
只包含内容区域。
|
||||
|
||||
## en-US
|
||||
|
||||
A simple card only containing a content area.
|
||||
|
||||
````jsx
|
||||
import { Card } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Card style={{ width: 300 }}>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<p>卡片的内容</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
24
components/card/index.en-US.md
Normal file
24
components/card/index.en-US.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
category: Components
|
||||
type: Presentation
|
||||
title: Card
|
||||
---
|
||||
|
||||
Common card container.
|
||||
|
||||
## When to use
|
||||
|
||||
The most basic card container. You can use it to contain text, lists, pictures and paragraphs.
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Card title="Card title">Card content</Card>
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | Card title | React.Element | - |
|
||||
| extra | Corner content of card | React.Element | - |
|
||||
| bordered | Whether a border is set | Boolean | true |
|
||||
| bodyStyle | Custom style for content area | Object | - |
|
||||
@ -1,9 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
chinese: 卡片
|
||||
type: Presentation
|
||||
cols: 1
|
||||
english: Card
|
||||
title: Card
|
||||
subtitle: 卡片
|
||||
---
|
||||
|
||||
通用卡片容器。
|
||||
Loading…
Reference in New Issue
Block a user