英文:
Vaadin 14 Time Picker - align centered
问题
以下是翻译好的内容：
在 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");
我还搜索了一个主题变体。但似乎只适用于文本字段和派生字段：
EmailField emailField = new EmailField();
emailField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
英文:
with Vaadin 14(.1.19) comes this Time Picker component: https://vaadin.com/components/vaadin-time-picker/java-examples
This is how it looks like (when it's read-only):
How can I get this Time Picker to show the time centered like this (this is a screenshot of a manual manipulation in the browser (setting text-align:center directly at the embedded input field), not a programmed solution)?
I tried to set the text-align property in the Java code without effect:
TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");
And I searched for a theme variant. But that seems to exist for TextFields and derived fields only:
EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);
答案1
得分: 2
你需要更改TimePicker的阴影DOM内的CSS，针对TextField的值部分。我们使用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");
}
我在这个回答中更详细地解释了这个问题。
英文:
You will need to change the CSS within the shadow DOM of TimePicker's TextField value part, we use theme attribute as additional selector in order to not to theme all the text fields:
[part="value"] {
:host([theme~="center"]) text-align: center;
}
Include the CSS via @CssImport annotation, theming the text field and set the theme attribute to the date picker. The theme attribute is propagated to the text field used in the date picker:
@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");
}
I explained it in bit more detail in this answer.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论