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

Question

为了在我的UI中选择一些不同数据类型的值，我使用了14.3.x.

中介绍的Vaadin的DateTimePicker

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

DateTimePicker 组件在这里只是为了水平宽度。而且我不可以选择使所有其他输入也像字符串一样更宽。

我检查了 API 但似乎没有实现垂直堆叠的标准方法。有人知道如何完成这项工作吗？

Answer 1

CSS 可以做到。在您的 Java class 中，为 class 添加一个 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;
}

Is there a way to stack date and time vertically in Vaadins DateTimePicker component?