diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md new file mode 100644 index 0000000000000000000000000000000000000000..b58bc3f03679e032b44421039c5303dbf1eb7429 --- /dev/null +++ b/components/upload/demo/picture-card.md @@ -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( +
+
+ +
+ +
上传照片
+
+
+
+ + + 示例 + +
+, 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; +} +```` diff --git a/style/components/upload.less b/style/components/upload.less index 8f83d972e937cb6776cebdc059c34a1dac29dd55..c775d9840cc07f91872a6c077b2756f07cbd15c6 100644 --- a/style/components/upload.less +++ b/style/components/upload.less @@ -7,6 +7,7 @@ > span { display: block; width: 100%; + outline: none; } input[type="file"] {