Confgure lề cho các phần tử cá nhân qua java fx css

Question

Tôi có mảnh sau fxml:

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

tôi cần phải thêm một khoảng cách của 10px giữa Button và Hyperlink. Tôi cũng muốn sử dụng CSS cho tác vụ này.

Answer 1

Dường như bạn không thể. JavaFX có hỗ trợ giới hạn trên CSS ngay bây giờ.

Tuy nhiên, thuộc tính CSS padding và lề được hỗ trợ trên một số đối tượng đồ thị cảnh JavaFX.

nói Hướng dẫn tham khảo CSS chính thức. Vì vậy, cách giải quyết có thể được sử dụng thêm cách bố trí khác, VBox khác ví dụ:

<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> 

---

Cập nhật:
Tìm thấy hoàn hảo hơn một chút cách để làm việc đó, nhưng vẫn không bằng 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> 

Điều này tránh xác định bố cục bổ sung không cần thiết.

Answer 2

Có lẽ thực sự đã đến muộn với bữa tiệc, nhưng tôi sử dụng một cách tiếp cận khác có thể hữu ích cho người khác.

Không có lề -fx: thuộc tính 5px css cho các nút javafx, nhưng bạn có thể giải quyết hành vi bằng cách kết hợp đệm, đường viền viền và phông nền.

Ví dụ: nút có lề 5px.

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

} 

Hoặc bạn cũng có thể xác định giá trị đệm và giá trị thấp hơn trong trường hợp bạn muốn có khoảng đệm và lề.