java 有没有办法在Vaadins DateTimePicker组件中垂直堆叠日期和时间？

wrrgggsh 于 2023-03-11 发布在 Java

关注(0)|答案(2)|浏览(103)

为了在UI中选择不同数据类型的值，我使用了14.3.x中引入的Vaadin的DateTimePicker。
我想知道我是否可以以某种方式将日期和时间输入字段垂直放置而不是水平放置？请参见图片：

DateTimePicker组件在这里只是水平地加宽，我 * 没有 * 选项来使所有其他的输入像字符串一样变宽。
我已经检查了API，但似乎没有一个标准的方式来实现垂直堆叠。有人知道如何做到这一点吗？

2条答案

在Java类中，为类添加一个CSS导入注解，如下所示：

@CssImport(value = "./styles/dtp.css", themeFor = "vaadin-date-time-picker")
public class MyView extends Div { 
//...

创建DateTimePicker时：

DateTimePicker dateTimePicker = new DateTimePicker();
        dateTimePicker.setClassName("stacked");

并且在/frontend/styles/dtp.css中：

:host(.stacked) .slot-container {
    display: flex;
    flex-direction: column;
}

在Vaadin 24上，接受答案的设置基本上工作正常，我只需要调整CSS：

:host(.stacked) .slots {
    display: flex;
    flex-direction: column;
}