Confirmez la marge pour un élément individuel via java fx css

J'ai le fragment suivant de fxml:

    <VBox fx:id="paneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
        <Hyperlink text="Registration"/>
    </VBox>

J'ai besoin d'ajouter un espacement de 10px entre le Bouton et le lien Hypertexte. Je tiens également à utiliser les CSS pour cette tâche.

source d'informationauteur vbezhenar

  1. 16

    Il semble que vous ne pouvez pas. JavaFX a une prise en charge limitée sur CSS maintenant.

    Cependant, le CSS, le rembourrage et les marges propriétés sont prises en charge sur certains
    JavaFX scene graph objets.

    dit l'officiel CSS Guide de Référence. Donc solution pourrait être d'utiliser des autres mises en page, un autre VBox par exemple:

    <VBox fx:id="paneLeft" spacing="10">
    <VBox fx:id="innerPaneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    </VBox>
    <Hyperlink text="Registration"/>
</VBox>

    Mise à jour:

    Trouvé un peu plus parfaite manière de faire, mais toujours pas en CSS.

     <?import javafx.geometry.Insets?>

 <VBox fx:id="paneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000">
            <VBox.margin>
                <Insets>
                    <bottom>10</bottom>
                </Insets>
            </VBox.margin>
        </Button>
        <Hyperlink text="Registration"/>
 </VBox>

    Cela évite de définir une inutiles supplémentaires de mise en page.

  2. 31

    Probablement vraiment la fin de la partie, mais j'utilise une autre approche qui pourrait être utile pour les autres aussi.

    Theres no-fx-margin:5px propriété css pour javafx boutons, mais vous pouvez contourner le comportement avec une combinaison de padding, border-encarts et d'arrière-plan-les encarts.

    Par exemple un bouton avec une marge de 5px. 

    .button-with-margin {
    -fx-padding: 5px;
    -fx-border-insets: 5px;
    -fx-background-insets: 5px;

}

    Alternativement, vous pouvez également définir un rembourrage supérieur et inférieur des encarts de valeurs dans le cas où vous voulez un rembourrage et d'une marge.