如何在 Vaadin Upload 中设置 vaadin-upload-file 组件的样式

Question

我想通过更改文件列表中元素的外观来设置 Vaadin 上传组件 (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);
    }
}

自定义-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）https://vaadin.com/components/vaadin-upload/html-api/elements/Vaadin.UploadFileElement.
此外，theme 值应根据 https://vaadin.com/docs/v14/flow/styling/styling-components/#sub-components 传播到所有子组件 - 似乎并非如此。

有没有办法将自定义 theme 附加到 vaadin-upload-file 组件？

Answer 1

是的，您只需要一个针对 vaadin-upload-file 组件的单独样式模块，这可以使用 @CssImport 注释来实现。例如，

@CssImport(value = "./styles/custom-upload-file.css", themeFor = "vaadin-upload-file")

然后可以将自定义 CSS 添加到 {project_root}/frontend/styles/custom-upload-file.css。

编辑： 与其他 Vaadin 组件不同，分配给 vaadin-upload 的主题名称不会（不幸地）传播到 vaadin-upload-file。因此，不能依赖 theme 属性来选择性地设置同一应用程序中某些 vaadin-upload-file 组件的样式。

如果需要有选择性的样式，可以通过调用 JavaScript 将类名添加到 vaadin-upload-file 组件来实现一种变通的解决方法。但是，此类调用仅在 vaadin-upload-file 呈现在 DOM 中后才有效（这通常发生在文件上传成功时）。因此，应该从上传成功侦听器中进行 JS 调用。

这是用于有选择地隐藏 vaadin-upload-file 的清除按钮的解决方法：

@Route
@CssImport(value = "./styles/vaadin-upload-styles.css", themeFor = "vaadin-upload-file")
public class MainView extends VerticalLayout {

    public MainView() {

        MemoryBuffer buffer = new MemoryBuffer();
        Upload upload = new Upload(buffer);
        upload.addSucceededListener(e -> {
            upload.getElement()
                    .executeJs("this.shadowRoot.querySelector('vaadin-upload-file').className = 'hidden-clear'");
        });

        Button showClear = new Button("Show clear button", e -> upload.getElement()
                .executeJs("this.shadowRoot.querySelector('vaadin-upload-file').className = ''"));

        add(upload, showClear);
    }

}

然后在 vaadin-upload-styles.css 中，可以做这样的事情：

:host(.hidden-clear) [part~=clear-button] {
    display: none;
}

Answer 2

要修改扩展 ThemableMixin 的 Vaadin Web 组件中的样式，您可以

按照 Tarek 所说的去做，或者
在 components 文件夹中使用名为 vaadin-upload-file.css 的文件创建自定义主题。阅读更多 here.

无论哪种方式，您都需要了解 ThemeList#add(String) 只是将参数附加到客户端的 theme 属性。所以，你只需要在CSS中处理新的主题，例如：

:host([theme~="prettypink"]) [part="done-icon"]::before {
    color: #ff31f1;
}

Here 是 vaadin-upload 和 vaadin-upload-file 的默认 Lumo 样式。

如何在 Vaadin Upload 中设置 vaadin-upload-file 组件的样式

How to style vaadin-upload-file component inside Vaadin Upload

vaadin

vaadin-upload

vaadin14