1

I want to add icon as well as text in TabPane, the tabs in my case will be aligned on the left side as shown in the image. I want to achieve following:

  1. The text in the tab should be rotated and it should be aligned horizontally (not like the one it looks in fig a.)

  2. I want to add icon along with the text. I am showing my final screen after editing it in mspaint in fig b.

Fig a. enter image description here


Fig b. enter image description here

Edit:

I followed How to add an icon to the Tab control in FXML? but I am not getting the icon as I want in fig b but it looks like fig c. I tried adding following style but no change:

.tab-pane {
  -fx-tab-min-width:120px;
  -fx-tab-max-width:120px;
  -fx-tab-min-height:50px;
  -fx-tab-max-height:50px;
}

Fig c. enter image description here

Community
  • 1
  • 1
Vishrant
  • 15,456
  • 11
  • 71
  • 120
  • OK ..go for it. Get back to us when you have a **question.** – Andrew Thompson May 17 '17 at 21:17
  • @AndrewThompson I did posted the question I guess. __I want to achieve following:__ – Vishrant May 17 '17 at 21:20
  • 1
    *"I want a pony"* is not a question, while *"where can I get a pony?"* or *"will you give me a pony?"* or *"who stole my pony?"* **are** questions. If *your question* is *"How to code the specification?"* then it is too broad. So we come back to ***what is your question?*** – Andrew Thompson May 17 '17 at 21:27
  • @AndrewThompson adding more details to the question with my findings. – Vishrant May 17 '17 at 21:30
  • styling reference http://stackoverflow.com/questions/37648017/javafx-css-how-to-set-tabpane-tabs-width-height – Vishrant May 17 '17 at 21:35
  • image used: https://commons.wikimedia.org/wiki/File:Globe_icon_3.svg – Vishrant May 17 '17 at 21:40

1 Answers1

1

Please consider this example, you can apply the idea to your project and create as many Tab as you want:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TabPaneExample extends Application{

    @Override
    public void start(Stage ps) throws Exception {

        VBox content = new VBox(); // create a VBox to act like a graphic content for the Tab

        ///////////////////////////////////////////
        Label label = new Label("Text"); 
        label.setAlignment(Pos.BOTTOM_CENTER);

        ImageView icon = new ImageView(new Image("file:C:\\Users\\Yahya\\Desktop\\icon.png")); // for example
        icon.setFitWidth(25); icon.setFitHeight(25); // your preference
        ///////////////////////////////////////////

        // add the components to the VBox
        // You can set the Margins between the children ..etc
        content.getChildren().addAll(icon, label);
        //content.setAlignment(Pos.BOTTOM_CENTER);

        Tab tab = new Tab();// create a Tab object and set the Graphic 
        tab.setGraphic(content);

        // create TabPane, set side to left
        // all other values need manipulation (i.e. up to your preference)
        TabPane tabPane = new TabPane(tab);
        tabPane.setSide(Side.LEFT);

        // just simple root to see the result
        Pane root = new Pane();
        root.getChildren().add(tabPane);

        Scene scene = new Scene(root, 300,300);
        ps.setScene(scene);
        ps.show();
    }

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

}

UPDATE

If you want to resize the tab (note please the values are for example):

tabPane.setTabMinHeight(50);
tabPane.setTabMaxHeight(50);
tabPane.setTabMinWidth(100);
tabPane.setTabMaxWidth(100);

Result

enter image description here

Yahya
  • 13,349
  • 6
  • 30
  • 42