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

Question

在 Vaadin 14(.1.19) 中出现了这个时间选择器组件：https://vaadin.com/components/vaadin-time-picker/java-examples

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

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

我尝试在 Java 代码中设置文本对齐属性但没有效果：

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

然后我搜索了一个主题变体。但这似乎仅适用于 TextFields 和派生字段：

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");
}

我在中更详细地解释了它。

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

Vaadin 14 Time Picker - align centered

css

java

vaadin-themes

vaadin-flow

vaadin14