mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
6c8a7b7944
@ -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: 卡片
|
||||
---
|
||||
|
||||
通用卡片容器。
|
||||
@ -13,18 +13,18 @@ english: Slider
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 类型 | 默认值 |说明 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| range | Boolean | false | 双滑块模式
|
||||
| min | Number | 0 | 最小值
|
||||
| max | Number | 100 | 最大值
|
||||
| step | Number or null | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。
|
||||
| marks | Object{Number: String|React.Component} or Object{Number: { style, label}} | {} | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式
|
||||
| dots | Boolean | false | 是否只能拖拽到刻度上
|
||||
| value | Number or [Number, Number]| | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`
|
||||
| defaultValue | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]`
|
||||
| included | Boolean | true | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
|
||||
| disabled | Boolean | false | 值为 `true` 时，滑块为禁用状态
|
||||
| onChange | Function | NOOP | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
|
||||
| onAfterChange | Function | NOOP | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。
|
||||
| tipFormatter | Function or null | IDENTITY | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。
|
||||
| range | 双滑块模式 | Boolean | false
|
||||
| min | 最小值 | Number | 0
|
||||
| max | 最大值 | Number | 100
|
||||
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | Number or null | 1
|
||||
| marks | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
|
||||
| dots | 是否只能拖拽到刻度上 | Boolean | false
|
||||
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | Number or [Number, Number] |
|
||||
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
|
||||
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | Boolean | true
|
||||
| disabled | 值为 `true` 时，滑块为禁用状态 | Boolean | false
|
||||
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function | NOOP
|
||||
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function | NOOP
|
||||
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function or null | IDENTITY
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: @border-radius-base;
|
||||
background: #f3f3f3;
|
||||
border: 1px solid @border-color-split;
|
||||
background: #f7f7f7;
|
||||
font-size: @font-size-base;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -41,6 +41,7 @@ export default class Transfer extends React.Component {
|
||||
notFoundContent: PropTypes.node,
|
||||
body: PropTypes.func,
|
||||
footer: PropTypes.func,
|
||||
rowKey: PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
@ -61,8 +62,15 @@ export default class Transfer extends React.Component {
|
||||
});
|
||||
}
|
||||
splitDataSource(props) {
|
||||
const { targetKeys, dataSource } = props;
|
||||
const { targetKeys } = props;
|
||||
let { dataSource } = props;
|
||||
|
||||
if (props.rowKey) {
|
||||
dataSource = dataSource.map(record => {
|
||||
record.key = props.rowKey(record);
|
||||
return record;
|
||||
});
|
||||
}
|
||||
let leftDataSource = [...dataSource];
|
||||
let rightDataSource = [];
|
||||
|
||||
|
||||
@ -29,3 +29,14 @@ english: Transfer
|
||||
| searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' |
|
||||
| notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' |
|
||||
| footer | 底部渲染函数 | Function(props) | |
|
||||
|
||||
|
||||
## 注意
|
||||
|
||||
按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Transfer 中，`dataSource`里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
|
||||
|
||||
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。
|
||||
```jsx
|
||||
// 比如你的数据主键是 uid
|
||||
return <Transfer rowKey={record => record.uid} />;
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user