状态信息
首先来了解一下控件各种常见状态下的表示方法：
- :selected：被选中状态，比如RadioButton。
- :editable：可编辑状态，比如TextField。
- :hover：鼠标悬停状态，鼠标位于该控件区域时的状态。
- :pressed：按压状态，一般表示该控件被点击按下时的状态。
- :focused：有焦点的状态。
- :row-selection：行选中状态，比如TableView行被选中。
- :cell-selection：单元格选中状态。
- :vertical：垂直，比如ScrollBar。
- :horizontal：水平，比如ScrollBar。
- :top：顶部，比如TabPane的tab，可以在上下左右四个方向。
- :left：左边。
- :right：右边。
- :bottom：底部。
- :collapsed：收缩状态。
- :expanded：展开状态。
- :default：默认状态。可不写。
- :disabled：不可用状态，比如按钮的不可点击状态等。
- :empty：空状态。比如LiveView的item数据为空时。
-
:odd：奇数行，比如ListView的1、3、5行。
下面是一些我暂时未使用过的状态值，以后再慢慢补充： - :even：
- :filled：
- :armed：
- :cancel：
- :determinate：
- :fitToHeight：
- :fitToWidth：
- :indeterminate：
- :indetermindate：
- :openvertically：
- :pannable：
- :readonly：
- :show-mnemonic：
- :showing：
- :visited：
ScrollBar
scroll_bar.png
.list-view .scroll-bar:vertical{
-fx-background-color: #8646ee;
-fx-background-radius: 10;
}
.list-view .scroll-bar:vertical .track{
-fx-background-color: transparent;
}
.list-view .scroll-bar:vertical .thumb{
-fx-background-color: #4c06c1;
}
.list-view .increment-button{
-fx-background-color: transparent;
}
.list-view .increment-arrow{
-fx-background-color: white;
}
.list-view .decrement-button{
-fx-background-color: transparent;
}
.list-view .decrement-arrow{
-fx-background-color: white;
}
效果图：
scroll_bar.png
TableView
/*表格头部背景*/
.table-view .column-header-background{
-fx-background-image: url("/resource/img/competition_table_title_bg.png");
-fx-background-size: stretch;
}
/*表格内容区域*/
.table-view .placeholder{
-fx-background-color: transparent;
}
/*表格列*/
.table-column{
-fx-background-color: transparent;
-fx-alignment: center;
}
/*表格内容区域每行的样式*/
.table-row-cell{
-fx-pref-height: 35;
-fx-background-color: #befafa;
}
.table-row-cell:odd{
-fx-background-color: #beecfb;
}
.table-row-cell .text{
-fx-fill: #1c91c5;
-fx-font-family: "FZCuYuan-M03S";
-fx-font-size: 10pt;
}
效果图：
table_view.png
