javafx 学习总结三（布局）

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选中时设置背景颜色 *!*/