Vaadin 14时间选择器-居中对齐
时间选择器组件随附了Vaadin 14（.1.19）：https//vaadin.com/components/vaadin-time-picker/java-examples
这是它的外观（只读）： Vaadin时间选择器组件正常
我如何才能使这个时间选择器显示以时间为中心的时间（这是浏览器中的手动操作的屏幕截图（直接在嵌入式输入字段中设置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);
问题来源：Stack Overflow
展开
收起
1
条回答
写回答
写回答
-
你需要的阴影DOM内改变CSS TimePicker的TextField价值部分，我们使用的主题属性的附加选择，以不主题所有的文本字段：
[part="value"] { :host([theme~="center"]) text-align: center; }通过@CssImport注释包括CSS ，对文本字段进行主题设置，并将theme属性设置为日期选择器。主题属性传播到日期选择器中使用的文本字段：
@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"); }我在这个答案中更详细地解释了它。
回答来源：Stack Overflow
2020-03-24 16:37:32赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
