How to write JavaFX CSS for tab pane

-

We are writing code for this result 

JavaFX CSS for TabPane

  
First, we have to change our side of tab pane so just select tab pane and change side of tab pane as shown in the figure.
 
JavaFx TabPane CSS


Then clear all text from tabs in tab pane.

JavaFx TabPane CSS

 Offers on Dell Vostro 3468 Core i3 7th gen 14-inch Laptop (4GB/1TB/Windows 10/Black/1.75kg)

Create CSS file on your computer/laptop and add CSS file in your tab pane.

JavaFx TabPane CSS



Now download icons you want to add in your tab pane. Already downloaded ;)

JavaFx TabPane CSS

  

Let’s add CSS syntax for tab pane. Set height and width of tabs using width and height syntax.

.tab-pane {
     -fx-tab-min-height: 9em;
    -fx-tab-max-height: 9em;
    -fx-tab-min-width: 4em;
    -fx-tab-max-width: 4em;
    -fx-padding: 0 -1 -1 0
}

JavaFx TabPane CSS

   Apple MacBook Air Core i5 13.3-inch Laptop (8GB/128GB/MacOS Sierra/Silver/1.35kg)

Now add ImageView in each tab.

JavaFx TabPane CSS


Add fx: id to all ImageView in SceneBuilder.

JavaFx TabPane CSS

   

Add images (icons for tabs) you downloaded in tabs using CSS syntax.
Note : store all images in your CSS folder.

#img1{
 -fx-image: url("img001.png");
}
#img2{
 -fx-image: url("img002.png");
}
#img3{
 -fx-image: url("img003.png");
}
#img4{
  -fx-image: url("img004.png");
}


JavaFx TabPane CSS



Clear header are from tab pane

.tab-pane:left *.tab-header-area
{
    -fx-background-insets: 0, 0 0 10;
    -fx-padding: 0.0em 0.0em 0.0em 0.0em;   
}


JavaFx TabPane CSS



Add fx:id to tabs in tab pane.

JavaFx TabPane CSS


 Change the background color of tabs and add some padding to tabs.

.tab{

    -fx-background-color: #FFFFFF;
    -fx-background-insets: 0.0;
    -fx-background-radius: 0.0;
    -fx-padding: 0 10 0 10;
}


JavaFx TabPane CSS


Add CSS code when tabs selected example when I will select message tab then message tab background color change and add the light border at the right side.

.tab:selected
{
    -fx-background-color: #F2FEFA;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-border-width: 0 0 5 0;
    -fx-border-color: #05D39B;
   
}


JavaFx TabPane CSS



Now at last we also want to change color of icons when user will select particular tab.

#customer:selected * {
-fx-image: url("img01.png");
  }
#profile:selected *{
   -fx-image: url("img02.png");     
}

#message:selected *{
    -fx-image: url("img03.png"); }

#feedback:selected  * {
  -fx-image: url("img04.png");
    }


JavaFx TabPane CSS

   Buy Now Mastering JavaFX 8 Controls

And we did CSS code ;)

 Download File Here 

- Happy Coding

Location: Pune, Maharashtra, India

Comments

Post a Comment

Popular posts from this blog

How to add JavaFX CSS in your SceneBuilder

-
Image
Step 1:  Create CSS file on your Computer with a dot(.) CSS extension. Step 2: Open your Scene Builder Step 3: Create new fxml file on your Computer. Step 4: Add components in fxml e.g. Anchorpane,button etc. Step 5: In SceneBuilder choose a component that you want to add CSS e.g I want to add CSS to a button then go to properties of the component and click on Stylesheets button. then select CSS file you already created.  Step 6: Now edit your style.css file using any editor and add JavaFX CSS Syntax. - Happy Coding ;)
Read more

Basic of JavaFX CSS Syntax

-
Image
In previous post we have learn what is JavaFX CSS and Basic Syntax so visit that post Introduction to JavaFX CSS . 1. Change Background Color     To change background color of any component simply we have to use this syntax.         -fx-background-color: #333333;          2. Add Image to background      To add background image to any component first you have to download any image you want to  add as background image then you have to put this image in CSS folder and you have to add this        CSS syantax into your CSS file.        -fx-background-image:url("logo3.png");              But you can see in above image the image is not set properly. so remove this we have to add another syntax.      -fx-background-size: cover;            3 . Change Background ...
Read more