我使用 Vaadin ComboBox 创建一个下拉菜单,用户可以在其中设置将在网页的另一个元素中显示的状态。所以我真的不需要 ComboBox 的文本字段部分(图中的蓝线)。
在浏览器中手动将宽度设置为 0 可提供完美的结果(没有可见的行,没有可用于焦点的文本输入区域),但是我无法使用代码实现此目的。请帮助我。
我使用了 this tutorial 中的示例(请参阅 vaadin-text-field-styles.css),它会更改我网页上的所有组合框。当前状态如下所示:
//Java-code:
comboBox.addClassName("RemoveTextField");
/* 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;
}
接下来,您可以通过将此注释添加到流 View 来将此应用于所有文本字段:
@CssImport(value = "text-styles.css", themeFor = "vaadin-text-field")
现在所有输入字段的宽度都为零。为了让它只应用于组合框中的文本字段,您可以在其上设置 theme 属性:
myComboBox.getElement().setAttribute("主题", "我的组合");
然后你可以更新你的text-styles.css
:
:host([theme="my-combo"]) [part="input-field"] {
width: 0;
}
那么这是如何工作的?
所有 Vaadin 网络组件都实现了一个 ThemableMixin
,它可以做几件事:
- 它使您能够在
@CssImport
中使用themeFor="..."
将样式注入(inject) Vaadin 组件的影子根。 - 它将您在组件上设置的任何
theme
属性传播到影子根内的任何子组件。
在浏览器开发者工具中你会看到theme
属性已经传播到vaadin-text-field
,因此我们可以用它来限制范围我们的风格。 仅传播主题属性,它不适用于类、id 等。
如果您查看突出显示的 style
标签,您还会发现 text-styles.css
的内容已被注入(inject)那里(尽管内容开发工具可能太长而无法显示)。
替代方案
组合框可能不是最好的组件。看看 MenuBar或 ContextMenu .
关于java - Vaadin ComboBox 将文本字段宽度设置为 0(CSS 阴影 dom),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67920083/