TabPane
页面标签布局
<TabPane>
<tabs>
<Tab text="程序监控">
<fx:include source="monitor.fxml" />
</Tab>
<Tab text="程序配置">
<fx:include source="config.fxml" />
</Tab>
<Tab text="报警记录">
<fx:include source="config.fxml" />
</Tab>
</tabs>
</TabPane>
一个标签,一个布局,简单方便,不用在代码中控制显隐操作
TabPane 样式
/* 修改TabPane的Pane区域背景颜色 e6e6e6*/
.tab-pane {
-fx-background-color: #fff;
}
/* 修改Tab的背景颜色 */
.tab {
-fx-background-color: #0D529B;
-fx-font-family: Arial;
-fx-font-size: 12;
-fx-pref-height: 75px;
-fx-border-color: #0D529B;
}
/*!* 修改顶栏的背景颜色 *!*/
.tab-pane>*.tab-header-area>*.tab-header-background
{
-fx-background-color: -fx-outer-border, -fx-text-box-border, #0D529B;
-fx-border-color: #0D529B;
}
/*!* 修改Tab中文本的颜色 rgba(255,255,255,0)*!*/
.tab-label {
-fx-text-fill: #e6e6e6;
-fx-pref-width: 80px;
}
/*!* 子代选择器,Tab选中的时候选择其子元素tab-label *!*/
.tab:selected .tab-label {
-fx-text-fill: #003333ff;
}
/*!* tab选中时设置背景颜色 *!*/