Как получить круглые углы в JFXTextField или TextField, используя CSS в JavaFX - PullRequest
Новая
       35

Как получить круглые углы в JFXTextField или TextField, используя CSS в JavaFX

2 голосов
/ 13 октября 2019

Я создаю приложение, используя JavaFX, и у меня есть форма с JFXTextFields и JFXComboBoxes. Мне нужно округлить их, как закругленные углы, как показано на следующем рисунке.

Вот так.

Rounded Text Field

Я пробовал следующий код CSS. 

.jfx-text-field {
    -fx-border-radius: 20px;
    -fx-background-radius: 20 20 20 20;
    -fx-border-color: #609;
}

Но результат таков.

Rounded Text Field I Got

Как округлить текстовые поля и поля со списком с помощью CSS вJavaFX? Я действительно ценю, если кто-нибудь может мне помочь. Заранее спасибо.

1 Ответ

2 голосов
/ 15 октября 2019

Файлы .css, используемые JFoenix, можно найти по адресу JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls. Файл .css, принадлежащий JFXTextField, является jfx-text-field.css, а файл .css, принадлежащий JFXComboBox, - jfx-combo-box.css.

Стили, определенные в этих файлах, должны быть адаптированы вопределяемый пользователем .css -файл в соответствии с требованиями, например: 

.jfx-text-field,
.jfx-combo-box {
    -fx-border-radius: 20px;
    -fx-border-color: #CCCCCC;
}

.jfx-text-field {
    -fx-padding: 0.333333em 1em 0.333333em 1em;
}

.jfx-combo-box {
    -fx-padding: 0em 1em 0em 1em;
}

.jfx-text-field > .input-line,
.jfx-combo-box > .input-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
    -fx-translate-y: 0px;
}

.jfx-text-field > .input-focused-line,
.jfx-combo-box > .input-focused-line {
    -fx-background-color: transparent;
    -fx-pref-height: 0px;
}

В первом блоке определены border-radius и border-color, а в следующих двух блоках - отступ. В последних двух блоках строка ввода отключена, что все еще видно на первоначально опубликованном скриншоте выше. Результат:

enter image description here

Опубликованный стиль является лишь примером и должен быть адаптирован / оптимизирован в соответствии с вашими требованиями.

...