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

【问题标题】：Is there a way to stack date and time vertically in Vaadins DateTimePicker component?有没有办法在 Vaadins DateTimePicker 组件中垂直堆叠日期和时间？
【发布时间】：2020-09-29 20:00:53
【问题描述】：

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

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

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

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

【问题讨论】：

标签： java user-interface vaadin vaadin14

【解决方案1】：

使用 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;
}

【讨论】：