Vaadin 14(.1.19) 带来了这个时间选择器组件:https://vaadin.com/components/vaadin-time-picker/java-examples
这是它的样子(只读时):
我怎样才能让这个时间选择器像这样显示以时间为中心的时间(这是浏览器中手动操作的屏幕截图(直接在嵌入的输入字段中设置 text-align:center ),而不是编程的解决方案)?
我试图在 Java 代码中设置 text-align 属性没有效果:
TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");
我搜索了一个主题变体。但这似乎仅适用于 TextFields 和派生字段:
EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
最佳答案
您将需要更改 TimePicker
的 shadow DOM 中的 CSS。的 TextField
value 部分,我们使用 theme 属性作为附加选择器,以免主题所有文本字段:
[part="value"] {
:host([theme~="center"]) text-align: center;
}
通过
@CssImport
包含 CSS注释,主题化文本字段并将主题属性设置为日期选择器。主题属性传播到日期选择器中使用的文本字段:@CssImport(value = "./styles/my-time-picker-styles.css", themeFor = "vaadin-time-picker-text-field")
public class YourViewOrLayout extends Composite<Div> {
...
timePicker.getElement().setAttribute("theme", "center");
}
我在 this answer 中更详细地解释了它.
关于java - Vaadin 14 时间选择器 - 居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60692643/