1
부트 스트랩 CSS와 같은 카드를 만들려고하지만 JavaFX 구성 요소를 사용하고 있습니다. 둥근 테두리가 필요하지만 상단 부분 (헤더)의 배경색이 나에게 문제가되고 있습니다.JavaFX CSS에서 테두리 가장자리를 넘는 배경색을 멈출 수있는 방법이 있습니까?
배경이 테두리를 오버플로하고 아주보기 흉하게 보입니다. 나는 조금 봤 거든 오버플로 발견 : 배경색에 숨겨진 그것을 해결한다. JavaFX CSS는 그렇게 생각하지 않습니다. 이 문제를 해결할 다른 방법이 있습니까? 지금까지
내 솔루션 :
JavaFX CSS Reference Guide에서 설명한 바와 같이
A
답변
2
, 오버 플로우가 지원되지 않습니다.
자바 FX CSS는 CSS 레이아웃 등록 정보 등 플로트, 위치, 오버플 및폭을 지원하지 않는다. 그러나 CSS 패딩 및 여백 속성은 일부 JavaFX 장면 그래프 객체에서 지원됩니다. 레이아웃의 다른 모든 측면은 JavaFX 코드에서 프로그래밍 방식으로 처리됩니다. 또한 JavaFX에는 동일한 구조가 없으므로 테이블과 같은 HTML 관련 요소에 대한 CSS 지원이 지원되지 않습니다.
그러나 둥근 배경 문제를 해결하려면 -fx-background-radius
과 함께 -fx-border-radius
을 사용할 수 있습니다. 그것들은 같은 값이어야합니다. 당신은 그것을 here in the reference guide 찾을 수 있습니다.
다음은 내가 생각하는 부트 스트랩 형 카드의 예입니다. 당신은 -fx-background-radius: 10 10 0 0;
public class Card extends StackPane {
public BorderPane border = new BorderPane();
public StackPane header = new StackPane(), content = new StackPane();
public Card() {
setAlignment(Pos.CENTER);
getChildren().add(border);
border.setTop(header);
border.setCenter(content);
border.setStyle("-fx-border-color: cornflowerblue; -fx-border-radius: 10; ");
header.setStyle("-fx-background-color: derive(cornflowerblue, 70%); -fx-background-radius: 10 10 0 0; ");
header.setMinWidth(100);
header.setMinHeight(80);
content.setMinWidth(100);
content.setMinHeight(100);
}
public BorderPane getCard() {
return border;
}
public StackPane getHeader() {
return header;
}
public StackPane getContent() {
return content;
}
}
public void start(Stage stage) throws Exception {
Card card = new Card();
card.setPadding(new Insets(10,10,10,10));
GridPane grid = new GridPane();
grid.setVgap(10); grid.setHgap(10);
grid.setAlignment(Pos.CENTER);
grid.addRow(0, new Label("Username"), new TextField());
grid.addRow(1, new Label("Password"), new PasswordField());
grid.addRow(2, new Button("Submit"));
card.getContent().getChildren().add(grid);
Label title = new Label("Card Example");
title.setFont(Font.font("Tahoma", FontWeight.SEMI_BOLD, 36));
card.getHeader().getChildren().add(title);
StackPane stack = new StackPane();
stack.setAlignment(Pos.CENTER);
stack.getChildren().add(card);
Scene scene = new Scene(stack, 500, 300);
stage.setTitle("Boostrap-like Card Example");
stage.setScene(scene);
stage.show();
}
당신이 (지금까지의 내가 추측 할 수로) 원하는 것을 할 수있는 방법은 CSS에서 수행 할 수없는 클립의 속성을 지정하는 것입니다 될 것이라고
-fx-background-radius: <top-left> <top-right> <bottom-right> <bottom-left>;
을 사용합니다. – fabian