如何在antd的上传组件中更改上传文本? [英] How to change Uploading text in upload component in antd?

问题描述

我想在 antd 中上传时在上传组件中自定义上传"文本.但是我在 antd doc 中找不到任何东西来帮助我.这是文档:

解决方案

改变content的位置，需要自定义top和left.我也更改了其他元素的 CSS 属性(加号图标的红色，另一张卡片的上传文本).您可以根据需要更改它们.这是一个快速

/* 加号 + 图标*/.ant-upload-select-picture-card i {字体大小:32px；红色;}/* 上传文本*/.ant-upload-select-picture-card .ant-upload-text {边距顶部:8px；红色;}/* 上传...文本*/.ant-upload-list-item-info>跨度>div[class="ant-upload-list-item-uploading-text"] {可见性:隐藏；}/* 你需要自定义 top 和 left css 属性 */.ant-upload-list-item-info>跨度>div[class="ant-upload-list-item-uploading-text"]:after {内容:等等?"；可见性:可见；显示:块；位置:绝对；填充:1px；顶部:10px；左:10px；}

I want to customize "uploading" text in upload component while uploading in antd. But I can't find any thing in antd doc to help me. here is doc: https://ant.design/components/upload/

解决方案

To change the position of content, you need to customise top and left. I have changed the CSS attributes of other elements(red color of the plus icon, Upload text of another card) as well. You can change them as per your needs. Here is a quick demo.

/* plus +  icon*/
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: red;
}
/* Upload text*/
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: red;
}

/* Uploading... text*/
.ant-upload-list-item-info
  > span
  > div[class="ant-upload-list-item-uploading-text"] {
  visibility: hidden;
}


/* you need to customise top and left css attribute */
.ant-upload-list-item-info
  > span
  > div[class="ant-upload-list-item-uploading-text"]:after {
  content: "Wait ?";
  visibility: visible;
  display: block;
  position: absolute;
  padding: 1px;
  top: 10px;
  left: 10px;
}

这篇关于如何在antd的上传组件中更改上传文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！