2016-06-09 23 views

risposta

13

Aver iconed Button s sulle Tab s:

Il metodo di TabsetGraphic può essere utilizzato per aggiungere qualsiasi Node da visualizzare sul Tab. È possibile aggiungere un Button poiché è un Node.

Dopo questo è presente un pulsante completamente funzionale, ma non viene visualizzata alcuna icona.ha anche il metodo che funziona allo stesso modo, pertanto un ImageView può essere aggiunto per visualizzare uno Image su Button.

avere il controllo Button s nell'angolo superiore destro della scheda-zona:

Questi pulsanti possono essere posizionati sulla TabPane, anziché all'interno del TabPane. Per questo è possibile utilizzare un AnchorPane per ancorare i Button nell'angolo in alto a destra.

Esempio:

public class ButtonedTabPane extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     BorderPane root = new BorderPane(); 
     TabPane tabPane = new TabPane(); 
     tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE); 

     // HBox of control buttons 
     HBox hbox = new HBox(); 
     hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("max.png")); 

     // Anchor the controls 
     AnchorPane anchor = new AnchorPane(); 
     anchor.getChildren().addAll(tabPane, hbox); 
     AnchorPane.setTopAnchor(hbox, 3.0); 
     AnchorPane.setRightAnchor(hbox, 5.0); 
     AnchorPane.setTopAnchor(tabPane, 1.0); 
     AnchorPane.setRightAnchor(tabPane, 1.0); 
     AnchorPane.setLeftAnchor(tabPane, 1.0); 
     AnchorPane.setBottomAnchor(tabPane, 1.0); 

     // Create some tabs 
     Tab tab = new Tab("Files"); 
     tab.setGraphic(createTabButton("files.png")); 
     ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the list of files!")); 
     tabPane.getTabs().add(tab); 

     tab = new Tab("Network"); 
     tab.setGraphic(createTabButton("network.png")); 
     ((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the network!")); 
     tabPane.getTabs().add(tab); 

     root.setCenter(anchor); 
     Scene scene = new Scene(root, 400, 400); 
     scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private Button createTabButton(String iconName) { 
     Button button = new Button(); 
     ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(), 
       16, 16, false, true)); 
     button.setGraphic(imageView); 
     button.getStyleClass().add("tab-button"); 
     return button; 
    } 

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

L'unica cosa che resta da rimuovere lo sfondo di default e confina dalle Button s. Questo può essere fatto inserendo i seguenti selettori CSS nel tuo foglio di stile CSS.

style.css

.tab-button { 
    -fx-border-width: 0; 
    -fx-background-radius: 0; 
    -fx-background-color: transparent; 
    -fx-content-display: graphic-only; 
} 

.tab-button:hover { 
    -fx-background-color: white; 
} 

Il risultato:

 
         https://i.stack.imgur.com/olclI.png
+0

Tnx che ha fatto il lavoro – JimmyD