JavaFX分页按钮的大小和样式

Question

我正在尝试使JavaFX分页控件看起来像这样:

这是我的造型:

 .pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-dark-grey;
}

.pagination .pagination-control .toggle-button:selected {   
    -fx-background-color: -fx-colour-purple;
}

.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover  {   
    -fx-background-color: -fx-bg-colour-grey;
}

.pagination .pagination-control .left-arrow, .right-arrow{
    -fx-background-color: -fx-font-colour-black;
}

.pagination .label {
  -fx-text-fill: -fx-font-colour-black;
}

这是结果:

背景颜色似乎有问题.当选择按钮时,它会在底部稍微溢出,而对于箭头按钮,背景不会应用于整个按钮(如果你仔细观察最右边的箭头按钮,背景颜色会结束,留下一点白色条带).另外我如何增加按钮的大小(它们实际上比图像小)？我试过像这样设置prefWidth和prefHeight没有结果

.pagination .pagination-control .button, .pagination .toggle-button {
    -fx-background-color: -fx-paginator-button;
    -fx-border-color: -fx-colour-grey;
    -fx-pref-width: 15;
    -fx-pref-height: 15;
}

Answer 1

这些选择器应该完成基本工作:

/* Remove spacing */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
}

/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
    -fx-background-insets: 0, 1;
    -fx-background-color: lightgray, #FAFAFA;
    -fx-min-width: 30;
    -fx-min-height: 30;
}

/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
    -fx-background-insets: 0;
    -fx-background-color: lightgray;
}

/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
    -fx-background-insets: 0;
    -fx-background-color: #58379A;
    -fx-text-fill: white;
}

得到如下结果:

所有按钮都有固定的尺寸,间距被移除,选定/悬停的切换按钮具有无边框颜色.

此外,如果您还要控制按钮内的文本大小,可以将以下选择器更新为:

/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
    -fx-spacing: 0;
    -fx-font-size: 12;
}

此外,您还可以控制页面信息的文本大小,如:

.pagination > .pagination-control {
    -fx-font-size: 8;
}

或者你甚至可以隐藏它:

.pagination {
    -fx-page-information-visible: false;
}

得到的结果是: