Vaadin ComboBox 将文本字段宽度设置为 0CSS 阴影 dom

编程问答 2022-04-24

问题描述

我使用 Vaadin ComboBox 创建了一个下拉菜单，用户可以在其中设置一个状态，该状态将显示在网页的另一个元素中。所以我真的不需要 ComboBox 的文本字段部分（图像中的蓝线）。

This is how it looks like now. The blue line should disappear.

在浏览器中手动将宽度设置为 0 会得到完美的结果（没有可见的线条，没有可用于焦点的文本输入区域），但是我无法使用代码实现这一点。请帮帮我。

我使用了 this tutorial 中的示例（请参阅 vaadin-text-field-styles.css），它更改了我网页上的所有 ComboBox。当前状态如下所示：

//Java-code:
comboBox.addClassName("RemoveTextField");

HTML-stack

/* css-File */
:host([class="RemoveTextField"]) [part="input-field"] {
    width: 0px;
}

没有使用 CSS 规则，我猜问题是 .host-selector 没有像我想象的那样工作。由于我是 CSS 菜鸟，请教我如何为 shadow dom 之外的元素使用选择器。

解决方法

另一种解决方案见文末。

处理嵌套阴影根时，样式有点棘手。 input-field 部分在 vaadin-text-field 的影子根内部，它在 vaadin-combo-box 的影子根内部。因此，它无法从组合框中设置样式。

您可以为文本字段创建一些样式，例如 text-styles.css：

[part="input-field"] {
    width: 0;
}

接下来，您可以通过将此注释添加到 Flow 视图来将其应用于所有文本字段：

@CssImport(value = "text-styles.css",themeFor = "vaadin-text-field")

现在所有输入字段的宽度都为零。为了让它仅应用于组合框中的文本字段，您可以在其上设置主题属性：

myComboBox.getElement().setAttribute("theme","my-combo");

然后您可以更新您的text-styles.css：

:host([theme="my-combo"]) [part="input-field"] {
    width: 0;
}

那么这是如何工作的？

所有 Vaadin 网络组件都实现了一个 ThemableMixin，它可以做一些事情：

  1. 它使您能够使用 themeFor="..." 中的 @CssImport 将样式注入 Vaadin 组件的阴影根。
  2. 它将您在组件上设置的任何 theme 属性传播到 shadow root 内的任何子组件。

在浏览器开发者工具中，您将看到 theme 属性已传播到 vaadin-text-field，因此我们可以使用它来限制样式的范围。 仅传播主题属性，它不适用于类、ID 等。

A screenshot of the DOM with the theme attribute propagated from the combo box to the text field

如果您查看突出显示的 style 标签，您还会发现 text-styles.css 的内容已被注入到那里（尽管内容可能太长，devtools 无法显示） .

替代解决方案

组合框可能不是最好的组件。看看 MenuBar 或 ContextMenu。

javajavavaadinvaadin-flow