Vaadin 14 Time Picker - выравнивание по центру - PullRequest
Новая
       113

Vaadin 14 Time Picker - выравнивание по центру

4 голосов
/ 15 марта 2020

с Vaadin 14 (.1.19) поставляется с этим компонентом Time Picker: https://vaadin.com/components/vaadin-time-picker/java-examples

Вот как это выглядит (когда доступно только для чтения):

Vaadin Time Picker component normal

Как я могу заставить этот Time Picker показывать время по центру, как это (это скриншот ручной манипуляции в браузере (настройка text-align: center direct) во встроенном поле ввода), а не запрограммированное решение)?

Vaadin Time Picker component with centered text

Я пытался установить свойство выравнивания текста в коде Java без Эффект: 

TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");

И я искал вариант темы. Но это, кажется, существует только для TextFields и производных полей: 

EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

1 Ответ

2 голосов
/ 16 марта 2020

Вам нужно будет изменить CSS в теневой DOM части значения TimePicker * TextField, мы используем атрибут темы в качестве дополнительного селектора, чтобы не тематизировать все текстовые поля: 

[part="value"] {
    :host([theme~="center"]) text-align: center;
}

Включите аннотацию CSS через @CssImport, добавьте тематику в текстовое поле и установите атрибут темы в пике даты. Атрибут темы распространяется на текстовое поле, используемое в средстве выбора даты: 

@CssImport(value = "./styles/my-time-picker-styles.css", themeFor = "vaadin-time-picker-text-field")
public class YourViewOrLayout extends Composite<Div> {
   ...
   timePicker.getElement().setAttribute("theme", "center");
}

Я объяснил это более подробно в этом ответе .

...