2017-03-12 6 views
1

부트 스트랩 CSS와 같은 카드를 만들려고하지만 JavaFX 구성 요소를 사용하고 있습니다. 둥근 테두리가 필요하지만 상단 부분 (헤더)의 배경색이 나에게 문제가되고 있습니다.JavaFX CSS에서 테두리 가장자리를 넘는 배경색을 멈출 수있는 방법이 있습니까?

배경이 테두리를 오버플로하고 아주보기 흉하게 보입니다. 나는 조금 봤 거든 오버플로 발견 : 배경색에 숨겨진 그것을 해결한다. JavaFX CSS는 그렇게 생각하지 않습니다. 이 문제를 해결할 다른 방법이 있습니까? 지금까지

내 솔루션 :

JavaFX CSS Reference Guide에서 설명한 바와 같이

card

+0

당신이 (지금까지의 내가 추측 할 수로) 원하는 것을 할 수있는 방법은 CSS에서 수행 할 수없는 클립의 속성을 지정하는 것입니다 될 것이라고 -fx-background-radius: <top-left> <top-right> <bottom-right> <bottom-left>;을 사용합니다. – fabian

답변

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;

Example

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(); 
} 
+0

이 질문은 실제로 문제를 해결하지 못하기 때문에 더 명확하게 정리해야합니다. 어쨌든 고마워! – wimdetr

+0

필자가 의도 한 바를 보여주기 위해 예제와 스크린 샷을 추가했습니다. 백그라운드 오버플로로 인해 문제가 발생 했습니까? 자연스러운 CSS에서와 같이'overflow : hidden '이 없으므로'-fx-border-radius'와'-fx-background-radius'를 조합해야합니다. –

+0

@James_D Matthew 편집자가 대답하기 전에 그 주석을 게시했습니다. Matthew, 고맙다. 그 태그를 살펴 봤다 니 믿을 수가 없어. 나는 여전히 좋은 타이틀을 생각할 수 없다. – wimdetr