TabPane'de TabBar nasıl gizlenir?

Question

TabPane'u kullanarak bir Sonraki/Önceki pencere oluşturmaya çalışıyorum. SceneBuilder'da kullanımı ve tasarımı kolay olduğu için TabPane'u kullanmaya karar verdim. Gördüğünüz gibi app fo başında, hala, bu-

sonra şimdi-

tabPane.setTabMinHeight(-10); 
tabPane.setTabMaxHeight(-10); 

için TabPane görünümünü TabBar gizlemek için bu orada kullanılan TabBar'un (başlık çubuğunun altında) küçük bir parçası olarak kalır. TabPane'umun sadece Pane modeline benzeyecek şekilde tüm özelliklerini koruyacak şekilde nasıl tamamen gizleyebilirim?

Answer 1

TabPane'u gizli sekmelerle sihirbaz türü bir arabirim kullanmak, benim düşünmediğim ve düşünmediğim ilginç bir fikir.

harici bir CSS dosyasında aşağıdaki sekmeleri gizleyebilirsiniz:

.tab-pane { 
    -fx-tab-max-height: 0 ; 
} 
.tab-pane .tab-header-area { 
    visibility: hidden ; 
} 

İşte SSCCE bu. Bu sekmede, CSS sınıfı wizard sekme panelini verdim.

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.Label; 
import javafx.scene.control.Tab; 
import javafx.scene.control.TabPane; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.HBox; 
import javafx.stage.Stage; 

public class TabPaneAsWizard extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     TabPane tabPane = new TabPane(); 
     tabPane.getStyleClass().add("wizard"); 
     for (int i = 1; i<=10; i++) { 
      tabPane.getTabs().add(createTab(i)); 
     } 
     Button previous = new Button("Previous"); 
     previous.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1)); 
     previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0)); 
     Button next = new Button("Next"); 
     next.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1)); 
     next.disableProperty().bind(
       tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
         Bindings.size(tabPane.getTabs()).subtract(1))); 

     HBox buttons = new HBox(20, previous, next); 
     buttons.setAlignment(Pos.CENTER); 

     BorderPane root = new BorderPane(tabPane, null, null, buttons, null); 
     Scene scene = new Scene(root, 600, 600); 
     scene.getStylesheets().add("tab-pane-as-wizard.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private Tab createTab(int id) { 
     Tab tab = new Tab(); 
     Label label = new Label("This is step "+id); 
     tab.setContent(label); 
     return tab ; 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

sekme bölmesi-as-wizard.css:

.wizard { 
    -fx-tab-max-height: 0 ; 
} 
.wizard .tab-header-area { 
    visibility: hidden ; 
} 

Answer 2

Bunu yapmanın kolay yolu arka plan ile senkronize etmek rengi değişiyor

.tab-pane { 
    -fx-tab-max-height: 0; 

} 

.tab-pane .tab-header-area .tab-header-background { 
    -fx-background-color: #843487;//your background colour code 

} 
.tab-pane .tab 
{ 
    -fx-background-color: #843487;//your background colour code 

}