小编kam*_*llo的帖子

我想vaadin-upload通过更改文件列表中元素的外观来设置 Vaadin Upload 组件 ( ) 的样式，例如隐藏命令按钮（开始、删除、重试）。文件列表包含vaadin-upload-file元素。

目前，我只能通过向其添加自定义主题并导入适当的 css 来自定义 vaadin-upload 本身 - 就像本例中一样：https://cookbook.vaadin.com/large-upload-area。

@CssImport(value = "./styles/custom-upload.css", themeFor = "vaadin-upload")
public class MainView extends VerticalLayout implements HasUrlParameter<String> {

    public MainView() {
        Upload upload = new Upload();
        upload.getElement().getThemeList().add("custom-upload");
        add(upload);
    }
}

自定义上传.css：

:host([theme~="custom-upload"]) {
  border: 0;
}

:host([theme~="custom-upload"]) [part="commands"] {
  display: none;
}

简化的 DOM：

<vaadin-upload theme="custom-upload" target="VAADIN/dynamic/resource/1/70860bf9-21c4-474e-9418-fd5516c28736/upload">
    #shadow-root
        <div part="primary-buttons">...</div>
        <slot name="file-list">
            <div id="fileList" part="file-list">
                <vaadin-upload-file>...</vaadin-upload-file>
            </div>
        </slot>
        ...
</vaadin-upload>

文件指出：

• vaadin-upload-file 具有可自定义的部分（例如commands …