mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 20:49:14 +08:00
Add picture-card demo
This commit is contained in:
parent
12c792147e
commit
17ebf07ad3
103
components/upload/demo/picture-card.md
Normal file
103
components/upload/demo/picture-card.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
# 图片卡片样式
|
||||||
|
|
||||||
|
- order: 8
|
||||||
|
|
||||||
|
上传文件为图片,可展示本地缩略图。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import { Upload, Icon } from 'antd';
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
action: '/upload.do',
|
||||||
|
listType: 'picture-card',
|
||||||
|
defaultFileList: [{
|
||||||
|
uid: -1,
|
||||||
|
name: 'xxx.png',
|
||||||
|
status: 'done',
|
||||||
|
url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
|
||||||
|
thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<div className="clearfix">
|
||||||
|
<div style={{float: 'left'}}>
|
||||||
|
<Upload {...props}>
|
||||||
|
<div className="upload-trigger">
|
||||||
|
<Icon type="plus" />
|
||||||
|
<div className="upload-trigger-text">上传照片</div>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
</div>
|
||||||
|
<a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" className="upload-example">
|
||||||
|
<img src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png"/>
|
||||||
|
<span>示例</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
, mountNode);
|
||||||
|
````
|
||||||
|
|
||||||
|
````css
|
||||||
|
/* 配合样式可以做出上传按钮和示例效果 */
|
||||||
|
.upload-trigger {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
padding: 24px 0;
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-trigger i {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-trigger-text {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-example {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
height: 96px;
|
||||||
|
width: 96px;
|
||||||
|
margin-left: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-example img {
|
||||||
|
height: 78px;
|
||||||
|
width: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-example:before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 8px;
|
||||||
|
content: ' ';
|
||||||
|
width: 78px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #808080;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-example span {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 8px;
|
||||||
|
width: 78px;
|
||||||
|
height: 24px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
````
|
@ -7,6 +7,7 @@
|
|||||||
> span {
|
> span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
|
Loading…
Reference in New Issue
Block a user