英文:
Is there a way to stack date and time vertically in Vaadins DateTimePicker component?
问题
对于在我的用户界面中选择不同数据类型的某些值，我使用 Vaadin 的 DateTimePicker，该组件在 14.3.x 版本中引入。
我想知道是否可以以某种方式垂直堆叠日期和时间输入字段，而不是水平排列？请参见图片：
DateTimePicker 组件当前仅水平排列。而且我没有选项使所有其他输入（例如字符串输入框）也变宽。
我已经查阅了API文档，但似乎没有标准的方法来实现垂直排列。是否有人知道如何完成这个任务？
英文:
For choosing some values of different data types in my UI, I use Vaadin's DateTimePicker introduced in 14.3.x.
I am wondering if I can somehow position date and time input fields vertically instead of horizontally? See the picture:
The DateTimePicker component is here simply to width horizontically. And I don't have the option to make all other inputs like the one for a string wider, too.
I have checked the API but there doesn't seem to be a stardard way of achieving the vertically stacking. Has anyone an idea how to get this done?
答案1
得分: 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;
}
英文:
it's doable with CSS. In your Java class, add a CSS import annotation for the class something like follows:
@CssImport(value = "./styles/dtp.css", themeFor = "vaadin-date-time-picker")
public class MyView extends Div {
//...
When creating the DateTimePicker:
DateTimePicker dateTimePicker = new DateTimePicker();
dateTimePicker.setClassName("stacked");
and in /frontend/styles/dtp.css:
:host(.stacked) .slot-container {
display: flex;
flex-direction: column;
}
答案2
得分: 1
在 Vaadin 24 上，接受的答案的设置基本上可行，我只需要微调一下 CSS：
:host(.stacked) .slots {
display: flex;
flex-direction: column;
}
英文:
On Vaadin 24, the setup for the accepted answer basically worked, I just needed to tweak the CSS:
:host(.stacked) .slots {
display: flex;
flex-direction: column;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论