Блог

Для выбора некоторых значений разных типов данных в моем пользовательском интерфейсе я использую Vaadin DateTimePicker , представленный в 14.3.x.

Мне интересно, могу ли я каким-то образом расположить поля ввода даты и времени вертикально, а не горизонтально? Смотрите картинку:

Компонент 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;
}
  

На Vaadin 24 настройка принятого ответа в основном работала, мне просто нужно было настроить CSS:

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