如何更改选项卡窗格样式 [英] How to change the tab pane style

问题描述

我使用默认的JavaFX选项卡窗格布局

I use the default JavaFX tab pane layout

我想在旧标签下方显示新标签。我不想显示默认上下文菜单来选择要显示的选项卡。是否有任何选项可以改变这个？

I want to display new tabs below the old ones. I don't want to display the default context menu to select which tab to display. Are there any options to change this?

推荐答案

试试这个....根据你的需要改变它。这是默认的css for选项卡窗格及其布局......我使用它并成功地工作

try this....change it according your need.this is default css for tab pane and their layout... i used it and work sucessfully

.tab-pane 
{
-fx-skin: "com.sun.javafx.scene.control.skin.TabPaneSkin";
/* -fx-tab-min-width: 4.583em;  55 */
/* -fx-tab-max-width: 4.583em; 55 */
-fx-tab-min-height: 2em; /* 24 */
-fx-tab-max-height: 2em; /* 24 */
}
.tab .tab-label 
{
-fx-skin: "com.sun.javafx.scene.control.skin.LabelSkin";
-fx-background-color: transparent;    
-fx-alignment: CENTER;
-fx-text-fill: -fx-text-base-color;
}
/*
.tab *.tab-label Text {
-fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}*/
.tab-content-area 
{
-fx-background-color: -fx-control-inner-background;
-fx-padding: 0.0em; /* 0 */
/* -fx-opacity: -fx-disabled-opacity;*/
}
.tab 
{
/* This is how it is done in Button, but the -1 inset caused a white line  */
/* to appear beneath the tab, which looks bad, so it's taken out below.    */
/*    -fx-background-color: -fx-shadow-highlight-color, -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;*/
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.083333em 0.5em 0.083333em 0.5em; /* 1 6 1 6 */
/*    -fx-text-fill: -fx-text-base-color;*/
}
.tab:top 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
}
.tab:right 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab:bottom 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border-bottomup, -fx-body-color-bottomup;
}
.tab:left 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
}
.tab:hover 
{
-fx-color: -fx-hover-base;
}
.tab:selected 
{
/*    -fx-background-color: white;*/
/*    -fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0, 1 1 0 1, 2 2 0 2;*/
-fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-fx-background-insets: 0, 1 1 0 1;
-fx-background-radius: 5 5 0 0, 4 4 0 0;
}
.tab:disabled 
{
-fx-opacity: -fx-disabled-opacity;
}
.tab:disabled:hover 
{
-fx-color: -fx-base;
-fx-opacity: -fx-disabled-opacity;
}
.tab-pane *.tab-header-background 
{
-fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%);
-fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
}
/*.tab-pane *.tab-header-area {*/
/* I would like to use -fx-tab-border-color here, but for some reason it */
/* just isn't the correct color, even though it works in :top above */
/*    -fx-background-color: -fx-tab-border-color, lightgray;*/
/*}*/
.tab-pane:top *.tab-header-area 
{
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
}
.tab-pane:bottom *.tab-header-area 
{
-fx-background-insets: 0, 1 0 0 0;
-fx-padding: 0 0.166667em 0.416667em 0.833em; /* 0 2 5 0 */
}
.tab-pane:left *.tab-header-area 
{
-fx-background-insets: 0, 0 1 0 0;
-fx-padding: 0.833em 0.0em 0.166667em 0.416667em; /* 10 0 2 5 */
}
.tab-pane:right *.tab-header-area 
{
-fx-background-insets: 0, 0 0 0 1;
-fx-padding: 0.833em 0.416667em 0.166667em 0.0em; /* 10 5 2 0 */
}
.tab-pane .headers-region 
{
-fx-effect: dropshadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0, 0);
}
/* TODO: scaling the shape seems to make it way too large */
.tab-close-button 
{
-fx-background-color: -fx-mark-color;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
-fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}
.tab-close-button:hover 
{
-fx-background-color: derive(-fx-mark-color, -30%);
}
/* CONTROL BUTTONS */
.control-buttons-tab 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-padding: 0.083333em 0.25em 0.083333em 0.25em; /* 1 3 1 3 */
}
.tab-down-button 
{
-fx-background-color: transparent;
-fx-padding: 0.0em 0.416667em 0.0em 0.416667em; /* 0 5 0 5 */
}
.tab-down-button:hover 
{
-fx-background-color: -fx-body-color;
-fx-color: -fx-hover-base;
}
.tab-down-button .arrow 
{
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.238083em 0.416667em 0.238083em 0.416667em; /* 2.857 5 2.857 5 */
-fx-shape: "M 0 0 H 7 L 3.5 4 z";
}
/* FLOATING TABS CUSTOMISATION */
.tab-pane.floating *.tab-header-background {
-fx-background-color: null;
}
.tab-pane.floating *.tab-header-area 
{
-fx-background-color: null;
}
.tab-pane.floating *.tab-content-area 
{
-fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 5, 4;
}
.tab-pane.floating *.tab 
{
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
}
.tab-pane.floating *.tab:selected 
{
-fx-background-color: -fx-tab-border-color, -fx-control-inner-background;
-fx-background-insets: 0 0 -1 0, 1 1 -1 1;
-fx-background-radius: 5 5 0 0, 4 4 0 0;
}
/*.tab-pane:floating *.control-buttons-tab 
{
-fx-padding: 0.083333em 0.25em 0.083333em 0.25em;
-fx-background-color: -fx-tab-border-color, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
-fx-background-insets: 0, 1 1 0 1, 2 2 0 2;
}*/

这篇关于如何更改选项卡窗格样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！