Как мне оформить JavaFX TextField, чтобы он выглядел как iOS? - PullRequest
Новая
       18

Как мне оформить JavaFX TextField, чтобы он выглядел как iOS?

0 голосов
/ 02 сентября 2018

Как мне оформить JavaFX TextField, чтобы он выглядел как iOS?

image

Я хочу, чтобы были скругленные углы, вставки / отступы, цвета и текст подсказки (включая шрифт).

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете изменить внешний вид TextField в соответствии с iOS, используя следующие правила CSS: 

#ios-field {
    -fx-background-color: white;
    -fx-border-color : #D7D6DC;
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 0;
    -fx-padding: 4 7 4 15 ;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}

#ios-field:focused {
    -fx-border-color : #D7D6DC;
    -fx-background-color: white;
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 0;
    -fx-padding: 4 7 4 15 ;
}

Я считаю, что правила CSS говорят сами за себя, и вам будет легко вносить изменения. Я использовал цвет # D7D6DC в качестве цвета рамки, чтобы он соответствовал цвету на вашем изображении; также -fx-background-insets являются значениями по умолчанию, используемыми в modenas.css

Результат:

enter image description here

P.S Я не вижу, существует ли граница (ВЛЕВО и ВПРАВО) на вашем изображении, если вы хотите отобразить только верхнюю и нижнюю границы, вы можете сделать это также с помощью -fx-border-width : 1 0 1 0;. Кроме того, для размера шрифта и семейства вы можете использовать -fx-font-size и -fx-font-family. Для iOS используется шрифт Сан-Франциско .

...