4

Vaadin 14(.1.19) には、この Time Picker コンポーネントが付属しています: https://vaadin.com/components/vaadin-time-picker/java-examples

これはどのように見えるかです (読み取り専用の場合):

Vaadin Time Picker コンポーネントの法線

この Time Picker を取得して、このように時間を中心に表示するにはどうすればよいですか (これは、プログラムされたソリューションではなく、ブラウザーでの手動操作のスクリーンショットです (埋め込まれた入力フィールドで text-align:center を直接設定します))。

テキストが中央に配置された Vaadin Time Picker コンポーネント

Java コードで text-align プロパティを設定しようとしましたが、効果はありませんでした。

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

そして、テーマのバリエーションを探しました。しかし、それは TextFields と派生フィールドにのみ存在するようです:

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

1 に答える 1

2

TimePickerの値部分のシャドウ DOM 内で CSS を変更する必要がありTextFieldます。すべてのテキスト フィールドをテーマにしないために、追加のセレクターとして theme 属性を使用します。

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

@CssImport注釈を介して CSS を組み込み、テキスト フィールドのテーマを設定し、テーマ属性を日付ピッカーに設定します。テーマ属性は、日付ピッカーで使用されるテキスト フィールドに反映されます。

@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");
}

この回答でもう少し詳しく説明しました。

于 2020-03-16T12:31:22.470 に答える