TabPane中的图标和文本

时间:2017-05-17 21:08:05

标签: java javafx

我想在TabPane中添加图标和文本,我的案例中的标签将在左侧对齐,如图所示。我想实现以下目标:

  1. 标签中的文字应该旋转,并且应该水平对齐(不像图a中所示的那样)。

  2. 我想添加图标和文字。我在图b中的mspaint中编辑后显示我的最终屏幕。

  3. 图a。 enter image description here


    图b。 enter image description here

    编辑:

    我跟着How to add an icon to the Tab control in FXML?但是我没有在图b中找到我想要的图标,但它看起来像图c。我尝试添加以下样式但没有变化:

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

    图c。 enter image description here

1 个答案:

答案 0 :(得分:0)

请考虑此示例,您可以将该想法应用于您的项目,并根据需要创建尽可能多的Tab

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

}

<强>更新

如果您想调整选项卡的大小(请注意,例如,请注意值):

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

<强>结果

enter image description here