java Vaadin 14时间选择器对齐居中

Question

与vaadin14（.1.19）一起出现的是这次选择器组件：https://vaadin.com/components/vaadin-time-picker/java-examples

这是它的样子（当它是只读的）：

我如何让这个时间选择器像这样显示以时间为中心的时间（这是浏览器中手动操作的屏幕截图（将文本对齐：直接在嵌入式输入字段中设置为中心），而不是编程解决方案）

我试图在Java代码中设置text align属性，但没有效果：

TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");

我搜索了一个主题变体。但这似乎只适用于文本字段和派生字段：

EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

Answer 1

您需要在TimePicker的TextField值部分的阴影DOM中更改CSS，我们使用主题属性作为附加选择器，以避免对所有文本字段设置主题：

[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中详细解释了它