mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
Add upload inline item demo, ref #859
This commit is contained in:
parent
fdcc665c80
commit
63476680bd
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
上传文件为图片,可展示本地缩略图。
|
上传文件为图片,可展示本地缩略图。
|
||||||
|
|
||||||
`IE8/9` 不支持浏览器本地缩略图展示([ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)),可以写 `thumbUrl` 属性来代替。
|
`IE8/9` 不支持浏览器本地缩略图展示([Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)),可以写 `thumbUrl` 属性来代替。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -30,10 +30,28 @@ const props = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
<div>
|
||||||
<Upload {...props}>
|
<Upload {...props}>
|
||||||
<Button type="ghost">
|
<Button type="ghost">
|
||||||
<Icon type="upload" /> 点击上传
|
<Icon type="upload" /> 点击上传
|
||||||
</Button>
|
</Button>
|
||||||
</Upload>
|
</Upload>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Upload {...props} className="upload-list-inline">
|
||||||
|
<Button type="ghost">
|
||||||
|
<Icon type="upload" /> 点击上传
|
||||||
|
</Button>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
, mountNode);
|
, mountNode);
|
||||||
````
|
````
|
||||||
|
|
||||||
|
````css
|
||||||
|
/* 加几行样式将上传项变成平铺样式 */
|
||||||
|
.upload-list-inline .ant-upload-list-item {
|
||||||
|
display: inline-block;
|
||||||
|
width: 200px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
````
|
||||||
|
Loading…
Reference in New Issue
Block a user