有什么办法可以在Vaadins DateTimePicker组件中垂直堆叠日期和时间？

问题描述

要在我的UI中选择一些不同数据类型的值，我使用14.3.x中引入的Vaadin的DateTimePicker。

我想知道是否可以某种方式垂直而不是水平放置日期和时间输入字段？看图片：

DateTimePicker组件在这里只是水平宽度。而且，我不也可以选择使所有其他输入（例如一个输入）更宽。

我已经检查过API，但似乎没有实现垂直堆叠的标准方法。有谁知道如何做到这一点？

解决方法

可以在CSS中使用。在您的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;
}