通过覆盖应用在其上的默认 css 自定义 Vaadin 详细信息展开图标

Question

我想要展开/展开功能，我使用 Vaadin Details 来实现它。

Div contentDiv = new Div();

Label label = new Label("Expand");

Details details = new Details(label, contentDiv);

它给出的输出如下：

但是，我想要的是右侧的展开图标。所以为此我使用 ThemeVariants 像这样：

details.addThemeVariants(DetailsVariant.REVERSE);

它给出的是以下输出：

文字和图标之间有很大的差距。

这是因为应用了以下默认值 css。

:host([theme~="reverse"]) [part="summary"] {
    justify-content: space-between;
}

所以，现在我需要覆盖这个 css。我所做的是在我的 css 文件中的 css 代码下方添加，并在导入中添加 themeFor="summary"。但是没有用。

:host([theme~="reverse"]) [part="summary"] {
            justify-content: normal;
        }

预期输出：

那么，在 Vaadin 中还有其他方法可以做到这一点吗？或者如何覆盖 ThemeVariants.

的默认值 css

注意：我使用的是 Vaadin 14。

Answer 1

问题之一，当 css 不起作用时导入错误。

检查您的 css 导入是否指定了 themeFor。

css 导入示例：

@CssImport(value = "./styles/vaadin-details.css", themeFor = "vaadin-details")

在vaadin-details.css:

:host([theme~="reverse"]) [part="summary"] {
    justify-content: normal;
}

这是 commit 我得到你预期结果的地方。请看我如何导入 css 文件。

此外，正如您正确指出的那样，使用 Div 而不是垂直布局时会重现此缺陷。

Answer 2

使用 themeFor="vaadin-details" 而不是 themeFor="summary" 应该可以。

另外，使用justify-content: start;。属性没有 normal 值：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Customize Vaadin Details Expand Icon by overriding default css applied on it