Создайте форму для TextField в JavaFX с помощью Css

Мне нужно создать эту форму для TextField с помощью CSS

Образец изображения

Но мне удалось создать только следующий пользовательский интерфейс:

Моя фотография

Как я могу создать текстовое поле, например Sample Pic?


css javafx javafx-8 javafx-2 javafx-3d
person Kianoush    schedule 21.04.2016    source источник
comment
Это так красиво ! w3schools.com/graphics/svg_path.asp   -  person GOXR3PLUS    schedule 30.05.2017

Ответы (1)


arrow_upward
4
arrow_downward

Используйте свойство -fx-shape для Region< /a>, чтобы указать путь SVG.

.login-box {
    -fx-spacing: -15;
    -fx-fill-height: false;
}

.login-box > .button {
    -fx-shape: "M0,1 L1,0 L2,1 L1,2 Z";
    -fx-min-width: 60;
    -fx-max-width: 60;
    -fx-min-height: 60;
    -fx-max-height: 60;
}

.login-box > .textfield-container {
    -fx-spacing: 8;
}

.login-box > .textfield-container > .text-field {
    -fx-shape: "M200,0 H0 V30 H170 Z";
}

.login-box > .textfield-container > .password-field {
    -fx-shape: "M170,0 H0 V30 H200 Z";
}

.login-box > .textfield-container > .text-field, .login-box > .textfield-container > .password-field {
    -fx-min-width: 200;
    -fx-max-width: 200;
    -fx-min-height: 30;
    -fx-max-height: 30;
    -fx-padding: 4 30 4 8;
}

Оба пути SVG начинаются в верхнем правом углу (M200,0/M170,0), затем рисуются в верхнем левом углу (H0), продолжаются в нижнем левом углу (V30), затем в нижнем правом углу ( V170/V200) и, наконец, закрытие пути (Z).

Структура просмотра:

login-box                                (HBox)
    |---- textfield-container            (VBox)
    |         |--- text-field            (TextField)
    |         |--- password-field        (PasswordField)
    |
    |---- button                         (Button)
person fabian    schedule 21.04.2016